치춘짱베리굿나이스

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..

signal이란? 프로그램 구동 중에 Interrupt가 발생했을 때, 프로세스에 어떠한 Interrupt가 발생했음을 알리는 간단한 메시지를 전송하는 것 signal을 받은 프로세스는 해당 시그널이 무엇인지에 따라 지정된 기본 동작을 수행하거나, 사용자가 정의한 함수에 의해 무시하거나, 또는 사용자 정의 함수를 통해 특별한 처리를 해 줄 수 있다 예시 프로세스 동작 중에 ctrl + c를 누르면 프로세스가 종료 (kill) 되는 현상도 Signal이 발생하였다고 볼 수 있다 Signal 함수 종류 헤더에 기본적인 동작들과 signal 관련 함수들이 정의되어 있음 기본적으로 정의된 동작은 주로 프로세스를 종료하거나, 코어 덤프를 생성 Kill int kill(pid_t pid, int sig); Kill..

eslint Javascript & JSX의 정적 분석 도구 Javascript는 코드 실행 후에 에러를 파악할 수 있는데 (동적 분석), 이를 실행 없이도 코드 내에서 바로 찾을 수 있도록 (정적 분석) 도와주는 도구이다 eslint는 코드 그 자체를 분석해 문법 오류나 안티 패턴 (패턴을 지키지 않은 부분) 을 찾아주어 일관된 코드 스타일을 유지하게 해 준다 설치하기 npm install eslint -D -D 옵션은 개발 단계에서만 해당 도구를 사용하겠다는 의미이다 (배포 단계에서는 적용되지 않는다는 뜻) 설정하기 npx eslint --init Javascript에서 React를 이용하여 개발하고자 한다면 다음과 같이 설정한다 세팅이 완료되면 eslintrc.js 파일이 생성된다 (json 형식을..

create-react-app으로 리액트 환경 세팅하기 npm 설치하기 (+ npx) Nodejs, npm, npx nodejs, npm, npx Node.js Node.js Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 오픈소스 자바스크립트 엔진에 비동기 이벤트 처리 라이브러리를 결합한 플랫폼으로, 자바스크.. blog.chichoon.com npm은 node.js 기반 패키지들을 쉽게 설치하고 관리하도록 도와주며, npx는 이러한 패키지들을 쉽게 실행시킬 수 있도록 돕는다 최신 버전 Node.js를 설치하면 npm과 npx가 따라온다 버전 체크 npm -v npx -v create-r..

Node.js Node.js Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 오픈소스 자바스크립트 엔진에 비동기 이벤트 처리 라이브러리를 결합한 플랫폼으로, 자바스크립트 코드를 브라우저 밖에서도 실행할 수 있도록 돕는 런타임 환경이다 자바스크립트를 브라우저 밖에서도 실행시킬 수 있는 덕에 자바스크립트 관련 도구들과 프레임워크들은 모두 node.js를 기반으로 동작하며, 입출력 처리 성능, 서버 확장, 자바스크립트로의 백엔드 서버 구축 등 다양한 장점으로 사용률을 높일 수 있었다 설치하기 brew install node # 업그레이드는 brew upgrade node node -v # 버전 ..