분류 전체보기227 [Next] Next.js에서 라우팅 사용법 사용자가 접속한 URL의 path에 따라서 콘텐츠를 응답해주는 작업을 '라우팅'이라고 한다. 어떤 프레임워크든 그 중심에는 반드시 라우팅이 있고 이것은 웹개발의 가장 중요한 요소 중 하나이다. app의 layout.js import Link from 'next/link' import './globals.css' export const metadata = { title: 'WEB', description: 'Generated by kangin', } export default function RootLayout({ children }) { return ( WEB html css {children} Create Update ) } app의 page.js import Image from 'next/image'.. 2023. 10. 24. [Next] Next.js 시작하기 (설치 방법) Next.js 를 시작하려면 우선적으로 설치되어야 하는 것이 있다. Node.js VSCode Node.js 설치하러 가기(LTS 버전 추천) https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org VSCode 설치하러 가기(자신이 쓰는 에디터가 있다면 SKIP!) https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging mod.. 2023. 10. 24. [JS] 동기, 비동기에 대해(Synchronous vs Asynchronous) 동기 vs 비동기 차이점부터 설명하자면, 동기는 '직렬적'으로 작동하는 방식이고 비동기는 '병렬적'으로 작동하는 방식이다. 즉, 비동기란 특정 코드가 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미한다. 비동기 처리의 예 Web API Ajax setTimeout 왼쪽 차트는 비동기로 작동하는 방식이다. 한번에 여러 테스크가 동시에 병렬적으로 실행된다. 오른쪽 차트는 동기로 작동하는 방식이다. 하나의 테스크가 끝날 때 까지 기다렸다가 다음 테스크가 실행된다. ※ 총 실행 시간으로 따지면 동기방식이 더 느리다. 동기(Synchronous)란? 직렬적으로 테스크를 수행하는 방식이다. 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식이다. 어떠한 테스크를 처리할 동안 .. 2023. 10. 20. [JS] Promise와 async/await의 차이 자바스크립트에는 비동기 처리를 다룰 수 있는 방법이 여러가지 있다. 주로 callback, Promise, async/await 등을 활용한다. Promise Promise는 자바스크립트에서 비동기 처리에 사용되는 객체이다. 내용은 실행 되었지만 결과를 아직 반환하지 않은 객체라고 이해하면 편한다. Promise의 3가지 상태 Pending(대기) Fulfilled(이행) Rejected(실패) 비동기 처리가 완료 되지 않았다면 Pending 완료되었다면 Fulfilled 실패하거나 오류가 발생했다면 Rejected 상태를 갖는다. Promise 사용 예 const condition = true; const promise = new Promise((resolve, reject) => { if (condi.. 2023. 10. 19. 이전 1 2 3 4 5 6 ··· 57 다음
