리액트 공식문서 학습기록 https://react.dev/learn Importing and Exporting Components 실습 그냥 js문법임. 섞어쓰는 예제 하나로 정리 끝. 재사용성 중첩된 컴포넌트는 분리하는게 좋다. 🤔 안다. 그래서 어디까지 어떻게 분리할 것인가? 아토믹 디자인 패턴 참고) next.js나 nuxt.js, sveltekit 등을 쓴다면 같은 레이아웃내에서 내용물만 바뀔땐 해당 프레임워크의 layout 기능을 이용하는게 리렌더링이 일어나지 않아서 더 성능이 좋음. import Layout from './Layout.js'; const App = () => { return ( 페이지내용들.. ); } export default App; 왠만하면 페이지별로 요렇게 쓰지 말란 이..

제로초님 강의 정리 https://www.inflearn.com/course/next-react-query-sns MSW 목업 mswjs.io public 폴더의 mockServiceWorker.js가 호출을 가로채서 목업 서비스를 하는 방식 컴포넌트 생성 후 브라우저인지 체크하고 환경변수를 통해 로컬환경에서 끄고 킬 수 있는 방식으로 정리되어 있음. next.js와 매끄럽게 호환이 안됨. 노드 서버의 도움을 받아야함. 어차피 express로 실행을 해야된다면 FE 코드와 분리하여 환경변수로 서버 주소를 바꾸는 방식이 더 낫지 않나 라는 생각이 듬. pocketbase 등을 활용하면 실제로 CRUD 테스트까지 가능함. 서버 컴포넌트에서 Server Actions 사용하기 함수안에 “use server”;..

제로초님 강의 정리 https://www.inflearn.com/course/next-react-query-sns ActiveLink 만들기 라우터에서 현재 경로를 알고 싶으면 use client를 사용하여 클라이언트 컴포넌트 이용 import { useSelectedLayoutSegment } from “next/navigation”; "use client"; import { useSelectedLayoutSegment } from "next/navigation"; const NavMenu = () => { const segment = useSelectedLayoutSegment(); console.log(segment); //경로 출력 return ( NavMenu ) } export default ..

제로초님 강의 정리 https://www.inflearn.com/course/next-react-query-sns Next 프로젝트 시작하기 x (twitter) 클론코딩 - 홈, 탐색하기, 쪽지, 프로필 url을 그대로 가져가기 새로고침 시 다르게 동작하는 것 확인 반응형 설치 npx create-next-app@latest 설치옵션 ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like to use `src/` directory? … No / Yes ✔ Would you like ..

제로초님 강의 정리 https://www.inflearn.com/course/next-react-query-sns 리액트 압축 요약 강좌 React 현재 점유율 1위 라이브러리 경쟁자 : vue, angular, svelte 등 역사 : jQuery -> Angular -> React -> Vue -> Svelte 왜 나왔나 페이지 전환없이 앱같은 느낌을 원함 ->한 페이지에서 다하는 SPA(Single Page Application) 방식의 유행 프론트의 비중이 점점 높아짐(데이터를 많이 다룸) -> MVC등의 개발 방식은 대규모 개발에 적합치 않음 -> 대안 필요 Angular의 등장 Gmail(AJAX) -> SPA SPA으로 MVC 구현 앱같은 느낌은 성공함 MVC라서 동일한 문제 -> 프론트에서..

20.1 strict mode란? 암묵적 전역 // 'use strict'를 사용하지 않은 예제 function foo() { x = 10; } foo(); console.log(x); // 10 /* - foo 함수가 실행 - foo 함수 내부에서 x를 선언한 것은 없기 때문에, 스코프 체인에 의해 변수 x를 검색한다. - 전역 스코프까지와 왔지만, x는 존재하지 않는다. -> 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다. - 생성된 전역 객체에 x 프로퍼티에 10을 할당한다. - foo 함수의 실행이 끝나고, console 에 암묵적으로 생성된 x를 참조하여 10이 출력된다. */ strict mode 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성..

프로토타입 자바스크립트는 프로토타입prototype을 기반으로 상속을 구현한다. // 생성자 함수 function Circle(radius) { this.radius = radius; } // Circle 생성자 함수가 생성한 모든 인스턴스가 getArea 메서드를 // 공유해서 사용할 수 있도록 프로토타입에 추가한다. // 프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있다. Circle.prototype.getArea = function () { return Math.PI * this.radius ** 2; }; // 인스턴스 생성 const circle1 = new Circle(1); const circle2 = new Circle(2); // Circle 생성자 함..

함수와 일급 객체 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 위의 조건을 모두 만족하므로 일급 객체다. arguments 객체 function sum() { let res = 0; // arguments 객체는 length 프로퍼티가 있는 유사 배열 객체이므로 for 문으로 순회할 수 있다. (배열 메서드는 불가) for (let i = 0; i < arguments.length; i++) { res += arguments[i]; } return res; } console.log(sum()); // 0 console.log(sum(1, ..

생성자 함수에 의한 객체 생성 프로퍼티 구조가 동일 객체 여러개를 간편하게 생성가능 // 생성자 함수 function Circle(radius) { // 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다. this.radius = radius; this.getDiameter = function () { return 2 * this.radius; }; } // 인스턴스의 생성 const circle1 = new Circle(5); // 반지름이 5인 Circle 객체를 생성 const circle2 = new Circle(10); // 반지름이 10인 Circle 객체를 생성 console.log(circle1.getDiameter()); // 10 console.log(circle2..

16.1 내부 슬롯과 내부 메서드 JS엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드임 ECMAScript 사양에서 이중 대괄호 [[ ... ]]로 감싼 이름들이 내부 슬롯과 내부 메서드임 내부 슬롯과 내부 메서드는 JS 엔진 내부 로직이므로 원칙적으로 접근 불가능 Prototype의 경우만 __proto__를 통해 간접적으로 접근 가능 16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 JS엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의함. 프로퍼티 상태 👉 프로퍼티의 값, 값의 갱신여부, 열거 가능 여부, 재정의 가능 여부 프로퍼티 어트리뷰트 👉 Value, Writable, Enumerabl..