전체 글

[React] Debounce(디바운스) 적용한 검색어 자동완성 구현기 (2) - 검색어 키보드로 선택하기

1편 보러가기 [React] Debounce(디바운스) 적용한 검색어 자동완성 구현기 (1) 전체코드 (관련 코드는 SearchPage와 Search 폴더에 있음) 검색어 자동완성 기능은 의외로 자주 사용되는 UI이기 때문에 디바운스 연습할 겸 미국의 도시명을 검색할 수 있는 검색창 및 자동완성 기능 bluepebble25.tistory.com 전체코드 (관련 코드는 SearchPage와 Search 폴더에 있음) GitHub - bluepebble25/react-pieces: react로 자주 구현되는 솔루션 조각들을 모아놓는 저장소 react로 자주 구현되는 솔루션 조각들을 모아놓는 저장소. Contribute to bluepebble25/react-pieces development by creati..

[React] Debounce(디바운스) 적용한 검색어 자동완성 구현기 (1)

전체코드 (관련 코드는 SearchPage와 Search 폴더에 있음) GitHub - bluepebble25/react-pieces: react로 자주 구현되는 솔루션 조각들을 모아놓는 저장소 react로 자주 구현되는 솔루션 조각들을 모아놓는 저장소. Contribute to bluepebble25/react-pieces development by creating an account on GitHub. github.com 키보드로 검색어 선택 기능은 2편에서 [React] Debounce(디바운스) 적용한 검색어 자동완성 구현기 (2) - 검색어 키보드로 선택하기 1편 보러가기 [React] Debounce(디바운스) 적용한 검색어 자동완성 구현기 (1) 전체코드 (관련 코드는 SearchPage와 ..

[Typescript] 이미 존재하는 CRA에 Typescript 추가하기

CRA 생성할 때부터 Typescript 설정하기 npx create-react-app my-app --template typescript 이랬다면 좋겠으나... 때로는 CRA 설치하고 온갖 라이브러리 설정도 다 해놓은 다음에 Typescript 설정을 하지 않았다는 사실을 알고 멘붕이 오기도 한다. 그 때는 TS에 필요한 패키지와 설정을 추가로 해주면 된다. 이미 존재하는 CRA에 Typescript 추가하기 1. 패키지 설치 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 2. 파일 확장자 .ts 혹은 .tsx로 바꾸기 jsx 문법을 사용하고 있던 파일은 .tsx로, 순수 js 파일은 .ts로 확장자..

[Typescript] interface vs type

Interface와 Type Alias 일반적으로 object 타입에 대해 타입 선언을 할 때에는 둘에 별 차이가 없다. 선언 예시 interface Cat { name: string; age: number; } type Cat = { name: string; age: number; } // 사용은 둘 다 똑같다 const kitty: Cat = { name: 'Kitty', age: 5 } 다만 공식 문서의 type alias와 interface 항목을 보면 다음과 같이 정의되어 있다. type alias A type alias is exactly that - a name for any type. 변수 옆에 콜론(:)으로 직접 타입을 지정하던 것을 여러번 재사용하고 별칭을 지어주기 위한 목적으로 만들어..

[React] React에서 불변성을 지켜야 하는 이유, 불변성이란?

불변성이란? react에서는 불변성을 지켜야 한다고 말한다. 불변성이 무엇인지부터 알아보자. 불변성은 어떤 객체나 배열의 내부 값이 직접 변경되지 않아야 한다는 것을 의미한다. 불변성을 지키기 위해서는 새로운 배열, Object를 생성해서 할당한다. let arr1 = [1, 2, 3]; arr1.push(4);// 배열을 직접 건드렸으므로 불변성을 해치게 된다. arr1 = [1, 2, 3, 4];// 새로운 배열을 할당했다. 참조값이 바뀌게 된다. // or arr1 = [...arr1, 4]; arr1 = arr1.concat(4); 어떤 배열이 불변성을 지킨다면 그 배열은 immutable 하다고 말하기도 한다. 불변성은 immutability라고 한다. React에서 불변성을 지켜야 하는 이유 ..

[Git] github 리뷰에서 Add single comment와 Start a review 차이점

PR 리뷰하는 법은 이 두 글을 참고해 공부했다. https://devlog-wjdrbs96.tistory.com/231 https://xo.dev/articles/github-collaboration-guide Comment와 Review 달기의 차이점 PR 리뷰를 하는 과정을 찾아보는데 둘의 차이점에 대해 궁금함이 생겼다. 이렇게 앞에 있는 + 버튼을 누르면 해당 줄의 아래에 코멘트 창이 생기는데 comment 달기와 review 달기 둘에는 무슨 차이가 있을까? 결론부터 말하자면 comment와 review 모두 comment이다. 다만 등록되는 시기와 알람 여부가 다르다. comment는 제출하면 바로 등록되고, 매 등록마다 알람이 울린다. 여러 줄을 리뷰해야 한다면 추천하지 않는다. review..

[Project/React] 다크모드 구현으로 Context API 학습하기

개요 context API를 학습하기 위해 다크모드 on/off 기능을 만들어보기로 했다. 스위치를 토글하면 이미지가 해 -> 달로 바뀌고 테마 색이 바뀌는 간단한 사이트이다. 순수하게 React의 기능만 사용해 만들고 싶어서 styled-components를 쓰지 않고 만들었다. 👉github로 전체 코드 보러가기 만들면서 참조한 글 (Thanks to) 리액트 다크모드 구현하기 feat. styled-components & context API 토글 스위치 버튼 만들기 Context API란 우리가 Context API라고 하는 것은 js의 history API처럼 Context 라는 기능을 사용할 수 있도록 해주는 기능 모음을 의미한다. Context는 전역적으로 컴포넌트끼리 값을 공유할 수 있도록..

[Project] 포카리뷰 (Phoca Review) 만들기 회고 | 토이프로젝트

포카리뷰 (Phoca Review) 개요 독서/영화 감상문을 포토카드 형태로 남길 수 있는 웹 어플리케이션. 분류: 토이프로젝트, 개인 기간: 2022.10.20 ~ 2023.02.15 주요 기능: 만든 카드 앨범 형태로 모아보기, 카드 상세보기, 카드 에디터, 이미지 컨버팅 사용 툴: React, Typescript, Emotion, html2canvas(이미지 컨버팅 library) / Express, ajv (JSON validator library) 예상 이용자: 작품 감상문을 간단하게 남기고 싶은 사람 / 포토티켓 처럼 작품의 한 장면을 넣은 카드를 만들고 싶은 사람 link: github 1. 만들게 된 계기 종종 문학작품이나 영화에서 좋아하는 구절을 발췌해 감상문을 쓰는데, 이미지도 많이 첨..