제로초님 강의 정리 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라서 동일한 문제 -> 프론트에서..

이전 프로젝트에서 쓰던 방식을 정리해봤습니다. 1. 업무별 Repository 네이밍 규칙 Repository 네이밍은 다음과 같은 규칙을 따릅니다. 도메인명으로 Repository 네임을 결정합니다. 웹 서비스가 아닌 경우 com.company_name.레포명으로 작명합니다. ex) 홈페이지 : company_name.com 쇼핑몰 shop.company_name.com 키오스크 : com.company_name.kiosk 2. Branch 전략 기본적으로 main 브랜치(trunk) 하나 만을 유지합니다. (트렁크 기반 개발) 작은 기능 단위로 feature 브랜치를 사용하여 수명이 긴 개발 브랜치를 만들지 않습니다. 운영 배포용 브랜치가 반드시 필요한 경우에만 deploy 브랜치를 별도 생성한 후 ..

계속 업데이트 됩니다. 1. 아이클라우드 설정 아이폰용 앱으로 아이클라우드 드라이브에 Obsidian 폴더 밑에 note vault 생성 안드로이드폰 사용자는 구글 드라이브 내에 만들어두면 될듯 2. 기본설정 목적 : 폴더를 좀더 깔끔하게 하고 github와 vscode에 이미지 코드가 연동되게 설정 설정 - 파일 및 링크 3. 안 쓰는 이미지 자동 정리 커뮤니티 플러그인 - clear image로 검색 설치, 활성화 옵션 리본 켜기, 로그 끄기 4. make.md 설치 커뮤니티 플러그인 - make.md 검색 설치, 활성화 옵시디언을 좀더 노션처럼 만들어줌 상세설명 - https://anpigon.tistory.com/328 5. 티스토리 연동 아래 2개 플러그인을 사용하여 imgur와 tistory에..

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..

빠르게 덮어쓰기하는 방법 git pull 받을 목록을 repository 에서 업데이트 git fetch --all git reset 으로 head를 최신으로 가리킨다 git reset --hard origin/브랜치명 git pull 로 확인 git pull origin 브랜치명