Worksheet
1.[Worksheet-220412] Git
Part 2. Git을 활용한 버전관리 Ch 1. 버전관리 Git? 컴퓨터 파일의 변경사항을 추적하고 여러 사용자들 간에 해당 파일 작업을 조율하기 위한 대표적인 버전 관리 시스템
2.[Worksheet-220413] Markdown
마크다운은 텍스트 기반의 마크업언어로, 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다.장점문법이 쉽고 간결하다.관리가 쉽다.단점표준이 없다.모든 HTML 마크업을 대신 할 수는 없다.예시 예시 기울이기 두껍게두껍게 기울이기취소선밑줄예시 1st2nd3r
3.[Worksheet-220413] 개요
Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 Ch 2. 개요 HTML, CSS, JS HTML 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당 CSS 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠
4.[Worksheet-220414] VS Code, 확장 패키지, 단축키
visual studio code 설치처음 작성할 때 보기 좋게 작성하기BeautifyCtrl + Alt + L 로 단축키 설정했다.태그를 한 번에 바꿔주는 확장자 설치하기HTML 파일에서만 실행할 수 있다.Live Server는 개발을 위해 임시로 로컬 서버를 오픈하
5.[Worksheet-220415] HTML, CSS, JS
문서의 HTML 버전을 지정마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도이다.<html>문서의 전체 범위HTML문서가 어디에서 시작하고 끝나는지 알려준다.<head>문서의 정
6.[Worksheet-220418] HTML
열린 태그와 닫힌 태그로 요소의 내용을 감싸주기줄바꿈, 들여쓰기로 요소 간 구분하기상위(조상) 요소나를 기준으로 내 위에 있는 모든 요소하위(후손) 요소나를 기준으로 내가 감싸고 있는 모든 요소종료(닫힌) 태그가 없는 태그작성 방법<tag>편리한HTML 1/2/3
7.[Worksheet-220419] CSS 개요
HTML/CSS/JS로 만드는 스타벅스 웹사이트 CSS 개요 기본 문법, 주석 selector { attribute: value; } 선택자(selector) 스타일을 적용할 대상 HTML 파일에서의 tag 속성(attribute) 스타
8.[Worksheet 220419] CSS 속성-1
HTML/CSS/JS로 만드는 스타벅스 웹사이트 CSS 속성 CSS 속성(Properties) Width, Height 요소의 가로/세로 너비 기본 값 auto 브라우저가 너비를 계산 max-width, max-height 요소가 커질 수 있는 최대 가로/
9.[Worksheet 220420] CSS 속성-2
HTML/CSS/JS로 만드는 스타벅스 웹사이트 배치
10.[Worksheet 220421] CSS 속성-3
HTML/CSS/JS로 만드는 스타벅스 웹페이지 CSS 속성 Transition 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성 transition: 속성명 지속시간 타이밍함수 대기시간; 속성 transition-property 전환 효과를 사용할 속성
11.[Worksheet 220421] SCSS
SCSS(Sass) CSS 전처리 도구. SCSS와 Sass의 차이점은 중괄호 ({})와 세미콜론(;) 여부 프로젝트 생성 npm init -y npm i -D parcel-bundler package.json 의 scripts 부분에 추가 parcel bun
12.[Worksheet 220425] JS 선행
dash-case(kebab-case)단어와 단어 사이를 dash(-)로 이어준다. 띄어쓰기 대신 dash(-)HTML, CSS 에서 주로 사용한다.snake_case단어와 단어 사이를 under bar(\_) 로 이어준다. 띄어쓰기 대신 under bar(\_)HTM
13.[Worksheet 220426] Node.js
Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임. (프로그래밍 언어가 동작하는 환경)웹 브라우저에서는 HTML, CSS, JS가 동작하는데, 여러가지 도움을 주는 모듈을 Node.js 환경에서 브라우저에서 동작하는 언어들
14.[Worksheet 220426] JS 시작
ECMA 스크립트(ES)는 자바스크립트를 표준화하기 위해 만들어졌다.위키백과 ECMA이전 시간에 한 npm, parcel-bundler 설치한다.JS에서 세미콜론(;)은 특별한 상황 아니면 붙이지 않아도 문제 없다.하지만 나는 붙일거지typeof 를 사용하면 데이터의
15.[Worksheet 2220426] JS 함수
return 은 함수 종료와 같다.x가 2보다 작으면 return 되므로 어떤 값도 반환하지 않고 함수는 종료된다.() => {}화살표 함수로 함수를 축약해서 사용할 수 있다.괄호와 return을 생략한다.객체 데이터를 사용할 때는 {} 로 의미가 겹친다.화살표 함수
16.[Worksheet 220426] JS 클래스
생성자 함수.거의 똑같은 구조의 객체 데이터가 있다.위의 구조를 이런 방식으로 작성하였다.생성자 함수를 함수와 구분하기 위해 new와 함께 Pascalcase로 작성하도록 한다.어떤 기호만으로 특정한 과정을 거치지 않고 데이터를 작성하는 것을 리터럴 방식이라고 한다.g
17.[Worksheet 220427] JS Data
JavaScript Level up JS 데이터 문자 > MDN-string String 전역 객체는 문자열의 생성자이다. String.prototype.indexOf() 매개변수로 주는 데이터(찾으려는 문자열)가 String 에서 몇 번째 인덱스에 있는지 반
18.[Worksheet 220428] JS Data 실습
기본 통로하나의 파일에서 하나의 데이터만 내보낼 수 있다.이름이 없어도 된다. import로 가져오기 할 때 이름이 지정돼있지 않기 때문에 원하는 이름을 지정할 수 있다.이름을 지정해야하는 통로하나의 파일에서 여러개의 데이터를 내보낼 수 있다.가져올 때 이름을 {} 로
19.[Worksheet 220428] 정규표현식
heropblog-regexp문자열을 검색하고 대체하는 데 사용 가능한 일종의 형식 언어(패턴)이다.문자 검색문자 대체문자 추출생성자RegExp() 생성자 함수를 사용한다. 리터럴 방식/ 로 감싸진 패턴을 리터럴로 사용한다.regexp.test(str)일치 여부(boo
20.[Worksheet 220429] Typescript
자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다.자신이 원하는 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행할 수 있다.자바스크립트는 interpreted 언어인데, 타입스크립트는
21.[Worksheet 220429] Basic Types
TypeScript Essentials Basic Types Typescript VS Javascript 앞서 말했듯, typescript 데이터 타입은 한번 지정되면 다른 타입으로 재할당 될 수 없다. 따라서 다음과 같이 편리한 상황이 가능하다. Typescr
22.[Worksheet 220429] Type System
컴파일러에게 사용하는 타입을 명시저긍로 지정하는 시스템컴파일러가 자동으로 타입을 추론하는 시스템타입을 명시적으로 지정할 수 있다.그렇지 않으면, 타입스크립트 컴파일러가 자동으로 타입을 추론한다.타입을 명시적으로 지정하지 않은 경우, 타입스크립트가 추론 중 'any'라고
23.[Worksheet 220502] TypeScript Compiler
타입스크립트가 컴파일 할 때 어떤 파일과 어떤 방식으로 컴파일 할지 방식을 규명해둔 것이다.https://json.schemastore.org/tsconfigcompileOnSaveextendsCompileOptionsfilesincludeexcluderefe
24.[Worksheet 220502] Interfaces
외부적으로 드러나는 어떤 개체의 사용 방식이 적혀있는 타입.인터페이스는 JS에는 없다.컴파일 타임에서만 이용하기 위해서 사용하는 것.? :인터페이스에서 클래스를 implements 하는 방법이다.인터페이스끼리 상속하는 방법이다.function, array, inters
25.[Worksheet 220502] Classes in TS
object를 만드는 blueprint클래스 이전에 object를 만드는 기본적인 방법은 function 이다.TS에서 클래스는 사용자가 만드는 타입의 하나라고 볼 수 있다.class 키워드를 사용해 클래스를 만든다. 이름은 보통 대문자로 작성한다.new를 이용하여 c
26.[Worksheet 220503] Generics
Extends를 사용해서 사용자에게 어떤 가이드를 제공할 수 있다.아무 타입이나 넣는 것을 방지하도록 하는 것.keyof어떤 객체의 key의 이름들로 union type으로 반환된다.type Keys = keyof IPerson;\-> IPerson의 key인 name
27.[Worksheet 220503] Webpack
Part 8. Bundler Bundler? > JavaScript 번들러로 본 조선시대 붕당의 이해 [JavaScript] 번들러(Bundler)란? 많은 서드파티를 필요로 하는 복잡한 어플리케이션이라면 Webpack 최소한의 서드파티로 라이브러리를 만들고 싶
28.[Worksheet 220504] React
React 맛보기 JSX const element = hihi JavaScript의 확장 문법 HTML 태그를 변수화 할 수 있다. 멀티 element `` `` element 찍어내기 재사용 가능한 함수를 만들어서 element를 쉽게 만들어낸다. Cus
29.[Worksheet 220512] React Rerendering, Event Handler
React 맛보기 React의 rerendering 바닐라JS 변경으로 인해 element를 다시 그림 number가 바뀔 때마다 div까지 같이 다시 그려지고 있다. React 변경된 부분만 다시 그림 -> react는 효율적으로 rerendering 한다
30.[Worksheet 220512] React Hook
React 맛보기 useState Component elements의 집합 useState 상태 값을 관리해주는 hook 위의 코드에서 setState를 두고 요소가 변경될 때마다 다시 render 해주어야 하는 불편함이 있었는데, useState() 를 사용
31.[Worksheet 220512] React Style, useRef, Form
className문자열style객체, 카멜 케이스.className보다 우위에 있어서 먼저 적용된다. 덮어씌워짐.DOM 조작하기DOM과 Element의 차이?input 태그가 새로고침 되자마자 바로 focus 되게 하기getElementByIduseRef 사용해서 만들
32.[Worksheet 220513] React Key, 상태 끌어올리기, Data Fetch
React 맛보기 Key와 리랜더링 여기서 이런 warning이 뜬다. unique한 key 값이 필요하다는 것. key? value를 특정하는 이름! 우리도 지정해준 id 값이다. 컴포넌트들을 잘 재사용하기 위해서는 unique한 id 값을 지정해주고 사용해야
33.[Worksheet 220513] React 공식문서 초급
Ch 2. React 공식문서로 디테일잡기(초급) JSX javascript의 확장된 문법 React “엘리먼트(element)” 를 생성 Props props 컴포넌트에 전달되는 단일 객체 순수함수처럼 동작해야한다. props 자체를 수정해서는 안된다. 컴포
34.[Worksheet 220516] React 공식문서 고급 - Hooks
class의 단점을 보완하면서 라이프 사이클 등과 관련된 함수를 재사용 가능하게 한다.Hook을 이용하여 기존의 class 바탕의 코드를 작성할 필요없이 상태 값과 여러 react 기능을 사용할 수 있다.컴포넌트 사이에서 상태 로직 재사용의 어려움Hook은 계층의 변화
35.[Worksheet 220516] React 공식문서 고급 - Composition, HOC, Memoization
React 공식문서로 디테일 잡기(고급) Composition Composition은 합성으로 어떤 컴포넌트 안에 컴포넌트를 넣는 것이다. 두 가지 방법이 있다. Children props Children을 사용해서 그대로 가지고 오는 방법이다. Custom
36.[Worksheet 220517] React 공식문서 고급 - Context, Protal, Render Props
컴포넌트 트리를 넘어 데이터를 공유할 수 있는 방법으로, Props drilling 을 해결하기 위한 방법이다.context를 사용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리에 데이터를 넘겨줄 수 있다.전역적인 데이터를 관리할 때 유용하다. (로그인
37.[Worksheet 220517] React 공식 문서 고급 - PropsTypes, Reconcilation / React Dev Tool
Props의 타입을 확인하기 위한 도구 (flow, ts 와 같은 정적 타이핑 도구)타입 유효성 검사기prop에 유효하지 않은 값이 전달 되면 js 콘솔창에 보이고, 성능상의 이유로 개발 모드에서만 확인된다.propsTypes 내부에 함수를 넣어줘서 커스텀한 유효성 검
38.[Worksheet 220517] 라이브러리 기초 - Date
라이브러리 === 개발 편의를 위한 도구의 모음. 공구!프레임워크 === 기반 구조까지 잡혀있음. 공장!React는 도구(라이브러리)의 모음이다.필요특정 기능이 필요해지고 직접 구현하기에 벅차다.더 나은 도구가 필요해진다.트렌드에 따른 새로운 기술에 대한 호기심.검색사
39.[Worksheet 220517] React 라이브러리 - 스타일링
설치npm install --save styled-componentsglobal namespace글로벌 변수를 지양해야하는 js와 대치dependenciescss 간의 의존 관리dead code elimination안 쓰는 css 인지가 어려움minification클래
40.[Worksheet 220518] React 데이터 모킹 라이브러리
Mock(모의 데이터)을 만들어서 활용하는 방식data fetch를 해야하는 경우 통신을 통해 응답을 내려주는 서버가 있어야 한다. 그래서 모킹을 활용하면 서버를 만들지 않고 활용할 수 있다.API 요청으로 내려올 데이터를 프론트에서 모킹하거나, 서버의 역할을 해주는
41.[Worksheet 220518] 상태관리 라이브러리 - Redux
상태관리 라이브러리 Redux Flux Architecture Redux는 flux를 구현해놓은 라이브러리. Redux 특징 One way data flow 데이터가 단방향으로 흐른다. -> 컴포넌트가 많아지면 이슈가 발생 -> lifting up -> 복잡해
42.[Worksheet 220518] 상태관리 라이브러리 - Mobx
설치npm install mobxnpm install mobx-reactAction -> State -> Derivation / Reactionobserver를 통해서 react component가 mobx의 변경을 이해한다.makeAutoObservablemakeOb
43.[Worksheet 220519] GraphQL
GraphQLAPI를 위한 Query Language.SQL : 구조화된 질의어RDBMS(관계형 데이터베이스 관리 시스템)의 데이터 관리를 위해 설계된 언어이다.DB로부터 데이터를 효율적으로 가져오기 위한 언어이다.GraphQL서버로부터 데이터를 효율적으로 가져오기 위
44.[Worksheet 220523] GraphQL 심화
GraphQL
45.[Worksheet 220523] Next.js
Next.jsVercel(Frontend deploy flatform)이 만든 React Framework(for production)라이브러리를 표방한 React의 장점은 살리되 다양한 편의 기능들을 추가시킨 Framework의 필요를 충족시킨 Framework.렌더
46.[Worksheet 220524] Next.js 기본
https://nextjs.org/learn/basics/create-nextjs-appNext.js는 다양한 기능을 추상화해서 제공한다.파일 구조 그대로 url에 반영된다.페이지 이동할 때 a 태그 사용한 것페이지 이동할 때 next의 link 사용한 것\-
47.[Worksheet 220531] Next.js 심화
https://nextjs.org/docs/going-to-production캐싱/DB-BE 동일 regionJS code는 최소화. js bundle 로드 타이밍 최적화로깅/오류 처리/404, 500 페이지 커스텀Lighthouse로 성능 측정/지원 브라우저