SEB FE

길고 긴 대학생활을 하면서 과제나 프로젝트를 진행하면서 느꼈던 것은 항상 코딩에 대한 자신감이 없어서 오히려 공부를 놨던 것이다. 주어진 과제나 프로젝트를 할 때는 어쩔 수 없이 끝내야 하고 내가 해야하는 임무가 있으니 울면서 할 일들을 끝내고 뒤늦게 해냈다는 성취를

HTML 뼈대를 구성하는 마크업 언어이자 tag 로 구성되어 으로 속성 attribute 을 나타내며 태그마다 여러 가지 속성을 부여할 수 있다. 주로 쓰이는 tag 와 attribute 레이아웃으로 주로 쓰이는 는 한 줄을 차지 하지만, 는 컨텐츠 크기만

css Cascading Style Sheets 웹 페이지 스타일 및 레이아수 정의하는 스타일시트 언어 사용자에게 더 나은 UX 제공, 뛰어난 가독성으로 전달력이 우수 UI 사용자 인터페이스 => 직관적이고 쉬워야 UX 기능별로 컴포넌트 분류, 레이아웃 디자인, 셀렉

레이아웃 와이어프레임 Wireframe 웹을 개발할 때 레이아웃의 뼈대를 그리는 단계 단순한 선, 도형 등으로 인터페이스를 시각적으로 묘사하여 구조를 나타낸 것 화면의 영역을 구분 목업 mock up 실물 크기의 모형 아직 javascript 를 배우지 않아 전달할

일주차 회고 이때까지의 기초와 개념이 얼마나 부족했는지 깨달았고, 아직 한~참 멀었다는 생각이 들었다. 셀렉터 https://flukeout.github.io/ 나도 모르게 북마크 되어 있는 셀렉터 퀴즈가 있었다. 수업 때 배우지 않았던 개념들도 있어서 유용하다.

브라우저에서 실행하기 위해 만들어진 프로그래밍 언어HTML, JavaScript파일을 함께 브라우저에서 실행코드의 모음 > 프로그램 > 프로세스number : integer, float 모두 표현 / typeof 연산자로 숫자타입 판별string : ' " 벡틱 (->

while문과는 다르게 내부 코드가 최소 한 번은 출력이 된다.do while문을 잘 쓰지 않았던 터라 잘 몰랐는데 어떤 경우에 while문 대신 쓰는지 이게 또 궁금하게 된다. 그리고 do 중괄호 안에서 num 값을 줄여주는 것과 while 조건문 안에서 num값을

📍 코플릿 회고 전치연산자 vs 후치연산자 문자열 치환 문자열 내 처음으로 발견된 searchvalue만 newvalue로 변경됨 => 과 같은 함수로 쓰이려면 정규식 이용하여야 함 /searchvalue/ : '/ /' 사이에 검색할 문자

버튼이 잘 눌렸는지 확인 -> 클릭시 console 창 확인 버튼은 기본적으로 ( 숫자, 연산자 + - \* /, 소수점. , 계산 Enter , 초기화 AC ) 으로 구성 \- 소숫점 버튼 클릭시 console 창에 '소숫점 버튼' 출력기본 계산 기능 구현하기

CLI Command-Line Interface 명령어 입력소스 input sorce ( 키보드, 마우스, 카메라, 마이크 등 ) > 입력 출력소스 output sorce ( 모니터, 스피커 ) > 출력 => I/O Input/Output 입출력 아이오 GUI가 개

객체 중괄호 curly brakcet {} 이용 키-값 쌍으로 이루어짐(key - value pair) 키-값 쌍은 쉼표 , 로 구분 키에는 문자열만 할당 가능하고, 값에는 문자, 숫자, 배열, 객체, 함수 할당 가능 => 따라서 충분히 값에 접근이 가능하다. 📌

배열 대괄호를 이용하여 선언, 할당할 수 있다. 인덱스를 이용하여 조회할 수 있고 변경할 수도 있다. 온점 . dot 을 이용하여 속성변수가 가지고 있는 속성 property 에 접근할 수 있으며, () 소괄호를 이용하여 명령 method도 실행할 수 있다. 📌

📌 원시 자료형 Primitive vs 참조 자료형 Reference ||원시 자료형| 참조자료형| |:--:|:--|:--:| ||number, string, boolean, undefined, null| 배열, 객체, 함수 등| |변수 할당 |메모리 공간에 값

📌 spread/rest spread 문법 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용. 배열에서 강력한 힘 rest 문법 파라미터를 배열의 형태로 받아서 사용. 파라미터 개수가 가변적일 때 유용 배열에서 사용하기 배열 합치기 배

📌 let vs const const 변수는 항상 재할당 금지 , 배열 또한 재할당 금지하나 새로운 요소를 추가하거나 삭제 가능, 객체 또한 재할당 금지하나 새로운 속성을 추가하거나 삭제가능 🤔 재할당도 안되는데 왜 const 키워드를 쓰느냐? https://g

📌 DOM Document Object Model HTML 요소를 Objct 처럼 조작할 수 있는 Model HTML로 구성된 웹 페이지를 동적으로 구동 가능 HTML 요소(배열처럼 사용 가능(배열 아닌 배열, 유사배열, 배열형 객체 = Array-like Objec

예전부터 github 를 써왔지만 항상 드문드문 사용해서 명령어를 까먹어 매번 검색해보기도 했고, 자칫 잘못하다가 내부 문서에서 충돌이나 문제가 발생할까봐 무서웠다. 이 수업을 통해서 이젠 까먹지 않았으면 좋겠고, 또 까먹는다면 다른 사람의 블로그가 아닌 내 블로그

📌 이벤트 📌 이벤트 핸들러 addEventListener() 메서드를 사용하지 않고 이벤트와 함수를 연결하는 것(1,2,3) 📌 이벤트 리스너 addEventListener(이벤트타입, 함수) 메서드를 사용하여 이벤트와 함수를 연결하는 것(4,5) 이벤트 타

함수 먼저, 함수란? 변수를 할당할 수 있고 함수를 담은 변수를 전달인자로 받을 수 있다 이런 함수를 일급객체의 한 종류라고 할 수 있으므로 객체라고 할 수 있다. 변수에 할당할 수 있다. 다른 함수의 전달인자로 전달될 수 있다. 다른 함수의 결과로서 리턴될 수 있

📌 클래스와 인스턴스 클래스 어떤 모델을 설계할 때 기초가 되는 청사진 인스턴스 클래스를 참고하여 생성하는 객체 ** 키워드를 이용하여 인스턴스를 생성할 수 있다. ㄴ 실행시 즉시 생성자 함수가 실행 -> 새로운 객체 할당 -> 각각의 인스턴스는 클래스의 고유한

📌 상속과 프로토타입 ✅ 상속이란? 객체 지향 프로그래밍의 개념으로 어떤 객체의 프로퍼티 (속성) 또는 메서드를 다른 객체가 그대로 사용할 수 있는 것 Student.prototype 이라는 Object 가 존재하고, 클래스 내부에서 study 함수를 생성하였기 떄

단어로 보면 동기는 '동시에 일어나는', 비동기는 '동시에 일어나지 않는' 이라는 의미를 가진다. 하지만, 그림에서 보는 것과는 반대로 느껴진다. 동기와 비동기의 동시라는 것은 동시성의 발생을 어디로 보느냐의 차이다.동기는 요청의 결과가 그 자리에서 동시에 일어나야 하

[과제] 타이머 API callback 함수 Promise Async & Await ![](https://velog.velcdn.com/images/jeongjwon/post/e9f3050d-377b-4432-9c

비동기 요청의 대표적 사례는 네트워크 요청이다. 네트워크 요청의 형태는 다양한데, URL 을 통해 요청하는 경우가 흔하며 이를 가능하게 하는 것이 Fetch API 와 Axios 이다. >GET 요청 - 정보를 요청하기 위해 사용되는 메서드 POST 요청 - 서버에

📌 React ✅ 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리 선언형 Declarative 코드를 자세히 분석하지 않아도 의도를 분명히 알 수 있게 함 HTML/CSS/JS 로 나누어 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX(

📌 React SPA 전통적인 웹페이지 (Multiple Page Application) ✅ 전통적으로 페이지 이동 시 브러우저가 매번 HTML파일로 된 페이지 전체 를 가져와야 했음. ➡️ 중복되는 요소들을 매번 불러와 서버와의 불필요한 트래픽 발생 ➡️ 느린

React State & Props State ✅ 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값 State hook, useState 는 이라는 함수이고, 함수 컴포넌트 안에서 state 를 사용할 수 있게 한다. 의 인자는 state 의 초기값이다. 함

📌 웹 애플리케이션 아키텍처 클라이언트 - 서버 아키텍처 2티어 아키텍처 리소스를 사용하는 앱(클라이언트)과 리소스가 존재하는 곳(서버)을 분리시킨 것 클라이언트와 서버는 요청과 응답을 주고받는 관계 3티어 아키텍처 2티어 아키텍처 + 데이터베이스 실제 리소스 저장

REST API REST (REpresentation State Transfer) : 웹(http)의 장점을 최대한 활용할 수 있는 아키텍처 REST API : 웹에서 사용되는 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답

Postman API 테스트 도구 OpenWether API 로 날씨 받아오기 city id 와 API key 를 이용한 URI로 데이터 받기 postman 으로 같은 URL과 HTTP 메서드 GET 을 이용하여 데이터 조회하기 결과 Status 는 200 OK

React 데이터 흐름 ✅ 데이터는 위에서 아래로 하향식(Top Down)으로 흐른다.(단방향식) 그래야 부모 컨포넌트에서 자식 컴포넌트로 전달할 수 있다. ✅ 앱을 만들 때는 상향식(Bottom Up)으로 작은 컴포넌트들부터 큰 컴포넌트로 만들고 테스트를 작성하면

SOP Same-Origin Policy 동일 출처 정책 같은 출처(Origin)의 리소스만 공유가 가능하다. >\* 출처(Origin)이란? 프로토콜 + 호스트 + 포트의 조합으로 이 중 하나라도 다르면 다른 출처로 받아들여야 한다. vs https vs http

Express Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 프레임워크 미들웨어 추가, 라우터 제공 에 있어서 Node.js 와의 차이점 존재 Express 설치 웹 서버 만들기 라우팅 메서드(get, post, put, delete

findAll : 요청된 파라미터에 의한 항공편 데이터(flights) 조회(get) + req.query 이용findById : 요청된 uuid 값과 동일한 uuid 값을 가진 항공편 데이터 조회 + req.params 이용filter 메서드로 flights 의 ke

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

재귀 ✅ 문제를 작은 단위로 쪼개며 진행하면서 가장 작은 단위로 쪼개었을 때 문제를 해결하고 다시 큰 단위로 돌아가면서 전체의 문제를 해결하는 방식 재귀 함수의 입력값과 출력값 정의하기 문제를 쪼개고 경우의 수를 나누기 recursive case = 작은 단위

⭐️ Memoization 동일한 계산을 적용해야하는 경우, 메모리에 저장해두었다가(기억을 해두었다가) 가져다 사용하는 느낌으로 중복을 방지할 수 있다. 동적계획법의 비슷한 일종으로 메모리 공간 비용을 투자하는 대신 시간 비용을 줄인다. 재귀 피보나치 재귀 + me

UI ✅ User Interface 사용자와 컴퓨터 사이의 상호작용하는 시스템 (마우스, 키보드), UI를 GUI (Graphic User Interface)라고도 하며 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경을 말한다. Modal : 기존에 이용

CDD(Component Driven Development) 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 진행(상향식 개발) 재활용할 수 있는 UI컴포넌트 프로젝트의 규모나 복잡도 심화 + 다양한 디바이스들의 등장으로 복잡해진 CSS ➡️ CSS 전처리기 등장 (

비동기 요청 일반적인 동기적인 프로그래밍은 API 요청, 파일 다운로드, 데이터베이스 조회 등과 같은 작업을 진행할 때 네트워크나 외부 자원에 의존하여 장시간 소요되므로써 요청이 완료될 때까지 다음 코드의 실행이 중단되어 전체적인 성능이 저하될 수 있다. 이와 다르게

상태관리 로컬에서는 특정 컴포넌트 안에서만 관리되는 상태이며, 전역에서는 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태를 말한다. 예전에 배웠던 state 상태는 상위 컴포넌트에서 하위 컴포넌트로 props 로 상태를 전달하면서 전역상태에서 사용될 수 있다.

HTTP > HyperText Transfer Protocol 로 HTML과 같은 하이퍼미디어 문서를 전송하기 위한 애플리케이션 레이어 프로토콜(OSI 계층 중 하나)이다. 웹 브라우저와 웹 서버간의 통신을 위해 설계되었고, 클라이언트가 요청을 하기 위해 연결을 연

웹 표준 ✅ 웹에서 표준으로 사용되는 기술이나 규칙으로 구조(Markup-HTML), 표현(Style-CSS), 동작(Script-JavaScript) ➡️ 논리적이고 의미에 맞는 마크업, 최신 버전의 브라우저 호환 요지 보수의 용이성, 코드의 경량화, 트래픽 비용 감

회선 교환 발신자 -> 전화교환원(오퍼레이터) -> 수신자 발신자와 수신자 사이에 데이터를 전송할 전용선을 미리 할당하고 연결 -> 즉시성이 떨어짐 패킷 교환 회선 교환 해결 데이터를 패킷(출발지와 목적지 정보가 담김) 단위로 나누어 전송 IP Packet pack

Cookie ✅ 서버가 일방적으로 클라이언트에 영속성이 있는 데이터를 저장하는 방법 ➡️ 무상태성을 가지는 http 대신 cookie가 데이터를 기억하는 것 Domain : 쿠키의 도메인 옵션과 서버의 도메인이 일치해야만 쿠키 전송 가능 Path : 세부 경로가 일치

Hashing 해시함수(항상 같은 길이의 문자열 리턴, 서로 다른 문자열에 동일한 해시 함수를 사용 시 반드시 다른 결과값, 동일한 문자열에 동일한 해시함수 사용 시 항상 같은 결과값)를 사용하여 암호화를 진행하는 방식이다. 해시함수는 레인보우 테이블를 이용하여 이전

재귀 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해 주세요. UI

기존 DOM (문서 객체 모델 Document Object Model) 에 대해 살펴보자면,브라우저에서 다루는 HTML 문서를 파싱하여 문서의 구성요소 element들을 객체로 구조화하여 트리구조로 나타낸 것을 말한다. DOM은 HTML 과 JasvaScript 를 서

React 를 이용하여 개발하는 경우에 다른 컴포넌트이지만 같은 로직을 이용하는 것을 많이 경험해보았을 것이다. React 는 함수형 컴포넌트를 통해 반복되는 훅 활용 메서드를 하나로 통일하고 줄임으로써 더 간결하고 명료하게 상태관리 로직을 재활용할 수 있다.사용하기

브라우저는 렌더링 과정을 거치면서 html, css, script 세 개의 파일을 다운로드합니다. html와 css는 사용자에게 보여지는 시각적인 모습과 script는 기능적인 요소를 담당합니다.이는 파싱되면서 html이 DOM 트리를 구축하고, css는 CSSOM 을

https://react.vlpt.us/redux-middleware/04-redux-thunk.html공식문서에 따르면 리덕스에서 비동기 작업을 처리하기 위해 사용하는 미들웨어이다.이를 사용하면 액션 객체가 아닌 함수를 디스패치할 수 있다.npm instal

TypeScript 는 일종의 JavaScript 이다. JavaScript + Type 이 붙은 꼴로 상위 확장한 컴파일 언어이다. 동적 타입의 인터프리터 언어인 자바스크립트는 오류 발견이 있지만, 타입스크립트는 정적타입의 컴파일언어로 자바스크립트 코드로 변환해준다

Enum JavaScript 에서 열거형 대신 객체 형태로 나타내지만, TypeScript 에서는 문자형 열거형과 숫자형 열거형을 지원하며, 특정 값(상수)의 집합을 정의할 때 사용된다. 값을 지정하지 않는다면 자동적으로 0부터 시작하여 1씩 증가하게 값이 지정된다

저장소를 git clone 한 후 , 필요한 package 를 추가적으로 설치한다.npm install -g typescript : typescript 패키지@types/react @types/react-dom : 타입 정의 파일@typescript-eslint/esl

매번 개발자가 코드를 수정하고 빌드, 테스트, 배포까지 한다면 상당히 많은 시간이 소요가 된다.어플케이션 개발 단계부터 배포때까지 자동화를 통해서 좀 더 효율적이고 빠르게 사용자에게 빈번이 배포할 수 있도록 만드는 것을 말한다.Continuous Integration

교차 출처 리소스 공유란 추가 HTTP 헤더를 사용하여 다른 출처에도 리소스에 접근 할 수 있는 권한을 부여하도록 브라우저에게 알려주는 체제출처(origin)은 url의 프로토콜, 도메인, 포트가 모두 동일하면 동일한 출처라고 정의한다. 보안성을 높이기 위해서는 특정