Next.js 설치

Next.js 설치 1. Next.js 설치 - 이제 Next.js를 설치해봅시다! (Next.js 사이트를 참고하였습니다) - #1. 먼저 원하는 폴더를 생성 후, 터미널에 들어가 다음과 같이 입력해줍니다. → 여러 선택사항이 나오는데, 원하는 것을 선택하면 됩니다. npx create-next-app@latest - #2. 설치가 끝났으면 VScode로 들어가 다음과 같이 입력하여 접속해봅시다. → 브라우저에 localhost:3000을 입력하면, Next.js 페이지가 나오게 됩니다! npm run dev - #3. index.js에 들어가 다음과 같이 수정해보고 다시 들어가봅시다. → 수정되어 출력되었음을 확인할 수 있습니다. import { Inter } from "next/font/google..

• format_list_bulleted Front-End Study/Next.js
• · 2023. 12. 1.
• textsms

Next.js

Next.js 1. Next.js란? - Next.js는 React 기반의 웹 애플리케이션을 쉽게 개발할 수 있게 도와주는 오픈 소스 JavaScript 프레임워크입니다. - 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅 등을 지원합니다. 2. 특징 및 장점 - 서버 사이드 렌더링(SSR) - 페이지를 서버에서 렌더링하여, 초기 로딩 속도를 향상시키고 검색 엔진 최적화를 개선합니다. - 정적 사이트 생성(SSG) - 빌드 시점에 미리 페이지를 생성하여, 성능을 향상시킵니다. 특히 정적 컨텐츠에 적합합니다. - API 라우팅 - 페이지 간의 이동이 간편하며, 파일 시스템을 기반으로한 경로 매핑이 가능합니다. - 개발 환경 간편화 - 자동 리로딩, 코드 스플리팅, 모듈 사티일링 등..

• format_list_bulleted Front-End Study/Next.js
• · 2023. 12. 1.
• textsms

동기와 비동기

동기와 비동기 1. 동기와 비동기 - 동기와 비동기 실행 방식은 코드의 동작 및 효율성을 제어하는 데 중요한 역할을 합니다. 2. 동기 (Synchronous) - 동기 코드 실행은 순차적으로 진행되는 것을 의미합니다. 한 작업을 완료한 후, 다음 작업이 실행됩니다. - 동기 코드 실행 방식은 코드 블록이 위에서 아래로 순차적으로 실행되는 것이 특징입니다. - 동기 코드 실행은 주로 함수 호출, 루프, 파일 처리 등에서 사용됩니다. - 하나의 작업이 지연되면, 모든 작업이 지연되는 단점이 있습니다. console.log("첫 번째 실행"); console.log("두 번째 실행"); console.log("세 번째 실행"); 3. 비동기 (Asynchronous) - 비동기 코드 실행은 순차적으로 진행되..

• format_list_bulleted Front-End Study/JavaScript
• · 2023. 11. 10.
• textsms

box-sizing 속성

box-sizing 속성 1. box-sizing 속성 - 박스 모델에서 요소의 크기를 계산하는 방법을 제어하는 데 사용되는 속성입니다. 2. box-sizing의 주요 값 - content-box (기본값) - 요소의 크기를 요소의 콘텐츠 영역에 따라 계산합니다. - 요소의 width와 height는 콘텐츠의 크기만을 고려하며, padding 및 border은 요소 크기에 추가됩니다. - border-box - 요소의 크기를 요소의 테두리(border)를 포함한 영역에 따라 계산합니다. - 요소의 width와 height는 콘텐츠와 padding, 그리고 border까지 고려한 크기가 됩니다. - initial - 기본값으로 설정합니다. - inherit - 부모 요소의 속성값을 상속받습니다. 3. 예..

• format_list_bulleted Front-End Study/HTML+CSS
• · 2023. 11. 4.
• textsms

HTML 규약 및 관례

HTML 규약 및 관례 1. HTML 규약 및 관례 - HTML에는 다양한 규약과 최선의 관례가 존재합니다. - 이는 웹 페이지의 명확한 구조 및 내용을 정의하고, 간편한 유지 보수가 가능하며, 웹 접근성 및 크로스 브라우징 문제를 최소화할 수 있습니다. 2. 문서 형식 선언 - HTML 문서의 시작 부분에 적절한 문서형식 선언을 추가해야 합니다. (HTML5 기준) 3. 문서 구조 - HTML 문서는 일반적으로 다음과 같은 구조를 따릅니다. 3. 유요한 HTML - HTML 문서는 유효한 마크업을 가져야 합니다. - W3C Markup Validation Service와 같은 도구를 사용하여, 문서를 유효성 검사할 수 있습니다. 4. 의미 있는 태그 사용 - HTML5에서는 의미 있는 태그를 사용하여,..

• format_list_bulleted Front-End Study/HTML+CSS
• · 2023. 10. 28.
• textsms

fetch 함수

fetch 함수 1. fetch( ) 함수 - 네트워크 요청을 보내고, 응답을 처리하기 위한 기본적인 웹 API - 웹 페이지 or 웹 패을리케이션에서 서버로 HTTP 요청을 보내고, 서버로부터 데이터를 받아올 수 있음 - 비동기적으로 작동하며, Promise를 반환함 2. 구문 - 각 매개변수와 메소드는 다음과 같음 - url : 요청을 보낼 URL 주소 - options : 요청에 대한 추가 설정을 정의하는 객체. HTTP 메서드, 헤더, 요청 본문 등 다양한 옵션 지정 가능 (선택) - .then( ) : fecth( )가 성공적으로 요청을 보내고, 응답을 받으면 실행되는 Promise의 첫 번째 핸들러. 여기서 응답을 처리 - .catch( ) : 네트워크 오류 or 요청 처리 중 발생한 다른 오..

• format_list_bulleted Front-End Study/JavaScript
• · 2023. 10. 26.
• textsms