📗 오늘 한 일

원티드 프리온보딩 프론트엔드 과정 (8기 11팀)

  • Best Practice 선정을 위한 각자 코드 발표
  • 깃헙 레포지토리 생성 및 프리티어, 린트설정
  • 각자가 생각하는 팀원 Best Practice 선정
  • 내가 제출한 사전과제 오류 발견
    • 회원가입 후 로그인 탭으로 넘어가지지 않는 버그 발생
    • Netlify로 배포한 페이지에서 리다이렉팅 시 에러 발생
      • public폴더 내 _redirects 파일 생성
      • 파일 내용 : /* /index.html 200
      • 리다이렉트시 index.html 참고한다는 뜻
      • 참고자료: https://soso-cod3v.tistory.com/142
    • API 호출 실패에 따른 Error 메시지 추가할 것.

이력서 수정

✍ Diary

각자 선정해온 자신의 좋았던, 어려웠던 부분에 대해 설명하는 시간을 가졌다.

useCallbak, useMemo를 사용하여 성능을 최적화하신 분들도 계셨다. 이런 분들의 코드를 보면서 나는 아직 부족하구나 하고, 생각도 들었으며 인프런에서 답사를 다녀왔을 때 동기분이 질문하셨던 내용도 스쳐 지나갔다. 

질문은 useMemo와 useCallback을 보든 함수나 값에 사용하면 오히려 성능 저하가 발생하는 데 사용하는 기준이 궁금하다였다. 
답변으로 코드 가독성을 해치기 때문에 일반적인 상황에서는 잘 사용하지 않는다고 하셨던 것이 기억이났다. 이른 최적화는 좋지 못하다고 생각하고 성능 최적화는 문제가 명확하게 보이면 그때 적용해도 늦지 않는다는 것이지만 이번 프로젝트는 볼륨이 작았기 때문에 사용해도 무방했을 것 같다. (어느때가 가장 사용하면 좋을지 생각해봐야겠다.)

'Daily > Today I Learned' 카테고리의 다른 글

22.12.23_TIL  (0) 2022.12.23
22.12.22_TIL  (0) 2022.12.23
22.12.20_TIL  (0) 2022.12.23
22.12.19_TIL  (0) 2022.12.23
22.12.14 ~ 22.12.18_TIL (주간)  (0) 2022.12.20

📗 오늘 한 일

원티드 프리온보딩 프론트엔드 과정 (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를 선정하여 하나의 프로젝트로 맞춘다는 것이 조금 어렵게 느껴졌다.
하지만, 그만큼 다양한 코드를 읽어보며 다른 사람이 작성한 코드를 이해하는 능력을 기를 수 있다는 것이 좋았다.
실제 회사에 입사하여 코드에 적응하기 위해선 다른 사람의 코드를 읽어서 이해하고 거기에 맞춰 코드를 작성할 수 있는 것이 중요하기 때문이다.

'Daily > Today I Learned' 카테고리의 다른 글

22.12.22_TIL  (0) 2022.12.23
22.12.21_TIL  (0) 2022.12.23
22.12.19_TIL  (0) 2022.12.23
22.12.14 ~ 22.12.18_TIL (주간)  (0) 2022.12.20
22.12.13_TIL  (0) 2022.12.20

📗 오늘 한 일

이력서 수정

  • 나만의 포트폴리오 사이트 프로젝트 추가

나만의 포트폴리오 사이트

  • 반응형 디자인 수정

React-Query 복습

  • React-Query를 사용하는 이유
  • React-Query의 장점
  • React-Query 사용방법

원티드 프리온보딩 프론트엔드 과정

  • 오리엔테이션 진행
    • 과정이 어떻게 진행되는가?
      • 화, 금 오후 2시~5시 세션진행 후 과제 개별진행
    • 기업과제는 몇개인가?
      • 주당 1개씩 나올 예정 (약 5개)
    • 팀원은 어떻게 결정되는가?
      • 원티드 멘토에 따라 랜덤으로 결정된다.
    • 팀 선정 후 어떻게 진행되는가?
      • 선정후 각자 과제를 진행하며 베스트 코드를 선정하는 방식

Next.js 팀 프로젝트

  • 프로젝트 기획 검토
    • 사용 스택
      • TypeScript, Next, React-Query, Redux-toolkit, Styled-Components, Firebase
      • Notion, Discord, Github, Figma, DB다이어그램
    • 프로젝트 명 선정
    • 일정 관리
    • Git & Github
      • Github issue 전략
      • Git Branch, Merge, Commit 전략
    • 디자인 패턴
      • Container-Presenter 패턴 사용
    • 프로젝트 기능 나열

✍ Diary

오늘은 너무 바쁜 날이었다... 오전부터 이력서 피드백 진행하고, 나만의 포트폴리오 사이트 반응형 디자인을 가변형으로 해결하고,
React-Query 복습 후 원티드 프리온보딩 OT 참석을 진행했다.
그리고 Next.js를 활용한 팀 프로젝트를 진행하기 위해 미리 기획단계에서 조사해오기로한 내용을 검토하고 정하는 시간을 가졌다.
오랜만에 진행하는 팀 프로젝트인 만큼 재밌고, 완벽에 가깝게 진행해야겠다.

'Daily > Today I Learned' 카테고리의 다른 글

22.12.21_TIL  (0) 2022.12.23
22.12.20_TIL  (0) 2022.12.23
22.12.14 ~ 22.12.18_TIL (주간)  (0) 2022.12.20
22.12.13_TIL  (0) 2022.12.20
22.12.12_TIL  (0) 2022.12.20

✍  회고

선별과제를 어떻게 진행하는지 설명해주셨는데 개인이 작업해서 Best Practice를 뽑아서 하나의 프로젝트로 제출을 하는 방식이라고 하셨다. 살짝 모호한 부분이 있는 것 같긴 했다.

 

개발자의 기본 덕목인 GIt & Github사용시 지켜야할 컨벤션 정하는 방법과 merge 방법에 대해 설명해주셨는데 오기전에 팀 프로젝트 기획을 진행하면서 많은 자료를 찾아봤었고, 부트캠프 내 프로젝트에서 정한 컨벤션과 알려주신 것이 다르지 않았다.

 

ESLint와 Prettier, Git hookt, Husky에 대해서 강의를 해주셨는데 ESLint와 Prettier는 프로젝트에서 많이 사용했기 때문에 ESLint는 코드를 분석하여 일관적인 코드 규칙을 적용할 수 있고, Prettier는 코드의 포맷팅 스타일을 공유할 수 있도록한다.
ESLint는  Lintting, Prettier는 Code Formatting이라고 한다.

 

Husky

  • 개인이 매번확인해서 ESLint와 Prettier를 확인해서 실행하는 것은 실수가 발생할 여지가 있는데 이것을 해결하기 위해 자동화를 통해서 신경쓰지 않아도 자동으로 적용이 되게하고 특정 상황에서 강제로 적용이 되게 해주는 것이다.
  • commit된 코드는 무조건 formatting 되어야 하며, push된 코드는 무조건 ESLint가 pass된 상태에서 push 할 수 있도록 자동화 시키는 것이다.
  • githook을 도입해서 사용할 수 있다.

githook

  • git에서 특정 이벤트가 발생하기 전, 후로 특정 hook을 실행할 수 있게 하는 것이다.
  • git hook 설정을 도와주는 npm package - Husky

 

팀 과제 회의 안건

  • 팀장 정하기
  • 팀 레포 만들기
  • ESLint, Prettier, Husky 설정
  • 커밋컨벤션
    • 커밋컨벤션은 복잡하지 않게 기본 설정으로
    • 커밋컨벤션 규칙
      • feat : 새로운 기능 추가
      • fix : 버그 수정
      • docs : 문서 수정
      • style : 코드 formatting, 세미콜론(;) 누락, 코드 변경이 없는 경우
      • refactor : 코드 리팩터링
      • test : 테스트 코드, 리팩터링 테스트 코드 추가(프로덕션 코드 변경 X)
      • chore : 빌드 업무 수정, 패키지 매니저 수정(프로덕션 코드 변경 X)
      • design : CSS 등 사용자 UI 디자인 변경
      • comment : 필요한 주석 추가 및 변경
      • rename : 파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우
      • remove : 파일을 삭제하는 작업만 수행한 경우
      • !BREAKING CHANGE : 커다란 API 변경의 경우
      • !HOTFIX : 급하게 치명적인 버그를 고쳐야 하는 경우본문과 꼬리말은 생략 가능타입의 첫 글자는 소문자로 작성
      • 콜론 앞뒤로 한칸씩 띄워서 작성
      • 제목은 고유어를 제외하고 한글로 작성
      • 타입 : 제목 본문 꼬리말

다음 회의 준비사항

  • 자기 코드 설명. 좋았던 부분과 어려웠던 부분.

오늘은 원티드 프리온보딩 프론트엔드 인턴십 8기 OT가 있는 날이었다. 설레는 마음으로 참석을 했다.

시간이 변동되어 12시에서는 커리어 챌린지 OT를 듣게 되었는데 많은 지원을 해주는 것 같다. (수료시) 끝나고 30분정도 쉬고 난뒤 오후 2시에 프론트엔드 과정 OT를 시작했다. 

 

OT에서는 과정이 어떻게 진행되는지 여부를 알려주는데 진행중인 프로젝트는 잠시 내려두고 과정에 힘을 쏟을 수 있도록 하자라고 말씀하셨지만, 이전기수와는 달리 1주일에 과제 1개가 진행되기 때문에 같이 진행해도 될 것 같다. 


2주차에는 연말이기 때문에 커리어 챌린지 관련 이력서 특강을 들으면 된다고 한다. 이건 나름 잘 들어야겠다.

 

과제는 총 4~5개의 프로젝트를 진행할 예정이고 기업과제는 1개(?) 나머지는 멘토과제나 이전 기수의 과제를 수행한다고 한다.
이수 후 한달간은 취업할동 기간으로 보고, 참여 완료 후 20개 이상의 이력서를 제출해보며 본격 취업에 나선다고 한다.

이번 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

이력서를 열람하고 면접을 제안해주었던 곳에서 연락이 오지않아서 마냥 기다릴 수 없기때문에 이력서를 다시 제출하기 시작했다. 하루에 자기전, 일어난 후 이메일을 열어보는 습관을 들여야겠다고 생각했다. 이력서를 보고 제안을 주는 곳도 있을 것이기 때문이다.. (아쉽다…..)

Next를 학습할 때, 코드를 클린하게 작성한다고 느껴졌는데 더욱 최적화를 하는 강의를 보고 코드는 이런 형식과 구조를 가지고 짜야한다는 것을 다시금 느끼게 되었다. api 폴더는 라우트를 설정할 때 사용하는 것이라고 강의를 처음 들었을 때 알게 되었는데 그것을 실제로 사용하고 보니 확실히 Next는 앞으로 더 많은 개발자들이 사용하게 될 것 같다.

 

📗 오늘 한 일 (22.12.15)

타입스크립트 강의

  • 구글 맵 API를 활용한 장소 선택 및 공유앱 구현
// 아래와 같은 형태로 타입을 하나하나 지정해준다.
axios.get<{results: {geometry:{location:{lat:number, lng:number}}}[]}>

// 위의 코드를 조금더 clean 하게 작성한 코드
type GoogleResponse = {results: {geometry:{location:{lat:number, lng:number}}}[]
	status: 'OK' | 'ZERO_RESULTS';
};

axios.get<GoogleResponse>

// 타입이 너무 많을 경우 any를 사용하기도 한다.
declare var google: any;

나만의 포트폴리오 사이트

  • 프로젝트 데이터 추가

원티드 이력서 제출 (4개)

면접준비

✍ Diary

갑자기 타입스크립트로 공공 데이터 포털, 맵 API를 받아올 경우 타입을 어떻게 설정해야할지 궁금해서 타입스크립트 강의를 다시 열어봤다. 내가 생각했던 것과 똑같았다. API에서 넘어오는 타입을 하나하나 확인해서 타입을 지정해주거나 너무 많은 타입이 넘어올 경우 any로 해주는 방법으로 사용하게 되었다.
요새 놓고 있었던 하루 1시간 작업하는 나만의 포트폴리오 사이트 제작을 다시 시작하고 있다. 
원티드로 이력서 제출을 하고 있는데 꽤나 이력서가 매력이 없나보다 조금 더 수정해서 이력서 통과를 할 수 있도록 해야겠다. 
그리고 간혹 신입인데 사이트 운영경험 또는 부트캠프 프로젝트 제외한 프로젝트를 원하는 곳도 몇군데 보이기 시작했다. 그래서 팀 프로젝트를 하나 해보려고 한다.

 

📗 오늘 한 일 (22.12.16 ~ 17)

나만의 포트폴리오 사이트

  • 프로젝트 컴포넌트
    • 프로젝트 카드 디자인 추가
    • 프로젝트 데이터 추가
    • 프로젝트 데이터 파일 분할

원티드 프리온보딩 프론트엔드 과정 합격에 따른 준비

  • 이전기수 작업내용 및 커리큘럼 확인하기
  • TypeScript, Next, React-Query에 대한 복습

원티드 이력서 제출 (3개)

면접준비

✍ Diary

프로젝트 데이터 파일을 분리하지 않고 한곳에 다 넣어두니 너무 코드의 길이가 길어졌고, 보기 힘들어져서 프로젝트 데이터 파일을 분할하고 이전에 했던 프로젝트들의 데이터를 추가해 주었다. 그리고 피그마에서 작업한 디자인과 같게 작업을 해주고 있다.

오늘 원티드 프리온보딩 프론트엔드 인턴십 사전과제에 합격했다는 연락을 받고 살짝 고민이 있었다. 이것을 하면서 이력서를 제출해서 회사에 갈 경우 팀원들에게 민폐를 끼치는 것이 아닌가에 대한 생각이 있던것 같다. 하지만, 연말 연초에 공고도 많지 않는 시기에 아무것도 하지 않고 가만히 있는 것 보다는 여러사람의 코드를 보며 클린 코드에 대해 학습해가고 다양한 경험을 할 수 있기 때문에 무엇보다 좋은 기회라고 생각해서 신청을 넣었다. 
총 5주를 진행하는데 4주는 1주일에 기업 사전과제 2개씩을 진행하고, 화, 금요일에는 2시부터 5시? 까지 강의가 있다고 하니 나머지는 온전히 과제에 집중하고, Next와 React-Query에 대해서도 마저 학습을 끝내둬야 겠다. (타입스크립트도 조금씩 더 깊게 공부해볼 예정이다.)

이전날에 팀프로젝트를 해보려고 했기 때문에 지인과 같이 진행하기로 했다. 이 프로젝트는 일회성이 아닌 장기적으로 운영도 해보려고 하기 때문에 첫 문서작업에 시간이 많이 걸릴 것 같다.

위에 계획을 다 지키기 위해서는 힘들겠지만 내가 원하고 재밌기에 열심히 할 수 있을 것이다.

 

📗 오늘 한 일 (22.12.18)

Record-Color (팀 프로젝트)

  • 프로젝트 기획
    • 어떤 사이트를 만들 것인가?
    • 사용스택?
      • FE, BE, Deploy ....
    • 필요한 자료 및 해야할 것
    • 벤치마킹

✍ Diary

원티드 프리온보딩 인턴십 프론트엔드 과정 참여 전 마지막 주말이라 보고 싶은 사람을 만나고 왔다! 🤗
갑자기 어떠한 아이디어가 떠올라서 팀 프로젝트를 기획했다. (FE 2명) 
그리고 Next와 React-Query를 학습했는데 사용해본 적이 없었기 때문에 이력서에 넣을 프로젝트 겸 실제 사이트를 운영해보려고 한다. (수익은 없을 듯...) 이력서를 제출하면서 어떤 신입 ~ 3년차 개발자를 뽑는지 확인하는데 실제 사이트를 운영해본 경험이 있다면 우대사항에 들어간다는 것을 많이 보았다.
이 프로젝트라면 볼륨이 크지도 않고 사용자도 있을 것 같고, 학습한 내용을 바탕으로 프로젝트를 진행하는 것이기 때문에 나의 개발 역략도 늘릴 수 있을 것이다.
오늘은 어떤 프로젝트를 할 것이고, 필요한 것은 무엇인지 회의를 통해 결정하고 19일(월)까지 알아오는 시간을 갖기로 했다.

'Daily > Today I Learned' 카테고리의 다른 글

22.12.20_TIL  (0) 2022.12.23
22.12.19_TIL  (0) 2022.12.23
22.12.13_TIL  (0) 2022.12.20
22.12.12_TIL  (0) 2022.12.20
22.12.11_TIL  (0) 2022.12.11

+ Recent posts