도리쓰에러쓰

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] React에서의 Ajax 요청 방법 / axios 설치 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Lifecycle Hook(예전 문법) vs useEffect(요즘 문법) 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] SASS 개념, 설치 및 기본 문법 저번 dori-coding.tistory.com 1. 서버에 데이터 보내기 (POST 요청) axios.post('서버URL', 서버에 보낼 데이터); + 요청시의 header 설정도 가능 axios.post('https://codingapple1.github.io/shop/data2.json', {id : 'test', pw : 1234}) ...

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Lifecycle Hook(예전 문법) vs useEffect(요즘 문법) 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] SASS 개념, 설치 및 기본 문법 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] styled-components를 이용한 class없는 CSS 스타일링 저 dori-coding.tistory.com 1. Ajax란? 서버에 새로고침 없이 요청을 할 수 있게 도와줍니다. 서버는 누군가 요청을 하면 데이터를 가져다주는 프로그램입니다. 요청은 서버에 요청하는 방법을 뜻하는데, 크게 사용하는 요청 방법은 2가지입니다. - GET : 데이터, 웹페이지 같은 것을 읽고 싶을 때 서버에 보내..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] SASS 개념, 설치 및 기본 문법 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] styled-components를 이용한 class없는 CSS 스타일링 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] React Router 3 :: URL 파라미터로.. dori-coding.tistory.com 1. Lifecycle Hook Component는 '등장 - 업데이트(재렌더링) - 퇴장' 주기가 있습니다. Lifecycle Hook은 Component의 주기 중간에 명령을 줄 수 있습니다. 가장 유용한 Hook은 componentDidMount()와 componentWillUnmount() 입니다. c..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] styled-components를 이용한 class없는 CSS 스타일링 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] React Router 3 :: URL 파라미터로 상세페이지 100개 만들기 저번 게시물에 이어서 작성해보겠습니다. (코드 참고) [React] React Router 2 :: Link, H.. dori-coding.tistory.com 1. SASS 란? CSS 전처리기(Preprocesser)라고도 합니다. CSS를 좀 더 프로그래밍 언어스럽게 작성 가능하여, CSS에서 변수, 연산자, 함수, extend, import 등을 사용할 수 있습니다. 단, 브라우저는 SASS 문법을 모르기 때문에 SASS..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] React Router 3 :: URL 파라미터로 상세페이지 100개 만들기 저번 게시물에 이어서 작성해보겠습니다. (코드 참고) [React] React Router 2 :: Link, History, Switch 기능 저번 게시물에 이어서 작성해보겠습니다. (저번 게시물 코드 참고) [React] React Router 1 :: 세팅.. dori-coding.tistory.com 1. 'style-components' 라이브러리를 사용하는 이유 Component를 만들다보면 CSS가 많아지고, 실수로 class명을 중복으로 선언하여 CSS도 겹칠 수가 있는데 이를 방지하기 위해 'style-components' 라이브러리는 class ..

React에서 public 안에 있는 이미지폴더를 찾아가려는데 경로를 찾을 수 없다는 에러가 나왔다. 경로에 맞게 작성한줄 알았는데 알고보니 public폴더를 사용하려면 공식적인 방법이 있었다. 1. HTML : %PUBLIC_URL% 2. JavaScript : process.env.PUBLIC_URL 나는 JavaScript 코드에 설정했는데 아래 코드처럼 작성하였더니 이미지가 출력되었다. 이외에도 찾고 싶은게 있다면 아래의 공식 Document를 확인해보는 것이 좋을 것 같다. Using the Public Folder | Create React App Note: this feature is available with react-scripts@0.5.0 and higher. create-react-..

저번 게시물에 이어서 작성해보겠습니다. (코드 참고) [React] React Router 2 :: Link, History, Switch 기능 저번 게시물에 이어서 작성해보겠습니다. (저번 게시물 코드 참고) [React] React Router 1 :: 세팅과 기본 라우팅 저번 게시물에 이어서 페이지를 나누는 React Router를 작성해보겠습니다. (저번 게시물 dori-coding.tistory.com 1. 컴포넌트에 데이터바인딩 하기 현재 Detail.js에 컴포넌트가 존재하는데 '상품명', '상품 설명' 등이 임시로 출력되어 있습니다. 이 부분에 데이터바인딩을 해줄 예정입니다. function Detail() { let history = useHistory(); return( 상품명 상품 설..

저번 게시물에 이어서 작성해보겠습니다. (저번 게시물 코드 참고) [React] React Router 1 :: 세팅과 기본 라우팅 저번 게시물에 이어서 페이지를 나누는 React Router를 작성해보겠습니다. (저번 게시물 코드 참고) 2022.01.10 - [React] - [React] 반복문(map())을 이용하여 컴포넌트(Component) 반복 출력하기 [React] 반복문.. dori-coding.tistory.com 1. '상세페이지' 화면 Component화하기 (다른 파일에 있는 Component를 App.js로 import하여 사용하기) * src/Detail.js 파일 생성 (컴포넌트 파일은 대문자로 시작하는게 관습) * Detail.js 파일 안에 Detail() 컴포넌트 만들어..