Frontend

요구되는 시스템 사항 Node.js 14.6.0 or newer MacOS, Windows (including WSL), and Linux are supported Automatic Setup 타입스크립트를 사용하지 않을때 npx create-next-app@latest # or yarn create next-app # or pnpm create next-app 타입스크립트를 사용할때 npx create-next-app@latest --typescript # or yarn create next-app --typescript # or pnpm create next-app --typescript 메뉴얼 셋업 npm install next react react-dom # or yarn add next reac..

React from scratch 문제점 리액트를 사용하여 아무것도 없는 처음상태에서부터 웹앱을 만드려면 고려해야할 상황이 굉장히 많다. 코드는 웹팩과 같은 번들러를 사용해 번들되어야 하고, 바벨과 같은 컴파일러에 의해 변형되어야한다는 점 code splitting과 같은 제품 최적화를 필요로 한다는 점 SEO를 위해 SSG, SSR, CSR을 필요로 할 것이라는 점 서버측 데이터와 React코드를 연결하기 위해 Server-side-code가 필요하게 될 것이라는 점... 등등 Next.js: The React Framework Next.js는 위에 서술한 대부분의 문제를 해결해준다. 직관적인 페이지기반 라우팅 환경을 제공해준다. -> Next dynamic routes pre-rendering 및 S..

1. index.html 셋업 2. Next.js로 시작하기 react나 react-dom script 파일을 적어줄 필요없이 사용하는 폴더에 지역적으로 패키지를 설치해주면 된다. 우선, package.json파일에 빈 객체를 생성해준뒤 다음명령어를 통해 패키지를 설치한다. npm install react react-dom next 패키지가 잘 설치되었다면 다음과 같은 내용이 명시되어있을 것이다. (버전이 업데이트되면 버전목록은 달라질 수 있다.) // package.json { "dependencies": { "next": "^13.2.4", "react": "^18.2.0", "react-dom": "^18.2.0" } } 그다음 index.html에서 다음과 같은 코드를 삭제해준뒤 코드명을 inde..

큐(Queue) 큐(queue)는 먼저 삽입된 데이터가 먼저 추출되는 자료구조다. 예시)게임대기큐는먼저대기한사람이먼저게임에매칭된다. JS에서의 큐(Queue) 구현 JS에서는 Dictionary자료형을 이용하여 큐(Queue)를 구현하면 간단히 구현할 수 있다. class Queue { constructor() { this.items = {}; this.headIndex = 0; this.tailIndex = 0; } enqueue(item) { this.items[this.tailIndex] = item; this.tailIndex++; } dequeue() { const item = this.items[this.headIndex]; delete this.items[this.headIndex]; thi..

스택(Stack) 스택: 먼저 들어온 데이터가 나중에 나가는 자료구조 흔히 박스가 쌓인 형태를 스택(stack)이라고 한다 우리가박스를쌓은뒤에꺼낼때는,가장마지막에올렸던박스부터꺼내야한다. 새로운 원소를 삽입할 때는 마지막 위치에 삽입한다. 새로운 원소를 삭제할 때는 마지막 원소가 삭제된다. Stack 시간 복잡도 연산 시간 복잡도 설명 설명 1 삽입(Push) 𝑂(1) 스택에 원소를 삽입하는 연산 2 추출(Pop) 𝑂(1) 스택에서 원소를 추출하는 연산 3 최상위 원소(Top) 𝑂(1) 스택의 최상위 원소(가장 마지막에 들어온 원소)를 확인하는 연산 3 Empty 𝑂(1) 스택이 비어있는지 확인하는 연산 JS에서의 Stack JavaScript에서 스택을 구현할 때 배열(Array) 자료형을 사용한다. 𝑝..

git clone 클론할SSH주소 클론할 SSH주소는 다음과 같이 따오면 된다. git remote git remote -v 레파지토리를 생성후 다음과 같은 명령을 해주면 된다. echo "# youtube_clone" >> README.md git init git add README.md git commit -m "first commit" git branch -M main git remote add origin git@github.com:JeonInguk/youtube_clone.git git push -u origin main -> 한번 입력하면 git push origin main이 아니라 git push만 입력해도 자동으로 push된디. git push origin main push를 할건데 or..

git rebase 옮기고싶은브랜치이름 rebase를 통해 옮길 브랜치로 checkout 해준다. (foo브랜치를 옮기고싶다면 foo브랜치로 checkout) 옮길 브랜치를 명령어를 입력한다.

git branch *표시는 현재 위치한 브랜치를 의미한다. git branch 브랜치이름 git checkout -b 브랜치이름 두번째 방식은 브랜치를 생성함과 동시에 만든 브랜치로 체크아웃할 수 있다. git checkout 체크아웃할브랜치이름 git log --branches git log --branches --graph git merge 머지당하게할브랜치이름 checkout이 중요하다. 우선 흡수시킬branch로 checkout한다. 그다음 명령어로 merge시킨다. git branch -d 삭제시킬브랜치이름 merge conflict merge conflict가 발생한다면, 파일을 직접 수정해준다. 스테이지에 add한다. commit한다.