당연한 개발자가 되자

설치하기 https://ckeditor.com/docs/ckeditor5/latest/index.html 에 접속합니다. 검색창에 React Component 를 검색합니다. 또는 아래의 사진과 같이 찾아갑니다. 사이트에 나와있는 방법으로 설치를 진행합니다. 기본설정 상단에 import 를 해줍니다. 원하는곳에 CKEditor Component 를 아래와 같이 작성해줍니다. { // You can store the "editor" and use when it is needed.console.log( 'Editor is ready to use!', editor ); } } onChange={ ( event, editor ) => { const data = editor.getData(); console.lo..

실행할 때 명령어로 변경( 일회성 ) // npm PORT=3002 npm run start // yarn PORT=3002 yarn run start package.json 으로 변경( 영구적 ) Mac, Linux # ... 이전 내용 생략 "scripts": { "start": "export PORT=3002 && react-scripts start", # ... 이후 내용 생략 Window # ... 이전 내용 생략 "scripts": { "start": "set PORT=3002 && react-scripts start", # ... 이후 내용 생략

React Context란 무엇인가 Context는 props를 전달하지 않고 어디서든 상태값에 접근할 수 있는 방법을 제공한다. Context는 단순히 값을 전달하는 파이프와 같다. 개념적으로는 종속성 주입을 한 형태이다. Context는 상태관리가 아니다. 상태관리란 시간이 지남에 따라 상태가 변경되는 방식을 말한다. redux와 state가 상태관리에 해당한다. 사용법 & 장단점 Context는 단순히 prop-drilling을 피하기 위한 목적으로 사용한다. 특정 구성 요소만 re-render 시키거나, 사이드 이펙트를 줄이기 위해 더 강력한 기능이 필요하다면 Redux를 사용하는게 좋다. 간단하게 사용할 수 있다는 장점이 있다. 초기에는 간편하게 사용할 수 있어서 좋지만 애플리케이션이 커질수록 ..

tsconfig.json 파일을 수정하는 방법 tsconfig.json 파일을 열어서 아래의 옵션들을 추가해줍니다. baseUrl 은 root( 최상위 폴더 ) 를 지정할 수 있는 옵션입니다. include 는 import 시에 해당 경로를 포함할 것인지 포함하지 않을 것인지를 설정할 수 있습니다. ( include 에 src 포함하지 않을 시 src/폴더 경로/파일이름 이고 포함했을 때는 폴더 경로/파일이름 입니다. ) 그러나 보통 절대 경로는 외부 파일을 불러올 때 사용하고, 내부 파일을 연결할 때는 상대경로를 많이 사용합니다. 상대 경로를 사용하는 것이 나중에 파일의 위치가 이동했을 때 유연하게 대처할 수 있고, 속도가 좀 더 빠릅니다.

기본적으로 서버와의 연동이란 서버에 react 로 만든 페이지의 요청이 들어오면 react 로 만든 index.html 을 전송해주는 것을 연동이라고 합니다. 먼저 간단한 express 프로젝트를 만듭니다. 그 다음에 react 프로젝트를 서버 프로젝트 안으로 넣습니다. ( 그전에 반드시 react 프로젝트를 빌드 해야합니다. ) 그 다음에 server.js 라는 파일을 만들어서 아래의 코드들을 작성해줍니다. 그리고 터미널에 아래의 명령어를 입력하면 서버를 실행할 수 있습니다. // nodemon 이 설치된 경우 nodemon server.js // nodemon 이 설치되지 않은 경우 node server.js 근데 여기서 유저가 http://localhost:8080/detail/0 로 접속을 하면 ..

async 함수 async 함수는 기본적으로 실행이 완료되는 것을 기다리지 않고 바로 다음 코드를 실행합니다. ajax, 이벤트 리스너, setTimeout, state 변경함수 들이 기본적으로 asynchronous ( 비동기적 ) 하게 동작합니다. 이런 비동기 함수들은 실행이 완료되는 것을 기다려주지 않기 때문에 무결성이 깨지거나 의도하지 않은 방식으로 동작할 수 있습니다. ( 위에 적은 state 변경 함수보다 아래 적은 state 변경 함수가 먼저 완료되어서 의도와는 다르게 작동하는 현상 등 ) 이런 상황을 동기적으로 순서에 맡게 처리하고 싶을 때는 useEffect 같은 훅을 사용해서 state 변동이 일어나면 실행하도록 세팅하는 방법으로 해결할 수 있습니다.

PWA 란 PC 는 바탕화면에, 모바일은 앱을 설치한 것과 같이 메뉴에 웹사이트 바로가기 아이콘이 생성되서 웹사이트를 앱처럼 설치해서 사용할 수 있도록 해주는 기술입니다. 장점 설치 마케팅 비용이 적습니다. 아날로그 유저들( 나이가 많으신 분들 ) 이 url 로 접속하고 이용하려면 어려울 수 있는데 PWA 를 이용해서 그 점을 해소해줄 수 있습니다. html, css, js 만으로 앱까지 대응할 수 있습니다. 푸시알림, 센서 등도 웹브라우저로 처리할 수 있어서 일반 앱에 비해서 기능적 하자가 적습니다. 단점 설치과정이 조금 이질적입니다. ( 앱스토어에 방문하지 않고 설치하기 때문 ) HTTPS 사이트여야만 합니다. PWA 사용법 먼저 PWA 가 세팅된 react 프로젝트를 생성해야합니다. create-r..

이번에 사용해 볼 기능들은 리액트가 업데이트되고나서 나온 신기능들 입니다. batch 기능 업데이트 사항 원래 batch 기능이란 state 변경 함수가 여러개 모여있을 경우에 state 변경함수마다 재랜더링이 되는게 아니라 맨 마지막 state 변경함수가 실행되고나서 한번만 재랜더링되는 기능을 말합니다. 이 batch 기능이 리액트 18버전 전까지는 ajax, setTimeout 같이 조금 늦게 동작하는 기능들의 내부라면 batch 기능이 작동을 안해서 모든 state 변경함수가 실행될 때마다 재랜더링 되었던게 18버전부터는 state 변경함수가 어디에 있던간에 상관없이 batch 기능이 잘 작동되도록 수정되었습니다. 즉, 이제는 어디에 state 변경함수가 있어도 맨 마지막 state 변경함수가 실행..

memo 를 사용한 자식 컴포넌트 재랜더링 막기 먼저 실험을 위해 자식 컴포넌트와 재랜더링 시키기 위한 state 를 만들어주고, 버튼도 하나 만들어줍니다. Cart.js 이렇게 만들면 실험용버튼 이라는 버튼을 누르면 Cart 라는 컴포넌트가 재랜더링이 될겁니다. 근데 이렇게 부모 컴포넌트가 재랜더링되면 모든 자식 컴포넌트도 같이 재랜더링 됩니다. 그런데 이렇게 모든 자식 컴포넌트가 같이 재랜더링되면 성능저하를 일으킬 수 있습니다. 이런 성능 저하를 막기위해서는 아래와 같이 코드를 작성해줘서 자식 컴포넌트가 재랜더링 되지 않도록 해주면 됩니다. ( 정확히는 자식 컴포넌트를 꼭 필요할 때만 재랜더링 시켜줘라 라는 의미입니다. ) 아래의 코드와 같이 컴포넌트를 생성할 때 memo 함수안에 생성해주시면 됩니다..

개발자 도구 React Developer Tools react 로 짠 코드인데 html 코드를 보면서 디버깅하는 것이 불편할 수 있는데 React Developer Tools 을 사용하면 Component 로 볼 수 있어서 디버깅을 편리하게 할 수 있습니다. 크롬 웹 스토어에 들어가서 React Developer Tools 를 설치합니다. 설치하고 나면 개발자 도구에 Componet 라고 보일겁니다. 이 기능을 사용하면 해당 컴포넌트의 구조, props, state, hooks 등 여러가지 정보를 한눈에 볼 수 있어서 편리합니다. 또 하나의 기능으로 profiler 라고 있습니다. 이 기능은 성능이 저하되는 컴포넌트를 찾을 때 사용합니다. 왼쪽 상단에 녹화 버튼을 누르고 이 페이지 저 페이지 막 이동을 ..