코딩 일지

목차 - axios interceptors 사용 시 장점 - JWT 토큰 요청 헤더에 넣어주는 법 - access, refresh token 만료 시 재발급 받기 - RN Hook에서 사용하는 법 Axios Interceptors를 사용하게 된 배경 및 장점 기존에는 api 요청을 보낼 때마다, 모든 요청에 JWT 토큰을 담은 header를 매번 넣어줬다. 개발 초기 단계일 땐 큰 문제가 없었지만, 유지보수와 업데이트를 하며 기능이 늘어 api 요청이 늘 때마다 중복된 코드가 계속해서 추가되었다. 100개가 넘어가는 api 요청 코드를 당장 뜯어고칠 수는 없었기에 현황을 유지했지만, 기존 코드는 JWT 토큰의 유효기간이 없다는 치명적인 단점이 존재했다...(100년이었으니 사실상 없는 거나 마찬가지) 이..

FormData 객체란? The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. It is primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to multipart/form-data. ..

SSR Server Side Rendering의 약자 이 방식은 서버에서 데이터까지 모두 포함하여 페이지를 구성한 후 브라우저에 전달하는데 클라이언트가 페이지를 이동한다든가, 클릭으로 인한 다른 요청이 생길때마다 이 과정을 반복하기 때문에 화면에서 바뀌지 않아도 되는 부분도 계속해서 다시 렌더링되는 단점이 있다. 이는 곧 서버 부하 등의 문제를 일으킬 수 있다. CSR Client Side Rendering의 약자 말 그대로 SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다. 즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작한다. SSR, CSR 차이 1) 웹페이지를 로딩하는 시간 웹 페이지 로딩의 종류는 두 가지로 나눌 수 있다. 하나는 웹 사이..

개념 useEffect란, 페이지가 맨 처음에 랜더링 될 때, 또는 변수의 값이 변경될 때 실행되는 함수이다. 클릭할 때마다 1씩 증가하는 간단한 버튼을 만들어보자. 예제 코드 App.js import Count from './Commponents/Count.jsx'; const App = () => { return ( useEffect ); } export default App; Count.jsx import React,{useState,useEffect} from 'react' const Count = () =>{ const [count, setCount] = useState(0) useEffect(()=>{ console.log(count) }) useEffect(()=>{ console.log('..

개념 React hook에서는 useState를 이용해서 간편하게 state값을 변경할 수 있다. const [num, setNumber] = useState(0) 위와 같은 형태로 사용한다. 배열 안에 들어가는 값은 첫번째 인자값은 값을 변화시킬 변수명, 두번째 인자값은 그 값을 변화 시키기 위해 사용할 함수명(?)이다. 두번째 인자값은 어느 값을 넣어도 코드 작동에는 문제가 없으나, 관용적으로 set + 첫번째 인자값(맨 앞글자 대문자) 형태로 사용한다. useState() { return ( useState ); } export default App; App.jsx import React,{useState} from 'react' const Hook = ()=>{ const [num, setNumb..

목차 - 훅이란? - 탄생 배경 - 종류 - 장점 훅(Hook)이란? Hook은 리액트 16.8 버전 이후 추가된 기능이며, Hook이 등장하면서 더 이상 상태를 관리하기 위해 Class를 쓸 필요가 없어졌다. 기존에는 Class형 컴포넌트에서만 상태를 관리 할 수 있었고, 함수형 컴포넌트에서는 상태를 관리할 수 없었지만, Hook을 통해 상태 관리를 할 수 있게 되었고, 상태 관리 뿐만 아니라 기존 클래스형 컴포넌트에서만 가능하던 여러 기능을 사용할 수 있게 되었다. Hook이 등장하기 전 리액트에는 여러 문제들이 있었다. 탄생배경 리액트 컴포넌트는 클래스형 컴포넌트(Class component)와 함수형 컴포넌트(Functional component)로 나뉜다. 기존의 개발방식은 일반적으로 함수형 컴..

목차 - 리액트 cli 다운로드 - hooks - 로그인 구현 - 삼항연산자 조건문 true일 때만 or false일때만 리액트 CLI 다운로드 터미널에서 npx create-react-app [디렉토리명] 를 입력한다.(오래 걸림) npx create-react-app [디렉토리명]로 다운로드 시, 기본적인 세팅은 다 되어있다. webpack, babel, react, react-dom 등등... 많은 기능들이 설치된다. 다 받아지면, cd [디렉토리명] npm run start Hooks 함수형 컴포넌트에서, 상태를 만들 수가 없고, 생명주기를 사용할 수 없다는 단점을 개선한 함수 모음이 바로 hooks이다.. 장점 : this 생산성 / 코드 가독성 재활용/ 커스텀 훅 로그인 구현하기 App.jsx..

App.jsx class App extends Component{ state = { value:'hello world!!!!', list:[] } // 생명주기 함수 componentDidMount(){ // 최초실행 후(화면 랜더 후) 실행되는 함수. this.setState({ // 불변성... 데이터가 화면이바뀐다. ...this.state, list:[ {userid:'web7722',content:'안녕하세요2',date:"2022-04-21", updateflag:true}, {userid:'web7722',content:'안녕하세요3',date:"2022-04-21", updateflag:true}, {userid:'web7722',content:'안녕하세요4',date:"2022-04-21..

componentDidMount() 이 함수는 컴포넌트가 처음 화면에 그려지면 실행되는 함수이다. (render()가 실행되고 나서 실행되는 함수라고 생각하면 된다.) componentDidUpdated() 리액트에서 업데이트로 분류한 생명주기 함수이다. 화면이 업데이트되면 실행된다. componentWillUnmount() 리액트에서 컴포넌트가 죽을 때(unmount) 호출되는 함수 Reference: https://blog.naver.com/melon940925/222027028412 리액트:: 생명주기 함수 아마 리액트가 편한 이유는 state와 render()와 같은 리액트가 미리 구현해 놓은 함수나 클래스 등을 사용... blog.naver.com

목차 -웹팩이란? -entry -output -loaders -plugins -mode -웹팩 설치 및 사용법 웹팩이란? 웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다. 모듈 번들러는 다음과 같은 장점이 존재한다. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다. 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽다. 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환시켜 준다(예를 들면 typescript). 물론, 수 많은 자바스크립트 파일이 하나의 파일로 묶인다면 초기 로딩 속도가 커질 수 있으나, 웹팩에서는 ..