페이지 레이아웃 생성

페이지 레이아웃 생성 0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) 1. 페이지 레이아웃 생성 - 페이지 레이아웃을 생성해봅시다! - #1. 생성하기 전에 먼저 다음과 같은 코드를 VScode의 터미널에 입력해, 시맨틱 UI react를 설치해줍니다. → 이를 이용해서 레이아웃을 작업할 예정입니다. npm install semantic-ui-react semantic-ui-css - #2. 그 후, 만들었던 next 폴더에 src 폴더를 생성한 뒤, 그 폴더 안에 component 폴더를 더 생성합니다. - #3. component 폴더 안에 Top.js 파일과 Footer.js 파일을 생성합니다. - #4. Top.js 파일에 다음과 같이 입력해줍니다. import ..

• format_list_bulleted Next.js
• · 2023. 12. 1.
• textsms

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 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 Next.js
• · 2023. 12. 1.
• textsms

동기와 비동기

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

• format_list_bulleted 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 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 HTML+CSS
• · 2023. 10. 28.
• textsms