: 하나의 화면에 여러개의 페이지 컴포넌트들을 한꺼번에(병렬로) 렌더링 슬롯: 병렬로 렌더링 될 페이지 컴포넌트를 보관하는 폴더, @ 사용슬롯 page.tsx 파일을 감싸는 layout.tsx 파일에서 슬롯의 이름으로 props를 전달받아 병렬로 렌더링📂 parallel├── 📂@feed│ │ ├── 📂 setting│ │ │ └── 📑 page.tsx│ │ └── 📑 page.tsx├── 📂@sidebar│ │ ├── 📑 default.tsx│ │ └── 📑 page.tsx├── 📑 default.tsx├── 📑 page.tsx└── 📑 layout.tsx// url주소/parallel 페이지export default function Layou..
Front
1. 기능구현의 주도권 유무에 따라 나뉨Next.js = React.js 전용의 웹 개발 "Framework"React = UI 개발을 위한 JavaScript "Library"Library : 기능구현을 원하는 방향으로 사용 가능 (React.js, JQuery 등등), 자유도 ⬆Framework: 프레임워크가 제공하는 기능 이용, 허용하는 범위내에서만 추가 도구 사용 가능 (Next.js, Remix 등등), 자유도 ⬇ 2. 렌더링React: CSR(Client Side Rendering) 초기접속이후의 페이지 이동이 빠름, FCP(초기접속 속도)가 느림,index.html, JS 번들, 웹사이트에 필요한 전체코드를 모두 초기에 렌더링 > 클라이언트에서 페이지 이동 * FCP(First ..
1. CALLBACK : 자바스크립트는 동기적 = 호이스팅(함수, 변수등의 선언들이 젤 위로 올라감)이 된 이후부터 코드가 작성한 순서에 맞춰서 동기적으로 실행 console.log('1'); // 1️⃣ setTimeout(()=> console.log('2'),1000); // 4️⃣ 비동기 console.log('3'); // 2️⃣ // setTimeout은 콜백함수 // ✔️ 동기 콜백 function printImmediately(print){ // 함수선언 젤 위로 올라감 print(); } printImmediately(()=> console.log('hello')); // 3️⃣ // 1 > 3 > hello > 2 순으로 나옴 // ✔️ 비동기 콜백 function printWithDe..
DOM (The Document Object Model, 문서객체모델) : HTML이나 XML문서를 나타내는 API, HTML의 각 요소들이 브라우저에서 실체로 제작되는 것, HTML에 작성한 코드가 전체구조에 맞춰서 브라우저 안에 배치되고, 추가적인 명령(이벤트)을 통해 속성, 디자인, 배치 등을 조작할 수 있도록 된 상태(기능을 수행할 객체들로 실체화된 형태) - 특정언어에 종속되지 않는다. (자바스크립트 객체 ❌, 자바스크립트를 통해서 제어 가능) -> DOM은 API를 가지고 있기 때문 - DOM 안에는 각종 node들이 트리구조로 들어있다. - 브라우저는 DOM 트리, CSSOM(CSS Object Model) 트리 를 융합해서 화면을 만든다. - BOM(Browser Object Model)..
HTTP(Hypertext Transfer Protocal): Client가 어떻게 Server 통신할수 있는지 정의한것 Client * AJAX : 웹페이에서 동적으로 서버에게 데이터를 주고받을 수 있는 기술 브라우저에서 서버와 통신 할때 1️⃣ XMLHttpRequest : 사이즈가 커지고, 가독성도 좋지 않아서 잘 사용되지 않음 2️⃣ fetch() API 3️⃣ JSON(JavaScript Object Notation) JSON(JavaScript Object Notation) - 데이터를 주고받을 때 쓸수 있는 가장 간단한 포맷 - 텍스트 기반 - 읽기 쉬움 - key, value 로 이루어짐 - 프로그램언어나 플랫폼에 상관없이 사용 가능 Object to JSON let json = JSON...
1. 배열 선언const arr1 = new Array(); const arr2 = [1,2]; 2. 배열 접근 : 배열은 index가 지정되어 있다.(0부터 시작)const fruits = [‘🍎’,’🍌’]; conso.log(fruits.length); // 2 console.log(fruits[0]); // 🍎 console.log(fruits[fruits.length - 1]); // 🍌 배열 마지막 요소 불러올때 3. 배열 순환for(let i=0; fruits.length; i++){ console.log(fruits[i]); } for(let fruit of fruits) { console.log(fruit); } fruits.forEach((fruit) => console.log(fruit..
