도각도각 필기노트

1. Build pack 정의 CRA(Create-React-App) 로 만든 리액트 앱은 Build Pack을 세팅해주어야 한다. Settings > BuildPacks에서 추가해준다. node.js를 선택해주고, 아래 링크는 직접 add 해주자. https://github.com/mars/create-react-app-buildpack.git 2. Package.json 수정 engine으로 node, npm의 권장 버전을 명시해주고, scripts 안에 heroku-prebuild, heroku-postbuild도 명시하였다. "version": "0.1.0", "private": true, "engine": { "node": "16.x", "npm": "8.x" }, "scripts": { "st..

Introduction 결론부터 말하자면, 아래와 같은 이유들로 상태관리 라이브러리에 대해 반드시 공부해야겠다고 생각했다. 1. 여러 개의 component에 props를 반복 전달하는 것이 복잡하고 귀찮기 때문 2. context API보다 전역 관리 변수를 효율적으로 관리할 수 있다. 3. (이건 공부하다가 알게 된 것인데) subscribe로 변경사항이 생긴 컴포넌트만 리렌더링할 수 있다. - Redux가 필요한 이유 내가 생각하기에 Redux가 필요한 이유를 가장 간단하게 잘 설명하는 영상이다. React Hooks로 충분히 커버가 가능하다고 생각했던 나의 어리석음을 바로잡아 주었던 글. React Hooks와 Redux에 대한 개념을 바로잡기에 좋은 글이다. [번역] React Hooks가 Re..

Typescript와 React를 이용한 프로젝트를 진행중이다. 현재 초기 개발단계인데 Naver map api를 사용할 일이 생겼다. 그래서 그 사용법과 현재까지 맞닥뜨린 문제(CORS 에러)들을 정리하고자 한다. navermaps 패키지 설치 우선 React/Typescript 에서 네이버 맵을 사용하기 위해 typescript를 위한 navermaps 패키지를 설치한다. npm install --save @types/navermaps javascript를 사용할 경우 react-naver-maps 패키지를 설치해도 되는데, 해당 패키지에는 typescript 정의가 되어 있지 않아서 위 패키지를 설치해줘야 한다. index.html 에 script 추가 public/index.html 파일에서 bo..

프로젝트를 하던 도중 .mp4 영상을 삽입해야 했다. 평소 이미지 파일 삽입하던 대로 src/assets/ 폴더 아래에 videos 폴더를 만든 뒤 삽입하려 했으나 제대로 작동되지 않았다. 결국 구글링을 통해 https://stackoverflow.com/questions/60794257/react-js-react-player-how-to-play-local-video을 참고해서 영상을 성공적으로 삽입했었다. 해결책은 public 폴더에 videos폴더와 그 아래 영상들을 위치시키고, 필요한 곳에서 url='videos/video1.mp4' 을 통해 불러와 사용하는 것. 로컬로 실행할 땐 아무 문제가 없었기에 역시 스택 오버플로우가 짱이야 하면서 넘어갔었는데... 며칠 뒤 문제가 생겼다. 빌드가 제대로 ..

폴더 구조 저는 폴더 전체 구조를 잡을 때 apis, assets, pages, components, styles 폴더로 나누고, 그 안에 index.js 파일로 관리합니다. pages 폴더에는 말 그래도 웹에 띄우는 페이지 단위가 들어갑니다. components 폴더에는 페이지 안에 컴포넌트로 구성될 요소들이 들어갑니다. 컴포넌트로 따로 빼놓으면 여러 페이지에서 해당 컴포넌트를 재사용할 수 있기 때문에 분리시키는 게 좋습니다. assets 폴더에는 image, video, font 등을 저장합니다. apis 폴더에는 서버와의 통신에 필요한 get, post, put, delete api 구조의 틀을 잡아놓고 사용합니다. styles 폴더에는 css 파일들을 관리합니다. 얼마 전 IT 연합 학회에서 게시..

input으로 이메일 입력 받고 check 버튼을 눌러서 형식 체크를 하려는게 내가 짜려는 코드의 목적이었다. 그런데 자꾸 버튼을 누르면 첫번째 클릭은 무시되고 두번째 부터 정상적으로 작동하는 문제가 있었다. 왜 그런지 콘솔창에 찍어보니, 입력값이 들어올때마다 useState로 넣어놓고 있었는데 이게 원래의 입력값보다 한박자씩 늦게 useState 변수에 들어가면서 자연스럽게 이메일 형식 체크 이벤트도 하나씩 늦는 것이었다. 그 전에도 버튼 click 이벤트 등을 통해 useState 값을 변경하고 반영하는 코드가 있으면 항상 클릭 한번씩 반응이 느리곤 했었는데 그 이유를 알아냈다. 바로 useState의 비동기 문제 때문이었다. useState를 통한 변수 상태 변경은 비동기식으로 이루어지기 때문에 내..