분류 전체보기70 next.js공부중 next.js 1. 리액트 컴포넌트 파일에서 module.css를 import 해서 사용하기 2. global.css 적용할 때는 _app컴포넌트에 적용하기 3. alias 라는 거로 @ 설정 -> @ 사용하면 프로젝트 최상위 폴더를 기준으로 경로를 사용할 수 있음. -> 현재 파일의 경로랑 상관없이 사용 가능 4.파일시스템 기반 라우팅 -> 파일의 경로가 주소에 매칭되는 라우팅 방식 -> 폴더를 만들고 자바스크립트 파일을 만들면 됨 5. next.js의 폴더구조는 next.js에서 만든 거기 때문에 꼭 pages로 만들어야 하고 이 안에 파일을 넣으면 페이지가 됨 6. index.js는 최상위 페이지(홈페이지) 7.페이지에 사용되는 파일들은 꼭 export default로 해야한다. 8. pages폴더.. 2024. 2. 14. typescript 다른 타입들 enum 은 typescript에서만 사용하는 문법 => (열거형)값의 종류를 나열할 수 있는 경우에 사용할 수 있는 타입 enum Size { S = 'S', M = 'M', L = 'L', XL = 'XL', } console.log(Size.S) 값으로 사용할 때는 객체처럼 점 표기법 사용 / 되도록이면 값을 정해놓고 사용하는게 좋다. interface => 똑같은 타입을 여러번 지정하고 싶지 않을 때 interface Product { id: string; name: string; price: number; membersOnly?: boolean; } const hat: Product = { // interface product를 지정 id: 'a2202', name: '알록달록 모자', pric.. 2024. 2. 5. typescript에서 객체 사용하는 방 typescript 에서 객체에 타입을 지정해줄 때는 ; 을 사용한다 let stock:{ id:string; name:string; price:number; membersOnly:boolean; sizes:string[]; } let stock:{ id:string; name:string; price:number; membersOnly:boolean; sizes:string[]; } = { id: '1324', name: '귀여운 모자', price: 5000, membersOnly: true, sizes: ['M', 'L', 'XL'], } //값을 입력했을 때 타입오류면 바로 알 수 있다. 프로퍼티 개수를 알 수 없거나 개수를 정해놓고 싶지 않을 경우에 프로퍼티 값에 타입만 지정이 가능 let ob.. 2024. 2. 5. 02.05 typescript에서 배열 사용하기? 문자열 배열을 사용하고 싶을 때 const cart : string[] = [] cart.push('apple') cart.push('banana') /////////// cart.push(123) // -> type 오류가 발생 -> 변수 cart 를 문자열 배열로 지정했으니까 cart.push('apple') 하면 문자열 apple 가 들어가지만 숫자 123을 push 하면 타입 오류가 난다. 배열의 배열 const carts: string[] []= [ ['apple', 'banana'], ['apple'], ['apple'] ] 배열타입에는 크기가 정해져있지 않다. let mySize:number[] = [100, 200]; mySize = [200, 300]; //숫자 3개를 한 배열로 만들기 .. 2024. 2. 5. context Api 공부 자식 컴포넌트에 수많은 props로 내려주면 가독성이 너무 안좋은 propsDrilling이 발생, -> 코드를 읽을 때 해당 prop를 추적하기 힘들어지고 유지보수가 어려워진다 -> react의 상태관리인 context를 사용해보자 현재 App컴포넌트에서 시작해 자식 컴포넌트로 4~5개의 prop을 내려주는 상황 DiaryList를 보면 import React from "react"; import DiaryItem from "./DiaryItem"; const DiaryList = ({ diaryList, onRemove, onModify }) => { return ( {diaryList.length}개의 일기가 있습니다. {diaryList.map((diary) => { return ( ); })} .. 2024. 2. 2. 이전 1 ··· 4 5 6 7 8 9 10 ··· 14 다음
