기록

https://youtu.be/RCb0UF7Lu90 (제로초님 강의를 듣고 정리한 내용) 웹팩 데브서버 & 핫 리로딩 복습 코드를 수정할 때마다 npm run build를 해야 하는 단점을 해결해줌. 이름 그대로 데브서버. 개발용 서버 핫 리로딩: 앱을 처음부터 다시 시작하지 않고 새로운 코드 변경에 따른 코드 변경 사항만 표시하며 변경된 코드에만 적용. 변경점을 감지함. 리로딩과의 차이점: 리로딩은 새로고침을 함. 그러면 기존 데이터가 사라짐 핫리로딩은 기존 데이터를 유지하면서 변경사항을 바꿔줌. 웹팩의 빌드 대상 파일이 변경 되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해줍니다. 매번 명령어를 치는 시간과 브라우저를 새로 고침하는 시간..

비긴메xx를 이용하다가 든 생각이다. 어떠한 글을 클릭하면, 처음엔 전체적인 틀만 존재하고, 해당 글 data는 아직 받아오질 않아서 undefined명 나 since: NaN처럼 빈값 형태로 나타났다가 데이터를 받아오면 비로소 사이트가 완성되어, 현재 팀원 1명 이런 식으로 나타나는 것을 보면서 이게 바로 CSR의 단점인가? 싶었다. CSR(Client Side Rendering)은 빈 HTML을 가져오고, 그 안에 입력된, 번들링된 js 파일로 화면 전체를 그려내는 방식. 첫 페이지 로딩 때 모든 파일을 내려받기 때문에 초기 로딩 속도는 느리지만, 페이지 이동시 그때 그때 필요한 데이터만 불러오면 된다는 장점. 그러나 초기 화면엔 data가 없어서 똑똑한 구글을 제외하고는 빈 페이지로 인식할 수가 있..

참조: 리액트 공식문서, https://youtu.be/hSdVDBPTT0U setState "setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리렌더링됩니다." 예전 state 값으로 새로운 state를 만들 때, 즉 이전 값을 기반으로 다음 값을 바꿀 때는 함수를 사용하자. 함수를 사용하면 이전 값을 인자로 접근할 수 있기 때문이다. 리액트의 state는 객체라는 것은 이미 알고 있는 사실이다. 여기서 더 나아가 state의 내부 로직이 어떻게 동작하는지 정리해보려고 한다. 1. setState()는 비동기적으로 동작함. 2. setState()를 연속적으로 호출했을 때, 리액트 내부적으로 batch 처리를 함. 3. setState()에..

cra로 프로젝트 생성하면 바로 터미널에 뜨는 문구 npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd 프로젝트명 npm start

medium.com/humanscape-tech/react%EC%97%90%EC%84%9C-%ED%95%B4%EB%B3%B4%EB%8A%94-%EC%BD%94%EB%93%9C-%EC%8A%A4%ED%94%8C%EB%A6%AC%ED%8C%85-code-splitting-56c9c7a1baa4 React에서 해보는 코드 스플리팅 (Code Splitting) 안녕하세요, 휴먼스케이프 개발팀 oliver입니다. medium.com 코드 스플리팅은 webpack같은 모듈 번들러들의 중요한 역할 중 하나다. 하나의 큰 번들을 여러개의 작은 번들들로 쪼개준다. 이를 잘 사용하면 필요할 때 필요한 번들만 로드 함으로써 초기 로딩시간을 줄여주고, 유저가 현재 필요하지 않은 코드는 로드 하지 않음으로써 앱의 성능도 크게..

귀찮은 폼 작업을 간편하게 1. 아이디 기억 const rememberMeChecked = localStorage.getItem("rememberMe") ? true : false; const [rememberMe, setRememberMe] = useState(rememberMeChecked); const rememberMeHandler = () => { setRememberMe(!rememberMe); }; 로컬스토리지에 저장된 이메일이 있는지 getItem 해오는 변수 rememberMeChecked rememberMeChecked의 참/거짓에 따라서 rememberMe라는 state가 결정됨 로그인할 때 체크를 누르면 현재 rememberMe state의 반대로 업데이트됨. 2. 에러메시지 con..

devhyun.com/blog/post/16 리엑트 프로젝트(CRA) IE11에서 실행하기 - 데브현 리엑트 개발환경은 기본적으로 Javascript ES6 이상의 문법을 사용합니다. 그러다 보니 구형 브라우저 특히 IE에서 흰색 화면을 맞이하게 됩니다. react-app-polyfill, babel을 활용하면 이러한 문제를 해결 devhyun.com boiler-plate client package.json 코드를 비교하다가 알게 된 라이브러리 익스플로러 호환 문제를 해결할 수 있다고 한다.

보일러플레이트 복습을 하는데 자꾸 Uncaught (in promise) Error: Request failed with status code 504 GET 504 (Gateway Timeout) 이런 에러가 발생해서 막힌다.. 해결하지 못하고 있다,,, m.blog.naver.com/PostView.nhn?blogId=seeappoa&logNo=220543111373&proxyReferer=https:%2F%2Fwww.google.com%2F 504 Gateway timeout HTTP 원인 504 Gateway timeout HTTP 504 원인HTTP 오류 코드하나. 원인은 인터넷의 반대편에있는 서버 - 서... blog.naver.com 504 Gateway timeout HTTP 504 원인 H..

리액트에선 state가 비동기임. 비동기적으로 바뀜 dispatch에서 state 바꾸는 것도 비동기임(리덕스는 동기적으로 바뀜) 따라서 비동기인 state에서 무언가를 처리하려면 무조건 useEffect를 쓰자. useEffect는 state가 바뀌었을 때 동작하는 함수를 작성할 수 있음. 상태값이 변경돼서 리렌더링되고, 호출됨(렌더링 결과가 실제 돔에 반영된 직후) 두번째 인자로 넣는 배열을 의존성배열이라고 하는데, 의존성배열이 바뀔 때만 첫 번째 인자로 넣은 함수가 실행됨. 빈 배열을 작성하면 최초 렌더링됐을 때 한 번만 실행됨

드디어 투두리스트 리액트 버전을 만든다. 가능하면 혼자 힘으로 해결해보고,, 완성하면 리드미를 열심히 써보자 설치 목록 npx create-react-app to-do-list-react npm i styled-components npm i react-icons npm i react-live-clock npm i react-moment npm i moment-timezone 아 그래도 순조롭게 진행되고 있었는데,, const TodoProvider = ({ children }) => { const [state, dispatch] = useReducer(todoReducer, initialTodo); 이 부분.. useReducer에 리듀서, 초기값 순서로 넣어야하는데, 반대로 넣었더니 안되었다. 리덕스랑..