본문 바로가기

엘리스 AI 트랙 4기90

[8주차] 상태 관리와 Flux Pattern 3월 11일 자 학습 내용 정리입니다. ✅ 상태 관리 상태 관리란 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것을 의미한다. 상태 관리는 한 컴포넌트 안에서의 상태, 여러 컴포넌트 간의 상태, 전체 앱의 상태 관리를 모두 포함한다. 상태 관리 기술은 높은 품질의 코드 작성, 성능 최적화, 네트워크 최적화 등에 유리하다. localStorage 활용한 persist state와 같은 데이터 관리의 고도화를 이룰 수 있다. 상태 관리 기술의 단점도 물론 존재한다. 파악해야 할 로직과 레이어가 많아질 수 있으며 잘못 사용할 경우 앱의 복잡도만을 높이거나 성능을 악화시킬 수 있다. 이러한 예에는 global state를 잘못 활용했을 시 앱 전체에 리렌더링을 발생시켜 .. 2022. 3. 11.
[CSS] 박스 모델 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ Box Model 문서의 레이아웃을 계산할 때 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다. CSS는 박스의 크기, 위치, 속성 등을 결정한다. 하나의 박스는 네 영역으로 이루어진다. 각 영역을 margin, border, padding, content 영역이라 한다. ✔️ content area content 영역은 글이나 이미지, 비디오 등 요소의 실제 내용을 가지고 있다. content 영역의 크기는 해당 content의 너비와 높이로 이루어진다. ✔️ padding area padding 영역은 content 영역을 안쪽 여백까지 포함하는 크기로 확장시킨다. pa.. 2022. 3. 9.
[8주차] CORS 3월 9일 자 학습 내용 정리입니다. ✅ CORS 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 어떠한 출처(origin)에서 실행 중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여할 수 있도록 추가 HTTP 헤더를 이용해 브라우저에 알려주는 체제이다. 브라우저는 모든 요청 시 Origin 헤더를 포함하게 되는데 서버는 Origin 헤더를 보고 해당 요청이 원하는 도메인에서 출발한 것인지를 판단한다. 그리고 보안 상의 이유로 다른 Origin에서 온 요청은 거부하도록 되어있다. 예를 들어 XMLHTTPRequest와 Fetch API는 동일 출처 정책(same-origin policy)을 따른다. 즉, 이 API를 사용하는 웹 애플리케이션.. 2022. 3. 9.
[7주차] react-router v6 3월 5일 자 학습 내용 정리입니다. ✅ react-router react-router는 컴포넌트를 특정 path와 연결하고 해당 path로 진입 시 연결된 컴포넌트를 렌더링 하게 한다. query, path variable 등 URL parameter를 얻어 활용하며 조건에 맞지 않을 경우 redirect 한다. 현재 react는 17.0.2 버전이 나와있는데 16.8 버전부터 React Router가 v6로 업그레이드됐다. 이전 v5와는 다른 문법들이 많이 존재하기 때문에 이 점을 유의할 필요가 있다. react-router v6의 설치 명령어는 아래와 같다. $ npm install react-router-dom@6 $ yarn add react-router-dom@6 react-router v6의.. 2022. 3. 5.
[7주차] React 생명주기 3월 4일 자 학습 내용 정리입니다. ✅ React 생명주기 React의 생명주기는 컴포넌트가 이벤트를 다룰 수 있는 특정 시점을 말하며 마운트, 업데이트, 언마운트 상태로 구성되어 있다. 컴포넌트가 실제 DOM에 삽입되는 것을 마운트(mount), 컴포넌트가 변하는 것을 업데이트(update), 컴포넌트가 DOM 상에서 제거되는 것을 언마운트(unmount)라고 한다. 생명주기 메서드는 다음과 같다. constructor() : State 데이터를 초기화하는 메서드 render() : 화면에 그릴 부분, 반드시 구현되어야 함 componentDidMount() : 컴포넌트가 마운트된 직후 호출되는 메서드 componentDidUpdate() : 업데이트가 진행된 직후 호출되는 메서드 componentW.. 2022. 3. 4.
[7주차] Hooks 3월 4일 자 학습 내용 정리입니다. ✅ Hook Hook은 컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다. Hook에는 useState, useEffect 등이 있다. React의 컴포넌트는 클래스 컴포넌트와 함수 컴포넌트가 존재한다. 기존 컴포넌트 내에서 State와 생명주기를 관리하기 위해서는 반드시 클래스 컴포넌트를 사용해야 했다. 그러나 클래스 컴포넌트는 다소 복잡한 면이 있어 개발에 어려움을 느끼는 개발자들이 많았다. 따라서 함수 컴포넌트에서 State와 생명주기를 관리할 수 있도록 React 16.8 버전부터 Hook이 추가되었다. Hook은 React 함수(컴포넌트, Hook) 내에서만 사용이 가능하다. Hook의 이름은 반드시 .. 2022. 3. 4.
[7주차] React에서의 이벤트 3월 4일 자 학습 내용 정리입니다. ✅ 이벤트 이벤트(Event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다. 사용자의 행동에 의해 발생할 수도 있고 개발자가 의도한 로직에 의해 발생할 수도 있다. Element가 로드되었을 때, 클릭되었을 때, Element 위로 마우스를 올렸을 때, 키보드 입력이 들어왔을 때 등 다양한 이벤트가 존재한다. 이러한 이벤트는 이벤트 핸들러 함수를 통해 이벤트에 관련된 로직이 처리되고 그 결과를 사용자에게 알릴 수 있다. ✅ React에서의 이벤트 React에서 이벤트를 처리하는 방법은 두 가지가 있다. 첫째로 별도의 핸들링 함수를 선언하고 Element에 넘겨주는 방법이 있다. import React from "react"; function .. 2022. 3. 4.
[7주차] Props와 State 3월 2일 자 학습 내용 정리입니다. ✅ Props Props(Properties)는 컴포넌트에 원하는 값을 넘겨줄 때 사용한다. 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 JavaScript의 요소라면 모두 가능하다. Props는 주로 컴포넌트의 재사용을 위해 사용된다. // --- Pokemon.js --- import React from 'react'; const Pokemon = ({ name, type }) => { return ( 선택한 포켓몬은 {name}이며, {type}타입 포켓몬입니다. ); } export default Pokemon; // --- App.js --- import React from 'react'; import Pokemon from './Pokemon'; c.. 2022. 3. 2.
[7주차] JSX와 Component 3월 2일 자 학습 내용 정리입니다. ✅ JSX JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장이다. HTML과 비슷하나 엄연한 JavaScript이고 HTML의 문법과 다른 부분이 존재한다. JSX는 JavaScript 함수 내에서 다음과 같이 표현된다. const App = () => { return ( Title Hello World! ); } 함수의 리턴 값으로 화면에 그려지길 원하는 요소들을 넣는 것이다. 이러한 JSX는 Babel에 의해 트랜스컴파일된다. 위 코드를 Babel을 통해 트랜스컴파일시키면 아래와 같다. const App = () => { return /*#__PURE__*/React.createElement("div", null, /*#__.. 2022. 3. 2.

티스토리툴바