1. 검색이 잘 되는 사람
- 있는 정보지만 찾지 못하면 쓸모 없는 정보다.
- 사람도 똑같다.
1-1. 검색 잘 되는 사람의 의미
- 이력서를 항상 준비해서 자기를 팔 줄 아는 어필할 줄 아는 사람이 되어야 좋은 회사를 갈 수 있다.
1-2. TIL
- 오늘 배운 내용을 요약해서 정리를 매일 해야한다.
- velog나 tistory 같이 검색이 잘되는 blog 툴을 이용해서 정리해보자
2. 과제 피드백
- 배포는 성의..
- CSS는 모듈 CSS를 쓸 예정
- onChange 나 onClick에 들어가는 함수들은 자주 렌더링될 때 자주 새로 만들어주기 때문에 핸들러 함수 내부에 작성하지 말고 따로 작성해서 새로 안만들게 만들어야한다.
- 이벤트 핸들러는 모두 handle으로 시작하게 만들기
- 컴포넌트인지 어떤 목적의 함수인지 판별하기 힘든 경우
- focus-within? → 이걸 이용하면 이메일 경고 알람을 state를 사용하지 않고 구현이 가능하다.
- pw도 따로 state관리해 주어야한다.?
- regex101.com → 정규식 검증 사이트
- 오타 주의
- key으로 index를 쓰면 안되는 이유
- 같은 컴포넌트 내에 여러 배열이 들어있는 경우 리액트가 어떤 배열의 item에 관련 로직을 적용할 지 햇갈릴 수 있다..?
- 좀 더 찾아보기
- 어느 네임스페이스에 속하는 key 값인지 key 값을 가공해서 넣어주는 것이 좋다.
- className 이름 지정할 때 실무에서는 classNames라는 모듈을 사용한다.
3. 내코드 리뷰
-
들여쓰기 4칸 은 별로다. → 2칸으로, 커뮤니티 표준.. ***
- 4칸씩 들여쓰기하면 너무 늘어나서 보기가 힘들어진다.
- 2칸씩 들여쓰기 하는게 좋다.
-
input 에 “”쓰는 것.. 즉 리액트 내에서 절대 DOM을 직접 관리하면 안된다.
- 이유는 좀 더 찾아보기 -
ref는 UI작업할때만 쓰고 데이터를 관리하는 코드에서는 쓰면 안된다.
-
이메일 정규식에 마지막에 2,3이 나오면 문제가 생긴다.
- 마지막에 2,3이면 info같이 4글자로 쓰는 경우 이러한 회원가입을 할 수 없는 이메일로 존재하게된다.
-
한국어로 검색하면 구린 자료 옛날 자료가 나오기 때문에 구글 + 영어로 검색하기
-
이메일은 정규식 표준이 있다. → w3c***
- email regex w3c로 구글에 검색하기
-
이벤트 핸들러에 이벤트 객체는 e.currentTarget을 이용하자.
-
eventTarget의 경우 이벤트 발생 요소의 자식요소까지 모두 나오게 된다.
- event.target.value는 쓰지 말자
-
리액트는 비동기적으로 작동하기 때문에 preState를 꼭 쓰자
-
id를 쓰는 경우 → CSS 선택자로 쓰면 안된다.
- id는 어떤 의도가 있을 때 쓰는 것
- input요소에 직접만지거나
-
리액트에서 이미지를 가져오는 방법(강의 한번 더 보기)
- 반드시 필요한 자료들은 src에 넣어줘야한다..? → 퍼블릭에 넣어주면 안된다.
- import를 이용해서 이미지 자체를 이용해서 이미지를 가져오자
- 리액트에서 웹팩으로 번들링을 할 때 그 단계에서 이미지 크기가 작을 경우 따로 서버에 이미지를 요청하는 것이 아니라 html 안에 넣어서 번들링되게 된다.
- svg 파일 같은 경우는 조금 다르게 써야한다. → 리액트 컴포넌트를 이용하는 것이 맞다.
-
컴포넌트 형식으로 불러와서 class를 입혀 이미지의 색을 마음대로 지정할 수 있다.
-
다크모드 같이 색을 변경시켜야하는 경우 svg 컴포넌트를 이용해서 쉽게 관리할 수 있다.
// src/assets/svgs/index.tsx export { ReactComponent as BellIcon } from './ic-bell.svg' export { ReactComponent as CalendarIcon } from './ic-calendar.svg' export { ReactComponent as CalendarRangeIcon } from './ic-calendar-range.svg' export { ReactComponent as CancelAlertIcon } from './ic-cancel-alert.svg'
-
-
transition 는 0.2 정도 되면 빠르게 좋게 보일 수 있다.
-
moveActiveBox는 모바일 대응에 따라 바꿔줘야한다.
-
input 창 같은 경우 브라우저의 input 기본 기능을 꺼버릴 수 있는 기능이 있다.
- 찾아볼 것
-
useClickOutSide라는 custom hook 사용하기 좋다.
-
react-use 라이브러리***
- https://github.com/streamich/react-use 다양한 기능을 사용할 수 있는 라이브러리
- useMount, useUnmount, useTitle, useClickAway
-
코드는 확장성 있게 짤 것
-
innerText를 사용하면 안된다.
- 왜? 좀 더 찾아보기
-
preventDefault는 기본 기능이 있는 html의 기본기능을 죽일 때만 쓰기
-
코드는 간지가 생명
-
변하지 않는 상수나 리렌더링 되지 않을 함수들은 컴포넌트 밖에 위치시키면 더 좋다.
- 상수는 대문자로 표기해서 관리
-
Slider에서 linear-gradient를 이용해서 바가 차는 걸 설정해주기??
-
쿼리셀렉터 쓰지말기
-
컴포넌트 대문자로 짜고(파스칼 케이스)
-
유틸리티, 변수는 캐멀케이스
-
토글은 라디오를 이용해서 간단하게 구현할 수 있다.
-
이메일의 경우 pattern과 validity를 이용해서 참신하게 구현할 수 있다.
-
data attribute를 이용해서 코드를 개선할 수 있다.
고칠 것
- prettier 설정 다시 고칠 것
- className에 state를 이용해서 접근하지 말기
- innerText 왜 위험한지 찾아볼 것
- event.currentTarget으로 바꿀 껏
- css 같은 것도 다 변수 이용해주기
... 정리할 것
서비스 중인 사이트 체크
당근마켓
- 일단 이미지 큰게 없는 지 확인
- 이미지 최적화 작업이 필요
애플
- 진짜 이렇게 까지 만들수 있나하는 사이트
- 엄청 잘 만든 사이트
- picture tag? → 화면 사이즈에 따라서 보여줄 사진을 정할 수 있게 해주는 태그
- css mask?
사이트 성능 체크
- light house 점수 체크
팁
- 반응형 웹은 작은 것부터 작성하는 것이 코드 양이 적다.
소감
- 정말 여러 상황을 가정해가면서 개발하시는 모습이 안주 인상적이었습니다.
- 현직에서 준혁님을 만났다면 버틸 수 있었을지.. 의문이 들지만 그래도 싫어하시면서 하나하나 꼼꼼히 봐주시는 준혁님이 너무 감사했습니다.
