1. 강의

1. 코드리뷰

• 과제제출의 경우, 만약 일주일 걸리는 작업이라면 한달 기간을 잡고 나머지는 디버깅과 테스트를 해야한다.
• 코드는 150줄에서 끊고 넘어가면 컴포넌트 분리를 한다.
• scroll css로 구현 가능, 검색해볼 것.
• 바깥 클릭했을 때 사라지는 이벤트리스너 -> react usehook 땡겨쓸 것
• map()안에서 함수 선언하지 말 것.
• vs code에서 절대 노란줄, 빨간줄 안 뜨게 할 것.
• reduce함수에 대해 알아보기.
• store.js라이브러리를 사용하면 localstorage를 쉽게 쓸 수 있다.
• prettier 꼭 쓰기!
• 라이브러리는 본인이 해당 기능구현에 대한 이해가 있다면 쓰는 걸 권장.
• alert은 가급적 쓰지말 것. alert을 쓰면 자바스크립트 코드가 멈춘다.
• 마우스 슬라이드 이벤트(캐러셀) => slick.js 라이브러리 사용.
• className에 삼항연산자를 쓰는 것 보다classnames 라이브러리 사용을 추천
• useMemo : 값을 저장, useCallback : 함수를 저장 => 프로그램 연산이 많다면 고려해볼 것!
• 메인 메뉴 : 글로벌 네비게이션바, 서브메뉴 : 서브 네비게이션바, 로컬 네비게이션바
• setTimeout을 쓰면 clearTimeout을 꼭 같이 써야한다.
• context는 테마를 만들때 주로 사용.
• 같다는 표시는 ==가 아닌 ===로 쓰기
• 컴포넌트 두개를 한 파일에서 선언하지 말 것. 컴포넌트 나누기.
• state값은 객체로 써야할 정도라면 state를 따로 쓰자.
• 삼항연산자를 'true ?? false' 형태로 쓸 수도 있다.
• 버튼과 텍스트 구분되게 디자인 할 것!
• overflowX가 scroll이면 모바일에서 터치하고 밀면 스르륵 넘어간다.

2. 본 강의

• html요소를 목적에 맞게 잘 쓰는 것이 중요하다.
• caniuse.com : 해당 css요소를 써도 되는지 브라우저별로 확인하는 사이트
• 요즘 개발할 때는 IE는 대응할 필요가 없다.

1. 검색하는 법 : google에 영어로 검색할 것.

• 개발자는 영어를 잘해야 한다. 번역, 통역정도는 아니더라도 업계에서 쓰는 단어정도는 기억해둬야한다.
• 에러로그를 검색할 줄 알아야 한다.

2. 질문하는 법 : 매우 중요!

• '~가 안되요.' => X
• '~를 했더니 어떤 에러가 나서 안되요.'+화면캡쳐+에러로그+내가 원했던 상황+실제 일어난 상황+테스트환경 => O
• 커뮤니케이션이 길어지는 거보다 상대방이 단답형으로 답할 수 있게 질문을 하자!

3. 이미지 최적화 기법

• 컨텐츠 이미지는 디자이너가 작업하는 게 아니기 때문에 프론트엔드 개발자들이 챙겨줘야 한다.
• 이미지 최적화 사이트 https://squoosh.app/
• resize하고, compress -> JPEG로 받기 (WebP는 사파리 지원이 안됨.)
• 이미지 색상수가 적다면 PNG로 받자!
• GIF는 써야할 이점이 없으므로 사용하지 말 것. (용량은 줄어드는데 컬러부분이 깨진다.)

4. SVG파일 관련

• svg파일 내에 한글이나 href가 들어가있다면 디자이너에게 다시 파일을 요구해야 함.

5. 기타

• 프론트엔드 개발자는 디자인을 이쁘게 하는 것도 중요하다.
• 프론트엔드 개발자 업무 관련 블로그 https://blog.kesuskim.com/2016/10/learning-js-in-2016/

6. 개인과제 : API연동한 날씨앱 만들기 (~화요일 오후 4시까지)

• yarn으로 진행!
• https://dribbble.com/shots/15736238-Weather-App-Design-Exploration
• axios사용. 라이브러리 참고! https://axios-http.com
• typescript를 사용할거고 type과 interface가 있는데 우리는 interface를 사용하는 걸로 통일.
• paste to json : json문법을 자동정렬해주는 익스텐션
• json to ts : json문법을 ts로 변경해주는 익스텐션
• day.js 사용해서 연월일시 포맷을 정의해준다.

7. 개인 과제 : 영화검색 프로젝트 (~15일 오후 4시까지)

• recoil사용!

2. 공부할 것

• prop-types라이브러리
• yarn vs npm
• time태그
• typescript공부