[SEB FE]section4
1.[Unit 1] 자료구조
자료 구조여러 데이터의 묶음을 저장하고, 사용하는 방법을 정의한 것데이터문자, 숫자, 소리, 그림, 영상 등 실생활을 구성하고 있는 모든 값데이터는 분석하고 정리해 활용해야만 의미를 가질 수 있다.자료구조의 분류무수한 상황에 대한 데이터 분류무수한 상황에서 데이터를 효
2.[Unit 1] Stack & Queue
Stack쌓다, 쌓이다, 포개지다의 뜻으로 데이터를 순서대로 쌓는 자료구조Stack 구조Stack의 특징은 입력과 출력이 하나의 방향, 최상단에서만 이루어지는 제한적 접근에 있다.Stack 자료구조의 정책을 LIFO(Last In First Out), FILO(Firs
3.[Unit 1] Tree
Tree단방향 그래프의 한 구조로, 하나의 뿌리로부터 가지가 사방으로 뻗은 형태가 나무와 닮아 트리구조라고 부른다.트리 구조는 데이터가 바로 아래에 있는 하나 이상의 데이터에 한 개의 경로와 하나의 방향으로만 연결된 계층적 자료구조하나의 데이터 아래에 여러 개의 데이터
4.[Unit 1] Graph
Graph여러 개의 점이 서로 복잡하게 연결된 관계를 표현한 자료구조Graph의 구조직접적인 관계가 있는 경우 두 점 사이를 이어주는 선이 있다.간접적인 관계라면 몇 개의 점과 선에 걸쳐 이어진다.하나의 점을 그래프에서는 정점(vertex) 이라고 표현하고, 하나의 선
5.[Unit 3] React 심화
Virtual DOM리액트는 UI의 상태를 추적하고 변화가 일어나는 요소를 빠르게 업데이트 할 수 있게 virtual DOM이라는 가상 DOM 객체를 활용한다.가상 DOM 객체에 접근해 변화 전과 후를 비교해서 바뀐 부분을 적용한다.Real DOM(DOM)Documen
6.[Unit 3] React Hooks
Function Component & Class ComponenntClass Component클래스 컴포넌트는 복잡해질수록 이해하기 어렵고, 컴포넌트 사이에서 재사용하기 어렵다는 단점이 있다.클래스 컴포넌트를 사용하기 위해서는 this키워드의 동작을 알아야하는데 문법을
7.[Unit 3] React의 주목해야할 기능
코드 분할(code spliting)대부분의 리액트 앱은 webpack이나 rollup과 같은 툴을 사용해 번들링을 한다. 번들링을 하면 html웹 페이지에 js를 쉽게 추가할 수 있다.하지만 예전과 달리 지금은 js엔진이 해석해야할 js코드양이 많아지면서 번들링했을때
8.[Unit 4] Design System
디자인 시스템디자인 원칙부터 재사용할 수 있는 UI패턴과 컴포넌트, 코드로 구성된 시스템디자인 원칙, 스타일 가이드, 컴포넌트, 패턴, 디자인 및 개발 프로세스에 대한 지침까지 포함하는 포괄적인 개념디자인 시스템은 실무에서 서비스 확장이나 다양한 디바이스 환경에 대응할
9.[Unit 4] Atomic Design
Atomic Design최근 기술발전으로 인해 웹 환경이 빠르게 변화하고 있어 이런 변화에 따라, 디자이너와 프론트엔드 개발자들은 환경에 상관없이 일관된 사용자 경험을 제공하는게 더욱 중요해 졌다.기존의 웹 디자인 방식은 각 페이지마다 디자인 요소를 개별적으로 만들고
10.[Unit 4] 디자인 시스템 구축하기
디자인 시스템 도입 시 고려사항 디자인 시스템을 만들고 유지하는 업무는 꽤 시간이 걸리며 이를 전담하는 부서 필요구성원들이 디자인 시스템을 사용 및 적용하기 위한 교육 필요고정된 정보를 제공하는 프로젝트, 일회성 프로젝트에는 재사용할 수 있는 컴포넌트가 필요하지 않을
11.[Unit 5] TypeScript 설치
TypeScript 프로젝트 환경 구성프로젝트 폴더 생성mkdir(폴더명)cd(폴더명)프로젝트 폴더 안으로 이동해 터미널에서 npm init -y명령어 실행(프로젝트 초기화)npm init -yTypeScript 설치\-npm install typescript --sa
12.[Unit 5] TypeScript(1)
TypeScript >TypeScript 마이크로소프트에서 개발한 Js의 상위 집합 언어 TypeScript 등장배경 타입스크립트는 js의 단점을 보완하기위해 등장했다. js는 동적타입이 결정되어 유연하고 다양한 라이브러리와 프레임워크를 사용할수 있는 장점이 있지만,
13.[Unit 5] TypeScript(2)
TypeScript 열거형(Enum)Enum은 특정 값의 집합을 정의할 때 사용한다.숫자형 열거형(Enum)열거형은 숫자형과 문자열형이나 둘의 조합으로 정의될 수 있다.디폴트값으로는 숫자형을 사용하고 값은 자동으로 0부터 1씩 증가한다.수동으로도 값을 지정할 수 있다.
14.[Unit 7] 개발 프로세스
개발 프로세스 발전sw개발 프로세스 모델은 소프트웨어 개발 생명주기(SDLC)를 기반으로 만들어졌다.요구분석 및 시스템 명세 작성 : 문제 분석 단계로 개발할 sw의 기능과 제약조건등을 사용자와 함께 정확히 정의설계 : 정의한 기능을 실제로 수행하기 위한 방법을 논리적
15.[Unit 7 ] CI/CD
CI/CDCI : 지속적인 통합(Continuous Integration)CD : 지속적인 서비스 제공(Continuous Delivery) / 지속적인 배포(Continuous Deployment)지속적 통합(Continuous Integration, CI)개발자를
16.[Unit 7] Proxy
Proxy >CORS 정책 필요 이유 CORS : 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용해 한 출처에서 다른 출처가 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제