치춘짱베리굿나이스

Off-Topic 팁 모음 리액트 하위 라이브러리 import import React, { useState } from 'react'; ... const [text, setText] = React.useState(""); //X const [text, setText] = useState(""); //O 리액트 하위 라이브러리들은 구조분해 할당을 통해 따로 import 해주자 사용할 때도 굳이 React.를 붙일 필요가 없다 컴포넌트 내의 함수 선언 { setState(e.target.value); }}> //X ... const handleDivClick = (e) => { setState(e.target.value) } ... //O 컴포넌트 내에 인라인으로 함수를 정의해버리면, 해당 컴..

코드리뷰 코드리뷰 #1 핸들러 함수 핸들러 함수를 따로 선언해두자 {console.log("asd")}}> 이런 식으로 인라인에 함수를 만들어두면 리렌더링 될 때 마다 함수가 재선언되므로 별로 썩 좋지 않다 또한 가독성을 해쳐 리팩토링에 도움이 되지 않는다 Typescript useState 타입설정 useState(false); state 초기화 시 들어간 값에 따라 타입스크립트가 자동으로 초기화해 주므로 굳이 이렇게 할 필요 없다 핸들러 이름 붙이기 handleEmailChange() handleButtonClick() handle + [대상] + [언제 핸들러가 실행되는지] 예를 들어 onChange에 달아주는 핸들러라면 끝 단어는 Change가 된다 onBlur에 달아주는 핸들러라면 끝 단어는 B..

CSS Module CSS 클래스명을 겹치지 않게 해주는 웹팩 자체 기능이다 간단하고 작은 토이 프로젝트면 몰라도 프로젝트가 거대해질 수록 클래스명이 겹칠 위험이 매우 커진다 이때 CSS Module을 사용하면, CSS Module가 자체적으로 클래스명을 [파일명]_[클래스명]_[해쉬값] 으로 지정해주기 때문에 클래스명 중복 지정이 되지 않도록 방지해줄 수 있고, 더욱 깔끔한 파일간 연관성을 구성할 수 있다 CSS 파일 생성 .profileDiv { background-color: white; } .buttonDiv { color: white; background-color: teal; } 이러한 CSS 파일 (사실 SCSS도 node-sass 모듈을 설치했다면 가능하다) 이 있다고 가정하자 파일명의 형..

prevState 사용 이유 const [testValue, setTestValue] = useState(false); ... setTestValue(!testValue); 우선 아무 생각 없이 현재 상태값을 그대로 가져와서 이렇게 작성하던 과거의 나를 반성하자 쓰는 법 const [testValue, setTestValue] = useState(false); ... setTestValue((prevState) => !prevState); 간단하다 setState() 함수 내에 인라인 함수를 작성하면 된다 인자로 prevState가 자동으로 들어간다 근데 왜 굳이 써요? const [testValue, setTestValue] = useState(0); const handleOnClick = () => ..

e.currrentTarget vs e.target input 태그에서 값을 받아올 때 맨날 e.target만 사용했었는데 e.currentTarget의 존재를 프리온보딩 피드백을 받으며 처음 알게 되었다 input 태그는 자식 태그가 없고 보통 onChange를 통해 값의 변화만을 추적하기에 망정이지 다른 태그에서 무지성으로 e.target만을 사용했으면 큰일날 뻔 했다... 라고 반성을 좀 했다 ㅡ,,ㅡ;; 값 비교 const handleClick = (e) => { console.log(e.target); console.log(e.currentTarget); } bbb aaa ccc 위와 같은 컴포넌트가 있다고 가정하자 컴포넌트는 bbb 영역과 aaa 영역, ccc 영역으로 나눠진다 aaa 영역과 ..

서론 사전설문 (Mac vs Window vs Linux) 맥과 윈도우의 비율이 꽤 비슷했다 프론트엔드 개발은 맥이 압도적으로 편하다 (라이브러리 설치, 터미널 등) 윈도우는 회계, PM 담당이 주로 사용하고, 개발자들은 보편적으로 맥 많이 사용 리눅스, 유닉스 계열이 호환성이 좋기 때문 자기자신을 알리는 사람이 되자 검색이 잘 되는 사람이 되어야한다 내가 검색을 잘 하라는게 아니라 내가 누군지 잘 어필할 수 있는 사람이 되어야 함 실력은 하나도 중요하지 않다... 눈에 띄는 것이 중요하다 이력서 마음에 이력서를 품는 사람이 되자 (기회가 언제 올지 모른다) 링크드인, 원티드 등의 프로필을 잘 관리하고 이력서를 항상 업데이트하자 회사에 말뚝을 박으면 연봉 인상률이 적지만 이직을 반복하면 연봉 10 ~ 2..