대학원생 신짜오는 공부중

현재 작업 중인 외주 개발 프로젝트에서user가 영어 문장을 컴퓨터 마이크를 통해 녹음하면해당 녹음 파일을 발음평가 API로 전송해user의 발음 점수를 받아오는 기능을구현해야했다. 따라서 유저가 녹음한 파일을 API를 통해백엔드 서버에 보낸 뒤,백엔드에서 발음평가 API로 다시 전송해서점수를 받아오고 이를 다시 프론트에서 받아와서화면에 뿌려줘야했다 정말 이 기능 구현하면서삽질을 너무너무너무너무너무 많이해서시간낭비를 제대로 했지만 ^^; 이 부분에서 삽질을 한 건 아니라서이 것도 까먹기 전에 얼른 기록으로 남겨두려한다1. recording 상태 확인 할 useState정의우선 record 기능을 컨트롤할버튼을 한 개 구현해줬다 recording이 아닐 때는Button의 텍스트가"Start Recordin..

이번애 배정받은 업무는개발하고 있는 웹 사이트의 결제 기능 개발이었다 결제를 위해서는 PortOne API연동을 알아봐달라고 요청받아서이번에 기능을 구현해보면서티스토리에도 남겨보려고 한다PortOne이란?포트원은 여러 가지 결제대행사들을연동해서 결제를 도와주는서비스이다https://portone.io/korea/ko 포트원 | 온라인 비즈니스 성장을 돕는 기업포트원이 제공하는 단 한 줄의 코드로 세상의 모든 결제를 손쉽게 연동해보세요. PG사 통합결제 연동, 해외결제, 파트너 정산 관리, 결제 애널리틱스, 수수료 혜택까지, 포트원의 맞춤 컨설팅을portone.io 설명에 따르면신용카드, 간편결제, 해외결제까지 모두손쉽게 연동이 가능하다고 한다PortOne 회원가입회원가입이 되어있지 않다면당연히 회원가입부..

옛날부터 정말 해봐야겠다고마음먹었던 것 중 하나인개인 홈페이지 개발 및 배포 프로젝트 .. 초반에는 UI/UX부터Html, css까지 싹다 내 마음대로만들려고 했다가 시간 너무 오래 걸림 issue로방향을 조금 바꿔보기로 결정했었다 그래서 start bootstrap을 이용해무료 html, css 템플릿을 참고하였고각종 색상이나 디자인, 구성은내가 필요한대로 변경하여 완성한나의 웹페이지 프로젝트... https://my-app-jiyous-projects.vercel.app/ Welcome to GU's HomeSkills & Studies Programming Languages & Tools htmlcssjavascriptreactnode.jsspringc++javapythonkotliniOS/swif..

개인 웹페이지 만들기 프로젝트를개발 완성하고build를 해보려구npm run build를 하자error가 떴다 에러 내용은Synchronous scripts should not be used에러였고구글링해보니 이는nextjs는 서버사이드에서 렌더링하는데화면이 뜨기 전에 script를불러오려고해서 발생하는 문제였다 해결방법은 2가지가 있는데 1. script뒤에 defer 붙여주기 이렇게 불러오는 script 뒤에 defer를 붙여주면 된다 2. next.js의 script 사용하기next.js에서 제공하는 next/script 컴포넌트를사용하면 된다위와 같은 방식으로 사용하면 된다 strategy 속성의 값으로는beforeInteractive: 페이지가 인터랙티브해지기 전에 스크립트를 로드afterInt..

typescript를 거의 처음 다뤄보는 도중에지금 만들고있는 Box()라는 component에서사용할 image src url을 파라미터형으로넘겨주고 싶어졌다 그래서 옛날에 react에서 다뤄보던 방식대로funtion Box(url: string, oneLine: string, name: string, introduction:string) { return ();};const url1 = './img/1.jpg';const box1 = Box(url, oneLine, name, introduction);이런식으로 불러와서 호출해줬더니Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/fun..

내가 선택한 개인 웹사이트 디자인에는 scrollSpy 기능이 적용되어있는 디자인이었다 https://getbootstrap.kr/docs/5.0/components/scrollspy/ 스크롤스파이스크롤 위치에 따라 Bootstrap 내비게이션 또는 목록 그룹 컴포넌트를 자동으로 갱신하여 뷰포트 내에서 현재 어떤 링크가 활성화 된지를 나타냅니다.getbootstrap.kr 간단하게 설명하자면 웹사이트를 들어갔을 때 내가 스크롤을 내릴때마다 옆에 있는 sideBar의 메뉴들이 내 스크롤 위치에 따라 변경되는 그런 웹 사이트들을 많이 봤을 것이다 그런 기능을 하는 것이 scrollSpy다 물론 직접 코드로 구현할 수도 있지만 bootstrap에서 아주 간단하게 제공하고 있기 때문에 그 친구를 써주기로 했다n..

개인 홈페이지 프로젝트에서홈페이지에 띄울 내 개인정보들을담을 data들을 enum 형태로만들어야겠다고 생각했다 나도 typescript는 처음인지라이것저것 구글링을 해보았는데enum이 없는 javascript와는 다르게typescipt는 typescript 자체적으로enum을 지원하고 있었으나이 enum을 사용하지 않는 편이좋다고 하는 글을 하나 발견했다 https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.들어가며 안녕하세요. LINE Growth Technology UIT 팀의 Keishima(@pittanko_pta)입니다. ..

처음 개인 홈페이지 개발 프로젝트를구상할 때는피그마에서 템플릿을 보고html이랑 css부터 하나하나손수 작성해서 개발해보자는야심찬 꿈을 꾸었으나 .. 내가 프론트엔드 전문 개발자가 아니다보니시간이 어마어마하게 소요되는 문제가 있었다..  피그마에서 마음에 드는 템플릿가져와서 html이랑 css까지하나하나 손수 제작하다가일시정지했던 이전 프로젝트.. 그래도 저정도까진 작업했다 react 처음 + node.js도 처음이었는데야심차게 DB까지 연동시켜서이것저것 막 작업하다가시간이 너어어어무 오래걸려서좀 더 효율적으로 작업해보자는 마음에방향을 바꿔보기로 했다 ㅎㅎ.. 5-6시간동안 개발했는데폭풍 서칭하느라 크롬에서 검색 탭만거의 10개가 넘었었는데그래도 저정도까지 작업한 것도꽤나 잘했다고 생각한다 ㅎㅎ..(자기..

이전부터 늘 해보고 싶었던개인 홈페이지 만들기 프로젝트 .. 너무너무너무 귀찮아서지금까지 미루고 미루다가 이젠 정말 남는 시간마다개발을 해보기로 했다 지금까지 내가 해본 웹 개발은백엔드 spring + 프론트 vanillaJS로정말 간단한 회사의 업무툴을두 번정도 만들어 보았고 회사 다닐 때spring으로 백엔드 작업 해본게전부이긴하다 그래도 웹개발하면 가장 많이쓰는node.js나 react를 한 번 접해보고싶었고이전부터 늘 개인 홈페이지를 만들어보고 싶었어서시작하게 된 프로젝트-!NextJS란?next.js는 웹 어플리케이션 무료로 배포로 유명한vercel이라는 회사에서 개발했다 Next.js는 react 기반의웹 개발 프레임워크이다 흔히 주로 비교되는 node.js와의가장 큰 차이점은 바로Server..