본문 바로가기

🌌 | WEB DEV115

[React] 7. 이미지 삽입하기(css, html, public폴더에서 가져오기) 이전 글 ▼ 더보기 0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅 1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object) 2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용) 3. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 3. 컴포넌트 (Component) 4. 2023.05.28 - [🌌 | WEB DEV/React] - .. 2023. 7. 3.

[React] CORS 에러 해결하기 (http-proxy-middleware) 외주 작업 도중 api에 요청을 할 때 CORS 에러를 마주하였다! 대략 위와 같은 에러 메세지를 콘솔창에서 볼 수 있다. 1. CORS (Cross Origin Resource Sharing) 1) CORS란? https://developer.mozilla.org/ko/docs/Web/HTTP/CORS/Errors CORS(교차 출처 리소스 공유)는 다른 출처 간의 자원 공유를 가능하게 하고 http 헤더를 이용하여 실행 중인 웹 애플리케이션이 다른 출처(Origin)의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 2) SOP (Same Origin Policy) https://developer.mozilla.org/ko/docs/Web/Security/Same-origin.. 2023. 6. 30.

[React] 6. props 이전 글 ▼ 더보기 0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅 1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object) 2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용) 3. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 3. 컴포넌트 (Component) 4. 2023.05.28 - [🌌 | WEB DEV/React] - .. 2023. 5. 29.

[React] 5. 반복되는 부분 축약하기 (map) 이전 글 ▼ 더보기 0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅 1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object) 2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용) 3. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 3. 컴포넌트 (Component) 4. 2023.05.28 - [🌌 | WEB DEV/React] - .. 2023. 5. 28.

[React] 4. 동적인 UI 제작하기 이전 글 ▼ 더보기 0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅 1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object) 2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용) 3. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 3. 컴포넌트 (Component) 전 포스팅에서 다루었던 컴포넌트의 예시로 모달(Modal)창을 제작하.. 2023. 5. 28.

[React] 3. 컴포넌트 (Component) 이전 글 ▼ 더보기 0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅 1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object) 2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용) 1. Component 문법 html을 작성하다보면 반복적으로 사용하거나 블록 단위로 제작하고 싶은 부분이 있다. React에서는 긴 HTML 블록을 하나의 단어로 치환하도록 하는 문법을.. 2023. 5. 28.

[React] 2-1. array state 정렬하기 ( .sort()활용) 이전 글 ▼ 더보기 0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅 1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object) array state를 정렬하고 싶을 때는 어떻게 해야할까? 가장 보편적인 방법인 sort()메서드를 이용해보자. 1. sort() 활용하여 array state 정렬하기 let [music, setMusic] = useState( [{"type": "Rock", "title": "Summer", "singer": "The Volun.. 2023. 5. 27.

[React] 2. state (변수, array, object) 이전 글 ▼ 더보기 0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅 1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX 1. state React의 JSX를 이용하여 템플릿을 작성할 때 중요한 자료들을 잠시 저장해야할 때가 있다. 자료 저장 방법_1) 변수를 이용한다. let, const 등을 활용한다. functoin App(){ let name = "Kassid" return ( ... ); } 자료 저장 방법_2) state를 이용한다. 변수 외에도 state를 활용하여 자료를 저장할 수 있다. 먼저 useState를 import한다. import { useState } fro.. 2023. 5. 26.

[React] 1. JSX 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅 본격적으로 React를 이용해 웹페이지를 만들어보자! 1. JSX 웹사이트의 뼈대를 구축할 때 html과 css를 이용하여 구성한다. React라고 해서 다를 것은 없다! 똑같이 html과 css를 이용한다. 하지만 다른 점은 저번 포스트에서 다뤘던 것 처럼 js파일에 코드를 작성한다. 이것이 바로 JSX이다. JSX(JavaScript XML)는 JS에 XML을 추가한 문법이다. JSX에 XML 코드를 입력하면 브라우저에서 실행하기 전 바벨을 통해 일반 js형태의 코드로 변환된다. App.js import './App.css'; function App() { return ( ..... 2023. 5. 7.

이전 1 2 3 4 5 6 7 8 ··· 13 다음

티스토리툴바