TIL 작성가이드 및 필요성
검색이 잘 되는 사람이 되는게 중요!
이력서를 항상 업데이트하면서 올려두기_항상PDF를 준비해놔라
TIL 오늘 배운 내용을 매일 요약해서 적어두기
매일매일 꾸준히 쌓아나가는게 제일 중요.
사전과제리뷰
-
드롭다운 바깥 클릭시 닫히는거 구현 많이들 안함 // useOnClickOutside 훅을 쓰면 모바일대응 까지 알아서 해줌(모바일에선 터치이벤트) // https://github.com/streamich/react-use
-
css모듈을 사용하면 다른컴포넌트와의 의존성이 없어져서, 리팩토링에도 좋음
-
이메일 정규식 w3c 표준 사용 // email regex w3c 검색어
-
정규식테스트 regex101.com
-
보통 onChange,onBlur, onClick 이런 이벤트핸들러의 함수는 함수명 handle로시작하고 따로 빼주기 // 리팩토링에도 안좋고, 렌더링되면서 함수가 계속 정의됨.
-
인덱스에 키값 바로 넣어주기 X
-
focusWithIn 이란 키워드 한번 써보기
-
린터 중요!
-
cx,classNames를 이용하기 // 클래스네임에 &&쓰면 클래스네임에 false가 들어갈 수 있다.
-
돔 직접 조작하면 안됨! Ref는 데이터를 바꿀 때 쓰지말기.
-
항상 e.target말고 e.current.target쓰기! 그냥 target은 자식요소까지 가리키지만 current는 해당 이벤트것만 됨.
-
{return }은 생략가능
-
setState는 한 함수에서 여러번 쓸때 비동기적으로 작동하기 때문에 신경써줘야하고, 기존 state값을 이용할때는 prevState를 이용하는 게 중요하다.
-
화면에 필수로 들어가야할 이미지(패스워드의 눈깔표시,체크아이콘 같은 반드시 필요한 것들)은 퍼블릭 폴더가 아니라 src에 바로 같은 파일내에 넣든가 src/asset에 넣고 위처럼 변수명을 불러오는 방식으로 사용
-
상수는 컴포넌트 밖으로 빼기 // 값이 계속 생성됨 // steps
-
파일컨벤션 _ 컴포넌트는 대문자, 변수는 소문자로 카멜케이스, 컴포넌트는 파스칼케이스, 상수는 대문자로 시작
-
React.useState 쓰지말고 useState 쓰기 // 보기 안좋음
-
map돌릴 때 e가 아니라 rangeItem 쓰기 //e는 이벤트나 에러
-
VSCode 확장기능
ESLint
Prettier
stylelint
TODO highlight
잘짠코드
-
탭부분 display:flex하고 width: 50% 안하고 flex:1 이런식으로 두개 해도됨
-
인풋 제일 다루기쉬운게 checkBox인데 체크드 여부에 따라 바꾸게 짬 _ 비열한게 잘짠코드 // 경제적 // a+b는 a태그 옆에 b를 선택하란거
-
vaildity 사용
-
dataset를 잘쓴사람
야생에 있는 다른 서비스들 까보기
당근마켓
요소검사 밥먹듯이 사용하기. 네트워크부터 보고 size 정렬 1mb넘는거 없는지 확인 없음 굳
dfy.co.kr
용량최적화
2.2메가파일=> 로딩을 집어넣음
이미지최적화 용량기준 // 500키로 넘으면 조금 그럼 // 일요일에 최적화배울것
애플
가장 잘만든 사이트
용량도 ficture source img 태그이용해서 크로스브라우징이나 큰거작은거중간꺼 사이즈 갖다씀.
nonscript이용해서 자바스크립트 안돌아가는데서도 구현
강조할 부분 스트롱 태그 => 굉장히 시맨틱하게잘씀
비디오태그밑에는 안돌아가는 사람위해서 픽쳐태그 깔아둠.
스크롤 모니터 같은 라이브러리 사용하면 스크롤되면 나오고 안나오는거 쉽게 만들수있음
STAR ATLAS
webp파일 사용 고품질인데, png로 했음 용량 더컸을것 => 이미지큰데 최적화잘함
foundation
- eslint가 자바스크립트나 그런거 표준체크
- css in js를 쓰면 html을 너무 추상화함 => div도배하는 상황
한 파일 안에 로직과 스타일이 뒤섞임
안에는 로직이랑 최소한의 클래스네임만 들어가고, scss에서 스타일을 지정=> 의존성도 줄어듬 - 프리티어 설정
120넘어가면 칸바꿔라
세미콜론 안쓰는 타입이라서 false
맨마지막에 엔터넣어줘라
css순서를 강제해줌
디스플레이,플렉스관련올라가고 , 높이 가로세로 다음 오고 그런 순서 강제
이렇게하면 순서를 맞춰놓으면 중복임을 알아채기 좋음 필수적으로 사용
to-do 만들기
- 체크박스 svg랑 뒤의 동그라미에 z-index 필없음, state 관리 안해도됨! => pointer-events
- 말줄임표만들기
- dataset??? https://velog.io/@hwang-eunji/React-HTML-데이터-세트dataset-사용하기
한번 검색해볼 키워드
css-module방식, cx,classNames, focusWithIn, dataset
오늘의한마디
남의 코드가 더 괜찮아 보인다 장단점 비교해서 훔치면 그 사람처럼 코드 짜기 가능 => 강사님, 잘하는 사람꺼 훔치자!
