🌳Frontend/react

선언형 프로그램 어떻게 해야하는지 보다 무엇을 나타내야 하는지 설명하는 프로그램 React 공식페이지에서는 React는 선언형이라고 한다. 무슨 의미일까 ? 명령형 프로그램 예시 // Hello, World! 화면에 출력하기 // 순수 javaScript 명령형 코드 const root = document.getElementById('root'); const header = document.createElement('h1'); const headerContent = document.createTextNode( 'Hello, World!' ); header.appendChild(headerContent); root.appendChild(header); // React 코드 (선언적인) const heade..

HTML에서 자체적으로 제공하는 Geolocation API로 현재 사용자의 위치정보를 얻을 수 있다. navigator object 브라우저에 대한 다양한 정보를 제공하는 객체이다. 이navigator 객체를 이용해 geolocation 정보를 통해 위치정보를 얻을 수 있다. gelocation.getCurrentPosition 의 callback 함수를 통해, position 정보를 얻을 수 있다. navigator.geolocation.getCurrentPosition(success, error, [options]) 예시 function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + " Longitud..

Server-Side Rendering 각 요청마다 페이지 HTML이 서버에서 생성된다. 클라이언트에서는 React에서 JSON 데이터와 자바스크립트 코드를 사용하여 컴포넌트를 인터랙티브하게 만드는 동안 (예를 들어서, 버튼에 이벤트 핸들러를 붙이는 것 등) 빠르게 인터랙티브하지 않은 페이지를 보여주는데, 이때 서버에서 생성된 HTML이 사용된다. 인터렉티브하게 만드는 과정을 hydration이라고 부른다. Static Site Generation HTML이 서버에 생성되지만, SSR과 달리 요청마다 생성하는 것이 아니라 빌드타입에 한 번만 생성되며, HTML 이 CDN에 저장되어 매 요청시에 재사용된다. Next.js의 Network Next.js 어플리케이션의 경우, next.js 의 코드는 orig..

코드내부에서 SVG 파일을 import해서 쓰려면, svg파일이 컴파일러가 이해할 수 있는 코드로 변환이 필요하다. 그것을 도와주는 `@svgr/webpack` 을 설치하면 된다. 설치 npm i -D @svgr/webpack or yarn add -D @svgr/webpack next.config.js 수정 // next.config.js module.exports = { // ... 생략 webpack: (config) => { config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'], }); return config; }, }; 결과 import Logo from 'assets/logo.svg'; // .svg 확장자도 써줘야합니다. co..