코드스테이츠 프론트앤드 부트캠프

7:00 기상!!!8:00 ~ 8:50 수업 준비 및 어제 배운 내용 복기9:00 ~ 18:00 부트캠프 수업18:00 ~ 19:30 저녁식사 및 휴식, 짧은 운동19:30 ~ 23:00 당일 복습, 블로깅하기01:00 이전 취침!구글링 하는 방법 (mnd키워드, 자연

Unit2. javascript 기초 (1) chapter1. 코드 기초 stackBlitz 사용법 console.log() 주석 넣기 chapter2. 타입 (number, string, boolean) chapter2-1. number타입 typ

if문 동치연산자 (===) 비교연산자 (>, ==) 논리연산자 (&&, ||) 부정연산자 (!) else문 : if문이 false 일 때 실행! else if를 사용하면 조건 추가 가능 삼항 조건 연산자 for문 반복문 활용

HTML(구조) / CSS(스타일) / JAVASCRIPT(상호작용) 차이< HTML >에서 자주 사용되는 태그< div > (Division) : 해당 줄의 공간 모두 사용< span > : 해당 영역만큼만 공간 차지< ing > : 이미지를 넣

Temp Body

html 코드

Bare minimum requirements Node.js 프로그램인 index.js를 실행시켜 CLI에서 결과 확인하기 range 모듈을 설치하고 사용방법 익히기 짝수를 생성하는 getListMultiplesOfTwo 함수를 range모듈에 작성

고정된 저장 공간을 차지하는 데이터이며, 원시 자료형은 모두 하나의 데이터만을 담고 있다.string, number, bigint, boolean, undefined, symbol, (null)JavaScript에서 원시 자료형이 아닌 모든 것은 참조 자료형이며 원시

javascript koans

일급 객체(first-class citizen)의 세 가지 특징을 설명할 수 있다.고차 함수(higher-order function)에 대해 설명할 수 있다.고차 함수를 자바스크립트로 작성할 수 있다. 일급객체(First-class Object)란 다른 객체들에 일반적

객체 지향 프로그래밍 (Object-Oriented Programming, OOP)이란 문제를 여러 개의 객체 단위로 나눠 작업하는 방식으로, 객체들이 서로 유기적으로 상호작용을 하는 프로그래밍 이론이다. (객체 = 데이터와 기능을 묶은 그룹)객체 지향 프로그래밍의 가

이전에 배운 객체 지향 프로그램의 특징 4가지 중 “상속”을 구현 할 때 프로토타입 체인을 사용한다.ex ) 클래스 Human 의 속성과 메서드 예시학생도 결국 사람이기 때문에 Student(자식)는 Human(부모)의 기본적인 메서드를 상속받을 수 있습니다. 다만,

동기(Blocking) : 하나의 작업이 끝나야 다른 작업 실행 (다른 작업의 실행을 막음)비동기 (Non-blocking) : 하나의 작업을 하는 도중에 다른 작업도 실행 (다른 작업의 실행을 막지 않음)JavaScript는 싱글 스레드 기반으로 동작하기 때문에 동기

1\. 선언형 : JSX 파일을 하로 명식적 작성이 가능한 선언형 프로그래밍을 지향함2\. 컴포넌트(Componant) 기반 : 하나의 기능 구현을 위해 여러 종류의 코드를 묶어두는 것 (컴포넌트로 분리하면 서로 독립적이고 재사용이 가능해서 기능자체에 집중이 가능!)3

서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라 화면 업데이트를 위한 필요 데이터만 서버에서 전달 받아 해당 부분만 업데이트하는 웹사이트를 말한다.장점사용자와의 interaction 에 빠르게 반응서버의 과부하 문제 감소전체 페이지를 렌더링 하지 않아 사용자도

state 컴포넌트를 사용하면서 내부의 내용이 변할 수 있는 값 usestate React에서는 state 를 다루는 방법 중 하나로 useState 라는 특별한 함수를 제공한다 props 부모 컴포넌트에게서 state를 받아오고 싶을 때 props(객체)로

상품 정보 같은 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것클라이언트와 서버는 요청과 응답을 주고받는 관계이며 클라이언트 - 서버 아키텍쳐는 요청이 선행되고 그 후에 응답이 온다.리소스를 저장하는 공간을 데이터베이스라고 하는데 이처럼 클라이언트 - 서버

REST API의 이해REST API 성숙도 모델에 대한 이해REST API 문서 읽기REST API에 맞춰 디자인Open API 와 API Key에 대한 이해 응용 프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어에서 제공하는 기능을 제어할 수 있게 해주는 인

SOP에 대한 이해CORS의 정의와 동작 방식에 대한 이해CORS 설정 방법 이해잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여줌 (보안상 이점)다른 사이트와의 리소스 공유를 제한하기 때문에 로그인 정보가 타 사이트의 코드에 의해서 새어나가

학습 목표✏️ 재귀의 의미를 설명할 수 있다. Javascript에서 재귀 호출할 수 있다. 재귀함수를 언제 쓰는지 설명할 수 있다. 재귀의 기초(base case)와 탈출 조건에 대해 이해 재귀 함수를 base case와 recursive case로 나눠서

제이콥닐슨의 10가지 사용성 평가기준을 기억하기제이콥닐슨의 사용성 평가 기준이 각각 이떤 의미인지 이해하기UI(Graphical User Interface, 그래픽 사용자 인터페이스)GUI는 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경을 말한다. GUI의

학습 목표✏️ Figma의 사용 방법을 익힌다. Figma로 프로토타입을 제작할 수 있다. 웹 사이트의 UI/UX를 분석할 수 있다. UI/UX를 분석한 내용을 토대로 개선할 수 있다. Bare Minimum Requirements Figma로 프로토타입을

Component Driven Development(CDD)의 필요성과 이점에 대해서 이해CSS 방법론들의 특징과 장단점을 이해Styled Components의 기본 사용법을 익힌다.

DOM 객체 주소가 필요한 상황이 발생할 경우 사용하는 React Hook

React에서 UI 컴포넌트를 만드는 실습

Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해해보자

Redux의 주요 개념인 Action, Dispatch, Reducer, Store를 작성하고 연결하여 사용해보자

웹 표준과 웹 접근성을 지키기 위해서 노력하면 더 많은 사람들이 찾을 수 있는, 더 많은 사람들이 이용할 수 있는 웹 페이지를 만들 수 있다

웹표준 & 웹접근 과제 하면서 헷갈린 내용 정리

패킷교환 방식은 패킷이라는 단위로 데이터를 잘게 나누어 전송하는 방식으로 각 패킷에는 출발지와 목적지 정보가 있고 이에 따라 패킷이 목적지를 향해 가장 효율적인 방식으로 이동할 수 있다.

쿠키는 서버에서 클라이언트에 영속성이 있는 데이터를 저장하는 방식으로 쿠키를 이용하는 것은 단순히 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하는 것이 아닌 서버로 쿠키를 다시 전송하는 것도 포함된다.

토큰은 사용자의 인증 정보를 서버가 아닌 클라이언트 측에 저장하는 인증 방식으로 기존의 세션 인증 방식과 비교해 서버의 과부하나 메모리 부족 등의 문제를 극복하기 위해 고안되었다.

OAuth는 인증을 중개해주는 메커니즘으로 보안된 리소스에 액세스하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화하는 프로토콜이다.

자료구조란 여러 데이터의 묶음을 저장하고, 사용하는 방법을 정의한 것으로 특정한 상황에 놓인 문제를 해결하는 데에 특화되어 있다

웹 개발에서 말하는 최적화란 주어진 조건 아래에서 최대한 빠르게 화면을 표시하는 것을 말하며 프론트엔드 웹 개발 중에서 할 수 있는 최적화 방법이다.

Lighthouse가 무엇인지 알아보고 직접 사이트에 적용해보자!

개발을 통해 만든 결과물을 사용자들이 이용하게 하려면 배포작업을 거쳐야한다. 배포를 위한 플랫폼들은 여러가지가 있지만 오늘 우리는 AWS(amazon web services)의 EC2를 통해 스프린트를 진행해 보았다

GitHub Actions는 Github가 공식적으로 제공하는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼이다.

js는 함수나 변수의 타입을 명시적으로 지정하지 않아도 동작하는 경우가 많아 예상치 못한 결과를 초래할 수 있기 때문에 이러한 문제점을 보완하기 나온 언어이다.