코드스테이츠

부트캠프에서 필요한 작업환경과 설정들을 사전에 공지해준대로 진행• 학습툴(크롬, 디스코드, zoom, notion)• 기타(학습 블로그, 깃허브, 유어클래스 인증)사전에 준비해야할것들이 많았지만 대부분 가입해둔 상태여서 안내 문서에 따라 꼼꼼히 체크하면서 준비했다. O

1. 웹 개발 이해하기 JavaScript란? > JavaScript와 짝을 이루는 두 언어 HTML과 CSS HTML은 구조를 만드는 마크업 언어, CSS는 스타일을 담당하는 디자인 언어 ➡️ JavaScript는 구조와 스타일이 완성된 각각의 요소에 생명을 부여

1. 웹 개발 이해하기 CSS란? > 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어 ➡️ 직관적이고 쉬운 UI 제작은 프론트엔드 개발자의 기본소양이므로 화면구성이나 배치, 글씨크기 컴포넌트 기능별로 묶기 등을 위해 필수적으로 익혀야 한다. 1️⃣ CSS

웹 사이트의 각 요소의 위치를 목적에 맞게 배치뼈대를 그리는 작업, 단순하게 레이아웃과 구조를 보여주며 화면의 영역을 구분하는 일을 함실물크기의 모형, 웹에서는 HTML문서로 하드코딩하는 방식❖하드코딩이란?데이터를 코드 내부에 직접 입력하는 것수직 분할: 화면을 수직

사진계산기에 대한 기능은 구현하지않은 목업입니다.순수 HTML, CSS로 구현하였습니다.고퀄리티는 아니지만 뉴진스 로고로 계산기로 만들었다. 계산기 본체디스플레이 \- 계산기 디스플레이에 입력값, 입력값 미리보기, 결과값 세개로 구성기호 버튼사칙연산 버튼숫자 키패드

브라우저, 서버, 모바일 개발이 가능한 멀티 패러다임 프로그래밍 언어코드를 실행하여 출력결과를 확인JavaScript는 정수, 음수, 실수를 모두 표현가능따옴표(’), 쌍따옴표(”), 백틱(\`)모두 가능, 백틱은 줄바꿈도 가능❖ 문자열 안에서 따옴표를 사용할때는 선

조건식이 참/거짓으로 나눠져 실행이 결정된다. 따라서 결과값은 boolean타입 이여야한다.if 뒤 소괄호에 조건식을 넣어 true이면 실행동치연산자(===)두개의 피연산자가 동일하면 true, 아니면 false 반환 \- !==은 이와 반대비교연산자(>, <,

문자열의 includes() 메서드를 사용하여 두 문자열을 비교includes() 메서드는 특정 문자열이 존재하면 true를 반환, 그렇지 않으면 false를 반환\-1을 반환하는 경우localeCompare() 메서드를 호출하는 문자열이 매개변수로 전달된 문자열보다

계산기 구현 textContent text값을 가져오는 메소드 textContent는 css 는 고려되지않고 텍스트만 가져온다 >textContent는 script나 style 태그와 상관없이 해당 노드가 가지고 있는 text를 의미한다. element.matc

컴퓨터를 조작하기 위해 다양한 입력이 필요하다. 키보드나 마우스를 입력 소스라고하고 모니터나 스피커를 출력이라고 한다. 따라서 입출력을 I/O라고 부른다.리눅스 터미널은 키보드(입력)와 모니털(출력)으로 모든 작업이 가능하다. GUI가 있기전부터 모든작업을 CLI로 할

push() // 변경된 배열의 길이 리턴pop() // 제거된 요소 리턴unshift()// 변경된 배열의 길이 리턴shift() // 제거된 요소 리턴splice()https://developer.mozilla.org/ko/docs/Web/JavaScrip

자바스크립트는 객체 기반 언어이며 자바스크립트를 구성한는 거의 모든것이 객체이다. 원시타입은 단 하나의 값만 나타내지만, 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적 자료구조이다.0개이상의 프로퍼티로 구성된 집합이며, 프로퍼티

자료형 원시 자료형 string boolean number undefined null 각 변수간 데이터값이 복사되기때문에 기존값 영향 참조 자료형 값대신 힙에 주소가 연결되어있음

모든 식별자(변수, 함수, 클래스 일므 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정되고 이를 스코프라고 한다. 즉 스코프는 식별자가 유효한 범위바깥 영역에서 선언된 x변수는 어디서든 참조할 수 있다.foo함수 내부의 x

클로저는 함수와 그 함수가 접근할 수 있는 변수의 조합MDN의 정의에 따르면"클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다."다음은 outerFunc함수 내부에서 중첩함수 innerFunc가 정의되고 호출되었다. 이때 외부함수outerFunc는 innerF

Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있습니다.JavaScript Koans는 부트캠프에서 하게 된 자바스크립트를 전체적으로 공부하고 되돌아보며 문제를 푸는 시스템입니다.부트캠프에서 처음 해보는건 아니였

DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model입니다. 즉, 여러분이 JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할

변수선언querySelector를 통해 document에서 요소를 참조한다.onkeyup을 통해 elInputUsername이 눌렸을때 classList에서 클래스가 hide인것을 remove시켜준다..hide는 display:none;단어 수가 4보다 작으면 반대로

일반적으로 CSS를 불러오기 위해 link 요소를 head 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 script 요소를 body 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?li 요소는 왜 ul 요소의 자식 요소여야만 하나요?id 속성과 cl

일급객체(1급 객체, First Class Object) JavaScript에는 일급 객체가 존재합니다. 대표적인 일급 객체 중 하나가 함수이며 일급 객체 란 다른 객체들에 일반적으로 적용 가능한 연상르 모두 지원하는 객체를 가리킵니다.

객체는 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조를 의미하며 하나의 모델을 클래스라하고 이 모델을 바탕으로 만들어진걸 인스턴스라고 한다.클래스는 대문자인 명사로 만들고 (파스칼케이스), new키워드를 사용하여 생성하고 이를 통해 새로운 인스턴스

자바스클비트는 프로토타입기반 언어이다. 프로토타입은 원형 객체를 의미하며 자바스크립트에서 객체를 상속하기 위해 사용하는 방식이다.모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다는 의미이기도 하다.\--> 상속되는 속성과 메소드들은

리액트란? > 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리 리액트의 특징 선언형, 컴포넌트 기반, 범용성 선언형 > 코드를 자세히 분석하지 않고도 코드의 의도를 분명히 알수 있게 작성하는걸 의미한다. 한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠 적기 보다 JSX를 활용해 선언형 프로그래밍을 지향한다. 컴포넌트 기반 > 하...

React State&Props

앱에서 상품 정보 같은 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 2티어 아키텍처또는 클라이언트-서버 아키텍처라고 한다. 리소스를 사용하는 앱이 클라이언트 , 리소스를 제공하는 곳을 서버라고 부른다. 리소스에 접근하는 앱은 손님(Client) -- 요

작업을 할때 파일을 이 전 상태로 돌리고 싶을때 가장 좋은방법은 미리 복사해둔 파일로 돌아가는 방법입니다. Git이 존재하는 가장 큰 이유는 이것 때문입니다.➡️ 자신의 작업을 관리하는것도 가능하지만 여러 사람과 협업할 때에도 유용하게 사용된다.Git이란 '분산형 버

React SPA > SPA등장 이전에는 브라우저가 페이지를 보여주기 위해서는 페이지 전체를 불러와야 했다. -> Header나Navgation Bar같은 중복요소들의 불필요한 트래픽 문제 발생 > 업데이트에 필요한 데이터만 서버에서 전달받는 싱글 페이지 애플리케이션

Representational State Transfer”의 약자로, 로이 필딩 (Roy Fielding)의 박사학위 논문에서 웹(http)의 장점을 최대한 활용할 수 있는 아키텍처로써 처음 소개되었다. REST API는 웹에서 사용되는 데이터나 자원(Resource)

Postman 웹 개발에서 사용하는 클라이언트는 브라우저이다. 브라우저는 서버에 HTTP 요청을 보낼 수 있는 도구이지만, 주로 웹 페이지를 받아오는 GET 요청에 사용한다. 브라우저의 주소창에 URL을 입력하면, 해당 URL의 root-endpoint로 GE

[Section 2] 비동기

[Section 2] Express

[Section 2] 기술 면접

[Section 3] 재귀

[Section 3] JSON

[Section 3] UI/UX

Figma 클론

[Section 3] React - Redux

[Section 3] 웹 표준 & 접근성

[Section 3] 인증 / 보안

[Section 3] Hashing, Token

[Section 3] TODO 리스트

[Section 3] 기술 면접

[Section 4] Stack. Queue

[Section 4] Tree, Graph

[Section 4] TypeScript 기초

[Section 4] TypeScript 기초(2)

[Section 4] CI / CD

[Section 4] Proxy

[코드스테이츠] pre_project_팀 빌딩