codestates bootcamp

코드스테이츠 부트캠프에 참여했다.프론트엔드 개발 학습에 대한 복기, 고찰을 남기겠다.코드 작성이 아닌 학습 과정에 대한 기록은 일관성있게 작성해보려고 한다.Summary(핵심 메시지), 목차 3개, 글은 500~1000자이 형식의 목적은 단순화를 통해 핵심 메시지를 간

웹 개발과 HTML을 이해한다.웹 개발은 HTML, CSS, JavaScript로 구성된다.HTML은 가장 중요한 첫 단계이다.웹 개발의 구성요소 각각의 역할HTML: 웹의 구조 / 마크업 언어 / 기획자 / 와이어 프레임CSS: 웹의 디자인 / 스타일 언어 / 디자이

CSS를 이해한다.CSS. 스타일 속성이 흘러내려가 상속되는 모습이 마치 폭포와 같다.CSS = Cascading Style Sheet (연속적인,폭포)(형식,꼴)(종이)마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어이다.CSS로 웹 페이지 스타일, 레이

웹, 앱의 레이아웃을 어떻게 구성할 것인가.결국 사람을 연구해야 할 것이다.공간에 각 구성요소를 목적에 맞게 배치하는 것원래 의미: 컴퓨터 그래픽에서 3차원 물체 형상을 나타내기 위해 물체의 형상을 수 많은 선의 모임으로 표시하여 입체감을 나타낸 것.웹에서의 와이어 프

Summary HTML,CSS와 함께 웹 구성요소 중 하나로, 웹의 동작을 담당한다. 특징 아직 이해하지 못했지만, 왠지 Js를 사용하면서 이 특징을 상기하면 추후 이 언어를 다루는데 도움이 될 것 같은 느낌이 든다. "JavaScript는 클래스라는 개념이 없습니다

프로그래밍의 기본 문법을 더 학습해야 한다.psuedo code를 작성하는 습관에서 "문장을 한 단계, 두 단계 더 분해" 하자.나이를 입력받아 술을 마실 수 있는지(18세 이상) 여부를 리턴해야 한다.내 답안:피드백: return 사용.return을 쓰지 않고, co

문제: 숫자 문자열을 입력받아 문자열을 구성하는 각 숫자 중 가장 큰 수를 나타내는 숫자를 리턴해야 한다.내 답안:function getMaxNumberFromString(str) { let answer = '' let max = 0; for (let i = 0;

지난 주 HTML, CSS로 계산기 목업 만들기,이번 주는 Js로 계산기 기능을 구현하기를 수행했다.이 과제는 열정이 넘치고 무엇이든 할 수 있다고 생각하는 내게 좌절감을 안겨줬다.어떻게 해야 하지? 왜 안 되지? 왜 이게 되지? 하는 도중 과제 시간은 점점 흘러만 갔

나무꾼의 주 업무는 나무를 하는 것(베고 나르는 것)이다.나무를 하는데 필요한 직접적인 요소들은 '도끼, '나무지게'가 있다.하지만, 나무를 하는데 필요한 간접적인 요소들도 있다.벤 나무를 소규모로 자르기 위한 절단목 받침, 이를 보관하기 위해 나무 창고가 필요하고,

Summary 설계도 없기 건물을 지을 수는 없다. 웹, 앱을 만들기 전에 와이어프레임과 목업을 만들어야 한다. 더 중요한 것은, 설계도를 만들 때도 설계가 필요하다. 전체를 그리고 기준에 따라 분할하고, 첫 단계부터 목업이 완성되는 단계까지 과정을 그려야 한다. 이

학습 내용 Koans 문제 JavaScript의 타입 변수 선언 키워드 let과 const 화살표 함수 스코프 배열 객체 spread 구조분해할당 모르는 것 JavaScript의 타입 expect 함수 expect(테스트하는 값).기대하는조건 expect(1 + 2

script 요소를 추가하는 2가지 예시일반적으로 개발자는 스크립트가 로드되고 실행되기 전에 HTML 콘텐츠가 표시되므로 페이지의 초기 렌더링이 더 빨라지므로 요소의 끝 전에 스크립트 요소를 삽입하는 것을 선호할 수 있다.또한 본문 요소의 끝에 스크립트를 배치하면 스

회원가입 페이지 생성아이디, 암호 생성 시 유효성 검사

\*지극히 주관적인 의견이라는 점 말씀드립니다.저 사람은 '나랑 같이 일할 수 있을까?'를 생각할 것이다.나도 물어봐야 한다. '저 사람이랑 같이 일할 수 있을까?'보여줄 것: 겸손한 태도, 직무 역량, 자신감이력서 기반 질문(본인만의 스토리가 있는가?) 기본 개념

급할 수록, 천천히 가자.직선으로 가지 말고, 곡선으로 돌아가자.욕심 내지 말고, 만족할 줄 알자.한 걸음씩, 용맹하게 걷자.참조: https://www.notion.so/codestates/f43d82c722c6404ba996f9e79af0b20f (주동우

학습 내용 고차함수 일급 객체 고차함수 콜백함수 내장 고차함수 내장 고차함수 Filter map reduce 고차함수는 왜 중요한가? 아는 것 모르는 것

동기(synchronous) 동기 처리: 특정 코드 실행이 완료된 후 다음 코드 실행. 동시에 작업하지 못함. 비동기(asynchronous) 비동기 처리: 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드 실행 JavaScript의 작동 원리 싱글 스레드

비동기 이벤트 기반 JavaScript 런타임확장 가능한 네트워크 애플리케이션을 구축하도록 설계되었다.Fs 모듈(file system): pc의 파일을 읽거나 저장하는 등의 일을 할 수 있게 도와준다.개발자는 자신이 이해하는 범위만큼 모듈을 사용한다.Node.js 공식

part-1 callback 코드 해석하기 setTimeout은 비동기 함수이다. 만료된 후 함수나 지정한 코드를 실행하는 '타이머'를 설정한다. 매개변수 wait -> 시간(타이머) callback -> 실행할 함수 callback 이라고 네이밍을 한 이유는,

자바스크립트 라이브러리이다.UI(user interface)를 만들기 위해 사용한다.SPA(single page application), mobile application 개발에 사용될 수 있다.간단한 역사 수업 내용과거와 달리 프론트엔드 개발이 점점 고유한 개발의 영

글의 목적 웹 어플리케이션의 코드를 이해하고, 사용 가능하도록 이 코드에 익숙해지기 위함이다. Twittler 구성(조직도)

학습 내용 웹 애플리케이션 아키텍처 클라이언트-서버 아키텍처 비유해서 설명해보자. Client: 손님. 주문하는 사람 Server: 점원. 무언가를 제공하는 사람 client는 요청하고, server는 응답을 한다. Architecture: 컴퓨터 과학 맥락에서, 하

주의사항쉽게 설명하고, 기억하기 위해 비유가 많이 들어가 있습니다.따라서, 전문적이지 않은 부분의 내용이 있으니 참고해서 읽어주세요.React에서의 데이터 흐름은 단방향 데이터 흐름이다.부모 노드에서 자식 노드로 전송하는 Top-down 방식이다.이 원칙은 react의

state 변수 생성condition: 상태 저장 변수setCondition: 상태 갱신 함수useState: state hookuseState({초기 값})search 함수 정의인자: departure, destination과제 시작 전, 과제의 요구사항을 3가지로

요약SOP는 다른 출처의 리소스 공유를 억제한다.CORS는 다른 출처의 리소스 접근 권한을 제공한다.Same-Origin Policy 동일 출처 정책이다.=> '같은 출처의 리소스만 공유 가능하다' 라는 정책이다.Origin(출처) = 프로토콜 + 호스트 + 포트이 중

Promise의 기능과 필요한 이유에 대해서 설명해 주세요.프로미스는 객체로서, 비동기 처리 상태와 처리 결과를 관리하는 기능이 있다.기존 비동기 처리의 문제점인 콜백 헬, 에러 처리의 어려움을 극복하기 위해 필요하다.pending, fulfilled, rejected

Section 2가 마무리 되었다.회고 글을 작성했다.못한 점과 잘한 점못한 점: 모던 Js 딥다이브 학습, 당일 학습의 집중 저하잘한 점: 컴퓨터 구조 학습, 블로깅 횟수 증가개선할 점개선할 점: Js, React 클론 코딩개선을 위해 추가하고 제거한 학습바닐라 Js

학습 내용 재귀의 이해 재귀 함수 자기 자신을 호출하는 함수 예제 배열의 합을 구하는 arrSum 함수 만들기 입력: [1, 2, 3, 4, 5], 출력: 각 요소들의 합 아래와 같이 배열 요소의 합을 표현할 수 있다. 아래와 같이 재귀 함수로 표현할 수 있다.

UI/UX를 제 관점으로 설명합니다.

배운 점: 일을 큰 섹션으로 구분하고, 구분한 섹션을 더 작은 챕터로 나눠서, 1개 챕터 씩 실행해야 한다.얼마나 일을 잘 나누는지가 정확하고 빠른 실행을 돕는다.처음 Figma 과제 시작할 때 느낀 점: 금요일에 무려 5시간 동안 GNB 기능을 만들지 못해서 좌절했다

학습 내용 CDD(Component driven development) 컴포넌트를 중심으로 개발을 수행하는 개발 방법론이다. 비유하면, 마치 레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방식이다. 개발자들은 작은 단위의 컴포넌트들을 개발하고, 이러한 컴포넌트들을 조합하여 더 큰 기능을 가진 애플리케이션을 구성하는 것이다...

then은 fetch를 통해서 실행한 결과가 성공했을 때, then으로 전달된 콜백함수가 호출되도록 약속되있다. Fetch의 리턴값 = promise Resolve 이면, response object를 준다. promise 사용 이유 비동기적인 작업을 처리할 때

자바스크립트 어플리케이션의 상태 관리를 위한 도구이다.React, Vue 같은 라이브러리와 함께 사용되는 것이 일반적이고,React와 Redux를 함께 사용할 경우에는 React-Redux 라이브러리가 사용된다.Redux의 핵심 개념은 단 하나의 Store(저장소)를

웹 접근성은 무엇인지, 웹 접근성 실태는 어떠한지, 웹 접근성을 향상하기 위한 방법은 무엇이 있는지 알아본다.

가장 많이 쓰이는 암호화 방식. 토큰

학습 내용 OAuth 개요 OAuth: 개방형 인증 및 권한 부여 프로토콜 쇼핑몰 웹 사이트에 로그인 할 때 이미 사용 중인 나의 구글 계정을 이용해서 별도 회원가입 없이, 쇼핑몰 웹 사이트를 이용할 수 있다. 이 시스템을 Single-Sign-On(SSO) 라고 부른다. 하지만, SSO를 사용하면 보안상 취약한 점이 발생한다. 만약 구글 계정을 이용해 ...

Section 3 과제로 애플리케이션을 만드는 활동을 했다.

5일 간 진행되는 솔로 프로젝트에서 겪은 일을 소개합니다.

본문 작성에 앞서, 지극히 개인 의견이 많이 포함되어 있음을 말씀드립니다.난 디자인이 너무 좋아졌다.난 디자인을 사랑한다.시스템이라는 용어를 다시 짚어보자.시스템(영어: system)은하나의 집합체이다.각 구성요소들이 상호작용하거나 상호의존하여 복잡하게 얽힌 통일된 집

TypeScript에 대해 설명합니다.

Typescript의 기능에 대해 설명합니다.

개발 프로세스와 배포에 대해서 학습했습니다. 주관적인 생각이 담겨있으니, 간단한 참고만 해주세요.

Proxy에 대해 설명합니다.

로컬 리포지토리와 연결할 유저 정보를 설정합니다.버전 히스토리를 식별할 때 사용할 이름을 설정합니다.$ git config --global user.name "firstname lastname"각 기록과 연결할 이메일 주소를 설정합니다.$ git config --glo

14일간 진행된 Pre-project를 복기합니다.

프리 프로젝트 회고합니다.

HTML, CSS 반응형 웹 작업.

프로젝트를 마치고 팀원들의 리뷰를 받았습니다. 팀원 및 멘토님의 지적사항에 대해 회고합니다