100일은 해야지

🌀 for.. in - 객체 내부의 있는 모든 프로퍼티 값들을 하나씩 다루기 위해 사용let user = { name : '100dan', age : 100, personality:'nice' } for(let key in user){ console.log(key) // 'name', 'age', 'personality' console.log(user[key]) // '100dan', 100, 'nice' }  🌀 for.. in 사용 시 주의점- 정수형 프로퍼티 네임을 사용하면 의도치 않은 결과를 가져올 수도 있어서 가급적 명확한 의미가 있는 프로퍼티 네임을 사용하는 게 좋음 let myTodoList = { '3':'javascript', '1':'typescrip..

🌀 Link✏️  Link 컴포넌트???예전에는 a 태그를 이용해서 페이지 이동. 하지만 a 태그는 새 페이지를 불러오기 위해 새로운 http요청을 보냄, react 앱을 실행할 때 갖는 state가 변경되는 단점이 있음그래서 Link 컴포넌트 사용, Link 컴포넌트는 리액트 구조에 맞게 페이지를 이동import Link from "next/link"export default function HomePage() { return ( 홈페이지 // Link 컴포넌트의 href 속성에 이동하고자 하는 페이지 경로를 입력하면 됨 포트폴리오 )}✏️  동적 라우트로 navigating리액트에서 하던 방식..

🌀 파일 기반 라우팅페이지 기반의 라우터, 폴더 구조를 통해 알아서 추론해서 라우팅함pages(폴더)┗_app.js => 내가 만든 모든 페이지가 초기화될 때 로딩되는 파일┗ index.js => 루트 페이지 ( / )┗ about.js => /about┗ products(폴더)    ┗ index.js => /products    ┗ [id].js => /products/id (동적 라우팅, 대괄호 사용) 위에서 about.js는 정적 라우트 파일을 추가한 것이고, pages폴더 안에 products라는 폴더를 추가하면 그 안에 또 index.js파일을 생성할 수 있는데, 이게 products의 상위 페이지가 되고 그 아래로 다른 페이지들을 더 만들 수 있음즉, pages폴더안에 about.js 파일..

Object  🌀 객체(object)는 키(key)와 값(value)을 콜론(:)으로 구분하는 속성(property)들의 집합let obj = { key: value, // 키와 값을 묶어서 프로퍼티라 함 // property name : property value} 🛑 키는 일반적으로 따옴표 생략 후 작성하는데 주의 사항이 있음➡ 첫 번째 글자는 반드시 문자, 밑줄(_), 달러 기호($) 중 하나로 시작➡ 띄어쓰지 금지➡ 하이픈(-) 금지⚠  일반적으로 좀 더 간편한 점 표기법을 더 많이 사용하긴 하지만, 프로퍼티 네임에 띄어쓰기가 있을 경우에는 반드시 따옴표를 붙여서 문자열이라는 것을 명시해 주어야 하고, 대괄호 표기법으로만 접근이 가능하다는 점은 주의  🌀 객체 안에 있는 프로퍼티들은 쉼표..

🧐 interface (인터페이스) 란? 함수나 객체, 클래스의 스펙에 대한 정의 어떤 속성을 가지고 있어야 하는지에 대한 정의interface Person{ name:string; age:number;} 🌀 선택적 프로퍼티객체 타입에서의 선택적 프로퍼티와 유사프로퍼티가 있어도 되고, 없어도 될 때 '?'를 붙임interface Person{ name:string; age?:number;} 🌀 읽기 전용 프로퍼티객체가 처음 생성될 때만 수정 가능한 프로퍼티처음 생성 이후의 재할당 불가!interface Person{ name:string; readonly age: number}  🌀 인데스 시그니처 프로퍼티정의되지 않은 동적 타입의 할당이 필요할 때 사용interface Person{ n..

next.js를 공부하다가 chunk buffer stream에 대해 나와서 의미를 작성해두려고 함. Chunk (청크)데이터의 조각대용량 파일을 작은 청크로 나누어 메모리에 로드하거나, 네트워크에서 데이터를 청크로 받아 처리할 때 사용됨Buffer (버퍼)데이터를 임시로 저장하는 메모리 영역데이터를 일시적으로 저장하여 처리 속도를 향상시키는 데에 사용됨Stream (스트림)데이터의 연속적인 흐름을 나타냄입력 스트림은 데이터를 읽어오는 데 사용되고, 출력 스트림은 데이터를 보내는 데 사용 그래서 셋의 관계??chunk는 데이터 조각, 작은 크기로 이루어진 데이터buffer는 chunk를 임시로 저장하는 메모리 공간, 일정량의 데이터를 저장할 수 있음stream은 buffer에 저장된 데이터를 처리하고, ..

next.js에는 보호된 파일명이 있음이 파일들은 app/폴더 내부에서 생성될 때만 보호된 파일명으로 작동한다.app/폴더 외부에서 생성될 경우 이 파일명들을 특별한 방식으로 처리하지 않음. page.js 신규 페이지 생성 layout.js형제 및 중첩페이지를 감싸는 신규 레이아웃 생성 각 폴더 안에 하나씩 생성할 수 있지만RootLayout은 필수적임. , 나 metadata api로 부분 작성해야함. 참고로 favicon을 넣으려면 icon.png 처럼 icon이라는 이름을 사용해야함. not-found.js Not Found 오류에 대한 fallback 페이지 (page router에서는 404.js) error.js기타 오류에 대한 fallback 페이지 loading.js형제 또는 중첩페이지가 ..

Step1. 인가코드 받기 인가코드는 Authorization, 사용자가 동의한 항목에 대해서 접근권한을 획득하는 것이다. 일단 kakao developers의 rest API를 사용할 것이기 때문에 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오 디벨로퍼 사이트에 가입을 한 후 애플리케이션을 추가한다. 애플리케이션을 추가하고 추가된 애플리케이션을 클릭하면 앱키가 발급된다. 그리고 앱키가 나온 바로 왼쪽에 앱설정에서 플랫폼을 클린한 후 사이트 도메인을 입력하면 된다. 혼자 공부한다면 localhost만 입력해도 되지만 배포를 할 것이기 때..