728x90 배움 기록47 [JS] 얕은 복사(Shallow copy)와 깊은 복사(Deep Copy) 정리 📌 참조 타입 데이터 (array / object) 특징 자바스크립트의 참조 타입의 데이터는 자료를 하나 만들면, 그 자료를 RAM(= 메모리) 이라는 공간에 저장한다. let arr = [1,2,3]; ▲ [1,2,3] 자료는 RAM에 저장되고, arr 변수엔 그 자료가 어디있는지 가리키는 화살표만 담겨있다. * 여기서 화살표란 '값이 저장된 RAM의 주소 값' 를 의미한다. 📌 얕은 복사 (Shallow Copy) 참조 타입의 얕은 복사는 화살표(= RAM의 주소 값)만 복사하는 것을 말한다. let arr = [1,2,3]; let arr2 = arr; arr2[0]++; console.log(arr2 == arr); // true ▲ arr2 라는 다른 변수에 복사를 해도, 화살표만 복사될 뿐이라.. 2023. 9. 7. [Next.js] App Router에 대해서 (+ Pages Router와 비교) 얼마 전 Next.js 가 새로운 라우팅 방식인 App Router 를 소개했다. 이를 정리해보고, (기존 방식인) Pages Router와 비교해 보고자 한다. 📌 페이지 만드는 방법 Pages Router : 기존 방식인 Pages Router 에서 페이지를 만드려면 다음과 같이 하면된다. src/ └── pages ├── about.js ├── index.js └── team.js ▲ pages 폴더 안에 파일을 만들면, 이 파일의 이름은 URL path 가 되어 페이지가 생성된다. App Router : App Router 에서 페이지를 만드려면 다음과 같이 해야한다. src/ └── app ├── about │ └── page.js ├── globals.css ├── layout.js ├── l.. 2023. 9. 5. [CSS] grid 속성들 정리 📌 flex vs grid ? 아이템을 자유자재로 배치할 수 있는 CSS Layout 에는 flex 와 grid 가 있다. flex : 아이템을 1차원적으로 배치할 수 있음 (가로 or 세로) grid : 아이템을 2차원적으로 배치할 수 있음 (가로 and 세로) 📌 grid 사용법 1. 부모 컨테이너에 display: grid 를 지정한다. 2. grid 안에 들어 있는 자식들은 각각 grid cell 로 변환된다. 📌 grid 속성들 정리 부모 속성들 ► grid-template-columns : 컨테이너 열(column)의 크기 지정 ► grid-template-rows : 컨테이너 행(row)의 크기 지정 ► grid-auto-rows : 컨테이너 행(row)이 몇 줄인지 모를 때, 전체적으로 자.. 2023. 9. 3. [Next.js] 개념 간단 정리 Next.js 강의를 들으며 배운 개념들을 정리해보겠습니다 Routing Routing ? : url로 페이지를 나누는 것을 말함 Next.js 에서 Routing을 하기 위해선 (*App Router 버전) 1. app 폴더 안에 폴더를 만들고 2. 그 안에 page.jsx 파일을 만든다. (* Next.js 는 app 폴더 안에 있는 폴더들을 자동으로 url 로 만들어 준다.) Next.js 의 레이아웃 작동방식 (*App Router 버전의 Next.js 폴더 구조는 아래 이미지와 같다.) ▲ Next.js 는 page.js 를 보여줄 때, 옆에 layout.js 파일이 있으면 layout.js 내용 안에 page.js 내용을 담아서 보여준다. (* layout.js의 {children} 이 pag.. 2023. 8. 31. 이전 1 2 3 4 5 6 7 8 ··· 12 다음 728x90
