![]()
페이지 레이아웃 생성 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 ..
![]()
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..
![]()
Next.js 1. Next.js란? - Next.js는 React 기반의 웹 애플리케이션을 쉽게 개발할 수 있게 도와주는 오픈 소스 JavaScript 프레임워크입니다. - 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅 등을 지원합니다. 2. 특징 및 장점 - 서버 사이드 렌더링(SSR) - 페이지를 서버에서 렌더링하여, 초기 로딩 속도를 향상시키고 검색 엔진 최적화를 개선합니다. - 정적 사이트 생성(SSG) - 빌드 시점에 미리 페이지를 생성하여, 성능을 향상시킵니다. 특히 정적 컨텐츠에 적합합니다. - API 라우팅 - 페이지 간의 이동이 간편하며, 파일 시스템을 기반으로한 경로 매핑이 가능합니다. - 개발 환경 간편화 - 자동 리로딩, 코드 스플리팅, 모듈 사티일링 등..
![]()
동기와 비동기 1. 동기와 비동기 - 동기와 비동기 실행 방식은 코드의 동작 및 효율성을 제어하는 데 중요한 역할을 합니다. 2. 동기 (Synchronous) - 동기 코드 실행은 순차적으로 진행되는 것을 의미합니다. 한 작업을 완료한 후, 다음 작업이 실행됩니다. - 동기 코드 실행 방식은 코드 블록이 위에서 아래로 순차적으로 실행되는 것이 특징입니다. - 동기 코드 실행은 주로 함수 호출, 루프, 파일 처리 등에서 사용됩니다. - 하나의 작업이 지연되면, 모든 작업이 지연되는 단점이 있습니다. console.log("첫 번째 실행"); console.log("두 번째 실행"); console.log("세 번째 실행"); 3. 비동기 (Asynchronous) - 비동기 코드 실행은 순차적으로 진행되..
![]()
box-sizing 속성 1. box-sizing 속성 - 박스 모델에서 요소의 크기를 계산하는 방법을 제어하는 데 사용되는 속성입니다. 2. box-sizing의 주요 값 - content-box (기본값) - 요소의 크기를 요소의 콘텐츠 영역에 따라 계산합니다. - 요소의 width와 height는 콘텐츠의 크기만을 고려하며, padding 및 border은 요소 크기에 추가됩니다. - border-box - 요소의 크기를 요소의 테두리(border)를 포함한 영역에 따라 계산합니다. - 요소의 width와 height는 콘텐츠와 padding, 그리고 border까지 고려한 크기가 됩니다. - initial - 기본값으로 설정합니다. - inherit - 부모 요소의 속성값을 상속받습니다. 3. 예..
![]()
HTML 규약 및 관례 1. HTML 규약 및 관례 - HTML에는 다양한 규약과 최선의 관례가 존재합니다. - 이는 웹 페이지의 명확한 구조 및 내용을 정의하고, 간편한 유지 보수가 가능하며, 웹 접근성 및 크로스 브라우징 문제를 최소화할 수 있습니다. 2. 문서 형식 선언 - HTML 문서의 시작 부분에 적절한 문서형식 선언을 추가해야 합니다. (HTML5 기준) 3. 문서 구조 - HTML 문서는 일반적으로 다음과 같은 구조를 따릅니다. 3. 유요한 HTML - HTML 문서는 유효한 마크업을 가져야 합니다. - W3C Markup Validation Service와 같은 도구를 사용하여, 문서를 유효성 검사할 수 있습니다. 4. 의미 있는 태그 사용 - HTML5에서는 의미 있는 태그를 사용하여,..
![]()
fetch 함수 1. fetch( ) 함수 - 네트워크 요청을 보내고, 응답을 처리하기 위한 기본적인 웹 API - 웹 페이지 or 웹 패을리케이션에서 서버로 HTTP 요청을 보내고, 서버로부터 데이터를 받아올 수 있음 - 비동기적으로 작동하며, Promise를 반환함 2. 구문 - 각 매개변수와 메소드는 다음과 같음 - url : 요청을 보낼 URL 주소 - options : 요청에 대한 추가 설정을 정의하는 객체. HTTP 메서드, 헤더, 요청 본문 등 다양한 옵션 지정 가능 (선택) - .then( ) : fecth( )가 성공적으로 요청을 보내고, 응답을 받으면 실행되는 Promise의 첫 번째 핸들러. 여기서 응답을 처리 - .catch( ) : 네트워크 오류 or 요청 처리 중 발생한 다른 오..
![]()
Callback 함수 1. Callback 함수 - 다른 함수 내에서 실행되는 함수를 뜻함 - 주로 비동기 코드에서 사용되며, 비동기 작업이 완료되면 실행되어야 하는 작업을 정의함 2. Callback 함수의 특징 - 함수 내에서 다른 함수의 인자로 전달될 수 있음 - 함수 내에서 다른 함수의 결과로 반환될 수 있음 - 함수를 비동기 작업의 완료 후, 실행되도록 스케줄링할 수 있음 3. 예시 - a 함수는 3초 후, 비동기 작업이 완료되고 그 작업이 완료된 후, b 콜백 함수가 실행됨 console.clear(); function a(callback) { setTimeout(function () { console.log("비동기 작업 완료"); callback(10); // callback 함수를 호출 ..
![]()
HTML SEO(검색 엔진 최적화) 기본사항 1. HTML SEO 기본사항 - HTML을 사용하여 웹 페이지를 작성할 때, SEO(검색 엔진 최적화)를 고려하는 것은 중요합니다. - 다음으로는 HTML을 사용한 웹 페이지의 SEO 기본사항입니다. 2. 의미있는 HTML 요소 사용 - 웹 페이지의 구조를 설명하기 위해서는 의미 있는 HTML 요소를 사용해야 합니다. - , , 등을 사용하여, 페이지의 구조를 검색 엔진에 명확하게 전달해야 합니다. 3. 제목 태그 사용 - 태그를 사용하여, 페이지의 제목을 정의해야 합니다. - 이 제목은 검색 결과에서 표시되며, 페이지의 주요 주제를 나타내야 합니다. 웹 페이지 제목 4. 메타 태그 활용 - 태그를 사용하여, 페이지의 메타 데이터를 제공해야 합니다. - de..
![]()
HTML 유효성 검사 1. HTML 유효성 검사 - HTML 문서의 유효성 검사는 문서가 웹 표준에 부합하는지 확인하는 과정임 - 다양한 온라인 도구 or 브라우저의 내장 도구를 사용하여, 유효성 검사를 수행할 수 있음 2. 유효성 검사의 목적 - 크로스 브라우징 지원 - 모든 브라우저에서 일관된 방식으로 페이지를 표시하려면, 표준을 준수해야 함 - 웹 접근성 - 장애인 or 특정 기기를 사용하는 사용자에게 웹 페이지를 쉽게 이해하고 사용할 수 있도록 지원하기 위해 웹 접근성 표준을 준수 - SEO (검색 엔진 최적화) - 검색 엔진은 웹 페이지를 크롤링하고 색인화할 때, 표준을 준수하는 페이지를 선호함 ※ 크롤링 : 웹 페이지에서 정보를 추출하는 프로세스 3. 유효성 검사 방법 - HTML 문서의 유표..
![]()
NHN CSS 컨벤션 1. css 속성 선언 순서 (2012년 기준) - 속성 선언 시, 그 쓰임새가 레이아웃과 관련이 큰 것에서 시작하여 레이아웃과 무관한 순서로 선언 - 관련 속성은 대표되는 속성 다음으로 선언하며, 다음과 같은 표에 표기된 의미 순서대로 선언 순서 의미 대표되는 속성 1 레이아웃 display visibility overflow float clear position top right bottom left z-index 2 BOX width height margin padding border 3 배경 background 4 폰트 font color letter-spacing text-align text-decoration text-indent vertical-align white-sp..
![]()
role 속성 1. role 속성 - 웹 페이지의 접근성을 향상시키기 위해 사용되는 속성 - 해당 요소의 역할(role)을 정의하며, 스크린 리더 등의 보조 기술을 사용하는 사용자에게 콘텐츠를 전달하는 데 도움을 줌 2. 예시
![]()
& 선택자 1. & 선택자 - CSS에서 부모 요소를 나타내는 선택자 - 주로 Sass(SCSS)와 같은 CSS전처리기에서 사용 - 중첩된 선택자를 나타내는데 사용됨 2. 예시 See the Pen Untitled by NewBean0312 (@newbean0312) on CodePen.
![]()
@function 1. @function - 사용자 정의 함수를 만들어 스타일 시트에서 재사용 가능한 코드를 작성하는데 사용 - 스타일 속성을 계산하거나 값을 조작할 수 있으며, 더욱 유연한 스타일링 가능 2. 사용법 See the Pen Tistory_Front-End Study_Sass_@function_2. 사용방법 by NewBean0312 (@newbean0312) on CodePen.
![]()
immer 1. immer - React와 함께 사용되며, JavaScript에서 불변성을 관리하기 위한 라이브러리 중 하나 - 상태 관리 및 업데이트를 보다 간편하게 만들어줌 - 불변성을 지키면서 상태 업데이트 가능 2. 사용방법 ※ immer 사용 시, 설치 필요 (npm install immer or yarn add immer) - produce 함수를 사용하여, 업데이트할 데이터를 전달하고, 업데이트할 내용을 함수 안에서 변경함 const userState = { name: 'Kim', age: 15, }; const newState = userState(state, (draft) => { draft.age += 1; }); console.log(newState); - 중첩된 객체와 배열의 업데이..
