React Router의 render와 component 차이 출처 React에서는 Route 를 사용해서 라우팅을 할 수 있다. Route 태그에서 내가 원하는 URI로 이동하게 되면, 어떤 컴포넌트를 렌더링할 것인가를 정할 수 있다. 예를 들면 아래와 같이 구현이 가능하다. 여기서 에 prop을 넘기고 싶다면 아래와 같이 구현이 가능하다. } /> 근데 위 코드는, 이미 존재하는 컴포넌트를 재활용하는 것이 아니라, 해당 컴포넌트를 렌더링할 때마다 unmount 후 새로운 컴포넌트를 마운팅하는 것이기 때문에, component에 function을 넘기는 것을 추천하지 않는다고 한다. 그래서 나온것이 render이다. } /> render를 사용하면 불필요하게 컴포넌트가 재마운트되지 않는다.
CSR은 왜 SEO 문제가 발생하는가? 참고 일단 SEO 문제가 없는 SSR방식을 살펴보자. SSR으로 구성하게 되면, 매번 새로운 HTML 파일을 응답하여 이를 바탕으로 매번 새로운 페이지를 그린다. 반면에 CSR은 여러개의 페이지로 존재하고 보이더라도, 내부적으로는 1개의 HTML파일이다. 클라이언트가 서버에 Ajax요청을 통해서 데이터를 받아와서 렌더링을 하기 때문에, 크롤러 입장에서는 root 페이지의 html 정보만을 수집하게 되기 때문이다. 모든 페이지가 하나의 HTML 파일 정보만을 바라보고 있기 때문에, 검색서비스 노출 및 SNS 공유 기능등이 원하는 대로 동작할 수 없다. 그런데 구글 검색엔진은 스크립트를 실행하고 비동기 요청에 의한 처리까지 분석할 수 있어서 CSR 사이트도 SEO가 가..
POST vs PUT 다시 짚고 넘어가자. RESTful API란? REST라는 것이 자원을 URI로 표현하고, 자원에 대한 행위를 HTTP 메서드(GET, POST, PUT, DELETE)로 표현하는 것이고, RESTful API는 위와 같은 스타일을 따르는 API라고 할 수 있다. POST vs PUT 자원에 대한 행위를 나타내는 4가지 메서드는 CRUD라고 할 수 있다. (Create, Read, Update, Delete) 여기서 POST는 Create에 매칭, PUT은 Update에 매칭된다. 즉, RESTful API를 사용하면, 자원에 대한 생성은 POST가 담당하고, 자원에 대한 수정은 PUT이 담당하는 것이다. PUT vs PATCH PATCH도 수정을 담당하는 메서드이다. 그럼 PUT도..
REST란? 출처 Representational State Transfer 자원을 이름으로 구분하여 해당 자원의 상태를 주고 받는 모든 것을 의미한다. 즉, 자원의 표현에 의한 상태전달을 하는 통신 방식을 일컫는다. 구체적으로 말하자면, HTTP URI를 통해서 자원을 명시하고, HTTP 방식(GET, POST, PUT, DELETE) 를 통해서 해당 자원에 대한 CRUD 작업을 적용하는 것이다. 장점 HTTP 프로토콜의 인프라를 그대로 사용해서, REST API 사용을 위한 별도의 인프라를 구축할 필요가 없다. HTTP 프로토콜의 표준을 따르는 모든 플랫폼에서 사용가능하다. 서버와 클라이언트의 역할을 명확하게 분리한다. 단점 사용할 수 있는 메서드가 4가지 밖에 없다. 구형 브라우저가 아직 제대로 지원..
SPA과 CSR은 같은 건가요? SPA는 CSR일까? => 아니다. SPA는 Single Page Application일 뿐이다. (반대말은 MPA) 말 그대로 하나의 페이지에서 실행된다는 뜻이다. 그냥, 맨 처음 화면을 다 받아오고 이후에는 데이터의 수정, 조회로만 홤녀을 표현하고 싶어서 CSR라는 기술을 선택한것입니다. 그러니까 SPA가 CSR 기술을 선택한것입니다! (반대로 MPA는 SSR 기술을 선택) 따라서 둘은 사실 비교할 수 없습니다. React는 SPA를 쉽게 만들 수 있는 UI 라이브러리인 것이고, Next.js, Gatsby.js가 SEO를 할 수 있도록 도와준다. (Vue는 Nuxt.js)
URI vs URL vs URN URI 정의 Uniform Resource Identifiler 통합 자원 식별자 인터넷에 있는 자원을 나타내는 유일한 주소이다. URI의 존재는 인터넷에서 요구되는 기본조건으로서 인터넷 프로토콜에 항상 붙어다닌다. URI 하위개념으로 URL, URN 등이 있다. URL Uniform Resource Locator 네트워크 상에서 사원이 어디있는지를 알려주기 위한 규약이다. 즉, 컴퓨터 네트워크와 검색 매커니즘에서의 위치를 지정하는, 웹 리소스에 대한 참조이다. 흔히 웹 사이트 주소로 알고 있지만, URL은 웹 사이트 주소뿐만 아니라, 컴퓨터 네트워크상의 자원을 모두 나타낼 수 있다. 그 주소에 접속하려면 URL에 맞는 프로토콜을 알야야 하고, 그와 동일한 프로토콜로 접속..
Currying과 Closure를 연관지어서 설명해주세요. currying 이란? 여러 개의 인자를 가진 함수를 호출할 경우, 파라미터의 수보다 적은 수의 파라미터를 인자로 받으면 누락된 파라미터를 인자로 받는 기법 => 함수 하나가 N개의 인자를 받는 과정을 n개의 함수로 각각의 인자를 받도록 하는 것. // curring function add(a){ console.log(`${a}`); return function(b){ console.log(`${a} + ${b}`); return a+b; } } // add(1)(2); 이때 add(1)이 선언되는 순간, 위의 함수가 return하는 익명함수는 closure가 되어서, 자신의 실행환경을 기억하는 상태로 동작하기 때문이다. 커링을 사용하면서 장점은..
코드 스플리팅 https://velog.io/@velopert/react-code-splitting 정의 우리가 js로 개발하게 되면, 기본적으로는 하나의 파일에 모든 로직들이 들어가게 된다. 그럼, 프로젝트의 규모가 커질수록 js 파일 용량도 커질 것이다. (특히 SPA) 용량이 커지면, 인터넷이 느린 환경에서는 페이지 로딩 속도가 느려질 것이다. 코드 스플리팅을 하게되면, 지금 당장 필요한 코드가 아니라면 따로 분리시켜서, 나중에 필요할 때 불러와서 사용할 수 있다. 이를 통해 페이지의 로딩 속도를 개선할 수 있다. 실습 CRA로 프로젝트를 만든다. src 디렉토리에 아래와 같은 notify함수를 만든다. // src/notify.js const notify = () => { window.alert(..
