Homile

📗 오늘 한 일 NextJS 강의 API Route? NextJS의 장점 중 하나인 API Route 기능을 통해 API endpoint를 클라이언트 코드와 함께 작성할 수 있다. 엔드포인트를 사용해 REST API와 같은 API를 NextJS 앱에 포함함으로써 endpoint를 통해 여러 가지 HTTP 요청을 받을 수 있게 해주는 역할을 한다. pages 폴더 내에 api 폴더를 생성한다. api 폴더 내에 있는 파일은 React 컴포넌트로 내보내지 않는다. 웹 페이지에 방문한 사람들에게는 보이지 않는다. getStaticProps, getServerSideProps와 같다. SSR Route ✍ Diary NextJS에서 사용하는 API Route에 대해서 간단하게 학습했다. 앞으로 Next를 사용해..

✍ 회고 오늘은 배포 자동화에 대해서 세션을 진행해주셨다. AWS S3를 항상 build 파일을 생성하여 수동적으로 올려줬었고, 이전에 진행했던 프로젝트에서도 적용해보려 했지만 실패했다. (FE / BE가 같은 레포를 써서 그럴수도 있다고 생각은 든다.) Github -> Github Actions -> AWS S3를 사용해서 배포를 진행하는 과정을 세션에서 직접해주셨고, 라이브 세션이 끝나고 개인적으로 진행을 해봤는데 잘 됐다. vercel, netlify 등 배포 자동화를 진행해주는 과정이 어떻게 되는지 정확히 알 수 있는 날이었다. 팀 과제 주간 회고 화 ~ 금요일까지 진행한 팀 과제 회고 (제출링크) 처음엔 어떻게 하는지 많은 고민을 했지만 팀장님이 잘 이끌어 주셔서 꽤 만족할 만한 결과가 나왔다..

📗 오늘 한 일 원티드 프리온보딩 프론트엔드 과정 1주차 과제 제출 전 최종 버그 수정 및 배포 점검 (제출 링크) 온 프레미스와 클라우드, AWS, AWS S3 온 프레미스는 내가 관리할 수 있는 컴퓨터에 저장하기 때문에 클라우드를 사용한 방식보다 보안성이 좋다. S3 - 정적 웹 사이트 CRA CI/CD Github Actions Deploy error 401 unauthorized - 인증 오류 403 Forbidden - 접근 거부 404 Not Found - 경로, 파일 없음 Github → Github Actions → AWS S3 배포자동화 실시 React Test Code 맛보기 VSCode git 되돌리기 오류 (한글경로 오류) VSCode에서 파일의 변화가 일어나면 GUI를 사용한 gi..

📗 오늘 한 일 원티드 프리온보딩 프론트엔드 과정 (8기 11팀) 로그인/회원가입 페이지 Best Practice 기능 구현 VSCode Live Share, Discord 화면공유를 통해 진행 이력서 수정 다양한 이력서를 보며 간소화 및 자기소개 수정 이력서에 제출한 프로젝트 README 수정 팀원 구성 및 깃 컨벤션 수정 시연영상 gif 첨부 ✍ Diary 어제 선정한 Best Practice를 기반으로 다시 팀 레포지토리에 작업하는 일을 시작했다. TypeScript, React를 사용해 진행했으며, 페어프로그래밍 방식으로 라이브코딩을 하며 진행했다. 원티드 과정을 같이 하면서 이력서를 제출했었을 때, 이력서가 통과가 잘 되지 않아서 다양한 이력서를 보며 나의 문제점이 무엇인가 찾아보며 수정을 진행..

📗 오늘 한 일 원티드 프리온보딩 프론트엔드 과정 (8기 11팀) Best Practice 선정을 위한 각자 코드 발표 깃헙 레포지토리 생성 및 프리티어, 린트설정 각자가 생각하는 팀원 Best Practice 선정 내가 제출한 사전과제 오류 발견 회원가입 후 로그인 탭으로 넘어가지지 않는 버그 발생 Netlify로 배포한 페이지에서 리다이렉팅 시 에러 발생 public폴더 내 _redirects 파일 생성 파일 내용 : /* /index.html 200 리다이렉트시 index.html 참고한다는 뜻 참고자료: https://soso-cod3v.tistory.com/142 API 호출 실패에 따른 Error 메시지 추가할 것. 이력서 수정 ✍ Diary 각자 선정해온 자신의 좋았던, 어려웠던 부분에 대해..

📗 오늘 한 일 원티드 프리온보딩 프론트엔드 과정 (14:00 ~ 17:30) Git & Github, Git hook ESLint, Prettier, husky 1주차 멘토 과제팀 구성 (8기 / 11팀 - 8명) 사전 과제 Best Practice 코드 선정 후 1개의 레포지토리로 제출 Github 그룹 생성 → Repository 생성 ESLint, Prettier, husky 설정 Git 컨벤션 규칙 선정 다음 회의까지 자신이 생각하는 좋았던 코드 및 어려웠던 부분 설명 준비 내가 제출한 사전과제 리팩토링 진행 Record-Color (팀 프로젝트) Github 그룹 생성 → Repository 생성 ✍ Diary 팀 프로젝트가 아닌 개인으로 만든 프로젝트에서 Best Practice를 선정하여 ..

📗 오늘 한 일 이력서 수정 나만의 포트폴리오 사이트 프로젝트 추가 나만의 포트폴리오 사이트 반응형 디자인 수정 React-Query 복습 React-Query를 사용하는 이유 React-Query의 장점 React-Query 사용방법 원티드 프리온보딩 프론트엔드 과정 오리엔테이션 진행 과정이 어떻게 진행되는가? 화, 금 오후 2시~5시 세션진행 후 과제 개별진행 기업과제는 몇개인가? 주당 1개씩 나올 예정 (약 5개) 팀원은 어떻게 결정되는가? 원티드 멘토에 따라 랜덤으로 결정된다. 팀 선정 후 어떻게 진행되는가? 선정후 각자 과제를 진행하며 베스트 코드를 선정하는 방식 Next.js 팀 프로젝트 프로젝트 기획 검토 사용 스택 TypeScript, Next, React-Query, Redux-toolk..

✍ 회고 선별과제를 어떻게 진행하는지 설명해주셨는데 개인이 작업해서 Best Practice를 뽑아서 하나의 프로젝트로 제출을 하는 방식이라고 하셨다. 살짝 모호한 부분이 있는 것 같긴 했다. 개발자의 기본 덕목인 GIt & Github사용시 지켜야할 컨벤션 정하는 방법과 merge 방법에 대해 설명해주셨는데 오기전에 팀 프로젝트 기획을 진행하면서 많은 자료를 찾아봤었고, 부트캠프 내 프로젝트에서 정한 컨벤션과 알려주신 것이 다르지 않았다. ESLint와 Prettier, Git hookt, Husky에 대해서 강의를 해주셨는데 ESLint와 Prettier는 프로젝트에서 많이 사용했기 때문에 ESLint는 코드를 분석하여 일관적인 코드 규칙을 적용할 수 있고, Prettier는 코드의 포맷팅 스타일을 ..

오늘은 원티드 프리온보딩 프론트엔드 인턴십 8기 OT가 있는 날이었다. 설레는 마음으로 참석을 했다. 시간이 변동되어 12시에서는 커리어 챌린지 OT를 듣게 되었는데 많은 지원을 해주는 것 같다. (수료시) 끝나고 30분정도 쉬고 난뒤 오후 2시에 프론트엔드 과정 OT를 시작했다. OT에서는 과정이 어떻게 진행되는지 여부를 알려주는데 진행중인 프로젝트는 잠시 내려두고 과정에 힘을 쏟을 수 있도록 하자라고 말씀하셨지만, 이전기수와는 달리 1주일에 과제 1개가 진행되기 때문에 같이 진행해도 될 것 같다. 2주차에는 연말이기 때문에 커리어 챌린지 관련 이력서 특강을 들으면 된다고 한다. 이건 나름 잘 들어야겠다. 과제는 총 4~5개의 프로젝트를 진행할 예정이고 기업과제는 1개(?) 나머지는 멘토과제나 이전 기..

이번 TIL은 주간으로 작성하려 한다. 백업을 위해 노트에 적은 것을 노션으로 옮기고 마지막에 블로그에 작성하는 형식으로 진행하는데 한주간 바쁜 일이 있었기 때문에 이번에만 몰아서 작성하려 한다....! (반복적인 내용이 가끔 있기도 한다...) 다음부턴 다시 꾸준히 작성해야겠다. 목차 1. 22.12.14_TIL 2. 22.12.15_TIL 3. 22.12.16~17_TIL 4. 22.12.18_TIL 📗 오늘 한 일 (22.12.14) Next.js 학습 (Udemy section7~8) Next.js 최적화 api route 설정 원티드 이력서 제출(1개) 면접준비 ✍ Diary 이력서를 열람하고 면접을 제안해주었던 곳에서 연락이 오지않아서 마냥 기다릴 수 없기때문에 이력서를 다시 제출하기 시작했다..