본문 바로가기

나의 React 개발기록

[React-Router] Suspense 기능을 이용하여 렌더링 전 공통 컴포넌트 노출시켜주기! (리액트 17버전도 잘됩니다!) / Switch 컴포넌트는 왜 써야하지 ?
나의 React 개발기록/React 2022. 12. 16. [React-Router] Suspense 기능을 이용하여 렌더링 전 공통 컴포넌트 노출시켜주기! (리액트 17버전도 잘됩니다!) / Switch 컴포넌트는 왜 써야하지 ? -Suspense 우선 18버전 독스링크 먼저..!! https://reactjs.org/docs/react-api.html#reactsuspense React Top-Level API – React A JavaScript library for building user interfaces reactjs.org 리액트가 18버전이 업그레이드 되면서 이전의 17버전과 차이점이 조금씩 존재하지만..! 아직은 17버전을 쓰고있는 우리에게는 제공되는 api들의 17버전이 필요하다 ..!! 17버전 독스링크..! deprecated 나올때마다 왠지 잘못하고 있는것 같은 느낌이지만~ 아주 잘 작동된다 ! https://17.reactjs.org/docs/concurrent-mode-suspense.html 기본적으로..
[Axios & Redux-Saga] axios 인스턴스 생성하기(interceptor), 리덕스 사가 데이터 통신 실무 활용법을 한 흐름에 살펴봐보자! ( axios , reducer, saga, slice를 활용한 데이터 통신 로직과 효율적인 폴더구조)
나의 React 개발기록/React 2022. 12. 16. [Axios & Redux-Saga] axios 인스턴스 생성하기(interceptor), 리덕스 사가 데이터 통신 실무 활용법을 한 흐름에 살펴봐보자! ( axios , reducer, saga, slice를 활용한 데이터 통신 로직과 효율적인 폴더구조) Axios의 interceptor를 왜 써야 하는가 ? -> api 호출할 때마다 비효율적으로 axios 인스턴스를 생성하고, axios 마다 동일한 content-type, token와 같은 헤더값을 처리하고 TIMEOUT 시간, base url등에 대한 중복 처리 들이 있기 때문에.. -> 유지보수에 최악 ! (아래 예시 코드들은 로그인 성공시 유저의 데이터를 받아오는 api통신을 뜯어보았다!) axios를 생성하고, 중복 로직과 데이터 요청&응답에 대한 전/후처리 그리고 오류처리까지 지정하여 인스턴스를 생성해주자 ! 1-1. api.ts(AxiosInstanceCreator를 사용하여 interceptor내부를 설정 ) const instance =axios.create({ baseUrl: 데이터를..
[Redux-Saga] 리덕스에 사가를 함께 써보자! 리덕스 사가 콘솔에 기본 코드 찍어보며 확인하기 !
나의 React 개발기록/React 2022. 11. 29. [Redux-Saga] 리덕스에 사가를 함께 써보자! 리덕스 사가 콘솔에 기본 코드 찍어보며 확인하기 ! 이 전 글에서는 redux를 써야하는 이유와, 기본적인 구독의 개념, 리듀서 생성하여 state 를 변경해주는 법 , 호출함수를 통해 화면에 그려주는 법까지 알아보았다! 이번 글에서는 reduxjs에서 다루기에 까다로운 비동기 작업들을 처리해주는 redux-saga와 함께 써보도록 하자! - redux-saga를 함께 쓰면, 액션을 모니터링 하고있다가 발생했을때 특정 작업을 하는 방식으로 사용할 수 있다. - redux-saga의 장점 1. 비동기 작업에서 기존 요청을 취소 처리 할 수 있다. 2. 특정 액션에 발생했을때, 다른 액션을 디스패치 하거나, 자바스크립트 코드를 실행 할 수 있다. 3. 웹소켓 라이브러리 사용시 Channel이라는 기능을 사용가능하다. 4. API요청이 실패했을 때 재요청하는 ..
[React] Redux를 알아보자 - 리액트 없는 리덕스, 그 잡채만 써보자고! 리덕스의 작동원리, 개념, 리덕스 사용이유
나의 React 개발기록/React 2022. 11. 21. [React] Redux를 알아보자 - 리액트 없는 리덕스, 그 잡채만 써보자고! 리덕스의 작동원리, 개념, 리덕스 사용이유 **생활코딩 영상을 보며 제가 이해하는대로 정리해보았습니돠 대표적인 react의 상태관리 라이브러리인 Redux ....! 내가 2주안에 추가 기능 개발 진행해야하는 ..사내 프로젝트가..Redux와 Saga..가 사용되어있어서 .. 🥲 불가피하지만 아주 빠르게 공부를 해서 잡티없이 개발을 진행해보자 ! Redux를 사용해야하는 경우 - 컴포넌트들의 조합으로 이루어진 프로젝트에서 props로 다양한 상태를 관리하기 복잡할 때 - 컴포넌트의 트리가 복잡하거나, 여러 다른 방식으로 업데이트가 되어야 할 때 위의 예시를 들어서 순서의 흐름대로 봐보자 ! 1. submit 버튼을 눌렀을때 예시로 적어준 "create"라는 타입으로 dispatch에 전달한다. 2. 그 때, dispatch는 두가지 일을 할 수 ..
Next/Image 태그의 장점은 !?
나의 React 개발기록/Next.js 2022. 10. 31. Next/Image 태그의 장점은 !? 넥스트를 쓰고있는나.. next/image를 생각없이 쓰곤 했지만, 직접 구현해보고 배포과정에서 느끼는게 많았기 때문에 정확히 알고 넘어가보자 ! 우선 Docs를 가장먼저 파악해보자 ! https://nextjs.org/docs/api-reference/next/image next/image | Next.js Enable Image Optimization with the built-in Image component. nextjs.org 독스에는 우선 자동으로 Lazy loading을 통해 (로드하는 시점을 필요로 할때까지 지연시켜주는 기술) 이미지 최적화를 지원해준다고 나와있다. 그리고 필수 Props에 대해 나와있다. 1. src - 정적으로 불러와진 파일 혹은 next.config.js에 추가해온 외..
npx react-native init 쓰면 불편하다! 왜 ? - ignite로 React Native 프로젝트 생성하기 !
나의 React 개발기록/React Native 2022. 8. 30. npx react-native init 쓰면 불편하다! 왜 ? - ignite로 React Native 프로젝트 생성하기 ! react-native cli 명령어로 항상 프로젝트를 만들었지만, 자주 RN 프로젝트를 만들고 활용할것들이 많다면 기본 세팅들이 되어있는 방식으로 프로젝트를 만들자 ! npx react-native init 을 하게 되면 ! 기본 react- native 뼈대가 존재하는 RN 앱을 만들수 있다. -> 기본 어플이 생긴다는 뜻 ! ios와 안드로이드 폴더에 접근 가능한 단순한 자바스크립트! 하지만 나는 npx create-react-native-app을 사용한다 ! -> expo 기반의 뼈대로 만들어지며, 다양한 네이티브 api를 사용할 수 있다 ! native init 보다 빌드가 빠르고 초반에 앱작업하기에는 제약이 없기 때문에 나중에 제한되는 부..
프론트 채용시 우대받는 Next.js가 뭘까!
나의 React 개발기록/Next.js 2022. 8. 29. 프론트 채용시 우대받는 Next.js가 뭘까! 회사에서 Next.js를 통해 프로젝트를 계속 수행하고, 개발하고 있지만 ... ! 막상 물어보면 당연한 툴이 되어버린 넥스트...!!! 깊숙히 들어가진 못하더라도 자바스크립트 작동원리에 대하여 이참에 제대로 공부해보기위해 .. Next.js에 대해 알아보도록 하자 ! * https://nextjs.org/learn/basics/create-nextjs-app Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org * nex..
ReactNative에서 Platform 속성을 이용하여 작동중인 운영체제 파악하기! (ios, android, RN web 별로 다른 조건 적용시키기) & app.json이란?!
나의 React 개발기록/React Native 2022. 8. 26. ReactNative에서 Platform 속성을 이용하여 작동중인 운영체제 파악하기! (ios, android, RN web 별로 다른 조건 적용시키기) & app.json이란?! AsyncStorage에 저장했던 객체들을 삭제하는 함수가 있었는데, Alert를 사용해서 다시 확인하는 로직을 짰었다. 하지만 문제가 생겼던것은 react Native Web에서는 alert 기능이 없기 때문에 해당 함수가 작동되지 않아서 삭제 기능을 구현할수 없었다..! 그래서 로직을 나눠주어야 했다. 앱이 web에서 작동 될때 / 아닐때 (ios, android...) -> 해당 값은 Platform.OS 로 손쉽게 접근할수 있다! - ReactNative app.json파일이란? ReactNative 프로젝트를 expo로 만들게 되면, app.json 파일이 생긴다. app.json 파일은 어플리케이션을 내가 원하는대로 만들기 위해 편집해야하는 파일! 이다 -> https://docs.expo.d..
ReactNative EXPO로 만든 앱 공동작업&시연을 위한 배포하는법
나의 React 개발기록/React Native 2022. 8. 25. ReactNative EXPO로 만든 앱 공동작업&시연을 위한 배포하는법 7월부터 리액트 네이티브 세션을 진행하게 되면서, 세션 자체는 간단한 3일짜리 기본적인 리액트 네이티브 였지만 리액네 공부를 시작하게 되었다! 아직은 데이터 통신이 되지않는 간단한 프로젝트밖에 만들어본적 없지만, 제대로 프로젝트를 공부해보기에 앞서 배포를 공부해보자! 1. 개발자 도구의 Publish or republish project를 봐보자! -> 나의 자바스크립트 코드가 expo 웹사이트로 보내지게 된다. 사람과 코드를 공유할수 있도록 보내진다. 2. 배포하고자 하는 어플리케이션의 정보를 입력한다. -> 이름과 url 그리고 github정보를 쓴다! 그러면 버튼을 누르기 전에 이러한 문구가 나온다 Once you publish your project, you will be able to view ..

티스토리툴바