1. 개요 React를 공부하면서 어떻게 보면 가장 기초이고, 가장 중요한 부분인데 사실 이제야 포스팅한다는 것은 이제까지 리액트를 잘못 사용해왔다는 반증이기도 한데... 조금 더 심도있게 리액트를 알아보기 위해서 렌더링이란 무엇이고, 렌더링의 조건이 어떻게 되는 건지 확인차 적어보려고 합니다. 2. 렌더링이란? 아래의 Welcome을 컴포넌트라고 부릅니다. (정확히는 함수 컴포넌트) function Welcome(props) { return Hello, {props.name}; } 리액트에서 렌더링이란 컴포넌트가 현재 props와 state의 상태에 기초해 UI를 어떻게 구성할지, 컴포넌트에게 작업을 요청하는 것을 의미합니다. 3. 렌더링 과정 3-1. React의 렌더링 기본적인 리액트의 렌더링 개념..

setupProxy.js const proxy =require("http-proxy-middleware"); module.exports = function(app) { app.use( proxy.createProxyMiddleware("/api1", { //api triggers proxy to run, whenever meet the api1, start using proxy target: "

안녕하세요. front-end 개발시 개발자들을 괴롭히는 cors에 대해 알아보고 더 나아가 프록시 설정하는 방법에 대해 알아봅시다. 현재 프로젝트의 front-end 부분이 거의 맨땅의 헤딩인 수준이라... 이것 저것 많은 이슈가 나오고 있는데.. 그 중 하나가 cors입니다. 웹의 동작을 살펴보아요. 1. 크게 브라우저, 웹 서버, api서버 세 가지로 나눠봅시다. 2. 브라우저에서 url(https://naver.com)을 통해 웹서버로 요청을 보냅니다. 3. https://naver.com > 네이버 웹서버에선 해당 html, css, js등의 파일을 브라우저에 로드해줍니다. 4. 로드된 html,css, js등의 파일들은 브라우저에서 화면으로 출력해줍니다. 5. 이 과정에서 로드된 파일들은 브라..

현재 프로젝트에서 리액트로 개발하는 중에 api서버에서 가져온 데이터 처리를 위해 react query를 쓸생각으로 정리하는중에 좋은 글을 발견하여 공유드립니다. react query 리엑트 쿼리는 서버에서 가져온 데이터를 웹 브라우저 앱에서 사용하기 쉽게 도와주는 기술입니다. 서버는 클라이언트에게 데이터베이스에 있는 정보를 전달해주는 역할을 하는데요, 여기서 서버는 api 서버, 클라이언트는 웹 브라우저에서 실행되는 우리가 작성한 리엑트 앱을 의미합니다. 데이터베이스에서 가져온 데이터를 클라이언트에서 보여주기 위해 우리는 ajax를 이용하는데요, 이 때 서버에서 가져오는 데이터를 서버의 상태 라고 이야기 합니다. 상태라고 하면 클라이언트에서만 사용하는 용어인줄 알았는데요, 서버에도 상태가 있나요? 네,..

redux 공부한 내용 정리 - redux사용하면 컴포넌트들이 prps없이 state공유가능 설치 npm install @reduxjs/toolkit react-redux -store.js 생성 및 문법 import { configureStore } from '@reduxjs/toolkit' //state하나당 한세트 let user = createSlice({ name: 'user', //state명 initialState: 'kim' //state값 }) //userState같은거 //state가 array, object일때 let user2 = createSlice({ name: 'user2', initialState: { name: 'jhon', age: 25 }, //수정을 위한 함 reduce..

여러 강좌나 개발 문서를 따라가다 보면 npm install 에 --save-dev 나 -g 등 여러 접미어가 붙은 것을 확인할 수 있는데요, 이것들은 무엇이고 어떤 역할을 하는지 알아보겠습니다. 1. npm install 과 패키지 먼저 간단하게 npm install 의 동작을 둘로 나누면 다음과 같습니다. 패키지명을 명시해 특정 패키지를 설치하는 동작 패키지명을 명시하지 않고 package.json 파일의 의존성을 설치하는 동작 예를 들어 $ npm install express 를 실행하면 express 모듈이 설치될 것이고, $ npm install 을 실행하면 package.json 에 포함된 의존성 패키지들이 일괄적으로 설치됩니다. 2. 특정 패키지를 설치할 때 특정 패키지를 설치할 때는 크게 ..