개발자_승딱 개발자_승딱

nextjs 를 사용할경우 초기페이지를 ssr 을 통해서 보여주게 된다. ssr을 통해서 보여주게 될경우 서버에서 html css 가 파싱된채로 렌더트리를 받고 브라우저는 그리기만 하면 된다. 그리고 이후에 자바스크립트 코드를 받아오게 되는데 csr의 경우 Html (비어있음) 과 js 를 받아온뒤 js 를 실행하고 렌더링을 해준다. 따라서 css in js 의 형식으로 코드가 작성이 된경우 csr 에서는 css 가 반영된채로 초기 화면이 보여지지만 ssr 의 경우 초기페이지 보여준후 js 파일을 받아오는 사이에는 css 정보가 반영되지 않는다.(css in js. 형식인경우) 사용하다보면 화면이 처음에 하얀창에 글씨만 잇는경우 본적이 있을거다 개발자 도구 >> setting >> debugger >> ..

이전에는 multipageform > 스마트폰 출현 > singlepageapplication 필요해짐 (ServerSideRendering) (ClientSideRendering) 각각 url 변경의 의미가 다르다 ssr 에서는 새로운 요청을 의미하지만 csr 에서는 단지 페이지의 전환만을 이야기 한다. 변화된 페이지에 해당하는 데이터를 이용해 렌더링 한다. ssr 은 아예 그려진 페이지 를 받아오는 개념 이고 csr 은 빈페이지에 클라이언트측에서 페이지를 그린다. 기존의 ssr은 필요한 리소스가 있을때 url 변경하면서 요청 하면서 리소스가 반영된 페이지를 받아오지만 csr 같은 경우 모든리소스를 처음에 다 받아오고 url 변경시 가지고 있는 리소스를 이용해 클라이언트측에서 화면을 변경한다. csr ..

const urlSearchParams = new URLSearchParams(window.location.search); if (urlSearchParams.get('from') === 'mail') setSelectedTab(TabType.Privacy); 초기페이지를 주소쿼리문 보고 탭을 설정하고 싶어서 router.query.data 을 useEffect(()=> ~~,[]) 문 안에서 처리하려고 하는데 처리가 안됬다. 그래서 의존성에 router.query.data 를 추가를 해줬는데 찝찝해서 찾아봤다. next 에서 자동정적 최적화에 의해서 querydata null 인채로 먼저 hydration 하고 나서 쿼리데이터를 받아온다 그래서 위에처럼 받아오면 의존성배열없이 처음에만 확인해서 분기할수..

react.memo usememo usecallback 에 대해서 알아보자 react.memo 리액트는 컴포넌트를 렌더링 한뒤 이전의 렌더링된 결과와 비교후 변경된 사항을 확인한뒤 dom 을 업데이트 해준다. 개발자는 이전의 컴포넌트와 비교가 필요하지 않은 경우를 알고 있기 때문에 그러한 경우에는 컴포넌트를 react.memo() 로 래핑 해줄수 있다. 그렇게 하면 리액트는 컴포넌트를 렌더링 한뒤 그 결과를 기억(memoizing) 하기 때문에 새롭게 렌더링 하고 이전과 비교하는 과정을 생략할 수있게된다. (재사용) 이러한 memoizing 은 props 가 같을 대에만 적용이 되기 때문에 props 가 바뀌면 기존의 작업을 수행한다. export function Movie({ title, release..

state 변경이 있을 때 - react 에서 유동적인 데이터를 저장하기 위해서 state 라는 것을 이용한다. 이때 state 값을 바꿔주기 위해서는 state 를 직접 조작해서는 안되고 setState() 메서드를 이용해 주어야한다. 왜냐하면 리액트는 state 의 변경이 감지되면 리렌더링을 해주는 데 메서드를 사용하지 않고 직접 바꿔주게 되면 리액트가 state 의 변경을 감지하지 못하게 된다. 새로운 props이 들어올 때 - 전달받은 props 값이 업데이트 됬다면 리 렌더링 된다. 부모 컴포넌트가 렌더링 될 때 - 새로운 prop 이 들어오지 않더라고 부모컴포넌트가 리렌더링 된다면 자식컴포넌트 역시 리렌더링이 된다. shouldComponentUpdate에서 true가 반환될 때 - 각각의 컴..

브라우저의 dom 조작시 workflow 1. html 확인 > 브라우저가 dom-tree 생성 >> 파싱한다고 표현 2. css 각 element 의 style 요소를 domtree 에 결합 >> render-tree 생성 3. reflow(layout) & painting (reflow : 스크린 좌표값으로 각 노드의 위치가 주어진다) 노드가 하나만 바뀌어도 전체가 위와 같은 과정을 거쳐 다시 실행 되는 것이 비효율 적인 부분이다. 그렇다면 virtual dom 은 어떠한 방식으로 이러한 문제를 개선하는가? virtaul dom 은 dom 의 가벼운 복사본이다. (가벼운 복사본이라는 말은 동일한 속성을 갖지만 화면에있는 내용을 직접 변경할 수있는 실제 능력이 부족함을 의미한다.) 데이터가 업데이트 되..

(서론) 두번째 프로젝트: https://fineaple.com Fineapple 능력사무소 fineaple.com 사람들의 동네에서 소소한 재능을 나눌수 있는 커뮤니티 페이지를 만들었다. 커뮤니티 웹페이지의 특성상 페이지 구조가 간단할꺼라고 생각했고 굳이 전역에서 상태관리를 하지 않아도 문제될게 없을꺼같아서 상태관리 도구없이 단방향 데이터흐름으로 구성하였다. 하지만 프로젝트를 하다보니 전역공간에서 데이터를 관리하는것의 장점들을 너무 뼈저리게 느꼇다. 1. 페이지가 간단하다고 해서 컴포넌트구조도 간단한건 아니였다. 2. 렌더링에 필요한 데이터 외에도 로그인상태를 통해서 얻을수 있는정보들은 전역에서 관리해주면편하다. 3. 협업시에 전역상태관리를 안하면 많은 파일을 만지게 되고 이는 컨플릭트 유발 가능성을 ..

리액트를 사용해서 프론트단에서 서버로 api 요청을 넣을 때 보통의 경우 cors 문제가 일어나게 된다. 이때 해결방법은 백엔드에서 cors 설정을 해주는 것 입 보통의 경우 이지만 프론트에서도 해결할수 있는 방법이 있다. 프록시 설정을 해주면 되는데 이렇게 하게되면 내가 직접 서버에 요청을 보내는 것이 아니라 내가설정한 프록시주소가 서버에 요청을 보내는 형태가 된다 이때 서버쪽과 같은형태의 주소로 설정을 해준다면 same origin 이 되기 때문에 cors 문제가 일어나지 않게 된다. CRA 를 사용하지 않는 다면 webpack을 이용하여 webpack.config.ts 파일에서 > devServer proxy 설정을 해주면 된다. 그러나 이번에는 CRA 를 사용하는 경우에는 어떻게 적용할수 있는지 ..