0726 Mon.
오리엔테이션
프리온보딩 첫날, 오리엔테이션을 가졌다.
멘토님께서 지원할 때 제출했던 과제들을 전부 확인하시고 간략한 리뷰를 주셨는데
기본 중 기본이면서도 정말 중요한 것들을 말씀해주셔서 감사+'나는 잘했었나?'뜨끔의 시간을 가졌다.
*주의할 것
- 깃레포지토리 관리:.gitignore에 .vscode넣기/nodemodules당근 넣고!
- 레포지토리에 들어갔을 때 프로그램 구조가 보이는 내용물이 바로 보이도록
(폴더 내 폴더로 한단계 더 거치는 것 x -> git생성을 잘 이해하지 못한 것) - 리드미
- 필수: 설치/시작 방법, 배포 및 기능 영상,api명세(백엔드 구현 시)
- 옵션: 과제구현 목록, 프로젝트 구조, 참고할 링크(코드설명 및 후기: 리드미가 장황해져서 집중력이 흐려짐, 가독어려움)
*비즈니스 매너 (꿀팁🍯)
저번 스타트업 과제를 이메일로 제출해야 했는데, 딱히 과제 파일을 첨부하고 인사 외엔 할 말이 없어서 이렇게 보내도 되는건가 찜찜한 마음으로 전송을 눌렀었는데,
좀 더 센스있게 보내자면, 기회를 준 것에 감사하는 마음 + 추가로 구현한 사항 등을 간략히 표현해 회사에 대한 간절한 마음을 표현할 수 있다는 것!
내가 담당자라도 아주 조금은 더 기억에 남도록 지원자의 과제를 확인하게 될 것 같다.
팀 회의
한달간 8명의 같은 팀원들과 소통하게 된다.
(한달 넘 좋음! 여기서도 코딩 친구를 사귈 수 있을 것 같아서 좋다🤸♀️)
커밋 컨벤션에 대해 논의하였고
성산님이 미리 자료를 정리해와주셔서 더 수월하게 진행할 수 있었다.👍
팀원들과 정한 컨벤션으로 작업을 해보고 어땠는지 사용후기와 같은 회의를 한 번 더 하기로!
뭐 특별할게 있을까 싶으면서도 과제를 진행하면서 벌써 한 두가지 느낀 점이 생겼다.
초반엔 좀 딱딱했던 분위기도 풀리고, 소통채널을 게더타운으로 정했는데
그때부턴 다들 더 편해진 것 같다. ㅋ_ㅋ
기업과제 - 페어프로그래밍
과제는 무한스크롤링을 구현하기
페어프로그래밍 방식은 한 명이 리드하고 상대방이 코드를 치고 이런 방법보다는
한 줄 한 줄 코드를 어떻게 작성할 예정인지 대화하고 더 좋은 방법이 있다면 그 방법으로 코드를 작성하는 식으로 진행했다.
- 초기설정 및 포맷터 설정
어려웠던 점은 이 과제가 어떤 페이지구조가 있는 프로젝트가 아니라 어느 한 일부 UI이기 때문에 폴더구조나 자원관리 등에서 얼마나 확장성있게 작성해야하는가가 고민이다.
사실 실제로는 함수나 자원 등을 한 번만 쓰고 재사용할 일이 없기 때문.
첫 날이었지만 제출기간까지 같이 작업할 시간이 부족해 첫날부터 무리를 좀 했다.
내일도 밤늦게 페어프로그래밍 하기로했는데....
둘다 부디 체력이 버텨주기를....🙏
0727 Tue.
개인공부
- 자바스크립트 프로토타입
팀 회의
- 어제 정한 커밋컨벤션 회고 및 수정 링크
- 다들 글을 너무 잘쓰신다...👍
기업과제
- 무한스크롤 구현
- 쓰로틀링 조건에서 문제 겪음 => 추후 해결하기 !!
0727 Wed.
개인공부
- 자바스크립트 프로토타입으로 클래스 구현하기
0729 Thu.
과제 회고 및 리뷰
다른 팀 자료 읽어보기: 구조/스타일
페어프로그래밍 하면서 말 많이하기
-> 내가 정확하게 알고있는 것이어야 말로 표현할 수 있다.
(면접 준비한다 생각하면서 적극 소통하기)
리드미의 폴더구조
앱의 구조를 한 눈에 파악할 수 있도록 폴더 성격을 설명하는 게 좋음
(나열할 것이라면 안해도 됨, optional임)
HTML/CSS
불필요한 태그는 반영하지 말자.
CSS에서도 효과가 적용되지 않는 코드들을 파악하고 삭제하기.
Styled Components와 클래스 병행 시 전역 오염 주의사항
유지보수하기 쉬운 코드, 생산성을 높이는 설정
상수분리 & 스네이크표현 대문자, 절대경로 등
API 및 라이브러리를 사용할 때 지원문서를 확인하고 필요한 폴리필까지 반영하기
(->caniuse / 근데 내생각: ie 고려까지 굳이 생각해줘야할까? 철수한다고 까지 이미 공식발표되었는데/ 멘토님의견 : 아직은..)
json&통신
public: 통신가능한 공간 *
json 통신하는 방법: public/jsonData/data.json
실제 사용할 때, fetch('http://localhost:3000/public~~')
npx json-server [파일경로] --port [포트넘버]
npx json-server public/jsondata.json --port 4000
꿀Tip🍯
기존의 객체 형태의 목데이터를 json화 시키는 것은 여간 귀찮은게 아니다. key값을 모두 string으로 만들어 주어야 하기 때문.
ex ) { id:1, name: 'namju' } => { 'id':1 , 'name':'namju'}쉽게 바꾸는 법 : 객체를 JSON.stringify({id:1, name:'namju'}) 라고 콘솔창에 입력해 주면 결과값이 모두 문자화 되어 복사하여 사용할 수 있다.
TODO
- Intersection Observer 사용 정리, lazy loading 개념 반영
- Styled Components와 클래스 병행 시 전역 오염 주의사항
- 리액트를 쓰는 이유에 대하여?
- 생산성 (레고조립하듯)
- 가상돔: 돔 조작을 최소화해야한다 => 가장 부하가 많음 - npm vs yarn
