노트

2022년 6월 23일 코드스테이츠 프론트엔드 부트캠프가 시작했습니다.NFT에 관심을 가지게 되면서학부 때 복수전공 했던 개발에 대해흥미가 생겨서 개발자로 이직을 결정하게 되었습니다.지금은 NFT에 대한 관심은 식었지만개발에 대한 열망은 아직 뜨거워서나이 29, 늦었다

고정형 마인드셋 : 재능과 능력은 변하지 않는다고 생각성장형 마인드셋 : 재능과 능력은 노력을 통해 변한다고 생각연구결과 어려운 문제를 즐겁게 도전으로 받아들이는 아이들과싫어만 하는 아이들의 뇌파활성도가 천차만별로 나왔고어려운 문제를 싫어만 하는 아이들은 부정행위 등으

2022.06.24 금요일 🌧 커피의 사전적 정의인 '끓여서 마실 수 있도록 볶아 놓은 커피나무 열매의 씨앗, 또는 그것을 빻은 불말 상태의 물질로 그 씨를 끓이거나 분말을 뜨거운 물에 타서 만든 짙은 갈색 음료' 라고 말하지 않고 커피라는 "이름"으로 부르기로 약

'trusy'와 'falsy' 가 조건문에서 작동하는 방식을 이해할 수 있다.비교 연산자를 통한 엄격한 비교(===, !===)에 대해 이해할 수 있다.'if'와 'else if', 'else'를 이해하고 무리 없이 활용할 수 있다.논리 연산자를(&&, ||, !...

'length' 속성을 활용해 문자열의 길이를 확인할 수 있다.두 개 이상의 문자열을 하나의 문자열로 만들 수 있다.'slice()' 메서드를 활용해 문자열을 원하는 만큼 '복사'할 수 있다.영문으로 된 문자열을 대문자 또는 소문자로 바꿀 수 있다.문자열 중 원하는 문

... 배열 앞에 ... 을 사용하면 배열 안의 값들이 나열되어진다.

단순한 반복을 보다 효율적이고 간결하게 할 수 있도록 해줍니다.반복문을 활용하여 단순한 기능을 반복하여 수행할 수 있다.반복문(for문)과 문자열, 숫자를 이용해 반복적으로 코드를 실행시킬 수 있다.기본적인 for문 '( for ( let i =0; i < 5;

웹 개발에 있어서 HTML, CSS, JavaScript 의 열할을 각각 설명할 수 있다.HTML (Structure, 구조)CSS (Presentation, 스타일)JavaScript (Interaction, 상호작용)웹 개발 하나의 건물을 만드는 것집의 구조를 그리

HTML이 "구조를 표현하는 언어"라는 의미를 자신의 언어로 표현할 수 있다.HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.자주 사용되는 HTML요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.<div>, <span> 요소가 무엇이고,

만들고 싶은 앱의 와이어프레임을 그려볼 수 있다.와이어프레임만 보고 HTML로 코딩할 수 있다.<div> 요소 또는 <section>, <header> 등의 시맨틱 요소로 영역을 구분하는 이유를 이해할 수 있다.HTML 문서에서 언제 id 혹은 clas

CSS 기초 개요 HTML 웹 페이지의 구조 담당, CSS는 HTML로 구성한 구조의 외부와 내부를 꾸미는 역할을 담당

레이아웃 개요 각각의 요소를 목적에 맞게 배치하는 것, 웹 개발자에게 웹 사이트 목적에 맞게 화면을 만드는 작업, 레이아웃은 자바스크립트 만큼 중요합니다. 학습 목표 레이아웃을 위한 HTML을 만들 수 있다. 와이어프레임 웹 또는 어플리케이션 개발할 때 레이아웃의

Flexbox 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법입니다. 학습 목표 를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해한다. 을 이용하여 요소를 정렬할 방향을 결정할 수 있다. 와 를 이용하여 수평-수직 정렬을 결정할 수 있다. 를 이용하여 요소를

계산기 목업 만들기 학습 목표 HTML과 CSS를 활용하여 만들고자 하는 웹 애플리케이션의 레이아웃을 구성할 수 있다. Flexbox 속성을 이용하여 자식 요소를 정렬할 수 있다. 자식 요소에 속성을 추가하여 부모 요소에서 각각의 자식 요소가 차지하는 비중을 조절할

CLI (Command-Line Interface) Linux 환경에서 CLI를 이용하는 방법은 개발자가 되기를 원하는 사람이라면 반드시 학습해야 합니다. 학습 목표 리눅스 터미널을 실행할 수 있다. CLI를 이용한 작업과 GUI를 이용한 작업이 동일함을 이해할 수

패키지와 패키지 매니저 패키지의 설치, 변경, 삭제 등 관리를 편하게 해주는 도구입니다. 학습 목표 패키지와 패키지 매니저 필요성을 이해할 수 있다. 각 운영체제에 맞는 패키지 매니저를 사용할 수 있다. 튜토리얼(macOS - brew) 전제조건 : 가 설치 되어

Node.js Node.js 는 JavaScript 런타임입니다. Node.js 등장 후 JavaScript 를 통해 서버를 구축하는 등 활용폭이 크게 확장되었습니다. 학습 목표 nvm, Node.js, npm 을 설치하고 버전을 확인할 수 있다. 명령어 를 이용해

Git 버전관리와 협업의 기본 학습 목표 버전 관리 시스템의 필요성을 이해할 수 있다. Github와 Git의 관계에 대해 이해할 수 있다. local repository와 remote repository의 차이를 이해할 수 있다. Git 장점 버전 관리를 통해 하

Git 환경설정 Git을 이용할 때 필요한 환경 설정은 사용자 정보와 에디터 설정입니다. 학습 목표 Git의 환경설정을 할 수 있다. 사용자 정보 설정 : 사용자 이름 설정 : 이메일 주소 설정 옵션으로 설정하면 사용자 홈에 저장되므로 을 설정할 때 처음 한 번만

배열에서 특정 인덱스(index)의 요소(element)를 조회하거나 변경할 수 있다.length 속성을 이용하여 배열의 길이를 조회할 수 있다.배열의 요소가 배열인 이중 배열을 이해하고 이중 배열의 요소를 조회하거나 변경할 수 있다.배열의 각 요소에 대하여 반복하는

반복가능한 객체(Array, Map, Set, String, TypeArray, Object 등)에 대해 반복하여 각 개별 속성값들을 탐색합니다.

객체 개요 입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있습니다. ex) 사용자 정보 등 학습 목표 배열과 객체의 특징을 구분하고 배열과 객체의 특징에 따라 웹 애플리케이션 개발 시 어떻게 사용되는지 이해한다. 객체 속성(pr

개요 고정된 공간을 차지하는 데이터를 원시자료형(primitive data type), 대량의 데이터를 다루기에 적합한 배열과 객체는 참조 자료형(reference data type) 이라고 분류합니다. 참조 자료형은 원시 자료형과 달리 저장 공간이 계속 늘어날 수 있

개요 변수의 유효범위, 변수 접근 규칙 학습 목표 스코프의 의미와 적용 범위를 이해한다. 스코프의 주요 규칙을 이해한다. 전역 스코프와 지역 스코프의 차이를 이해한다. block scope와 function scope의 차이를 이해한다. 변수 선언 키워드 (, , )

개요 JavaScipt에서는 다른 컴퓨터 언어와는 조금 다른 특성을 종종 가지고 있습니다. 그 중 종종 사용되는 클로저라는 개념이 있습니다. 학습 목표 클로저 함수의 정의와 특징에 대해서 이해할 수 있다. 클로저가 갖는 스코프 범위를 이해할 수 있다. 클로저를 이용해

KPT (Keep Problem Try) 1. 목표상기하기 질문 '내'가 현재 학습을 통해 이루고자 하는 것은 무엇인가요? 현재 바라는 목표를 이루었다는 '나'는 어떻게 변해 있을까요? '나'에게서 어떤 모습을 보았을 떄 목표를 이루었다고 말할 수 있을까요

고차함수 객체지향비동기 React네트워크 Server매일 9~10시 알고리즘 1 문제 풀이 후 제출최선의 노력 과 배려 로 임합니다.URClass 로그인, 로그아웃가능시간 06:00 - 22:00째깍이 입실, 퇴실가능시간 08:30 - 19:30

개요 일급 객체와 고차 함수 개념에 대해 학습합니다. 학습 목표 일급 객체(first-class citizen)의 세 가지 특징을 설명할 수 있다. 고차 함수(higher-order function)에 대해 설명할 수 있다. 고차 함수를 자바스크립트로 작성할 수 있다

배열 내장 고차 함수 filter에 대해서 이해할 수 있다.filter에 대한 이해를 기반으로 나머지 내장 고차 함수를 학습할 수 있다.filter, map, reduce, forEach, find, sort, some, every고차 함수를 쓰는 이유를 설명할 수 있

개요 컴퓨터 공학의 근간을 이루는 개념 중 하나인 추상화(abstraction)을 설명하면서 고차 함수가 추상화에 어떻게 사용되는지 살펴보겠습니다. 학습 목표 추상화에 대해서 이해합니다. 높은 수준의 추상화에대해서 학습합니다. 고차 함수가 추상화에 어떻게 사용하는지

객체 지향 프로그래밍은 사람이 보고 이해하는 방법과 매우 흡사합니다. 코드를 추상화하여 직관적으로 생각할 수 있기 때문입니다.하지만 다른 프로그래밍 언어(Java, C객체 지향 프로그래밍은 절차 지향 프로그래밍과 다르게 데이터와 기능을 한곳에 묶어서 처리합니다.속성과

프로그램 설계 철학 중 하나인 객체 지향 프로그래밍은 객체로 그룹화합니다. 이 객체는 한번 만들고 나면 메모리상에서 반환되기 전까지 객체 내의 모든 것이 유지됩니다.객체 지향 프로그래밍에 대해 학습한다.객체 지향 프로그래밍으로 프로그래밍 할 수 있게 된다.객체 (인스턴

개요 타입스크립트는 보다 객체 지향적으로 디자인되었습니다. 학습 목표 타입스크립에서 클래스를 어떻게 생성하는지 학습한다. 타입스크립트 키워드에 대해 학습한다. 타입스크립트 키워드에 대해 학습한다. 은닉화

프로토타입과 클래스, 프로토타입 체인에 대해 학습합니다.프로토타입이 무엇인지 설명할 수 있다.프로토타입과 클래스의 관계에 대해 설명할 수 있다.원형 객체를 의미합니다.관계도출처<코드스테이츠 Urclass)비교연산자로 확인

객체 지향 프로그래밍의 특성 중 상속을 구현할 때 프로토타입 체인을 사용합니다.프로토타입 체인에 대해 설명할 수 있다.JavaScript에서 클래스 상속을 사용할때 프로토타입이 체인과 같은 형태로 구조화됩니다.인스턴스의 \_\_proto\_\_ 속성을 활용해서 부모 클

개요 백그라운드 실행, 로딩 창, 서버요청/응답, 큰 용량의 파일 로딩 작업 등은 비동기적(non-blocking)으로 작동되어야 효율적입니다. 학습 목표 어떤 경우에 중첩된 콜백(callback)이 발생되는지 이해할 수 있다. 중첩된 콜백(callback)의 단점,

인자: 1. 실행할 콜백 함수, 2. 콜백 함수 실행 전 대기 시간 (밀리초)출력: 임의의 타이머 ID인자: 타이머 ID출력: 없음인자: 1. 실행할 콜백 함수 2. 콜백 함수 실행전 대기 시간출력: 임의의 타이머 ID인자: 타이머 ID출력: 없음

"비동기 이벤트 기반 JavaScript 런타입"인 Node.js와 내장모듈, 서드 파티 모듈에 대해서 학습합니다.Node.js 내장 모듈을 사용할 수 있다.서드 파티 모듈 (3rd-party module)을 활용할 수 있다.Node.js 공식 문서를 활용하여 fs.r

앞서 코스를 수료한 후, 개발자로 근무 중인 선배 수료생과 만나는 시간실제 개발자가 일 하는 환경에 대해 생생한 이야기 나눔실제 근무시에 필요한 하드스킬/소프트스킬에 대해서 나눔코드스테이츠 부트캠프를 더 잘 활용하는 정보 나눔성함 : 배윤수한마디 : "개발 세계는 숲이

비동기 요청의 가장 대표적인 사례는 네트워크 요청입니다. URL로 요청하는 것을 가능하게 해 주는 API가 fetch API입니다.fetch에 대해 이해할 수 있다.fetch를 이용하여 데이터를 불러올 수 있다.흔히 보는 포털 사이트를 봤을때 "고정적인 정보"와 "변하

부트캠프 한달차 넘어가는 이 시점에서 드디어 리액트에 들어왔네요. 리액트도 부트캠프 전에 공부했었고 좋은 라이브러리라고 느껴졌지만 이론이나 숙련도가 너무 부족했는데 이번 계기로 이론과 숙련도가 탄탄하게 성장하도록 하겠습니다.리액트는 컴포넌트 단위로나누어 생각하고 개발하

자바스크립트의 확장 문법 JSX 와 리액트의 핵심 Component 에 대해 학습합니다.JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.map() 메서드를 활용하여 여러 데이터를 렌더링 할 수 있다.React 컴포넌트(React Component)의 필요성에

create-react-app 을 사용한다면 하나의 명령 만을 ㅗ자신만의 리액트 프로젝트를 시작할 수 있습니다.Create React App 소개를 보고, Crete React App 이 무엇인지 대략적으로 이해할 수 있다.npx create-react-app 으로 새

React SPA 의 등장 대벽과 기본 개념에 대해 학습하고 컴포넌트를 어떻게 활용할 수 있을지 고민해 봅니다.SPA (Single-Page Application) 개념을 이해하고 설명할 수 있다.SPA의 장, 단점에 대해 이해하고 설명할 수 있다.와이어프레임을 보고

경로에 따라 다른 뷰를 보여주기 위해 사용하는 React Router 라이브러리에 대해서 학습합니다.React에서 npm으로 React Router를 설치하고 이용할 수 있다.React Router를 이용하여 SPA를 구현할 수 있다.라우팅 구조를 짤 수 있어야 하고,

개요 React 에서 데이터를 다루는 두 가지 방법인 State 와 Props 에 대해 학습합니다. 학습 목표 state, props의 개념에 대해서 이해하고 실제 프로젝트에 바르게 적용할 수 있다. React 함수 컴포넌트에서 state hook을 이용하여 stat

개요 React 의 이벤트 처리 방식은 DOM 의 이벤트 처리 방식과 유사합니다. 단, 몇 가지 문법 차이가 있습니다. --- 학습 목표 이벤트 핸들러 함수를 만들고 React에서 이용할 수 있다. React의 이벤트 처리 문법에 익숙해집니다. --- R

개요

개요 HTTP 에서 사용하는 클라이언트 - 서버 아키텍쳐와 통시하는 방법인 API에 대해 학습힙니다. 학습 목표 클라이언트-서버 아키텍처를 이해할 수 있다. HTTP를 이용한 클라이언트-서버 통신을 이해할 수 있다. API의 개념을 이해할 수 있다. 클라이언트-서버

개요 브라우저의 작동 원리 중 URL, URI, IP, 포트, 도메인, DNS 등 백엔드 영역에 대하여 학습합니다. 학습 목표 브라우저의 작동 원리를 이해할 수 있다. 보이지 않는 곳의 통신을 이해할 수 있다. URL과 URI의 차이를 이해할 수 있다. IP 주소와

HTTP의 동작 방식을 이해할 수 있다.HTTP Messages의 구조를 설명할 수 있다.HTTP Requests와 HTTP Response를 구분할 수 있다.HTTP의 응답 메시지를 찾아볼 수 있다.클라이언트와 서버의 통신을 위한 대표적인 네트워크 프로토콜클라이언트와

개요 프론트엔드, 클라이언트에서의 브라우저 작동원리에 대해 학습합니다. 학습 목표 보이는 곳의 통신을 이해할 수 있다. AJAX의 개념을 이해할 수 있다. SSR과 CSR의 차이를 이해할 수 있다. AJAX (Asynchronous JavaScript And XML

API의 대표적인 아키텍처인 REST API를 알아봅니다.REST API에 대해 이해할 수 있다.REST 성숙도 모델에 대해 이해할 수 있다.REST API 문서를 읽을 수 있다.REST API에 맞춰 디자인할 수 있다.Open API와 API Key에 대해 이해할 수

단방향으로 흐르는 React 데이터 흐름에 대해 학습합니다.React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다.state 끌어올리기의 개념을 이해할 수 있다.상태 변경 함수가 정의된 컴포넌트와 상

React 컴포넌트 외부에서 데이터를 처리하고 받아오는 과정에 대해 학습합니다.Side Effect가 어떤 의미인지 알 수 있다.React 컴포넌트를 만들 때 Side Effect로부터 분리해서 생각할 수 있다. (비즈니스 로직과 표현 영역 구분)Side Efeect의

개요 CORS 의 등장 배경과 CORS 정의, 동작 방식, 설정 방식을 학습합니다. 학습 목표 SOP에 대해 이해할 수 있다. CORS에 대해 이해할 수 있다. CORS 동작 방식에 대해 이해할 수 있다. CORS 설정 방법을 이해한다. SOP (Same-Origi

섹션 2를 마무리하며 학습했던 내용들에 대해 기술면접에 나올만한 질문들에 답변을 준비하며 복습합니다.프론트엔드 개발자 기술 면접에 대해서 이해합니다.기술 면접에서 요구하는 올바른 답변이 무엇인지 이해합니다.기술 면접 준비를 직접 해봅니다.모의 기술 면접을 실제 해보거나

개요 재귀의 개념, 재귀의 용법, 재귀의 장점을 알아봅시다. 재귀의 개념 사전적 정의 재귀 : 원래의 자리로 되돌아가거나 되돌아옴. 프로그래밍적 정의 재귀함수 : 자기 자신을 호출하는 함수입니다. 코드 예시

JSON.stringify 하면 무엇이 떠오르시나요?JSON.parseJSON 은 API, 자바스크립트 객체와 연관이 많다?JSON 이 재귀 함수와 연관이 있나?정의이름에서 알 수 있듯이, JavaScript 객체 문법으로 구조화된 데이터를 표현하기 위한 포맷입니다.데

UI/UX는 무엇 일까요?그러게요 뭘까요?프론트엔드 개발자가 공부해야할까요?UI/UX의 상관관계가 어떻게 되나요?UI (User Interface)UI !== GUI 사람과 컴퓨터가 상호작용하는 모든 시스템을 의미합니다.GUI (Graphical User Interfa

개요

UI 레이아웃?UI 를 효과적으로 정리하고 배치하는 것컬럼 그리드 시스템(Column Grid System) 을 사용합니다.컬럼 그리드 시스템의 세 가지 요소Margin : 양쪽 여백 - 단위 : px, vw, % 등Column : 새로로 나누어진 영역 일반적으로 휴대

CDD 는 무엇일까요?CDD 는 왜 필요할까요?CDD 의 장점은 무엇일까요?구조적으로 CSS 작성한다는 것은 무슨 뜻일까요?CSS 방법론들의 특징과 장단점은 무엇일까요?부품 단위로 UI 컴포넌트를 만들어 나가는 개발컴포넌트 생성 -> 컴포넌트 결합 -> 페이지 조립UI

React 로 DOM 을 직접 조작하는 HOOKuseRef 가 언제 왜 필요할까요?useRef 를 어떻게 사용할까요?focustext selectionmedia playback애니메이션 적용d3.js, greensock 등 DOM 기반 라이브러리주소값은 리렌더링 되어도

상태 관리의 주요 원칙을 이해하면, 컴포넌트간에 느슨하게 결합된, 구조적으로 아름다운 코드를 작성할 수 있습니다.로컬 상태와 전역 상태란?전역 상태가 필요한 이유는?상태 관리 라이브러리가 필요한 이유는?상태가 변하는 데이터입니다.특히 프론트엔드에서는 "UI에 동적으로

웹 표준의 등장 배경과 개념웹 표준을 준수 했을때 얻을 수 있는 이점크로스 브라우징의 개념과 워크 플로우2000년대 초에 브라우저간 호환이 되지 않아서 개발자가 브라우저마다 따로 개발 해주어야하는 상황이 생겼었습니다.웹에서 표준적으로 사용되는 기술이나 규칙, W3C(W

SEO 의 필요성과 개념SEO 종류SEO 에 영향을 주는 요소의 종류와 작성 방법만들어진 웹 페이지가 검색햇을 때 검색 결과 상위에 없으면 아무도 찾지 않는 웹 페이지가 되어버립니다.검색 엔진에서 웹 페이지를 보다 더 상위에 노출하도록 검색 엔진의 작동 방식에 맞게 웹

개요 CDD 지원 도구인 Component Explorer 중 하나인 Stroybook 에 대해 학습합니다. 학습 목표 Stroybook 의 정의 Storybook 의 목적과 기능 Storybook 의 사용법 (+배포) Storybook 개요 UI 개발, Compo

웹 접근성의 필요성과 개념, 효과웹 접근성 지침WAI-ARIA 개요몸이 불편하거나 환경적인 요인 등으로 불편한 상황에서 정보 접근에 제한을 받을 수 있는 상황이 발생합니다.어떤 상황, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것입니다.사용자층 확대다양한

학습 목표 패킷교환 방식 개요 IP TCP UDP 패킷교환 등장 배경 전용선을 할당하고 연결해야하는 회선교환 방식의 비효율 문제 발생 방식 패킷이라는 단위로 데이터를 잘게 나누어 전송하는 방식 각 패킷에 출발지와 목적지 정보가 있습니다. 패킷이 목적지를 향해

개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업입니다.사전적 의미 : 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위프론트엔드에서의 의미 : 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음애플리케이션 배포를 위해 가장 많이

GraphQL 개요 메타(전 페이스북)에서 정의한 Server API 를 만드는 방법론 중 하나 대표적으로 다른 방법론으론 REST API 가 있습니다. 동시에 Query Language 이기도 합니다. 트리 구조로 결과를 받기 위해 그래프를 탐색하는 쿼리 언어

웹페이지 성능 검사와 개선책을 제공해주는 성능 측정 도구입니다.문자 그대로 웹페이지 전반의 성능 개선의 등대와 같은 역할을 합니다.구글에서 개발한 오픈소스 자동화 툴입니다.크롬에서 검사하고 싶은 페이지에 접속합니다.개발자 도구를 엽니다.lighthouse 탭을 엽니다.

AWS 개요 클라우딩 컴퓨터 플랫폼을 제공하는 서비스입니다. 클라우딩 컴퓨터 플랫폼을 통해 서버, 데이터베이스, 배포 등의 다양한 서비스를 제공합니다. 대표적으로 EC2, RDS, S3 등의 서비스가 있습니다. EC2 (Elastic Compute Cloud) - 서