💡 공식 문서 react-toastifyReact notification made easy. Latest version: 10.0.5, last published: 5 months ago. Start using react-toastify in your project by running `npm i react-toastify`. There are 2566 other projects in the npm registry using react-toastify.www.npmjs.com 대충 저렇게 생김새와 시간 설정 등 다양하게 꾸밀 수 있는 토스트 라이브러리 공식 문서
간략한 팀프로젝트 소개tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. 이전 리팩토링 과정(1) - [불어나는 API_URL 관리](2) - [중복되는 매개변수 제거](3) - [spread & rest]이번 리팩토링은 firebase 모듈을 `js` 파일 하나하나에서 전부 초기화를 해주고, firebase 전체를 import해서 사용하던 부분을 정리해보았다. firebase 모듈을 초기화하고 import하는 코드만 20~30행 정도를 차지하는데 싹다 밀어버렸다. 💡 기존 구조import { initializeApp } from "https://www.gstatic...
간략한 팀프로젝트 소개tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. (1) - [불어나는 API_URL 관리](2) - [중복되는 매개변수 제거] 이번 리팩토링도 위의 두 개와 비슷하게 코드를 압축하고자 하는 목적으로 진행하였다. 객체 형식의 데이터를 spread 문법으로 전달하고, 받을 때 rest를 사용해서 받도록 변경하였다. 💡 기존 코드 인자로 넘기는 함수/* 어쩌구 저쩌구 로직들 ... */ const movies = data.results;const targetMovie = movies.filter(item => item.id === Number(get..
state는 원래값과 변경값이 같으면 변경 액션 자체를 하지 않는다.좀 더 정확하게 말하자면 `값` 을 비교한다기 보다 이전 값과 `메모리 주소` 가 변경되었는지를 판별한다. 💡 원시 데이터 타입 변경 예시그럼 원시 데이터 타입에 대한 state 변경 예시를 알아보도록 합시다. state 정의const [name, setName] = useState("길동")state 변경let copyName = name; // 길동 저장copyName = '이황' // coppyName 변경setName(copyName)`name`을 `copyName`에 복사하고 값을 변경했다. 그리고 `copyName` 으로 변경 코드를 작성할 경우 우리는 당연히 변경된 값을 확인할 수가 있을 것이다. 하지만 동일한 문자..
💡 git, VSCode, Node 설치git - https://git-scm.com/download/winvscode - https://code.visualstudio.com/node - https://nodejs.org/en 위의 사이트에서 다운 받고 설치하면 됨 💡 yarn 설치 (선택사항)node를 설치하면 `npm`이라는 노드의 패키지 관리자도 자동으로 설치가 된다. `yarn`은 기능적으로는 같지만 성능적인 측면에서 `npm` 보다 향상된 패키지 관리자이다. 터미널에서 아래 명령어를 입력하여 설치한다. 정리하자면 안써도 문제 없으니까 귀찮으면 패스해도 된다. 괜히 저 처럼 에러날 수도 있음 일단 설치하기전에 npm과 yarn이 뭘 해주는지부터 알아 보자. 유용한 패키지, 라이브러리 등을 ..
프로젝트를 진행하던 중 고민거리가 하나 생겼다. 바로 모듈화된 자바스크립트 파일끼리의 데이터 공유방법이다. 예시 프로젝트 구조를 살펴보자. // api.jsexport const MAX_VALUE = 10// a.jsimport {MAX_VALUE} from 'api.js'const 갖고싶은변수 = 20;/* 각종 코드 ... */// b.jsimport {MAX_VALUE} from 'api.js'/* 각종 코드 ... */위와 같은 프로젝트가 있다고 가정 했을 때 둘 다 `constant`의 변수에 `import`를 해서 접근 한다. 하지만 어느 날 b에서 a의 변수 딱 하나, 더도 말고 딱 하나 `갖고싶은변수`에 접근이 필요할 경우가 생긴 것이다. 하지만 `type=module` 로 정의된 자바스..
단축평가자바스크립트에서 단축평가란 논리합(`||`) 또는 논리곱(`&&`)을 사용하여 조건식을 판별하는 과정에서 연산을 조기에 종료하는 것이다. 모든 조건을 판별하지 않고 최종 결과가 나오는 경우에 판별을 중단한다. 💡좌변, 우변논리연산자의 단축 평가를 알아 보기 전에 좌변, 우변의 개념부터 알아야 한다. 아주 간단하다. 논리연산자의 왼쪽에 있는 것을 좌변, 오른족에 있는 것을 우변이라고 칭한다. true || console.log('좌변이 false일 때 찍힘')위 예시에서 `true`는 좌변, `console.log()` 는 우변이다. 그럼 본격적으로 각 연산자의 단축평가 방식을 살펴보자.💡 논리합(OR) 단축평가`||` (OR) 연산자는 좌변이 참(truthy)일 경우 전체 표현식의 결과가 참..
혹시 자바스크립트에서 값이 있다, 없다를 구분하려면 `값 === undefind` 이런거 쓰고 있지는 않나 생각을 해보자. 근본적인 방법이지만 타이핑 하기 귀찮고, 괜히 없어보일수도 있다. 그럴 때 `truthy`와 `falsy` 값을 구분하면 훨씬 간결하고 효율적으로 쓸 수 있다. 💡 간결한 조건 처리function func(a) { if (a) { console.log('truthy') } if (!a) { console.log('falsy') }}// falsy 출력func(null);func(undefined);// truthy 출력func('null');func(123);값이 정의되지 않은 변수처리를 할 때 조건문을 `(값 === undefind || 값 === null || 값 ..
restrest문법은 spread문법과 생긴건 똑같다. 기능적으로는 완전히 반대의 역할을 수행한다. spread문법이 배열이나 객체의 요소를 펼쳐서 평탄화를 시켜준다면, rest는 반대로 펼쳐있는 값들을 배열로 묶어준다. 💡 우리가 알고있는 매개변수 받을 때 모습 function normal(a, b, c, d) { console.log(a, b, c, d);}normal(1, 2, 3, '사'); // 1 2 3 사 💡 rest를 사용해서 매개변수 받을 때function rest(...rest) { console.log(rest);}rest(1, 2, 3, '사'); // [ 1, 2, 3, '사' ]배열이 아닌 기본 리터럴을 전달해주었지만 받는 쪽에서 `...`을 붙여서 받게 되면 ..
간략한 팀프로젝트 소개tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. 첫 번째 리팩토링으로 [불필료한 API_URL 관리]를 진행했었다. 이번에는 함수들에 공통적으로 들어가는 매개변수를 제거하고 전역 변수로 변경하는 작업을 진행했다. (첫 번째보다 비교적 매우 간단하게 작업) 기존 코드document.addEventListener("DOMContentLoaded", () => { const params = new URLSearchParams(window.location.search); const movieId = params.get("id"); if (movieI..
💡 페이지를 (재)렌더링 하게 되는 경우들1. 첫 리액트 앱이 실행될 때2. 현재 리액트 내부의 어떤 상태(state)가 변경되었을 때컴포넌트 내부 `state`가 변경될 때컴포넌트에 새로운 `props`가 들어올 때부모 컴포넌트가 위와 같은 이유로 렌더링이 될 때 자식 컴포넌트도 줄줄이 렌더링
💡 state의 변화 유무리액트에서는 화면을 리렌더링 할 때 state의 변화를 가지고 판단한다. 즉, 일반 변수값을 화면에 출력한 상태에서 변수 값을 바꾼다고 화면에 출력된 값이 변경되는 것이 아니라 `setState` 를 활용해서 변경해야 적용 된다. 이 때 state의 변화 전, 후 의 `메모리 주소` 를 비교한다. 따라서 `참조 데이터 타입`이 변하게 되면 값은 바뀌지만 메모리 주소는 변함이 없기 때문에 페이지가 리렌더링 되지 않는다. (깊은 복사, 얕은 복사 개념) 📍 참조 데이터 타입(객체, 배열) 업데이트 하는 방법