Front-End Study89 CORS 에러?? 그게 뭔데. CORS는 무엇일까?CROSS ORIGIN RESOURCE SHARING🔖 특정 도메인 및 Origin의 웹 페이지가 다른 도메인을 가진 리소스에 엑세스를 가능케 하는 보안 메커니즘서버나 클라이언트가 정해진 헤더를 통해 서로 요청 및 응답에 반응할지 결정하는 방식동일 출처 정책(same-origin policy) 때문에 등장동일 출처 정책은 뭐지?🔖 동일한 출처의 리소스에만 접근하도록 엑세스를 제한하는 것출처는 "프로토콜", "호스트", "포트" 등을 의미🔖 만약 출처가 다른데도 엑세스를 허용한다면?중요한 개인정보나 로그인 정보 등이 오고가는 사이트에서 토큰을 발급받고 다른 사이트에 접속하면 이러한 토큰이 다른 사이트에도 옮겨갈 위험성이 있다.이러한 위험을 방지하기 위해 같은 출처일 때만 접근 가능.. 2024. 6. 4. 백엔드의 전유물인 API를 Next.js로 다룰 수 있다고?! 넥스트로 리퀘스트를 어떻게 조작할까?🔖 경로에 해당하는 리퀘스트를 처리하려면, 페이지 라우팅과 비슷한 방식으로 api/경로.js와 같은 파일을 만들고 default export한다.import type { NextApiRequest, NextApiResponse } from "next";type ResponseData = { message: string;};export default function handler(req: NextApiRequest, res: NextApiResponse) { res.status(200).json({ message: "Hello from Next.js!" });}리퀘스트 객체는 어떤게 있어?🔖 리퀘스트 객체 종류프로퍼티타입설명method문자열리퀘스트로 들어온 HTT.. 2024. 6. 3. 모던 리액트 딥다이브 - 3회차 [1-3, 1-4, 1-5] 1.3 클래스16.8 버전 전까지 모든 리액트의 컴포넌트는 클래스였다. 🔖 함수형 컴포넌트로 변경된지 얼마 되지 않은 리액트를 더 깊이 있게 알아보자.1.3.1 클래스란 무엇인가?🔖 특정 객체를 만들기 위한 일종의 템플릿과 같은 개념객체를 만들 때 필요한 데이터나 조작 코드를 추상화하여 더 편리하게 생성할 수 있도록 한다.JS에서 클래스로 하는 모든 것을 함수로 동일하게 할 수 있다. 🏷️ 클래스 작성법class Car { // constructor (생성자) 작성 // 최초 생성 시 어떤 인수를 받을지 결정 및 객체 초기화 constructor(name) { this.name = name; } // 메서드 honk() { console.log(`${this.name}이(가.. 2024. 6. 3. 모던 리액트 딥다이브 - 2회차 [1-1, 1-2] 1.1 자바스크립트 동등 비교🔖 리액트 가상DOM과 실제DOM의 비교, 컴포넌트 렌더링 여부, 변수나 함수의 메모이제이션은 모두 동등 비교를 기반으로 한다.1.1.1 자바스크립트의 데이터 타입🔖 원시타입 : 간단하게 객체가 아닌 모든 타입을 지칭한다고 해도 무방undefined : 선언 후 값을 할당하지 않을 시 자동으로 할당되는 값, undefined 하나만 할당 가능null : 값이 없거나 빈 값을 표현할 때 사용, null 하나만 할당 가능Boolean : true, false만 가질 수 있는 값, 주로 조건문에서 많이 사용(true나 false는 여러가지 값들로 암시적으로 표현 가능)Number : 숫자를 할당하는 값, 무조건 10진수로 해석되어 표현BigInt : ES2020에서 추가된 값,.. 2024. 6. 1. 공짜 렌더링 by Next.js Next.js의 프리(공짜아님)렌더링🔖 브라우저가 페이지를 로딩하기 전에 미리 렌더링 하는것을 의미서버 사이드 렌더링(SSR)정적 생성(SG): default정적 생성🔖 브로젝트 빌드 시점에 미리 HTML을 렌더링getStaticProps()Props 객체를 지정 후 페이지 컴포넌트에서 사용// getStaticProps()export async function getStaticProps() { const res = await axios("/products/"); const products = res.data; return { props: { products, }, };}// Page Componentexport default function Home({ products }.. 2024. 5. 31. Next.js : 리액트 말고 나 써라. Next.js는 어떤놈이야?Next.js는 오픈 소스이며, 프레임워크로 리액트와 함께 빠르고 사용자 친화적인 웹 앱 및 정적 웹 사이트를 개발할 수 있다.뒤에 소개할 다양한 기능들을 이용해 리액트 애플리케이션을 효율적으로 구축 및 성능을 최적화 할 수 있다.리액트와 Next의 차이는?🔖 서버 사이드 렌더링(SSR)과 정적 생성(SSG) 지원초기 로딩 속도의 향상과 SEO 개선에 용이하다.리액트의 클라이언트 사이드 렌더링(CSR) 또한 사용 가능하다.CSR에 비해 페이지 요청 시마다 더 빠른 성능을 제공한다.또한 CSR도 사용 가능하다. (유도리 있는 친구)🔖 라우팅 및 코드 분할페이지 라우팅 및 앱 라우팅을 통해 동적으로 페이지를 생성하고 필요 시 코드를 자동 분할한다.번들 크기를 줄이고 앱 성능 최.. 2024. 5. 31. 이전 1 2 3 4 5 6 7 8 ··· 15 다음
