코딩 일지

목차 - 문제 발생 배경 - 여러 가지 해결 방법 - 가장 간편한 해결 방법 문제 발생 배경 구글 플레이에서 안드로이드 SDK 버전 업그레이드가 강제되면서 Android 13(티라미슈) 으로 어플 버전을 올려 업데이트 하게 되었다. 초반에는 문제 없는 듯 보였으나, 서서히 밀려오는 CS 문의... " 사진 권한을 동의하라는데 어플 설정에 사진 권한이 없어요. " 뒤늦게 확인해보니 Android 13에서 파일 및 미디어 접근 권한이었던 항목이 이미지, 동영상, 오디오 권한 3가지로 분할 되었던 것이었다. 즉, Android13에선 이전 버전의 코드가 구동이 안된다....(그런 권한은 이제 존재하지 않으니까.....) 그리고 더불어, 기존엔 어플 다운로드 시 알림 on이 디폴트였는데 Android13이 되면..

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

목차 - recoil을 쓰게 된 이유, 장점 및 단점 -리액트 네이티브 RefreshControl + recoil selector 로 api 재호출하기 recoil을 쓰게 된 이유, 장점 및 단점 기존 프로젝트에서는 놀랍게도 state를 전역으로 관리하지 않았다(놀라움..) 따라서 개발 과정이 매우 번거로웠고, 매 페이지마다 회원 정보를 불러오는 api를 호출해야하는 치명적인 단점이 존재했다. 보다 효율 높은 유지보수를 위해 recoil을 사용하여 전역관리를 하기로 어렵게 결정하였다...! (사용법이 쉽고 요새 많이 쓰는 추세라서..) 무려 70개가 넘는 screen을 다 바꿔야했지만... 미래를 생각해서 진행하기로 했다. recoil selector를 사용했더니 loading 상태를 별도로 관리하지 않..

MPA Multi Page Application의 약자(여러 페이지로 구성된 웹 어플리케이션) 사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html을 받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식이다. SPA Single Page Application의 약자(하나의 페이지로 구성된 웹 어플리케이션) 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이다. 장단점 1) SPA의 장점 UX 전체 페이지를 업데이트를 할 필요가 없기 때문에 빠르다! (웹사이트의 성능과 직결된다.) 전체 페이지를 업로드하면서 발생하는 '깜박' 거림이 없다. 페이지의 일부만 바뀌는 것이기 때문에 applic..

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..