엘리스 AI 트랙 4기/elice AI track56 [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. [7주차] React와 Create React App 3월 2일 자 학습 내용 정리입니다. ✅ SPA 전통적인 페이지 방식은 최초에 서버로부터 HTML을 전달받고 페이지의 변경이 필요할 때 다시 서버에 요청해 HTML을 전달받는다. 이 과정에서 페이지는 변경이 필요할 때마다 처음부터 끝까지 다시 로드된다. 반면 SPA(Single Page Application)는 최초에 서버로부터 HTML을 전달받고 페이지의 변경이 필요할 때 변경이 필요한 부분만 JSON으로 전달받는다. 그리고 페이지에서 변경된 부분만 계산해 다시 그린다. 예를 들어 사용자가 로그인에 성공했다면 서버가 로그인이 성공했다는 메세지를 JSON 형식으로 보내는 식이다. 클라이언트는 이 메세지를 받고 로그인에 관련된 페이지가 어떤 변경이 필요한지 알 수 있다. React는 SPA 방식을 따른다... 2022. 3. 2. [6주차] 3계층 설계 2월 26일 자 학습 내용 정리입니다. ✅설계 프로그래밍에서의 코드 설계란 코드와 파일, 폴더 구조를 설계하는 것을 말한다. 하나의 파일에 모든 코드를 작성하는 것과 같이 적절한 설계 과정이 이루어 지지 않은 경우 다음과 같은 문제가 발생할 수 있다. 수정할 사항을 찾기 힘들다. (유지보수가 어렵다.) 코드와 코드 사이의 관계를 파악하기 힘들다. 각 코드의 역할과 기능이 명확히 구분되어 있지 않아 기능별로 테스트(유닛테스트)를 진행하는 것이 어렵다. 하나의 파일을 여러 사람이 동시에 수정하기는 힘들기 때문에 분업이 어렵다. 새로운 기능을 추가하고자 할 때 기존 코드의 어느 부분에 수정, 추가할지 알아내기 힘들기 때문에 확장성이 부족하다. 따라서 위의 문제들을 해결하기 위해 코드 설계 구조가 만들어진 것이.. 2022. 2. 26. 이전 1 2 3 4 5 ··· 7 다음
