[TIL] 2022-05-03

이말감·2022년 5월 3일
0

TIL

목록 보기
1/21

프리온보딩 1일차


이력서

  • 원티드, 로켓펀치, 링크드인 등 HR 플랫폼에 자기 이력서 올려두기
  • 개발자들은 항상 이력서를 PDF로 가지고 다녀야 한다.
    • 이력서 자주 업데이트하기!
  • 이를 통해 FE 개발 시장에서 나의 연봉, 시장가가 어느 정도 되는지 파악할 수 있다.
    • 여러 회사들과 인터뷰해보면서 연봉 기록해두기
  • 나의 글이 검색이 잘 되면 기회는 계속 온다.
    • 네이버 블로그보다 벨로그, 티스토리 사용
  • 아무리 잘해도 존재감이 없는 사람은 안된다.

TIL (Today I Learned) 작성

  • 매일 하루의 마지막에 꾸준히 오늘 배운 내용을 요약해서 적기!

프리온보딩 사전 과제 피드백

CSS Module

  • 리액트 프로젝트에서 컴포넌트를 스타일링할 때 사용하는 기술

    • css 클래스가 중첩되는 것을 방지할 수 있다.
  • CRA로 만든 프로젝트에서 CSS Module을 사용할 때, CSS 파일의 확장자는 .module.css이다.

  • Box.module.css 파일

.Box {
  background: black;
  color: white;
  padding: 2rem;
}
  • 리액트 컴포넌트 파일에서 해당 CSS 파일을 불러올 때 css 파일에 선언한 클래스 이름들이 모두 고유해진다.
  • CSS Module을 이용하면 리팩토링하기 좋다.

참고


React 이벤트 핸들링

  • onChange, onClick 등 이벤트를 사용할 때 이벤트 핸들러는 따로 빼놓기
    • 길이가 길거나 오래걸리는 함수를 넣었을 때 좋지 않다.
    • 렌더링 될 때마다 계속 생성되기 때문
  • 이때 함수명은 handle~~로 만들어두는 것도 꿀팁

이벤트 핸들러

  • e.target 말고 e.currentTarget 사용하기
    • currentTarget은 이벤트 핸들러가 부착된 것을 가리킨다.

Managed State 관리

  • 디코에서 진행한 피드백 뿐만 아니라 오늘 라이브에서 진행한 피드백에서도 managed state 관리가 중요하다고 하셨다.
    • 사실 이 부분은 아직 이해가 잘 되지 않아 좀 더 찾아봐야 할 부분이다.ㅠ

이메일 정규식

  • 이메일 관련 validation은 간단한 것이 좋다.
    • email regex w3c를 검색해서 확인
      • 웹 표준 개발 기구에서 제공하는 validation
  • 정규식 확인하는 사이트

validity

  • 패턴을 이용해서 브라우저가 생각하는 이메일이 맞는지 아닌지 여부를 확인한다.

CSS 선택자 focus-within

  • form 안에 css 선택자 focus-within을 사용하면, 포커스되어있을 때 아래에 있는 요소에 css를 줄 수 있다. (email validation 관련 내용에서)

키 값에 인덱스 넣지 말기

  • 리액트 입장에서는 여러 곳에서 인덱스가 올라가는데, 어떤 곳의 1번 인덱스인지 모른다.
  • 인덱스가 똑같이 들어가면 예상하지 못한 작동들이 일어날 수 있음
  • 그러니까 인덱스를 바로 키 값에 넣어주지 말기
    • 어느 namespace에 들어가는지 키 값 가공해서 넣어주기

classnames 라이브러리

참고


CSS 선택자 쓸 때는 class 사용

  • id는 어떠한 의도가 있을 때만 사용한다.
    • js로 조작을 하려고 할 때 사용한다.
  • id는 재사용이 안된다.

prevState 사용하기

  • 공부 필요

public이 아니라 src에 넣어서 불러오기

  • 리액트에서 화면에 필수로 들어가야 할 것들은 public이 아니라 src에 넣어서 불러오기
  • img는 상단에서 import를 이용해서 불러온다.
  • 리액트로 코드를 짜고 웹팩으로 번들링을 할 때 너무 작으면 html에 그냥 넣어버린다.

svg 파일 사용

  • svg 파일을 리액트 컴포넌트 팡식으로 가져오게 되면 svg 안에 있는 색을 바꿀 수 있다.
profile
전 척척학사지만 말하는 감자에요

0개의 댓글