행복을 담는 블로그

맨날 footer 하단 고정하는 방법 까먹어서 정리하기 위해서 올림!!1. fixed로 하단 고정하기footer { position: fixed; bottom: 0px; width: 100%; height: 5rem;}처음에는 footer는 position:fixed로 하단에 박아버린다고 생각했다.근데 그렇게 했더니, 이렇게 컨텐츠가 있을 경우, footer 안 쪽으로 먹혀버리는 현상이 발생했다.fixed로 박을 경우, 다른 값들과 관계없이, 화면의 길이가 늘어나더라도(=스크롤의 길이가 늘어나는 경우) 가장 하단 부분에 박히는 문제가 발생하였다.   2. absolute 사용하기다음으로는 position : absolute를 사용하였더니, 상대 위치에 따라 중간 지점에 고정되어 버리는 문제가 발생..

Next.js에서 폰트 적용하는 방법우선 Next.js에서 font를 적용하는 방법으로는 google font를 적용하는 방법과 font 파일을 다운받아서 직접 localFont로 적용하는 방법이 있다.그 중에서 이번엔 localFont를 직접 적용하는 방법을 시도해보았다. 1. 폰트 다운로드하기우선 public 폴더 > fonts 폴더 안에 다운로드 받은 폰트 파일을 저장하였다. 2. Next.js에 localFont() 적용하기이후 fonts.ts 파일을 만들고 next/font/local로 부터 localFont를 import 해와서 내가 저장한 폰트를 종류별로 저장한다.import localFont from "next/font/local";export const hakgyoansim = local..

오랜만에 알고리즘 문제 풀다가 그새 다 까먹어 버린 sort 함수 다시 정리하기.✅ sort 문법: 배열의 요소를 정렬할 때 사용하는 문법const arr = [3,1,2];array.sort(); // [1,2,3]sort의 기본 특징1️⃣ 배열 그 자체가 변환2️⃣ 정렬된 배열을 반환sort의 기본 원리: sort 비교 함수의 작동 방식▶️ sort 함수 내부에는 비교함수가 들어간다!Array.prototype.sort()array.sort([compareFunction])매개변수compareFuntion : optional 정렬 순서를 정의하는 함수. 생략하면 배열은 각 요소의 문자열 변환에 따라 유니코드 값에 따라 정렬반환 값 정렬한 배열. 배열이 정렬되는 것. 복사 X MDN 공식문서 참고❓ s..

4. Rendering v12 v.s. v13 차이? Next.js 왜 쓰셨어요? : 렌더링 패턴으로 대답하자. CSR, SSR, ISR, SSG next.js 12버전 : 렌더링 방식이 page 단위로 렌더링 방식 규정함 next.js 13버전 : react 18버전에서 제시한 서버컴포넌트/ 클라이언트컴포넌트 를 적용하여 component 단위 렌더링 방식을 규정 기본적으로 app 폴터 하위 모든 컴포넌트는 서버컴포넌트이다 (그냥 외우자) "use client" 표시가 없다면 모두 서버 컴포넌트다. 내가 쓰는 터미널 = 웹 서버 = 소소코드가 돌아가는 환경이 서버컴포넌트 = runtime environment : node.js 환경 브라우저에서 콘솔 안 떠 -> "use client"를 쓰는 순간 브라..

3. Routing Next.js 프로젝트 시작하기 1) Next.js 프레임워크 설치하기 npx create-next-app@latest yarn create-next-app@latest ▶️ 프레임워크답게 필요한 라이브러리를 한 번에 설치 할 수 있다! 2) 폴더 구조 살펴보기 : .eslintrc.json, next.config.mjs,package.json, tailwind.config.ts, tsconfig.json 등 필요한 파일일 모두 생성된 것을 확인 할 수 있다. ▶️ src 폴더 > app 폴더 안에 layout.tsx, page.tsx 파일이 존재한다. ✅ layout.tsx 파일 : Metadata를 가지고 있는 파일로, title을 변경할 수 있으며, RootLayout을 가지고 ..

1. Next.js란? : React.js를 기반으로 만들어진 프레임워크이다. 풀스택이 가능하다. 백엔드 기능까지 가능 by Route Handler (1) Next.js는 React.js를 기반으로 만들어진 프레임워크이다. 프레임워크 : 모든게 세팅된 상태로 사용가능 라이브러리 : 내가 직접 다 세팅해야함 Next.js는 웹에 대한 리액트 프레임워크이다. 풀스택 웹 어플리케이션을 만들 수 있는 역할을 한다. 📌 프레임워크(Framework) v.s. 라이브러리(Library) (면접 단골 질문) ✅ 프레임워크(Framework) : 개발자가 기능 구현에만 "딱" 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원하는 기술의 조합 ex) Spring Framework : Java 기반 웹(백엔트) 프..

5. Passing Props 예시 1) props로 {count}를 넘겨줄 때, type을 함께 지정해준다. {count} : {count : string} import { useState } from "react"; function Parent() { const [count, setCount] = useState(""); return ; } function Child({ count }: {count: string) { return {count}; } export default Parent; 예시 2) import { useState } from "react"; function Parent(){...} type Props = { count: string; }; function Child({ count ..

React + TS 1. 함수에서 TS 사용하기 방법 1) function sum(a: number, b: number): number { return a + b; } ▶️ 매개변수 각각의 type을 지정해주고, return문의 type을 지정 방법 2) function objSum({ a, b }: { a: number; b: number }): string { return `${a + b}`; } ▶️ object를 인자로 받을 경우, { a, b }: { a: number; b: number } 각각의 type을 지정. 2. 비동기 함수에서 TS 사용하기 1️⃣ Person의 타입을 지정해준다. type Person = { id: number; age: number; height: number };..