TIL

메타인지란?자기 자신을 객관화하여 점검하는 것.목표를 달성하기 위해서 가장 필요한 것은 근성(Grit)이며, 이는 성장 마인드셋을 통해 키울 수 있다.나의 한계를 정해놓고 도전을 회피하는 고정형 마인드셋 vs. 나의 한계까지 부딪혀보고 도전해보는 성장형 마인드셋 모르는

학습 목표 웹 개발에 있어서 HTML, CSS, JavaScript의 역할을 각각 설명할 수 있다. > HTML(Hyper Text Markup Language)은 웹페이지에서 구조를 만드는 마크업 언어다. HTML은 태그와 속성 들의 구성요소로 이루어져 있다. 마

CSS의 사용 목적을 이해한다.CSS의 기본 문법과 구조를 이해한다.CSS를 HTML에 적용하는 방법에 대해서 이해한다.HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유를 이해한다.CSS를 이용해 텍스트를 꾸밀 수 있다.CSS에서 쓰이는 단위의 두 가지 구

레이아웃을 위한 HTML을 만들 수 있다.display: flex;를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해한다.flex-direction을 이용하여 요소를 정렬할 방향을 결정할 수 있다.justify-content와 align-items를 이용하여 수평-수

다른 분들이 만든 계산기 과제들을 보고 어떤 속성들을 사용하여 어떠한 효과들을 내었는지 알아볼 수 있다.backdrop-filter 블러처리하기다른 분들이 공유해준 학습에 좋은 사이트 공유https://cssgridgarden.com/>- https:

JavaScript 코드를 직접 실행할 수 있다. 원하는 데이터를 console.log()로 출력할 수 있다. JavaScript 엔진이 코드를 읽는 법에 대해 기억한다. 코드와 주석을 구분할 수 있다. 값과 연산자를 구분할 수 있다. console.log()로 구구

특정한 조건에서만 실행되는 코드를 작성할 수 있다.truthy와 falsy 가 조건문에서 작동하는 방식을 이해할 수 있다.비교 연산자를 통한 엄격한 비교(=== , !==)에 대해 이해할 수 있다.if, else if, else를 사용하여 여러 개의 조건을 중첩해서 사

for 반복문을 작성할 수 있다.for 반복문이 여러 개의 코드 블록의 조합이라는 것을 이해한다.구구단 n단 출력을 반복문으로 구현할 수 있다.반복문 내부에 조건문을 활용할 수 있다.이중반복문의 동작 순서를 이해할 수 있다.구구단 1-9단 출력을 이중반복문으로 구현할

크롬 개발자 도구 사용법계산기에서 클릭을 하면 개발자 도구 Console 탭에서 메시지를 확인할 수 있어야 합니다.VScodeVScode에서 폴더를 열고, 파일 내에서 작업을 할 수 있어야 합니다.변수의 선언과 할당문제 해결을 위해 컴퓨터가 기억하고 있어야 하는 정보(

리눅스 터미널을 실행할 수 있다.CLI를 이용한 작업과 GUI를 이용한 작업이 동일함을 이해할 수 있다.리눅스 터미널에서 기본적인 명령어를 사용할 수 있다.명령어를 사용할 때, 등장하는 키워드에 대해 이해할 수 있다.관리자 권한을 이해할 수 있다.절대 경로와 상대 경로

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

배열과 객체의 특징을 구분하고, 배열과 객체의 특징에 따라 웹 애플리케이션 개발 시 어떻게 사용되는지 이해한다.객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다.객체 속성 조회법 두 가지, dot notation과 bracket nota

원시 자료형(primitive data type)과 참조 자료형(reference data type)의 구분이 왜 필요한지 이해할 수 있다.원시 자료형과 참조 자료형의 차이를 이해하고, 각자 맞는 상황에서 사용할 수 있다.원시 자료형이 할당될 때는 변수에 값(value

spread/rest 문법을 사용할 수 있다.구조 분해 할당을 사용할 수 있다.화살표 함수로 함수를 정의할 수 있다.JavaScript의 주요 개념인 아래의 내용에 대해 설명할 수 있다.JavaScript의 타입변수 선언 키워드 let과 const화살표 함수스코프배열객

koans는 총 10개 part에 51개의 문제가 있었다.10개의 part에서 헷갈리거나 틀린 것을 통해 배운 내용을 요약하고자 한다.숫자 + 문자 = 문자 (이어붙여서 출력) --> 1+'1' = '11' (2 아님)문자 + 불리언값 = 문자 (이어붙여서 출력) --

DOM의 개념을 이해한다.DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 이해한다.HTML에서 JavaScript 파일을 불러올 때 주의점에 대해서 이해한다.DOM과 JavaScript의 차이에 대해 이해할 수 있다.DOM을 JavaScript로 조작하

일반 디렉토리와 깃 리포지토리와의 차이점에 대해 설명할 수 있다.git staging area에 대해서 설명할 수 있다.git add로 git staging area의 내용을 변경할 수 있다.git add와 git commit의 차이점에 대해서 설명할 수 있다.git

일반 디렉토리와 깃 리포지토리와의 차이점에 대해 설명할 수 있다. > git staging area에 대해서 설명할 수 있다. > git add로 git staging area의 내용을 변경할 수 있다. > git add와 git commit의 차이점에 대해서 설

기본 레이아웃을 HTML/CSS로 만들 수 있다.컴포넌트 단위로 디자인 요소를 개발할 수 있다.DOM을 조작하여 아이템을 추가/삭제할 수 있다.코드 작업을 git commit으로 기능 단위로 잘게 쪼개어 기록할 수 있다.Github Page를 사용하여 제작한 웹 애플리

프론트엔드 개발자 기술 면접에 대해서 이해한다.기술 면접에서 요구하는 올바른 답변이 무엇인지 이해한다.기술 면접 준비를 직접해 본다.모의 기술 면접을 실제 해보거나 시청하면서, 어떻게 기술 면접을 할지 고민해 본다.🔡➡️💻➡️🤓👍

일급 객체(first-class citizen)의 세 가지 특징을 설명할 수 있다.고차 함수(higher-order function)에 대해 설명할 수 있다.고차 함수를 자바스크립트로 작성할 수 있다.배열 내장 고차 함수 filter에 대해서 이해할 수 있다.filte

클로저 모듈 패턴에 대해 설명할 수 있다. > o 변수를 선언하고 객체를 할당하는 단순 객체는 사용할 때마다 필요한 개수만큼 여러 개를 만들어야 해서 재사용성이 떨어진다. 반면, 클로저 모듈 패턴을 사용하면, 함수를 만들고 객체를 반환하도록 할 수 있어서 언제든지 필요

프로토타입이 무엇인지 설명할 수 있다. > 프로토타입과 클래스의 관계에 대해 설명할 수 있다. > 프로토타입 체인에 대해 설명할 수 있다. > 블로깅 과제 충족 조건) 다음의 키워드를 포함해야 한다. 프로토타입 .prototype .proto 클래

콜백 함수를 전달하여 사용할 수 있다.클로저 함수를 리턴하여 활용할 수 있다.... (spread syntax)를 사용하여 전달인자(arguments)의 개수를 파악할 수 있고, 각각의 전달인자에 접근할 수 있다.자바스크립트 배열 내장 메서드(forEach, map,

어떤 경우에 중첩된 콜백(callback)이 발생하는지 이해할 수 있다.중첩된 콜백(callback)의 단점, Promise의 장점을 이해할 수 있다.async/await 키워드에 대해 이해하고, 작동 원리를 이해할 수 있다.callback과 promise, async

fetch에 대해 이해할 수 있다.fetch를 이용하여 데이터를 불러올 수 있다.Event Loop, Callback Queue에 대해 학습하기🔡➡️💻➡️🤓👍

React 들어가기에 앞서 check 해보기☑️ HTML / CSS 기초☑️ 자바스크립트 기초☑️ 함수형 프로그래밍과 고차 함수 개념에 대한 이해☑️ 배열 내장 메서드 기초☑️ ES6 문법에 대한 이해React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.JSX가

SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다.SPA의 장, 단점에 대해 이해하고 설명할 수 있다.와이어프레임을 보고 어느 부분을 컴포넌트로 구분할지 스스로 정할 수 있다.React에서 npm으로 React Router를 설치(np

state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다.React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있다.React 컴포넌트(React Com

React State & Props에 대한 이해도를 퀴즈를 통해 점검한다.oReact Twittler State & Props 과제 레퍼런스의 의사코드를 작성하여 블로깅 한다.o출처 CodeState UR Class 자료-----------------------출처 C

클라이언트-서버 아키텍처를 이해할 수 있다.HTTP를 이용한 클라이언트-서버 통신을 이해할 수 있다.API의 개념을 이해할 수 있다.브라우저의 작동 원리를 이해할 수 있다.보이지 않는 곳의 통신을 이해할 수 있다.URL과 URI의 차이를 이해할 수 있다.IP 주소와 P

REST API에 대해 이해할 수 있다.REST 성숙도 모델에 대해 이해할 수 있다.REST API 문서를 읽을 수 있다.REST API에 맞춰 디자인할 수 있다.Open API와 API Key에 대해 이해할 수 있다.블로깅 과제 충족 조건 : 다음의 키워드를 포함해야

Postman을 사용하는 방법에 대해 이해할 수 있다.Postman으로 API를 테스트할 수 있다.Postman으로 날씨를 받아올 수 있다.페어와 함께 Postman을 사용하는 방법을 학습하고 API에 작성된 메서드, url로 실습해 본다.🔡➡️💻➡️🤓👍

React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다.State 끌어올리기의 개념을 이해할 수 있다.상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하는 컴포넌트가 다름을 알 수 있다.R

아래 키워드는 React와 관련된 심화 주제에 해당한다. 위의 모든 레슨을 충분히 이해하고, 코플릿 문제를 모두 다 풀었다면,아래 키워드를 직접 구글링하거나 React 공식 문서를 통해 공부한 후, TIL을 작성해보기.State와 생명주기(Life-cycle)React

cors가 무엇인지 알아보고 node.js를 이용하여 서버를 구축한다. mini-node server를 공식 문서를 참고하여 직접 만들어보고, express로 리팩토링해 본 후, 지난 스프린트에서 사용된 StatesAirline의 API Server를 직접 구현하면서

Express로 간단한 서버를 구현할 수 있다.미들웨어를 이해할 수 있다.미들웨어를 이용할 수 있다.미들웨어를 구현할 수 있다.과제 - Mini-Node Server를 Express로 리팩토링할 수 있다.Mini Node Server에서 HTTP 모듈로 작성했던 서버를

이번 과제는 StatesAirline 서버를 구현한다. 이 서버는 Express 프레임워크를 이용해 만들고, 로컬 호스트와 연결한다.States Airline Server는 클라이언트의 요청에 따라 항공편과 예약 데이터를 조회, 생성, 수정, 그리고 삭제하는 기능(CR

Section 2의 모든 학습 내용 중 특히 아래 개념을 잘 기억하고 이해해야 한다.☑️ HTTP / 네트워크☑️ Web Server☑️ 비동기 / Ajax 요청Section 1에서 제작한 솔로 프로젝트 나만의 아고라 스테이츠의 서버를 직접 제작하고, 서버로 요청을 보

JavaScriptPromise의 기능과 필요한 이유에 대해서 설명해 주세요.순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해 주세요.ReactReact의 state와 props에 대해서 설명해 주세요.React 컴포넌트의 key 속성에 대해서 설명해 주

재귀 들어가기에 앞서 check 해보기☑️ Section1에서 학습한 JavaScript 기초 문법을 활용할 수 있어야 한다.☑️ 조건문에 대한 기초 개념☑️ 반복문에 대한 기초 개념재귀의 의미에 대해서 이해한다.JavaScript에서 재귀 호출을 할 수 있다.재귀를

JSON 구조가 재귀 함수를 사용할 수 있는 트리 구조임을 이해할 수 있다.JSON.stringify 와 JSON.parse 가 serialize, deserialize라는 것을 이해할 수 있다.JSON.stringify 와 JSON.parse를 사용하여 JavaScr

UI, UX의 사전적 의미를 기억한다.프론트엔드 개발자가 UX를 공부해야 하는 필요성을 이해한다.UI, UX의 관계를 이해한다.UI 디자인 패턴의 필요성을 이해한다.자주 쓰이는 UI 디자인 패턴의 종류를 기억한다.자주 쓰이는 UI 디자인 패턴이 필요한 상황과 주의사항을

Figma의 특징을 기억한다.Figma의 기본적인 사용법을 익힌다.Figma를 사용하여 간단한 프로토타입을 제작할 수 있다.Figma의 사용 방법을 익힌다.Figma로 컴포넌트를 구현할 수 있다.🔡➡️💻➡️🤓👍

Figma의 사용 방법을 익힌다.Figma로 프로토타입을 제작할 수 있다.웹 사이트의 UI/UX를 분석할 수 있다.UI/UX를 분석한 내용을 토대로 개선할 수 있다.\+) 추가학습특정 사이트의 UI/UX 분석해 보고 개선 방법 찾아보기: 클론이란 Figma를 사용해서

들어가기에 앞서 check 해보기 (section2 - unit4,6,9 참고)☑️ JSX 문법의 개념에 대해 이해하고 활용할 수 있다.☑️ Component의 개념에 대해 이해하고 작성할 수 있다.☑️ State & Props의 개념과 차이에 대해 이해하고 상황에 맞

Styled Components를 활용해 다양한 기능의 커스텀 컴포넌트를 구현할 수 있다.Storybook을 사용해 컴포넌트들을 관리할 수 있다.🔡➡️💻➡️🤓👍

Component Driven Development의 개념이 무엇인지부터 학습 ✓대표적인 CSS-in-JS 라이브러리인 Styled Components 학습 ✓UI 개발 도구인 Storybook의 사용법을 학습 ✓DOM 엘리먼트의 주소값을 직접 참조해야 하는 상황에 사

들어가기에 앞서 check 해보기 (section2 - unit4,6,9 참고)☑️ React 기초 문법 👉 TIL 27일차 참고☑️ React Hooks를 사용한 상태 관리 👉 TIL 34일차 참고프론트엔드 개발에서 상태 관리를 보다 더 효율적으로 할 수 있는 방

React에서는 상태와 속성(props)을 이용한 컴포넌트 단위 개발 아키텍처를 배웠다면, Redux에서는 컴포넌트와 상태를 분리하는 패턴을 배운다.상태를 다루기 위해 컴포넌트 안에서 상태 변경 로직이 복잡하게 얽혀있는 경우가 많았다. 그러나 상태 변경 로직을 컴포넌트

👇 App.js👇 index.js초기 상태1초기 상태에서 + 버튼을 1번 눌렀을 때2count: 2일 때, - 버튼을 1번 눌렀을 때3count: 1일 때, - 버튼을 1번 눌렀을 때4-1어제 진행한 과제 코드를 하나 하나 분석해 본다.🔡➡️💻➡️🤓👍

웹 표준의 개념과 등장 배경을 기억한다.웹 표준을 지켰을 때의 장점을 이해한다.Semantic HTML을 작성해야 하는 이유를 이해한다.Semantic HTML을 작성하는 방법을 이해한다.자주 틀리는 마크업 규칙과 올바르게 작성하는 방법을 기억한다.크로스 브라우징의 개

웹 접근성의 개념과 필요성을 이해한다.국내에서의 웹 접근성 실태를 기억한다.웹 콘텐츠 접근성 지침을 기억한다.웹 콘텐츠 접근성 지침을 충족시키는 방법을 기억한다.WAI-ARIA의 사용법을 기억한다.블로깅 과제 충족 조건: 다음의 키워드를 포함해야 한다.웹 표준 ✓웹

적절한 시멘틱 요소를 사용하는 방법, 웹 표준에 맞는 HTML 코드를 작성하는 방법, WAI-ARIA 사용법, 웹 콘텐츠 접근성 지침 중 일부를 충족하는 방법을 실습한다.Cmarket Redux 과제의 웹 표준과 웹 접근성을 개선하는 리팩토링한다.웹 표준에 맞는 HTM

TCP/IP/UDP패킷교환 방식의 이점에 대해 이해한다.IP의 비순서성, 비신뢰성에 대해 이해한다.TCP의 3 way handshake 및 그와 비교되는 UDP에 대해 이해한다.네트워크 계층 모델네트워크 통신을 계층별로 나눈 이유에 대해 이해한다.통신 과정에서 일어나는

쿠키의 작동 원리를 이해할 수 있다. 회원가입 및 로그인 등의 유저 인증에 대해 설명할 수 있다.세션의 개념을 이해할 수 있다.쿠키와 세션은 서로 어떤 관계이며, 각각이 인증에 있어서 어떤 목적으로 존재하는지 이해할 수 있다.세션의 한계를 이해할 수 있다.🔡➡️💻➡

Hashing이 필요한 이유에 대해 이해한다.데이터베이스에 유저의 비밀번호와 같이 민감한 정보를 평문으로 저장하지 않는 이유에 대해 이해한다.Salt가 필요한 이유에 대해 이해한다.토큰의 개념을 이해할 수 있다Refresh Token과 Access Token의 차이를

직접 서버에서 인증과 관련된 로직을 처리할 필요 없이 인증을 중개하는 외부 서버를 이용한 Oauth 기술에 대해서 학습한다. 이를 통해 소셜 로그인의 작동 방식을 살펴본다.Token의 종류에 대해 이해할 수 있다.Refresh Token과 Access Token의 차이

들어가기에 앞서 check 해보기Section3의 모든 학습 내용 중 특히 아래 개념을 잘 기억하고 이해해야 한다.☑️ UI / UX - Figma☑️ Custom Component - Styled Components, Storybook☑️ 웹 표준 & 접근성 -

재귀: 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해 주세요.UI/UX: UI, UX의 개념과 두 개념의 관계에 대해서 설명해 주세요.Custom Component: Styled Components를 사용해 보면서 느낀 장점을 이야기해 주세요.: useRef

자료구조는 컴퓨터 과학에서 효율적인 접근 및 수정을 가능케 하는 자료의 조직, 관리, 저장을 의미한다. 따라서 자료구조를 많이 아는 개발자일수록 데이터를 체계적으로 저장하고, 효율적으로 활용할 줄 알게 된다.문제들을 해결하기 위해 자료구조를 많이 알게 되면, 특정 문제

트리의 개념과 특징, 용어에 대해 이해합니다.트리의 실사용 예제를 보고, 트리가 어떻게 이용이 되는지 이해합니다.직접 구현한 트리가 어떤 식으로 동작하는지 이해하고, 해당 클래스 내의 로직을 이해합니다.이진 탐색 트리의 개념과 종류 특징에 대해 이해합니다.직접 구현한

앞으로 진행될 솔로 프로젝트의 방식에 대해 이해한다.기업에서 제시하는 사전과제와 사전과제를 통해 확인하고자 하는 역량에 대해 파악한다.프로젝트 요구사항 명세서를 통해 어떤 요구사항이 있고, 요구사항에 맞춰 개발하기 위해 어떤 것들이 더 필요한지 파악한다.프로젝트를 하기

들어가기에 앞서 check 해보기앞선 섹션에서 학습한 전반적인 코딩을 위한 기본 지식들이 필요하다. ☑️ Git/Github☑️ Javascript☑️ HTML/CSS☑️ React지원하고자 하는 회사에 제출하게 될 과제형 프로젝트와 비슷한 형태이며, 프로젝트 요구사항

들어가기에 앞서 check 해보기앞선 섹션에서 학습한 전반적인 코딩을 위한 기본 지식들이 필요하다. ☑️ Git/Github☑️ Javascript☑️ HTML/CSS☑️ React지원하고자 하는 회사에 제출하게 될 과제형 프로젝트와 비슷한 형태이며, 프로젝트 요구사항

들어가기에 앞서 check 해보기앞선 섹션에서 학습한 전반적인 코딩을 위한 기본 지식들이 필요하다. ☑️ Git/Github☑️ Javascript☑️ HTML/CSS☑️ React지원하고자 하는 회사에 제출하게 될 과제형 프로젝트와 비슷한 형태이며, 프로젝트 요구사항

들어가기에 앞서 check 해보기앞선 섹션에서 학습한 전반적인 코딩을 위한 기본 지식들이 필요하다. ☑️ Git/Github☑️ Javascript☑️ HTML/CSS☑️ React지원하고자 하는 회사에 제출하게 될 과제형 프로젝트와 비슷한 형태이며, 프로젝트 요구사항

Virtual DOM이 나오게 된 배경을 학습합니다.React가 어떻게 Virtual DOM을 사용하는지 학습합니다.Virtual DOM이 어떻게 생겼는지 학습합니다.React가 DOM 트리를 탐색하는 방법에 대해 학습합니다.DOM 엘리먼트의 타입이 같을 때와 다를 때

코드 분할(code spliting)에 대해 학습한다.React는 어떻게 코드 분할을 하는지 학습한다.React.lazy() 메서드의 쓰임새와 작성 방법에 대해 학습한다.suspense의 쓰임새와 작성 방법에 대해 학습한다.React Hook을 React 앱 내에 적용

React Hook을 React 앱 내에 적용하는 방법을 학습합니다. > Custom Hook의 사용법을 익히며 직접 앱을 최적화하고 명료하게 만들 수 있습니다. > React.lazy와 Suspense를 직접 적용해 보고, 적용하기 전과 후의 차이를 명확하게 알

들어가기에 앞서 check 해보기앞선 섹션에서 학습한 전반적인 코딩을 위한 기본 지식들이 필요하다.☑️ HTML / CSS / JavaScript☑️ CDD와 CSS-in-JS☑️ Figma 사용 방법☑️ Styled Components 사용 방법☑️ Storybook

디자인 시스템의 개념과 구축 과정을 이해하고, 디자인 시스템을 구축하기 위한 단계와 고려 사항을 학습합니다.\-n디자인 시스템을 구축하기 위한 도구들과 그 활용 방법을 알 수 있다.UI 인벤토리를 작성하고 이를 분석해 개선 사항을 파악할 수 있다.디자인 시스템의 필요성

디자인 시스템의 개념과 구축 과정을 이해하고, 디자인 시스템을 구축하기 위한 단계와 고려 사항을 학습합니다.디자인 시스템을 구축하기 위한 도구들과 그 활용 방법을 알 수 있다.UI 인벤토리를 작성하고 이를 분석해 개선 사항을 파악할 수 있다.디자인 시스템의 필요성 및

VSCode 에디터를 이용하여 TypeScript 프로젝트를 튜토리얼을 따라 생성할 수 있다.이후 스스로 VSCode 에디터를 이용하여 TypeScript 프로젝트를 생성할 수 있다.🔡➡️💻➡️🤓👍

들어가기에 앞서 check 해보기TypeScript라는 프로그래밍 언어를 접하는 유닛이므로 JavaScript에 대한 기본적인 문법 지식이 필요하다.☑️ JavaScript의 기초 문법☑️ JavaScript Class 등 고급 문법VSCode 에디터를 이용하여 Typ