릿의 TIL벨로그
로그인
릿의 TIL벨로그
로그인
[220508] TIL
릿
·
2022년 5월 8일
팔로우
0
TIL
원티드프리온보딩프론트엔드스쿨
0
TIL
목록 보기
18/28
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공부
릿
항상 재밌는 뭔가를 찾고 있는 프론트엔드 개발자
팔로우
이전 포스트
[220507] TIL
다음 포스트
[220509] TIL
0개의 댓글
댓글 작성