프론트엔드 

사이트 이름 페이지에 대한 정보에는 head 태그를 사용하고 (화면에 보이지 않음) 페이지 내용에는 body 태그 사용한다. 페이지 제목을 설정하고 싶을 때는 title 태그 사용한다. 인코딩 모든 브라우저에서 한글이 깨지지 않게 보여주려면 head 태그에 을 넣어

CSS 태그에 CSS를 적용하려면 style이라는 속성을 사용한다. <div style="CSS 속성 이름 : 속성 값"> 여러 속성들을 넣어줄 때는 세미콜론(;)을 붙이고 계속 적어주면 된다. background-color : 배경색 color : 글자색 font

오픈그래프로 소셜 공유 미리보기 만들기 <meta property="og:title" content="" og:title 페이지의 제목 og:url 인터넷상의 고유한 주소 og:type 페이지의 유형 og:image 이미지 미리보기 og:description 설명 O

기본 개념 CSS 규칙 선택자 { 속성: 속성값; 속성: 속성값; } 아이디 같은 h3 태그 중 하나에만 스타일을 적용하고 싶을 때 아이디를 사용해서 적용할 수 있다. <h3 id="hallasan">한라산 국립공원<h3> #hallasan{ color:#f

HTML (Hypertext Markup Language) 태그 (시작태그, 종료태그) 코멘트 <!-- 내용 --> 단축키: Cmd + / 링크 링크의 상대 주소 현재 폴더는 점 한 개(./)로 표시하고, 상위 폴더는 점 두 개(../)로 표시한다. 최상위 폴더는

&lt;meta>로 작성하는 HTML 태그로 메타데이터를 나타낸다. 메타데이터는 데이터를 설명하는 데이터이다.구글 검색 페이지에 사이트 설명이나 링크 미리보기 등에 사용된다.구글페이스북트위터메타 태그 특성

position 속성의 기본 값원래 있어야 할 위치에 배치일반적인 글의 흐름을 따른다.상대적인, 원래 있어야 할 위치를 기준으로 움직임margin이랑 다른 점 : 마진은 다른 애들도 같이 이동 relative는 원래있던 공간은 비워져있고 본인만 이동가장 가까운 포지셔닝

man 커맨드: 매뉴얼로 설명 나옴꿀팁화살표 위쪽 키 : 전에 사용했던 커맨드를 또 입력해야 할 때ctrl + a : 줄 가장 앞 부분으로 커서 이동ctrl + e : 줄 가장 뒷 부분으로 커서 이동Option + 앞 뒤 방향키 : 단어 앞 뒤로 이동ctrl + c :

Mac 기준메뉴 숨기기/보기 : Cmd + \\안내선 보기/숨기기 : Shift + R선택/이동하기 : V텍스트 : T원 : O사각형 : R프레임 : F여러 요소 선택 : Shift + 클릭색 선택 (아이드로퍼) : I그룹/프레임 내 요소 선택 : Cmd + 클릭전체

버전 관리 : 파일의 변화를 시간에 따라 기록했다가 나중에 돌아갈 수 있음지난 과정 확인 가능이전 버전으로 돌아갈 수 있음동시협업다른 컴퓨터의 작업물 보기 (백업본 만들기)깃허브 : 원격 저장소커밋이 저장되는 곳, 저장소디렉토리의 초창기 모습부터 최근 모습까지

PR(Pull Request) 다른 GitHub 사용자들에게 자신의 작업한 내용을 검토하고 머지해 달라고 요청하는 GitHub의 기능 PR 하는 법 작업할 프로젝트 생성하기 프로젝트 clone 하기 새로운 브랜치 생성하기 변경 사항 푸시하기 PR 생성하기 Crea

브라우저의 크기에 따라 요소들의 크기, 배치가 바뀌는 것\->브라우저의 가로 길이가 768px이 넘어가면 폰트 사이즈 36px, 24px이 됨프론트엔드 프레임 워크 (이미 민들어져있는 기능)세가지 구성원이 있다.1\. 컨테이너 (container)2\. 행 (row)3

html body 태그 안에이 코드로 js 파일 연결존재하지 않는 아이디를 입력하면 null값이 나옴여러 요소들을 한꺼번에 선택할 때 활용태그의 순서는 깊이와는 상관없이 위에서부터 차례대로존재하지 않는 클래스값을 입력하면 빈 HTMLCollection \[] 출력HTM

ECMAScript(ES)프로그래밍 언어의 표준, JavaScript가 갖추어야 할 내용을 정리해둔 설명서자바스크립트는 데이터 타입이 유연하다 (상황에 따라 변할 수 있다.)기본형NumberStringBooleanNull\-UndefinedSymbol : 유일한 값을

request : 웹브라우저가 서버로 보내는 요청response : 서버가 보내주는 응답fetch : 서버로 리퀘스트를 보내고 리스폰스를 받는 함수파라미터로 넘어온 url로 리퀘스트 보내고 서버로부터 리스폰스 받음서버로부터 리스폰스 오면 두번째 줄 실행리스폰스는 하나의

fetch함수에서 then 메소드는 콜백 함수를 등록하고 그 다음 줄 실행, 리스폰스가 도착한 후 콜백 함수 실행위 코드에는 두개의 콜백이 있다.(1) (response) ⇒ response.text()(2) (result) ⇒ { console.log(result);

await -> 어떤 프로미스 객체를 리턴하는 코드 앞에 붙여져 있음async : 비동기, 함수 안에 비동기적으로 실횅될 부분이 있다는 것을 의미await : 그 뒤의 코드를 실행하고 리턴하는 프로미스 객체를 기다려줌 (프로미스 객체가 fulfilled 상태 또는 re

node.js, vscode를 다운로드한다.빈 폴더를 생성 후 vs코드로 열기터미널에서 npm init react-app : 리액트 프로젝트 생성하기npm run start : 개발 모드 실행Ctrl + C : 개발 모드 종료구글에 react developer tool

리액트 파일이 실행되면 브라우저는 index.html 파일을 연다.그러고 나서 index.js 실행,ReactDOM.render 메소드는 첫번째 아규먼트를 활용해서 html 요소를 만들고 두번째 아규먼트에 그 요소를 넣어준다.자바스크립트와 HTML을 섞어서 쓸 수 있는

개발에서 빌드는 일반적으로 소스 코드 및 구성 요소들을 모아서 실행할 수 있는 파일로 만들고 최종적으로 배포할 수 있는 형태로 변환하는 과정을 의미한다.터미널을 열어서 npm run build하면 빌드 파일이 생성된다.로컬 환경에서 웹 서버를 실행하여 코드가 잘 동작하

mock.json 파일에 영화 리뷰 관련 데이터들이 있다.꼭 중괄호 안에서 map을 써야 하는 것은 아니고 변수에 지정해서 사용할 수도 있다. 작은 순서대로 정렬: numbers.sort((a, b) => a - b)크기가 큰 순서대로 정렬: numbers.sort((

fetch 함수 사용하기 async,await App.js useEffect 그냥 바로 로드 함수를 생성해서 실행하면 무한 루프에 빠지게 된다. 로드함수를 실행하는 부분을 useEffect를 사용해서 실행하면 맨 처음 렌더링 될 때만 사용되기 때문에 무한 루프를 막

리액트에서는 주로 인풋의 값을 state로 관리한다.state 값과 인풋의 값을 동일하게 만드는게 핵심리액트에서 onChange는 onInput처럼 사용자가 값을 입력할 때마다 onChange 이벤트가 발생한다.(html과 다른 점)submit 버튼을 눌렀을 때 기본

api에 POST를 보내고handleSubmit 함수를 통해 내용을 추가한다. 마지막에는 입력창을 비워줘야 하니까 초기 상태(INITIAL_VALUES)로 비워준다.리퀘스트 도중에 버튼을 누를 수 없게 비활성화도 해준다.새로고침 없이 화면에 리스폰스 데이터를 반영하는

전역 데이터를 다룰 때 Props와 State만 사용하면 Props를 여러 번, 여러 곳에 내려줘야 하는 문제점이 있다.=> 그래서 context 사용Context: 많은 컴포넌트에서 사용하는 데이터를 반복적인 Prop 전달 없이 공유LocaleContext.jsApp

리액트에서 컴포넌트로 페이지를 나누도록 해주는 라이브러리리액트 라우터의 핵심 컴포넌트에는Router, Routes, Route, Link 이렇게 4가지가 있다.리액트 라우터에서 사용하는 데이터들을 모두 갖고 있다.(현재 주소, 페이지 기록)라우터 컴포넌트도 내부적으로는

재사용하는 CSS 코드를 관리할 수 있다.ex)shadow.js에서 스타일을 만들고이렇게 적용시킬 수 있다.

모든 컴포넌트에 적용하고 싶은 코드가 생겼을 때, 글로벌 스타일 컴포넌트를 활용하면 된다.createGlobalStyle이라는 함수는 style 태그를 컴포넌트로 만드는 것인데, Styled Components가 내부적으로 처리해서 head 태그 안에 우리가 작성한

BEM 은 CSS 클래스 이름을 짓는 규칙이다.블록(Block), 요소(Element), 변경자(Modifier) 형태로 쓰고. 블록은 div 같은 영역을 의미하고, 요소는 button, input 같은 요소를 의미한다. 마지막으로 변경자는 요소의 변형을 표시하는 것이

웹 사이트에 로그인한다고 했을때, 로그인을 성공적으로 하고 나면 서버는 클라이언트에 일종의 인증서 같은 것을 보내준다. 클라이언트가 인증서를 가지고 오면 어떤 사람인지 구분하는데 사용된다. 클라이언트는 리뭬스트를 보낼 때마다 인증서를 리퀘스트와 함께 포함해서 보내야 하

쿠키는 서버에서 만들고 클라이언트는 거의 건드리지 않는다. 그런데 사이트에 따라서 클라이언트에서만 사용하는 데이터인데 저장해놓고 사용하고 싶은 경우가 있다. 이런 목적으로 나온 것이 세션 스토리지와 로컬 스토리지이다.현재 탭에서만 유용한 저장소이다.탭을 닫으면 데이터

개발자들이 논의를 통해 어떤 스타일로 코드를 작성할지 약속해 놓은 규칙, 매뉴얼이다.코딩컨벤션코딩 컨벤션을 일일이 외우고 사용하기는 어렵다. 그래서 이것을 대신해주는 개발 도구가 포매터와 린터이다.규칙을 미리 정해두면 포매터는 코드 스타일을 검사/수정(포매팅)해주고,

컴퓨터 프로그램을 관심사 별로 구별해서 분리하는 설계 원칙컴포넌트의 불필요한 반복이 없어지고, 책임이 단일화되어 전체 시스템을 유지보수하기 쉬워진다.시스템 전체가 유지보수성이 올라가 더 안정적이게 된다.각각의 컴포넌트가 단일 책임으로 자신의 관심사만 집중해서 확장 가능

자바스크립트에서 유독 런타임 오류가 많이 발생하는 이유는 코드를 미리 기계어로 바꿔놓고 실행하는 컴파일 언어가 아니라 코드를 한 줄씩 읽어서 실행하는 인터프리터 언어이기 때문이다.또한 자바스크립트는 동적 타이핑 언어이기 때문에 변수의 자료형을 자유롭게 바꿔서 사용 가능

상품 사이즈 처럼 값의 종류를 나열할 수 있는 타입실제로는 0부터 시작하는 정수이다.if문 같은 것을 쓸 때 0이 false 처리될 수 있으므로 값을 정해놓고 쓰는 것이 좋다.=을 쓰면 값을 정할 수 있다.똑같은 타입을 여러번 정의하는 것은 유지보수하기에 좋은 코드는

# 제네릭 특정한 타입으로 고정시켜놓는 것이 아니라 <>로 임의의 타입을 정의해놓고 그때그때 다른 타입을 쓸 수 있도록 하는 문법 ```ts function printArrat<T> (items: T[]) { for (const item of items) {

import, export 하는 방법은 자바스크립트와 똑같다.enum은 바로 앞에다가 쓰지는 못하고 export default를 따로 써줘야 한다.파일을 필드하면 소스코드와 빌드된 코드가 섞여있는데 빌드된 코드를 따로 폴더에 넣어주는 과정을 tsconfig.json에서

Create React App에는 템플릿이라는게 있다. 템플릿은 만들 프로젝트의 형태들을 미리 세팅해 좋은 틀이라고 할 수 있다.IT 분야에서 데이터나 소프트웨어 같은 걸 한 시스템에서 다른 시스템으로 옮기는 걸 마이그레이션이라고 부른다. 프로젝트를 마이그레이션 하는

트랜스 파일링TS -> JSJSX -> JS타입스크립트에서 리액트를 쓸 때는 tsx 코드를 브라우저가 바로 실행할 수 있는 형태인 JS로 변환할건지(react, react-jsx) 아니면 jsx 코드는 그대로 둘 건지(preserve) 정할 수 있다.

초기 로딩이 느리다.검색 엔진에 제공할 수 있는 정보가 적다.미리 렌더링해서 보내줄 html을 저장해 놓거나 서버가 그때그때 렌더링해서 html을 만들어서 보내준다.html을 다운 받자마자 렌더링 된 화면이 보임프리렌더링을 알아서 해 줌Vercel로 서버 호스팅파일 시

어떤 주소에 어떤 페이지를 보여줄지 정하는 것 파일의 경로가 주소에 매칭되는 라우팅 방식, pages라는 이름의 폴더 안에 페이지 파일을 만들면 알아서 라우팅한다. path 생성 구조/pages└ index.js -> my-domain.com/└ about.js ->

Image 컴포넌트

웹페이지 로딩 이전에 하는 렌더링프리렌더링이 일어나는 시점은 브라우저가 HTML 받아오기 전이다.정적 생성빌드를 하는 시점에 렌더링 하는 것 (빌드할 때 HTML을 만들어 놓는다.)서버사이드렌더링

api 폴더 이름은 반드시 api로 해줘야 한다.next.js에서 페이지 경로를 정했던 것처럼 파일의 경로가 앤드포인트의 경로가 된다./api/short-linksVSCode REST client로 GET 리퀘스트를 보낸다.request.http페이지와 마찬가지로 다이

데이터베이스 : 데이터를 따로 저장하고 관리하는 프로그램MongoDB 준비하기

주소 단축 기능 구현

서버가 리퀘스트를 보낸 유저가 누구인지 파악하는 과정인증을 하기 위해서는 먼저 서버에 유저에 관한 정보가 저장되어 있어야 한다.유저를 나타내는 모델이라는 것을 만든다.유저 클래스를 만든다고 생각하면 됨POST 보내서 유저를 생성한다. (id값으로 유저 구분)인증서로 유

한 서비스가 다른 서비스에 있는 보호된 리소스에 대한 접근 권한을 위임하거나 받는 기능A사이트에 있는 내용들을 B사이트로 옮기고 싶은 경우방법 1: 사용자가 직접 옮기기 -> 비효율적방법 2: 데이터를 받아오려는 사이트에게 데이터를 가지고 오려는 서비스에 대한 유저인증

회원가입

React Context의 아쉬운 부분들을 보완하기 위해서 Redux, Recoil 등 React와 함께 사용할 수 있는 다양한 상태 관리 라이브러리들이 등장했다.상태 관리를 하는 데이터는 내 컴퓨터에서만 사용하는 데이터인 클라이언트 상태 데이터와 서버에서 가져온 데

일단 기본 리액트 앱을 만들어준다.터미널에서 다음과 같은 명령어를 실행하여 리액트 쿼리를 설치한다.React Context에서 데이터를 전역적으로 사용하기 위해서 Context Provider를 설정해준것처럼 리액트 쿼리를 사용하려면 쿼리 클라이언트를 제공하는 Con

useQuery()가 있는 컴포넌트가 마운트되면 useQuery()의 쿼리 함수인 queryFn()이 자동으로 실행되면서 데이터를 가져온다.queryKey를 이용해 받아온 데이터를 캐싱할 수 있다. 이때 특정 데이터만 따로 캐싱하도록 queryKey 배열에 값을 추가할

두 쿼리가 의존관계가 있어 어떤 특정 순서대로 실행이 되어야 하는 경우에는 useQuery()의 enabled 옵션을 사용하면 된다.enabled 옵션을 사용하면 enabled값이 true가 되어야만 해당 쿼리가 실행되는데 이렇게 특정 값이나 조건이 충족된 이후에 실행

어떤 특정 값을 먼저 받아오거나 어떤 조건이 되었을 때 쿼리 함수를 실행하려면 다음과 같이 enabled 옵션을 사용하면 된다.쿼리 키에 페이지 정보를 포함해서 페이지네이션을 구현할 수 있다. placeholderData 옵션을 활용하면, 새로운 페이지를 보여줄 때 이

Storybook이란 UI 컴포넌트 개발 도구이다. 즉, 데이터와는 상관없이 순수하게 UI 컴포넌트 디자인을 쉽게 확인, 수정, 테스트를 할 수 있는 프로그램이다.개발자들 간에 컴포넌트 디자인을 쉽게 확인할 수 있다.또, 이미 있는 컴포넌트를 다시 개발할 위험성도 크게

테스트란 프로그램을 실행하여 오류와 결함이 있는지 확인하고 요구사항에 맞게 동작하는지 검증하는 절차이다. 프론트엔드 개발자가 디자인을 보고 마크업과 스타일링 코드를 작성한 뒤, 브라우저에서 렌더링된 결과를 확인하는 일련의 과정이 테스트이다. 또한, 기존의 기능을 변경