프론트엔드42 Node.js - CORS CORS가 필요하게 된 배경인 SOP에 대해서 먼저 알아보자. SOP(Same-Origin Police) 동일 출처 정책이란 뜻으로, `같은 출처의 리소스만 공유가 가능하다`라는 정책이다. 여기서 말하는 출처(Origin)는 프로토콜, 호스트, 포트의 조합으로 되어있다. 이 중 하나라도 다르면 동일한 출처가 아니다. SOP는 잠재적으로 해로울 수 있는 문서를 분리함으로써 해킹등의 공격을 받을 수 있는 경로를 줄여준다. 모든 브라우저는 기본적으로 SOP 정책을 사용하고 있지만, 어떻게 하면 다른 출처의 리소스를 받아올 수 있을까? CORS(Cross-Origin Resource Sharing) 교차 출처 리소스 공유(CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른.. 2023. 4. 4. fe-sprint-statesairline-client fe-sprint-statesairline-client의 목표 💡 Part 1: 항공권 목록 필터링 🧩 Main 컴포넌트에서 항공편을 조회합니다 ✓ Main 컴포넌트 내 `search` 함수는 검색 조건을 담고 있는 상태 객체 `condition`을 업데이트해야 합니다 (24 ms) 🧩 Search 컴포넌트를 통해 상태 끌어올리기를 학습합니다 ✓ 검색 화면이 Search 컴포넌트로 분리되어야 합니다 (3 ms) ✓ Search 컴포넌트에는 상태 변경 함수 `search`가 `onSearch` props로 전달되어야 합니다 (5 ms) ✓ 상태 변경 함수 `search`는 Search 컴포넌트의 `검색` 버튼 클릭 시 실행되어야 합니다 (25 ms) 💡 Part 2: AJAX 요청 🧩 Side Effect.. 2023. 4. 3. React - Effect Hook Hook의 2가지 규칙 최상위(at the Top Level)에서만 Hook을 호출해야 한다 오직 React 함수 내에서 Hook을 호출해야 한다. useEffect의 3가지 형태 1. 아무것도 넣지 않기(기본 형태) - useEffect(함수) 컴포넌트가 처음 생성되거나, props가 업데이트 되거나, state가 업데이트 될 때 effect 함수가 실행된다. 2. 빈 배열 넣기 - useEffect(함수, []) 컴포넌트가 처음 생성될 때만 effect 함수가 실행된다. 대표적으로 처음 단 한 번, 외부 API를 통해 리소스를 받아오고 더 이상 API 호출이 필요하지 않을 때 사용할 수 있다. 3. useEffect(함수, [종속성1, 종속성2, ... ]) 배열 내의 종속성1, 또는 종속성 2의 값.. 2023. 4. 3. React - Side Effect / Pure Function Side Effect(부수효과) 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 한다. 리액트에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나, 이벤트를 활용해 DOM을 직접 조작할때 Side Effect가 발생했다고 한다. 전역 변수 foo를 bar라는 함수가 수정하는 예제 let foo = 'hello'; function bar() { foo = 'world'; } bar(); // bar는 Side Effect를 발생시킵니다! Pure Function(순수 함수) 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 순수 함수라고 한다. 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치거나, 함수가 입력으로 전달된 값을 .. 2023. 4. 3. CSS - 기초 CSS(Cascading Style Sheets) CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다. HTML로 웹 페이지의 구조를 잘 세우고나서, 더 나은 사용자 경험(UX, user experience)을 제공하기 위해 CSS로 UI 및 레이아웃을 적절히 구성하면 멋진 웹 페이지를 완성할 수 있다. 즉, CSS는 좋은 사용자 경험을 제공하기 위한 도구이다. 사용자 인터페이스(UI: user interface) 인터페이스는 컴퓨터와 교류하기 위한 연결고리이다. 버튼도 없고, 마우스도 없던 시대의 개발자는 자신이 만든 애플리케이션과 소통하기 위해서 CLI(Command Line Interface)를 사용하였다. 하지만 이는 컴퓨터에 무지한 일반 사용자가 사용하기에는 어려움이 있다. 트.. 2023. 4. 2. HTML - Sementic Element 시맨틱 요소(Sementic Element)란? 시맨틱이란 '의미가 있는, 의미론적인'이라고 해석할 수 있다. 시맨틱 요소를 사용해야 하는 이유 검색 엔진이 시맨틱 요소를 더 좋아하기 때문이다. 네이버, 구글 등의 검색 포털은 모두 고유한 검색 엔진을 보유하고 있다. 이러한 검색 엔진은 입력된 키워드를 각 웹페이지에서 포함하고 있는지 확인하여 결과를 보여준다. 이러한 검색 엔진들은 시맨틱 요소를 중요한 키워드로 고려한다. 즉, 시맨틱 요소에 담긴 의미에 따라 검색 결과 상위 노출이 결정될 수 있다는 것이다. 여러 개발자가 함께 작업할 때 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는것이 훨씬 편리하기 때문이다. 뿐만 아니라, 요소 안에 채워질 데이터 유형도 예측하기 쉬워진다는 장점이 있다. 시맨틱 .. 2023. 4. 2. 이전 1 2 3 4 5 6 7 다음
