본문 바로가기

장원익 기술블로그

📺 Front End71

[React axios] 리액트 axios란? :: HTTP-API 연동을 위한 모듈 (axios vs Fetch API) 우리가 일반적인 자바스크립트에서 API를 연동하기 위해서는 보통 fetch-Api를 사용하곤 했다. 리액트 또한 자바스크립트 built-in 라이브러리중 하나인 fetch-api또한 훌륭한 api 연동 모듈이다. 하지만 fetch-api는 자바스크립트의 built-in 라이브러리라는 특성 덕분인지 많은 사람들은 React에서 axios를 사용하는 것을 선호한다. 리액트에서 fetch api를 사용하면 안되는 것은 아니지만 왜 사람들은 axios를 선호할까? 서로 비교를 하는 코드를 봐보자. axios vs Fetch-api // fetch const url = 'http://localhost/test.htm'; const options = { method: 'POST', headers: { 'Accept.. 2020. 10. 8.

[React Router & styled-components] 실전에서 withRouter를 사용하기(3) :: withRouter의 location props 로 상태 변경하기 해당 시리즈는 총 3부작으로 나누어져 있습니다. 실전에서 withRouter를 사용하기(1) :: Router 구성하기 실전에서 withRouter를 사용하기(2) :: styled-components를 활용하여 스타일링 적용하기 실전에서 withRouter를 사용하기(3) :: withRouter 사용하기 해당 시리즈에는 react의 styled-components에 대한 코드가 나올 것이다. 지금 우리는 withRouter에 대해서 알아보는 과정이므로 styled-components에 대해서 잘 모르는 사람은 그냥 css 적용을 js 안에서 수행하구나~ 정도만 이해하고 넘어가도록 하자. 하지만 개인적인 추천으로 styled-components에 대해서 모르는 사람은 정말 멋지고 쿨한 기능이므로 해당 .. 2020. 10. 7.

[React Router & styled-components] 실전에서 withRouter를 사용하기(2) :: styled-components를 활용하여 스타일링 적용하기 해당 시리즈는 총 3부작으로 나누어져 있습니다. 실전에서 withRouter를 사용하기(1) :: Router 구성하기 실전에서 withRouter를 사용하기(2) :: styled-components를 활용하여 스타일링 적용하기 실전에서 withRouter를 사용하기(3) :: withRouter 사용하기 해당 시리즈에는 react의 styled-components에 대한 코드가 나올 것이다. 지금 우리는 withRouter에 대해서 알아보는 과정이므로 styled-components에 대해서 잘 모르는 사람은 그냥 css 적용을 js 안에서 수행하구나~ 정도만 이해하고 넘어가도록 하자. 하지만 개인적인 추천으로 styled-components에 대해서 모르는 사람은 정말 멋지고 쿨한 기능이므로 해당 .. 2020. 10. 7.

[Styled-Components] styled-reset 패키지로 styled-components reset하기 해당 블로그에 css를 초기화 해야하는 이유에 대해서는 CSS 작업시에 꼭 거쳐야하는 필수 과정 에서 다뤘다. 이제 오늘은 React Styled-Components에서도 CSS-Reset을 하는 방법에 대해서 알아보자. Our Goals 최종적으로 우리는 다음과 같은 화면을 구성할 것이다. 기본적으로 생기는 margin과 padding에 의해 생겨난 여기 빨간 간격들을 없앨 것이다. 그리고 이 작업은 다음과 같은 과정으로 수행된다. styled-components 설치하기 styled-reset 패키지 설치하기 기본적인 컴포넌트 생성하기 GlobalStyles.js 생성하기 App.js에 GlobalStyles import 하기 styled-components 설치하기 사실 이 검색을 통해 블로그로 들.. 2020. 10. 7.

[React Router & styled-components] 실전에서 withRouter를 사용하기(1) :: Router 구성하기 해당 시리즈는 총 3부작으로 나누어져 있습니다. 실전에서 withRouter를 사용하기(1) :: Router 구성하기 실전에서 withRouter를 사용하기(2) :: styled-components를 활용하여 스타일링 적용하기 실전에서 withRouter를 사용하기(3) :: withRouter 사용하기 해당 시리즈에는 react의 styled-components에 대한 코드가 나올 것이다. 지금 우리는 withRouter에 대해서 알아보는 과정이므로 styled-components에 대해서 잘 모르는 사람은 그냥 css 적용을 js 안에서 수행하구나~ 정도만 이해하고 넘어가도록 하자. 하지만 개인적인 추천으로 styled-components에 대해서 모르는 사람은 정말 멋지고 쿨한 기능이므로 해당 .. 2020. 10. 7.

[React Router] react-router-dom의 HashRouter과 BrowserRouter의 차이 (BrowserRouter 를 사용하자!) 오늘 알아볼 것은 react-router-dom의 HashRouter과 BrowserRouter이다. React router에는 많은 라우터가 있지만 오늘은 두 가지 Router에 대해서 비교해볼 것이다. 게다가 오늘은 코드보다는 좀 더 깊은 이론과 관련된 내용을 알아보도록 하자. 리액트 라우팅에 관해서는 리액트가 페이지를 라우팅하는 방법(1) 리액트가 페이지를 라우팅하는 방법(2) 리액트가 페이지를 라우팅하는 방법(3) 에서 설명이 나와있으니 개념이 확실하지 않거나 다시 한 번 보고싶은 사람은 한 번 가서 확인하는 것도 추천한다. Router 우선 두 라우터간의 차이를 알기 전에 가볍게 에 대해서 알아보자. Router은 모든 Router 컴포넌트의 인터페이스이다. Router에는 기본적인 라우팅 관련.. 2020. 10. 6.

이전 1 ··· 3 4 5 6 7 8 9 ··· 12 다음

티스토리툴바