본문 바로가기

REACT13

CORS 에러 해결하기 리액트를 개발하던 중.. 개념 공부할 때 보았던 CORS를 에러로 맞딱드리게 되었다...!🤨 CORS Cross-Origin Resource Sharing(CORS)은 추가적인 HTTP header를 사용해서 애플리케이션이 다른 origin의 리소스에 접근할 수 있도록 하는 메커니즘이다. 서비스하고 있지 않은 사이트에서 세션을 요청해서 세션을 획득할 수 있다면 해당 사이트는 악의적으로 내 세션을 탈취하거나 다른 행동을 할 수 있다. 그래서 브라우저에서는 이러한 요청을 막습니다. 피싱사이트가 대표적인 공격 사례로 피싱사이트가 있다. 이러한 것을 막고 허용한 origin만 요청하기 위해 CORS가 필요하다. 브라우저가 리소스를 요청할 때 추가적인 헤더에 정보를 담는다. 내 origin은 무엇이고 어떤 메소드.. 2023. 5. 9.

[패스트캠퍼스 react 강의] 8주차 학습일지 Context https://ko.reactjs.org/docs/context.html Context – React A JavaScript library for building user interfaces ko.reactjs.org 컴포넌트 트리를 넘어 데이터를 공유할 수 있는 방법 컴포넌트 트리 제약 -> Props drilling의 한계 해소 재사용성 -> Context를 사용하면 재사용하기 어려움 API -> createContext / Provider / Consumer useContext -> Consumer 대체 Portal https://ko.reactjs.org/docs/portals.html Portals – React A JavaScript library for building user.. 2022. 8. 9.

[패스트캠퍼스 react 강의] 7주차 학습일지 Key와 리랜더링 알아보기 1. Key Key: Value를 특정하는 이름 div의 key를 명시해줌으로써 해결 2. Detail 유일한 값으로, index로 주면 재사용 못함(재배열되는 경우 비효율적) 재사용 -> key를 제대로 줘야 재사용 가능 제대로 준다 -> 중복 없고, 바뀌지 않는 상태 끌어올리기 (State lifting up) 로그인 폼 만들기 : id와 password 모두 입력되어 있을 때만 button이 enabled 되도록 형제 컴포넌트의 상태 궁금 -> 필요하면 부모로 lifting up Props drilling -> 과도한 lifting은 drilling을 야기 데이터 Fetch 해보기 (API call) Fetch api -> 네트워크 리소스 상황별 핸들링 -> 로딩 / 데이.. 2022. 8. 2.

[패스트캠퍼스 react 강의] 6주차 학습일지 React 라이브러리 vs 프레임워크 라이브러리: 개발 편의를 위한 도구의 모음 (공구) - React 프레임워크: 기반 구조까지 잡혀있음 (공장) - Angular, Vue.js React의 장점 1. 생태계가 풍부함 = 구글링하기 좋음 2. 해당 기술에 대한 관심도/ 실제 사용 빈도/ 사용자 수 3. 관련 라이브러리(도구)가 많고, 문제 해결할 방법을 찾기가 쉽고, 같은 고민을 한 사람이 이미 많고, 실무에서 사용할 확률이 높다. 4. 많은 사람들에게 사랑받고 있다면 !== 기술적 근간이 좋다 하지만 리액트는 기술적으로 확실한 장점이 있다 (Virtual DOM, JSX, Flux, Functional Programming...) 5. 새로운 기술을 배우는 시작점으로 좋다 6. 리액트를 풍성하게 해주.. 2022. 7. 26.

[React]구구단 출력하기 number 값을 Props로 받고, number값에 맞는 구구단을 출력하는 컴포넌트 예제이다. ✅ 첫번째 시도 src/Multiply.js function Multiply({n}){ return( {n} * 1 = {n} {n} * 2 = {n * 2} {n} * 3 = {n * 3} {n} * 4 = {n * 4} {n} * 5 = {n * 5} {n} * 6 = {n * 6} {n} * 7 = {n * 7} {n} * 8 = {n * 8} {n} * 9 = {n * 9} ); } export default Multiply; 반복문을 사용하지 않고 나열하였다. src/Button.js function Button({text, onClick}){ return {text} } export default .. 2022. 1. 16.

React #4. Props 📌 Props 리액트에서 데이터는 위에서 아래로, 부모 컴포넌트에서 자식 컴포넌트로 진행되는 단방향의 흐름을 가진다. 이 데이터의 흐름 아래에서 자식에게 전달되는 데이터를 Props 라고 한다. 이전 글의 예제(버튼 클릭시 숫자 변경) 예제를 컴포넌트로 구현해 보겠다. Props의 가장 기본적인 사용법이다. Button 컴포넌트(src/Button.js) function Button(props) { return {props.text}; } export default Button; 버튼 컴포넌트를 생성한다. 이 컴포넌트에서는 props라는 객체를 받고, 그 객체의 onClick, text 요소들을 사용한다. App 컴포넌트(src/App.js) import React, { useState } from 'r.. 2022. 1. 16.

이전 1 2 3 다음

티스토리툴바