my dev diary

React Hooks 리액트에서 제공하는 기능. import 해야 사용 가능하다. React Hooks - useState useState useState는 가장 기본적인 hook. 함수 컴포넌트 내에서 가변적인 상태를 가지게 해 줌. 기본적인 형태 import { useState } from 'react'; const [state, setState] = useState(초기값); 함수형 업데이트 setState의 ( ) 안에 수정할 값이 아니라, 함수를 넣을 수 있다. 그리고 그 함수의 인자에서는 현재의 state을 가져올 수 있고, { } 안에서는 이 값을 변경하는 코드를 작성할 수 있다. // 기존에 우리가 사용하던 방식 setState(number + 1); // 함수형 업데이트 형태 setSta..

TIL 2023. 6. 21.

목차 Styled Components Sass CSS RESET Styled Components CSS-in-Js 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식. Styled Components 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지 패키지란? React에는 없는 기능이지만 우리가 추가로 가져와서 사용할 수 있는 써드파티 프로그램 npm이라는 마켓 안에 모여 있음 사용하고자 하는 패키지를 npm install 또는 yarn add를 통해서 설치해서 사용 가능함. 사용하기 1. VScode Extensions 설치 vscode-styled-components 설치 2. vscode에서 프로젝트를 열고 vscode 터미널에서 아래 명령을 입력해서 패..

TIL 2023. 6. 20.

개발 환경 세팅 필수 프로그램 크롬 브라우저 VScode git Node 설치 확인 : 터미널에 node -v 입력 후 버전 확인 * NPM(Node Package Manager)은 노드 설치 시 자동으로 같이 깔림. : 노드 패키지 매니저. 마켓이면서 동시에 명령어이다. : 이것을 통해 리액트 패키지 등등을 설치할 수 있다. * yarn : npm 패키지. npm 명령어로 설치해줘야 함. : 설치 후에는 npm 명령어, yarn 명령어 둘 다 사용하면서 패키지를 설치할 수 있다. : npm의 역할과 동일하지만 마켓은 아니고 명령어로서 동일한 역할을 한다. : npm보다 성능적으로 조금 개선됨 -g = global 패키지 베이스(프로젝트 안에서만 쓰는 패키지)가 아니라 내 컴퓨터 전반에 사용할 수 있게끔..

TIL 2023. 6. 14.

변수와 상수 var 기존의 변수 키워드. 전역 변수를 남발할 가능성이 높아 현재는 거의 사용하지 않음. 재할당/재선언 가능. let ES6 이후 사용되는 변수 키워드. 재할당 가능. 재선언 불가. const ES6 이후 사용되는 상수 키워드. 재할당/재선언 불가. 【 일반적인 변수와 상수 선언 】 let a = 1; const b = 3; var c = 5; console.log("a", a); // a 1 console.log("b", b); // b 3 console.log("c", c); // c 5 【 const는 재할당되지 않음 】 let d = 1; const e = 3; var f = 5; d = 5; e = 7; f = 9; console.log("d", d); // d 5 console...

TIL 2023. 6. 13.

React란? UI 구축을 위한 JavaScript library. SPA 기반의 프론트엔드 개발 프레임워크 중 하나. 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법 사용. 비슷한 프레임워크 : AngularJS, VueJS SPA(Single Page Application) 아키텍처 정의 Single Page Application, 즉 한 개의 페이지로 이루어진 애플리케이션. MPA(Multi Page Application)과는 상반된 개념. 기존 MPA의 문제점 SNS에서 '좋아요'를 누를 때마다 웹사이트가 다시 로딩된다면, 리랜더링(re-rendering)이 너무 많이 이루어짐. 계속해서 페이지가 깜빡거리며 UX(사용자경험)가 안 좋아짐. ➔ SPA는 '좋아요'에 해당되는 요소만 색이 채워지며 ..

TIL 2023. 6. 12.

* CLI 명령어는 기본적으로 숙지하고 있어야 한다. 명령어를 보려면 아래의 더보기 클릭! 더보기 CLI : 명령어 기반 인터페이스 깃 : CLI 도구 * 소스트리는 안정성이 낮아 추천하지 않으므로 명령어 외우기! CLI 명령어 윈도우 : git bash macOS : terminal 명령어 = 마우스의 클릭, 더블클릭 암기 X, 숙달 O! * 경로 절대경로 : 전체(최초 ~ 현재까지) 경로 상대경로 : 현재 경로를 기준으로 나타낸 경로.(현재경로는 . 상위경로는 ..으로 지칭) [ CLI 명령어 ] pwd 현재 경로(현재 디렉토리) 확인하기 clear 화면을 깨끗하게 비우기 ls 현재 경로의 파일 및 폴더를 조회 ls -a 현재 경로의 숨김파일 및 폴더(파일/폴더 이름 앞에 .이 있음)까지 모두 조회 ..

TIL 2023. 5. 24.

JS 기본 문법 * 코드 작성 후 결괏값 확인하기 @.js 파일에서 코드를 작성 후 console.log() 입력 > 터미널에 node @.js 입력하여 실행 후 결괏값 확인. * 주석 // (JS 엔진이 해석하지 않음) 단축키 : com + / ❖ 변수 & 상수 변수 * 모든 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고 저장된 값을 읽어서 재사용함. 변수의 5가지 주요 개념 변수 이름 : 저장된 값의 고유 이름 변수 값 : 변수에 저장된 값. 변수 할당 : 변수에 값을 저장하는 행위 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위 변수 참조 : 변수에 할당된 값을 읽어오는 것. ex) var x = "hello"; console.log(x); x 변수 이름. 어떤 내용이 와도 상관 ..

TIL 2023. 5. 23.

JavaScript 언어의 특징과 역사 JS의 역사 1995년에 탄생한 브라우저 동작 스크립트 언어. 2005년 AJAX 등장 AJAX : JS 기반의 기술. 페이지 전체가 아닌 일부분만 새로고침할 수 있게 함. 비동기 웹 애플리케이션 개발 가능 UX(User Experience, 사용자 경험) 향상 2008년 V8 엔진 출시(google) 브라우저 속도 향상(코드 실행 속도 상당 부분 개선) 2009년 Node.js 등장, 서버 개발 활성화 FrontEnd + BackEnd + DB(MongoDB) = FullStack 2015년 ECMAScript6(ES6) 버전 출시 2016년 프론트엔드 프레임워크(React, Vue, Angular) 대중화, SPA 개발 활성화 현재 자바스크립트는 프런트엔드 및 ..

TIL 2023. 5. 22.