본문 바로가기

분류 전체보기33

개발 용어 간단 정리 React 더보기 ▶ Single-page application, SPA HTML 페이지와 애플리케이션 실행에 필요한 JavaScript와 CSS 같은 모든 자산을 로드하는 애플리케이션 페이지 또는 후속페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않으므로 페이지가 다시 로드되지 않습니다. ▶ 컴파일러 JavaScript 컴파일러(Compiler)는 JavaScript 코드를 변환하고 다른 형식으로 JavaScript 코드를 반환합니다. 일반적으로 ES6문법을 구형 브라우저에서도 동작할 수 있도록 변환하는 데 많이 사용합니다. Babel은 React와 함께 가장널리 사용되는 컴파일러 입니다. ▶ 번들러 분리된 JavaScript와 CSS 모듈 코드를 브라우저에 최적화된 여러 개의 파일로 결합합니.. 2022. 12. 23.
[Next.js] 기본 개념 정리 Next.js 란 ? Next.js 는 React에서 서버 사이드 렌더링 (Server Side Rendering)을 쉽게 구현할 수 있도록 도와주는 프레임워크입니다. Next.js의 Pre-rendering React의 CSR방식은 첫 로딩 시 모든 페이지에 필요한 JS파일을 다운받아 파일이 클 수록 로딩이 느려집니다. 또한 국내 검색 엔진들은 HTML 파일을 파싱하기 때문에 SEO에 좋지 않습니다. Next.js는 페이지에 필요한 자바스크립트와 CSS 파일만 받을 수 있어 첫 로딩에 빠르고, 자연스러운 HTML, CSS, JS파일을 받기 때문에 SEO에 용이합니다. Static Generation와 Server-side Rendering Next.js는 두 가지의 방식의pre-rendering이 있.. 2022. 8. 29.
[React] Axios 사용법 정리 Axios란? Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. 지원브라우저 Axios와 Fetch의 차이점 X Axios Fetch 1 요청 객체에 url을 가지고 있다 요청 객체에 url이 없다 2 설치과정이 필요하다 대부분의 최신 브라우저에 내장되어 있어 설치가 필요없다 3 내장된 XSRF 보호기능이 있다 기능 없음 4 data 속성을 사용한다. body 속성을 사용한다. 5 data에는 객체가 포함되어 있다 body는 문자열화 되어야 한다. 6 status가 200 이고 statusText가 'OK' 일 때 요청은 정상이다 응답 객체에 OK 속성이 포함되어 있으면 요청은 정상이다 7 JSON 데이터의 자동 변환을 수행한다. json.. 2022. 8. 21.
[React] Lists and Key React에서 동적인 배열을 렌더링해야 할 때는 자바스크립트 배열 내장함수인 map()을 사용합니다. 아래는 peoples라는 배열의 전체 요소를 ...로 렌더링 하는 예제입니다. import React from 'react' const Test = () => { const peoples = [ {id:0, name: 'Lily', age: 14}, {id:1, name: 'Sophia', age: 15}, {id:2, name: 'Isabella', age: 11}, {id:3, name: 'Zoe', age: 19} ]; const listItems = peoples.map(people => {people.name} ) return {listItems} } export default Test 위 코드.. 2022. 8. 12.