코드잇 강의 정리

접근 권한 위임한 서비스가 다른 서비스에 있는 보호된 리소스에 대한 접근 권한을 위임하거나 받는 기능OAuth(Open Authorization)유저의 인증 정보를 다른 사이트에 제공하지 않고도 접근 권한을 위임할 수 있는 것개방형 접근 권한 위임 표준이메일과 비밀번호

예를 들어서 /api/short-links로 들어오는 리퀘스트를 처리하려면 /pages/api/short-links.js 또는 /pages/api/short-links/index.js 경로로 파일을 만들고 함수를 default export하면 됨함수 체이닝 방식으로 사

상당히 많은 Web 서비스들을 만들 때 사용됐음활용도가 다양해지고 있음문장의 마침표와 같은 역할을 함JS에서는 코드를 한 줄에 한 문장 씩 작성할 경우 코드가 실행될 때 자동으로 세미콜론을 추가해주는 기능이 있음코드의 의도를 설명하거나 구현한 코드의 동작을 기록할 때

사칙연산 외 두 가지 연산자가 더 있음%: 나머지 연산자7 % 3 = 1\*\*: 거듭제곱 연산자 2 \*\* 3 = 8연산자 간 우선순위가 존재함문자열 내 따옴표를 표현하는 다양한 방법사용되지 않은 따옴표로 감싸기역슬래쉬를 이용하기벡틱으로 감싸기문자열의 연산일상적인

오른쪽에 있는 피연산자를 왼쪽에 있는 피연산자에게 할당함코드 해석 시 할당연산자의 오른쪽부터 계산해 주면 됨1++은 1++이 작성된 코드의 줄을 실행하고나서 증가시키고, ++1은 ++1이 작성된 코드의 줄을 실행할 때 1을 증가시킨 상태로 코드를 실행함역할 1: 함수

어떤 값을 입력했는지에 따라 다르게 동작하는 문법defalt: 생략가능. 모든 조건과 일치하지 않을 때 실행 됨조건 값과 일치하는 경우를 찾은 다음에는 break문을 만나기 전까지 그 아래 모든 동작을 실행함범위를 만족하는 조건식을 만들 때는 if문을 활용하는 것이 효

객체 (object): 여러가지 값을 한 번에 저장하고 싶을 때 사용객체는 변수에 담겨서 이름을 만듦중괄호를{} 이용해서 만들며 다양한 값들을 쉼표로 구분해서 저장함값이름: 값을 속성 (property)라고 함값이름을 key, 값을 value라고 함값이름은 문자열로 원

객체에서 값들의 순서만 더 유지해도 되는 상황에 이용배열에서는 값들을 요소 (element)라고 부름배열의 순서를 index라고 하고 함 -> PropertyName의 역할 임indexing은 0부터 시작함배열도 요소로 들어 갈 수 있음값들의 의미보다 순서나 위치에 중

NumberDate 객체처럼 내장 객체 중 다양한 연산들을 유용하게 사용하기 위한 객체숫자를 이진수로 변환할 때 무한 소수가 발생하고 이를 해결하기 위해 반올림을 하는 데 여기서 발생하는 미세한 값의 차이가 오류로 나타남오차를 해결하는 방법비슷한 점다른 점mutable

웹사이트를 만드는 프로그래밍 언어 HTML: 웹사이트에 들어갈 내용 담당 CSS (Cascading Style Sheets): 웹사이트에 들어갈 스타일을 담당 웹사이트 인터넷에 올리기 Netlify: 웹서비스 배포를 도와주는 클라우드 서비스 / 웹사이트를 인터넷에 올

태그에 CSS를 적용하려면 style속성을 사용함CSS코드를 추가할 때는 CSS속성\_이름:CSS속성 값형태로 적음여러개의 CSS속성을 사용할 때는 ;으로 구분함<tag style="background-color: - <tag style="color: -

Open Graph Protocol 메타 데이터: 인스타그램의 해시태그 처럼 대량의 정보 가운데에서 확인하고자 하는 정보를 효율적으로 검색하기 위해 원시데이터(Raw data)를 일정한 규칙에 따라 구조화 혹은 표준화한 정보 오픈 그래프 프로토콜: 미리보기 화면의 실체

CSS 규칙 태그이름: CSS 선택자 아이디 아이디 정해주기: `` 아이디 이용해서 스타일 바꾸기: 아이디 이름은 중복해서 쓸 수 없음 -> 하나의 스타일만 바꾸고 싶을 때 클래스 클래스 정해주기: `` 클래스 이용해서 스타일 바꾸기: 아이디와의 차이점: 여러 태

line-height단위 없이 쓰는 글자 크기에 상대적인 값 (font size \* value)text-decorationnone, underline, line-throughbackground-image: url('pizza.png') -> ,url로 여러개 쌓을 수

영역 안 쪽 여백을 넣을 때 사용padding: 8px -> 상하좌우padding: 16px 8px -> 상하, 좌우padding: 16px 8px 24px -> 상, 좌우, 하padding: 16px 8px 24px 10px; -> 상, 우, 하, 좌 (시계 방향)영

<h1>, <p>, <div> 같은 것위에서부터 아래로 배치됨너비와 높이를 지정할 수 있음<a>, <span>, <img>, <br> 같은 것평소에 글 쓰는 방향화면에 꽉 차면 다음 줄로 넘어감너비나 높이를 지정할 수 없음 (예외적

선택자 목록 (selector list) 선택자, 선택자 ,로 이어주면 됨 선택자 붙여 쓰기 자식, 자손 선택하기 >: 자식 결합자 (child combinator) -> 직계만 적용 /s: 자손 결합자 (descendant combinator) -> 아래에 있는 모든

CSS: Cascading StyleSheet캐스케이드: 규칙을 순서에 따라서 계단식으로 합치는 것여러 CSS 규칙이 적용될 때 순서에 따라서 합치는 것user agent stylesheet: 웹 브라우저에서 기본으로 적용되는 CSS 규칙개발자 도구에서 위쪽에 있을 수

<meta> 로 작성하는 HTML 태그로 메타데이터를 나타냄HTML 데이터를 설명하는 데이터를 갖는 태그메타데이터: 데이터를 설명하는 데이터웹 페이지에 설정하는 메타 태그 예시사이트를 설명하는 데 사용하는 메타 태그 예시구글 검색 결과, 사이트 설명 / SNS 공

글의 흐름에서 벗어나서 요소를 자유롭게 배치할 때 쓰는 속성기본값은 static이고 원래 있어야 할 위치에 배치됨값이 모두 똑같은 경우 inset 속성을 씀기준: 원래 위치요소의 원래 자리는 그대로 차지함margin과 다른점: margin을 이용하면 주황, 보라 박

가로 또는 세로 처럼 1차원으로 요소를 배치하는 방법기본적으로 row 방향으로 배치함felx-direction으로 방향을 정할 수 있음기본 축(main axis): 요소가 정렬되는 방향교차 축(cross axis): 기본 축에 수직인 방향기본적으로 기본 축 방향으로 교

2차원으로 배치할 수 있는 방법요소를 왼쪽에서 오른쪽, 위쪽에서 아래쪽으로 배치함Grid Line: 각 칸을 나누는 줄들Grid Cell: 요소를 배치할 수 있는 네모난 칸격자 나누기, 간격 정하기, 크기 미리 정하기, 원하는 위치에 여러칸에 걸쳐서 배치, 이름으로 배

유닉스 커맨드 시작하기 유닉스 커맨드란? command: 명령어 Command Line Interface / Command Line(CLI환경): 커맨드를 통해 컴퓨터를 사용하는 방식 Graphical User Interface(GUI환경): 화면과 마우스를 통해 컴퓨

외부 프로그램 설치의 경우는 이때까지 배웠던 내용과는 달리 환경에 따라 사용해야 하는 커맨드가 달라짐우분투에서는 apt 커맨드맥 OS에서는 homebrew 커맨드우분투에서 외부 프로그램을 설치하고 관리하는 데 사용하는 툴우분투에 기본적으로 설치 돼 있음apt updat

코드 버전 관리 프로그램 / 버전 관리와 동시 협업을 가능하게 해주는 툴버전관리: 파일의 변화를 시간에 따라서 기록했다가 나중에 특정 시점의 버전을 다시 꺼내올 수 있는 시스템장점: 지난 과정 확인 가능이전 버전으로 돌아갈 수 있음리누스 토발즈(Linus Torvald

프로젝트 디렉토리에서 작업하던 내용을 외부의 컴퓨터(GitHub)에 전송할 수 있음작업하던 내용 전송: 레포지토리를 전송한다는 뜻따라서 외부 컴퓨터에서도 작업과 버전관리가 가능함외부 컴퓨터: GitHub원격 레포지토리 (리모트 레포지토리): GitHub에서 만든 레포지

git log: 커밋 히스토리 보기 / 위로 올라갈수록 더 최근에 한 커밋임커밋 아이디(커밋 해시): git log --pretty=oneline: 커밋 하나의 정보가 한줄에 보임\--pretty 옵션git show 46ca: 해당 커밋에서 어떤 파일이 어떻게 변했는지

브랜치 사용하기 브랜치란? 하나의 코드 관리 흐름 main 브랜치: 레포지토리를 만들고 커밋을 하면 자동으로 생기는 브랜치 git branch [새 브랜치 이름]: 새로운 브랜치를 생성 git checkout [기존 브랜치 이름]: 그 브랜치로 이동 브랜치 다뤄보기

로컬 레포지토리를 수정하는 동안 리모트 레포지토리에 변화(협업으로 인해)가 생겼다면 바로 git push를 할 수 없음git pull: 리모트 레포지토리의 branch를 가져와서 현재 branch에 merge하는 커맨드브랜치를 가져온다: 브랜치가 가리키고 있는 커밋 이

reset을 해도 그 이후의 커밋들이 삭제되는 건 아님!git reflog: reference log, 헤드가 이때까지 가리켜왔던 커밋들을 기록한 정보git reset HEAD@{1}git log --pretty=oneline --all: 모든 브랜치의 커밋 히스토리를

Github로 협업을 한다는 것 Git의 일반적인 사용 흐름 핵심 개념 정리 핵심 구조와 파일의 상태 변화 커밋 작업 내용의 '스냅샷' 커밋하면 이력이 남아서 문제가 발생했을 때 이전 상태로 쉽게 되돌릴 수 있음 Git에서 관리하는 가장 작은 단위의 버전 커밋 vs.

\-일반적으로 html과 css는 단순히 처음 한번 웹 페이지에 모습을 드러내고 나면 그 이후에는 특별히 어떤 변화를 주는 것이 어렵다는 한계가 있음Javascript 코드를 이용하면 웹페이지를 동작할 수 있음document.getElementById('id\_이름')

브라우저도 객체다? JavaScript: 웹 브라우저를 다루기 위해서 등장한 프로그래밍 언어 window객체: 브라우저의 창을 대변하면서 JavaScript에서는 최상단에 존재하는 객체 최상단: 윈도우 객체가 JavaScript의 다른 모든 객체를 포함하고 있다는

elem.addEventListener(event, handler): 하나의 요소에 여러 개의 독립적인 이벤트 핸들러를 등록할 수 있음가장 권장되는 이벤트 등록 방법임함수의 이름만 전달해 주면 됨 (소괄호 붙이지 말기)elem.removeEventListener(eve

MouseEvent.button: 마우스의 각 버튼 별로 이벤트를 구분하고 싶을 때0: 마우스 왼쪽 버튼1: 마우스 휠2: 마우스 오른쪽 버튼 MouseEvent.typeclick: 마우스 왼쪽 버튼을 눌렀을 때contextmenu: 마우스 오른쪽 버튼을 눌렀을 때db

ECMAScript: 자바스크립트 표준 명세서 (JavaScript Specification)JavaScript가 갖추어야 할 내용을 정리해둔 '설명서'임ECMAScript는 JavaScript 뿐만아니라 모든 스크립트 언어(scripting languages)가 지켜

함수 선언선언 하기 전에 호출할 수 있음함수 스코프를 가짐함수 표현식 (Function Expression): 함수 선언을 값처럼 활용하는 방식선언 이전에 접근할 수 없음할당된 변수에 따라 스코프가 결정 됨Named Function Expression (기명 함수 표현

문장과 표현식 모든 자바스크립트 코드는 모두 문장과 표현식으로 구성되어 있음 문장 (statements): 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리 표현식 (expressions): 결과적으로 하나의 값이 되는 모든 코드 표현식은 보통 문장의 일부로 쓰이지

배열 메소드 I: forEach와 map forEach 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드 첫 번째 아규먼트로 콜백 함수를 전달받음 콜백 함수의 파라미터에는 각각 배열의 요소, index, 메소드를 호출한 배열이 전달됨 리턴 값이 없어서 변수에 담

모듈: 자바스크립트 파일 하나많은 코드가 필요한 프로그램은 하나의 파일로 관리하는 게 아니라 각 기능 별로 여러 개의 파일로 분리해서 관리하는 것이 좋음모듈화 (Modularization): 공통된 기능이나 특별한 목적에 따라 각각의 파일로 분리하는 과정코드를 효율적으

웹 브라우저와 서버 사이에 이루어지는 통신에 대해 배움웹 브라우저가 서버로부터 받는 것은 결국 코드 덩어리이고 웹 브라우저가 이를 해석해서 화면을 보여줌request: 웹브라우저가 서버로 보낸 요청response: 서버가 다시 보내는 응답fetch 함수: 서버로 리퀘스

웹 통신을 하는 자바스크립트 코드를 작성할 때 알아야 하는 개념과 문법들왜 response보다 End가 먼저 나왔을까?fetch함수에 비동기 실행이 되는 부분이 있기 때문임비동기 실행: 한번 시작된 작업이 완료되기 전에 바로 다음 코드로 실행이 넘어가고 나중에 콜백이

catch 메소드 프로미스 객체가 rejected 상태가 될 때 실행 하고 싶은 콜백은 then메소드의 두 번째 파라미터로 넣으면 되는데 다른 방법도 있음 catch메소드: 프로미스 객체가 rejected 상태가 되면 실행할 콜백을 등록하는 메소드 catch 메소드는

프로미스 객체를 조금 더 간단하게 다룰 수 있는 문법async: asynchronous의 줄임말로 비동기를 의미함함수 안에 비동기적으로 실행될 부분이 있다는 것을 의미함함수의 코드 중에서 프로미스 객체를 리턴하는 코드가 있다는 뜻await: 그 뒤에 코드를 실행하고 그

node.js: 브라우저 외부에서도 자바스크립트를 실행할 수 있게 해줌npm init react-app <폴더이름>: 리액트 프로젝트 생성create-react-app으로 리액트 프로젝트 생성npm run start: 프로젝트 실행 / 개발 모드 실행개발 모드:

인덱스 파일에서 하는 일 index.html: 웹 브라우저에서 가장 먼저 실행되는 파일 index.js: index.html 파일이 열리고 나서 실행되는 파일 리액트 코드들 중에서 가장 먼저 실행되는 파일 react-dom이라는 패키지에서 디폴트로 export하

인덱스 파일에서 하는 일 index.html: 웹 브라우저에서 가장 먼저 실행되는 파일 index.js: index.html 파일이 열리고 나서 실행되는 파일 리액트 코드들 중에서 가장 먼저 실행되는 파일 react-dom이라는 패키지에서 디폴트로 export하

배열 메소드 map에서 콜백 함수의 리턴 값으로 리액트 엘리먼트를 리턴하면 됨아래 코드는 id 순서대로 / 반대로 정렬하는 예시임배열 메소드 중 filter 와 배열형 스테이트를 활용하면 삭제 기능을 간단히 구현할 수 있음각 요소를 렌더링 할 때는 key Prop을 내

컴포넌트가 처음 렌더링 되고 나면 리액트가 콜백 함수를 기억해뒀다가 실행하며 그 이후로는 콜백 함수를 실행하지 않음컴포넌트가 처음 렌더링 되고 나면 리액트가 콜백 함수를 기억해뒀다가 실행함그 이후로 렌더링 할 때는 디펜던시 리스트에 있는 값들을 확인해서하나라도 바뀌면

리액트에서 입력 폼 만들기 제어 컴포넌트: 리액트에서는 인풋 값을 주로 state로 다루는데, 인풋 값과 state 값을 동일하게 만드는 게 핵심임 HTML과 다른 점 onChange 순수 HTML과 다르게 onChange Prop을 사용하면 입력 값이 바뀔 때마다

Hook의 규칙 반드시 리액트 컴포넌트 함수(Functional Component) 안에서 사용해야 함 컴포넌트 함수의 최상위에서만 사용 (조건문, 반복문 안에서 못 씀) useState State 사용하기 const [state, setState] = useStat

어떤 상황에 대한 정보를 의미함'사용자가 한국어를 사용하는 상황', '사용자가 영어를 사용하는 상황' 같은 걸 여러 컴포넌트에 공유하고 싶을 때 사용함프롭 드릴링(Prop Drilling): Props만으로 리액트 개발을 하다 보면 여러 곳에 쓰이는 데이터를 내려주고

리액트에서 경로에 따라 페이지를 나누도록 해주는 라이브러리리액트스러운 방법으로 컴포넌트를 사용해서 페이지를 나누는 것이 특징리액트 라우터를 사용하려면 반드시 라우터라는 컴포넌트가 필요함우리는 그 중에서도 BrowserRouter 라는 걸 사용했음이 컴포넌트를 최상위 컴

싱글 페이지 애플리케이션(SPA) 이해하기 > 리액트 라우터에서 ` 태그가 아닌 Link` 컴포넌트로 하이퍼링크를 만든 이유가 뭘까? 우리가 만든 게 (SPA) Single Pange Application이기 때문임 클라이언트 사이드 렌더링(Client-side R

기존 방식의 문제점 CSS 클래스 이름이 겹치는 문제 클래스 이름이 전역적인 특성을 가지고 있음 클래스 이름이 전역적이라는 건 한 컴포넌트에서 사용한 클래스 이름을 다른 모든 컴포넌트에서도 사용할 수 있다는 뜻 import 해오지 않은 CSS 파일에서도 같은 클래스 이

자바스크립트에서 많이 발생함컴파일 언어가 아닌 인터프리터 언어이기 때문컴파일 언어: 소스 코드를 기계어로 바꿔 놓고 실행하는 언어인터프리터 언어: 소스 코드를 한 줄씩 읽어서 실행하는 언어동적 타이핑 언어이기 때문변수의 자료형을 자유롭게 바꿔서 사용 가능개발자가 마음대

중괄호 안에서 각 항목을 쉼표로 구분해서 적어주면 됨기본값은 0부터 시작하는 정수임숫자 0은 실수하기 쉽기 때문에 Enum을 사용할 땐 되도록이면 값을 정해놓고 쓰는 게 좋음interface를 사용하는 방법은 interface를 쓴 다음, 객체 타입처럼 만들면 됨Int

HTML<태그이름>Element라는 이름으로 DOM 노드에 대한 타입을 사용할 수 있음기본적으로는 Event라는 타입을 쓸 수 있음구체적으로는 -Event로 끝나는 타입을 활용하면 됨예를 들어서 oninput 이벤트에 대한 타입은 InputEvent이고, oncl

라우팅 `` 컴포넌트 Next.js에서는 링크를 연결하는데 ` 태그 대신에 ` 컴포넌트를 사용함 ` 태그를 사용하면 페이지를 이동할 때 페이지 전체를 다시 로딩하기 때문에 속도가 느리고, 빈 화면이 잠깐 보이면서 깜빡거림이 생김 `` 컴포넌트는 Next.js에서 내부적

웹브라우저가 페이지를 로딩하기 이전에 이루어지는 렌더링프리렌더링에는 두가지 방식이 있음빌드를 하는 시점에 렌더링을 하는 것즉, 빌드할 때 html을 만드는 것빌드: 배포하기 전에 소스 코드를 실행할 수 있는 형태로 만들어 놓는 것Hydration: 이미 렌더링 된 ht