코드스테이츠 부트캠프 FE 개념정리

고정형 마인드셋 vs 성장형 마인드셋 성장하는데 있어 가장 중요한 요소는 지능, 재능, 성격, 환경보다도 "태도"에 있다고 한다. 고정형 마인드셋은 스스로의 한계를 정해놓고 발전 가능성을 제한시키는 사고방식인 반면 성장형 마인드셋은 노력을 통해서 얼마든지 원하는 방향으

메모리: 데이터보관함보관함의 크기는 동일\--> 각 보관함의 이름 "변수" = 데이터의 이름표보관함 확보 -> 선언 ex) let age; \- 각 보관함의 크기는 모두 같음보관함에 데이터 저장 --> 할당 ex) age = 12;선언과 할당 동시에 가능 --> l

조건문 조건문은 어떠한 조건을 판별하는 기준을 만드는 것 조건문에는 반드시 비교연산자(comparison operator)가 필요 비교연산자 , =, ===, !== ex) 비교의 결과는 늘 true/false Boolean 조건문 형태 논리 연산자(locigal

반복문 같거나 비슷한 코드를 여러번 실행시켜야 할 경우에 쓰는 구문 for 구문 반복할 내용을 중괄호 block안에 넣어준다 반복할 조건을 초기화/ 조건식/ 증감문 순으로 넣어준다 ex) 구구단 출력 while 구문 반복할 조건 중 초기화, 증감문은 따로, 조건식만

html vs css vs javascript html --> 구조 Tree Structure Self-Closing Tag img src = "codestates-logo.png" / html 태그(tag)와 속성(attribute) 구성 This is a para

웹페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어웹사이트 사용자가 html문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할컴포넌트 기능별로 묶어서 제작화면의 구성이나 배치 (레이아웃 디자인)굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일(선택) 정렬이나

웹 또는 앱 개발할 때 레이아웃의 뼈대를 그리는 단계. "와이어로 설계된 모양"을 의미하며 단순한 선이나 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것. 와이어프레임 단계에서는 전환효과나 에니메이션, 사용자 테스트 같은 스타일링 요소나 UX를 판단하지 않음.실

전체 html css ① 부분 html css ② 부분 html css ③ 부분 html css

https://youtube.com/shorts/AgkoNOioSDIhover 전hover 후 (경계선 강조: box-shadow)hover 후 (취소, 숨기기, 최대화 표시 나타남)hover 후 (아이콘 360도 회전)cssactive 시

(A mettre à jour)

CLI (Command Line Interface) 화면을 보기위해 마우스, 키보드로 입력(input)하는 작업이 필요하며 마우스나 키보드, 카메라, 마이크 등을 입력소스(input source)라고 함. 입력 소스에 의해 작성된 프로그램에 의해 모니터에 화면을 나타

배열(array) 순서가 있는 값 값 = 요소(element) 순서 = 인덱스(index, 0부터 시작) ex) ex) 배열과 반복문 Array.isArray() 배열이 맞는지를 구분해주는 method 배열 메서드 & console.table() push : 배열

객체 객체 선언의 예시 객체의 값 사용법 방법1. Dot notation 방법2. Bracket notation Dot notation vs Bracket notation bracket notation을 반드시 써야할 때: 무엇을 불러와야하는지 정확히 모를때 do

number string boolean null undefined 같은 고정된 저장공간을 차지하는 데이터변수에 하나의 데이터만 담음대량의 데이터를 다루기에 적합한 '배열','객체','함수'주소를 부여하여 그 안에 값을 넣음 변수에 할당할 때 변수에 값이 아닌 주소를 저

화살표 함수 (일반 함수) (화살표 함수) spread 문법 (전개구문) 기존 배열을 변경하지 않음(immutable) 배열을 풀어서 인자로 전달 or 배열을 풀어서 각각의 요소로 넣을 때 사용 ex) rest문법 (나머지구문) 파라미터 개수가 가변적일 때 유용

Introduction. 테스트코드 TDD (Test-Driven Development, TDD) expect(테스트하는값).기대하는 조건 > '기대하는조건'에 해당하는 함수 matcher > Types-part1 느슨한 동치연산(==, loose e

JavaScript Object처럼 html요소를 조작할 수 있는 모델DOM을 이용하여 html로 구성된 웹페이지를 동적으로 움직이게 만들 수 있음 웹브라우저의 코드 해석 과정에서 <script> 요소를 만나면 웹브라우저는 html해석을 멈추고 <script

자바스크립트에서 특별 대우를 받음 대표적인 예 => 함수 \- 변수에 할당을 할 수 있다 \- 다른 함수의 전달인자로 전달될 수 있다 \- 다른 함수의 결과로서 리턴될 수 있다다른 함수의 전달인자(argument)로 전달되는 함수 하나의 데이터를 다른 데이터

객체는 일반적인 함수를 정의하듯 만드는데, 그냥 실행하는 것이 아니고 new키워드를 써서 만듦클래스는 일반적인 다른 함수와 구분하기 위해 부통 대문자로 시작하며 일반명사로 만듦함수로 정의하는 방법클래스라는 키워드로 정의하는 방법 (최근에는 이 방법 주로 사용)new 키

프로토타입 = 원형객체Human ==(.prototype)==> Human.prototype.sleep ==(new Human(); instantiation)==> steve.sleep steve.sleep ==(.proto)==> Human.prototype.slee

하나의 작업이 끝날 때까지 이어지는 작업을 '막는 것'시작시점과 완료시점이 같은 상황ex) 커피 주문이 blocking 되지 않고 언제든지 주문을 받을 수 있음ex) 커피가 완성되는 즉시 커피를 주문하게 되면 1번 손님의 주문완료시점과 2번 손님의 주문 시작시점이 같을

Node.js 파일 읽을 때: readFile 파일 저장: writeFile 다른 파일 불러올 경우 3rd-party module 해당 프로그래밍 언어에서 공식적으로 제공하는 빌트인 모듈이 아닌 모든 외부모듈을 일컬음 ex) underscore 설치 후 사용 방법

=> promise를 리턴=> promise를 리턴=> pending/ fulfilled/ rejected=> promise문자열을 객체로 바꿔줌특정 URL로부터 정보를 받아오는 역할 계속 업데이트가 되어야하는 부분(ex. 포털 메인사이트 내 최신뉴스, 미세먼지/날씨

FE개발을 위한 자바스크립트 오픈소스 라이브러리html/css/js로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향함하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발함. 컴포넌트로 분리하면

규모가 커질수록 사용자와의 상호작용이 많아지고 속도 저하 문제가 발생함에 따라 이 문제를 해결하기 위해 등장한 SPA전통적인 웹사이트는 페이지 전체를 로딩하여 시간이 오래걸리는 반면, SPA는 페이지 전환 전후에 중복되는 부분은 새로 불러오지 않음 (ex. header

State 살면서 변할 수 있는 값 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값 내부에서 변화하는 값 > on/off 여부 {isOn: true} // on {isOn: false} // off Props 외부로부터 전달받은 값 --> 변하지 않는 값 --

REST (Representational State Transfer)웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고 HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식HTTP 프로토콜을 사용하기만 해도 OKREST API는 웹에서 사용되는 모든 데이터나 자

컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 전달받음 단방향 데이터 흐름(one-way data flow)(맞으면 state 아님)(맞으면 state 아님)(맞으면 state 아님)ex) 하위 컴포넌트의 클릭 이벤트가 부모의 상태를 바꾸어야만 하는 상황 =

이중 하나라도 다르면 동일한 출처로 보지 않음ex) 동일하지 않은 프로토콜 : https://www.codestates.com vs http://www.codestates.com동일하지 않은 호스트: https://urclass.codesta

재귀를 코드로 표현한다면..?문제를 더 작게 쪼개기 1번을 계속하여 문제가 더 작아지지 않을 때까지 가장 작은 단위로 쪼개기가장 작은 단위의 문제를 풂으로써 전체 문제를 해결문제: 자연수로 이루어진 리스트(배열)를 입력받고, 리스트의 합을 리턴하는 함수 arrSum 을

JSON (JavaScript Object Notation) 데이터 교환을 위해 만들어진 객체 형태의 포맷 예를 들어, 채팅 프로그램 메세지 전송 시 전송가능한 조건을 만족해야 한다 수신자&발신자가 같은 프로그램 사용 문자열처럼 범용적으로 읽을 수 있어야 함

사람들이 컴퓨터와 상호작용하는 시스템 화면상의 그래픽 요소 + 물리적 요소 (키보드, 마우스)그래픽 사용자 인터페이스ex) 운영체제(Window, Mac OS) 화면, 애플리케이션 화면UI == GUI사용자가 어떤 시스템, 제품, 서비스를 직+간접적으로 이용하면서 느끼

없음없음없음아이덴티티 컬러인 보라색을 잘 활용하여 홈페이지의 매력도를 높였다사진과 글의 배치가 시각적으로 편안하고 아이콘과 글씨색상 등이 브랜드의 이미지와 잘 맞는다 <-> 쿠팡프레시위치파악이 매우 쉽다카테고리화가 잘 되어있고, 홈화면에서 쉽게 찾을 수 있다맞춤형

조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 개발 진행CSS가 구조적으로 작성될 수 있게 도움주는 도구CSS 전처리기 중 가장 유명한, CSS를 확장해 주는 스크립팅 언어SCSS 코드를 읽어서 전처리한 다음 컴파일 해서 전역 CSS 번들 파일을 만들어 주는

와이어프레임(wireframe) 제품 기획 단계에서 페이지 구조를 잡기 위한 것 1. Low Fidelity Wireframe (Lo-Fi Wireframe) 손으로 빠르게 그린 수준 2. Middle Fidelity Wireframe (Mid-Fi Wireframe)

변하는 데이터. 동적으로 표현되는 데이터함수의 입력 외에도 함수의 결과에 영향을 미치는 요인ex) API 호출Side Effect는 최대한 배제하고 컴포넌트 표현 그 자체에 집중하여 개발하는 것이 중요 => BUT, 서버 요청에 의존적인 페이지를 만들다보면 불가피하게

Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐른다어떤 액션을 취할 것인지 정해놓은 객체Action 객체를 생성하는 함수를 만들어 사용Reducer로 Action을 전달해주즌 함수 Dispatch에게서 전달받은 Action

W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙어떤 운영체제나 브라우저(크롬, 엣지, 사파리, 파이어폭스..)를 사용하더라도 웹페이지에서 동일하게 보이도록 하는 웹페이지 제작기법HTML, CSS, JavaSc

장애인과 고령자 등이 웹사이트 정보를 비장애인과 동등하게 접근하고 이해할 수 있도록 하는 것ex) 스크린리더 => 이미지에 들어있는 글자의 경우 스크린리더가 인식할 수 없어 음성으로 읽어줄 수 없음1\. 사용자층 확대2\. 다양한 환경 지원 \- 정보 소외계층이 아니

이미지를 대체할 수 있는 적절한 텍스트를 alt속성을 이용해 작성하기이미지를 설명해주는 인접요소가 있다면 대체 텍스트를 작성하지 않는 것이 오히려 좋음 배경이미지인 경우 alt속성을 작성하지 않는다 => 배경이미지를 클릭할때마다 alt 텍스트를 읽어주면 번거로우니까 리

발신자와 수신자에 각각 할당된 전용선으로 연결내가 연결하고자 하는 상대가 다른 상대와 연결중이 경우 해당 연결이 끊어져야 연결 가능즉시성이 떨어짐소포를 보내듯 출발지와 목적지 정보를 가진 단위로 데이터를 잘게 나누어 전송함 IP는 지정한 IP주소에 패킷이라는 통신단위로

HTTP + Secure => HTTP프로토콜 내용을 암호화함으로서 보안성이 추가됨데이터 제공자 신원 보장인증서에 도메인 정보 들어가있음 (응답객체 도메인과 인증서 도메인이 같은지를 비교하여 확인)Certificate Authority공인 인증서 발급 기관TLS or

관계형 데이터베이스 시스템(RDBMS)에서 데이터 관리/처리를 위해 설계된 선언형 프로그래밍 언어사용자가 input form에 무언가 작성하는 상황에서 발생공격자는 input form에 일반 텍스트가 아닌 SQL문을 작성 input form에 SQL문을 마무리하는 키워

재귀란 자기 자신을 호출하는 것을 일컫는다. 즉 어떤 함수에서 자기 자신을 다시 호출하여 문제를 푸는 것을 재귀로 문제를 해결했다고 한다. 이를 통해 문제를 더 작게 쪼갤 수 있고, 더 이상 쪼갤 수 없을때까지 가장 작은 단위로 쪼개서 문제를 푸는 것이다. (흔히 재귀

브라우저는 사용자가 선택한 자원(Resource)를 서버에 요청(Request)하고, 서버의 응답(Response)을 브라우저에 띄우는(Rendering) 방식으로 동작함자원: HTML 문서, PDF, 멀티미디어자원의 주소: URI(Uniform Resource Ide

animation-name : 애니메이션 중간상태를 지정하는 이름, @keyframes 블록에 작성animation-duration : 한 싸이클의 애니메이션이 재생될 시간 지정. 지정해주지 않으면 기본값은 0animation-delay: 애니메이션의 시작을 지연시킬

사용자에게 웹애플리케이션을 제공하기 위한 파일 묶음필연적으로 용량을 줄이고 파일을 통일하는 툴링작업이 필요함 FE 애플리케이션 배포를 위해 가장 많이 사용하는 번들러여러개의 파일을 하나의 파일로 합쳐주는 모듈 번들러모듈번들러: HTML, CSS, JS 등의 자원을 전부

실제 DOM의 사본 같은 개념. React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전/후를 비교 후 바뀐 부분을 적용한다DOM (Document Object Model)JavaScript 같은 스크립팅 언어가 <html

함수 이름 앞에 use 붙이기프로젝트 내 hooks 디렉토리에 Custom Hook 위치시키기return 하는 값은 조건부이면 안됨React 18 버전에서는 더이상 ReactDOM.render를 지원하지 않음React 18에서는 이제 createRoot API를 사용함

컴퓨터가 처리할 수 있는 형태로 데이터와 명령을 받아들이는 물리적인 장치ex) 키보드, 마우스, 스캐너, 태블릿 등 처리된 데이터를 사람이 이해할 수 있는 형태로 출력하는 물리적인 장치 ex) 모니터, 프린터산술/논리 연산 장치: 덧셈 수행제어장치: 프로그램에 따라 명

페이스북에서 만든 쿼리 언어장점: REST API방식의 고정된 자원이 아닌, 클라이언트 요청에 따라 유연하게 자원을 가지고 올 수 있다!!트리의 방향성은 존재하나 사이클은 존재하지 않는 비순환 그래프임트리구조로 쿼리 결과를 받기 위해 그래프를 탐색하는 쿼리언어Graph

(컴퓨터 공학) 가능한 적은 리소스를 소모하면서 가능한 한 빠르게 원하는 결과를 얻을 수 있도록 하는 것(웹개발) 주어진 조건 아래 최대한 빠르게 화면을 표시하도록 하는 것화면 로딩 시간이 길어지면 사용가의 페이지 이탈확률도 높아짐 전환율: 웹사이트 방문자 중 회원가입

주기적인 유지 관리가 필요함계속 컴퓨터를 추가설치하기에는 공간적인 한계 있음==> 데이터 센터 등장 및 데이터센터의 유휴자원 대여 서비스 등장 ==> 클라우드 컴퓨팅의 시작전통적 데이터 센터와 비슷한 역할을 하지만, 물리적 컴퓨터가 아닌 가상 컴퓨터를 대여한다는 측면에

입력과 출력이 하나의 방향으로 이뤄짐LIFO(Last In First Out) || FILO(First In Last Out)저장되는 데이터는 유한하고 정적스택의 크기는 제한되어 있음 \- 스택 오버플로우(stack overflow)브라우저의 뒤로 가기, 앞으로 가기