본문 바로가기

FrontEnd56

[React.js] useCallback 예시 useCallback에 대해 질문이 들어와서 예시를 만들어 주면서 답변을 해주었는데, 짧게나마 적은 코드가 아까워서 블로그에 남깁니다. const message = 'hi'; function UseCallBackExample() { const [, renderingBtn] = useState(0); const noMemo = () => console.log('hi'); const yesMemo = useCallback(() => console.log(message), [message]); useEffect(() => { console.log('no memo called'); }, [noMemo]); useEffect(() => { console.log('.. 2023. 2. 4.
[Next.js] Next.js 에서 aos 사용법 (Animation On Scroll) 1. AOS 설치 yarn add aos yarn add @types/aos 또는 npm i aos --save npm i @types/aos --save 2. AOS Init() import AOS from 'aos'; import 'aos/dist/aos.css'; export default function AOSPage() { useEffect(() => { AOS.init() }, []); return ( 넥스트에서도 AOS 된당!!! ); } 저는 AOS에서 하라는대로 했는데 Next.js라 그런지 자꾸 안되어 Github issue를 뒤져서 방법을 찾아냈습니다. 저 같은 경우 import ‘aos/dist/aos.css’를 하지 않아서 css가 안먹은거였습니다. 아.. 2022. 12. 22.
[Next.js] Next.js 특징, 프로젝트 초기 세팅 1. Next.js 시작하기 넥스트는 리액트 프레임웤이다. 라이브러리에 비해 기능도 다양하고 라이브러리 사용하지 않고도 많은 문제들을 해결할 수 있도록 설계해두어서 편리하게 개발이 가능하다. Next.js의 특징 1. SSR Next.js는 SSR을 지원한다. 이를 통해 SPA의 단점이었던 SEO문제가 해결이 되며, 같은 페이지 컴포넌트를 실행할 때 발생하는 무의미한 깜박거림(Flickering) 현상을 방지할 수 있다. 또한 SSR로 미리 생성해 둔 HTML을 그대로 렌더하기에 한층 더 빠르게 화면에 표현해줄 수 있다. 이외에도 Next.js와 Next.js의 개발사인 Vercell에서 제공하는 Next/image, CDN, Edge Computing 등의 라이브러리와 기법들이 존재하는데 이를 통해 강.. 2022. 12. 13.
[React.js] 제로초 슬랙 클론코딩 - 1. 회원가입/로그인 페이지 (SWR) 강의를 통해 배운 점 SWR을 활용해서 data fetching을 효과적으로 관리할 수 있다. 비동기 처리 뿐 아니라 다양한 방식으로 전역상태를 관리할 수 있는데, 이름 자체가 stale-while-revalidate 인것처럼 api 호출을 효율적으로 관리해주는 것이 가장 큰 장점인것 같다. SWR이 좋다는 이야기도 많이 들었고, 캐싱 기능 등이 강력하고 Next.js와 함께 사용하면 엄청 좋다는 이야기를 많이 들었는데, 이번 강의를 통해 사용해볼수 있어서 좋았다. 로그인, 회원가입, 로그아웃 시 유저정보가 있는지에 따라 Redirecting을 해주는 방법을 배웠다. 이전에 프로젝트를 진행할 땐 스토리지에 토큰이 있는지 없는지를 확인해서 리다이렉션을 진행했는데 이번엔 유저 정보를 받으면 로그인이 되어있다.. 2022. 12. 12.
[React.js] 코드 스플리팅 (Loadable) [React.js] 코드 스플리팅 코드스플리팅 (Code Splitting) 코드 스플리팅이란 말 그대로 코드를 잘라주는 것을 의미한다. 리액트의 라우터파일에서 아래와 같이 Login, Signup과 같은 컴포넌트가 있을때 각 컴포넌트가 필요할 때만 import 해주는 것이 코드 스플리팅이다. 아래 코드에선 Loadable이라는 라이브러리를 활용해서 코드 스플리팅을 위한 import문을 만들었다. import React from 'react'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; import loadable from '@loadable/component'; const LogIn = loadable(() => import('@.. 2022. 12. 12.
[React.js] 제로초 웹게임 - 6. 로또 (useCallback, useMemo) 강의를 통해 배운 점 1달만에 강의 수강을 다시 시작했다. 그러다보니 클래스 컴포넌트 만드는게 살짝 잊혀져서 “어떻게하더라?” 라며 멍때리게 되더라. 노션에 메모 해둔 시리즈를 보면서 다시 기억을 되살릴 수 있었는데, 정말 노션과 블로깅은 개발자에게 필수인것 같다. 한번 습득했던 기술은 언제든 기억에서 사라질 수 있고, 그럴 때 기록했던 내용을 보면서 복기하면 다시 기억을 되살릴 수 있다는걸 깨달았다. 노션 기록과 블로깅이 꽤나 귀찮은 일이지만 최대한 열심히 해야함을 제대로 느꼈다. 클래스 컴포넌트 (강의코드) import React, { Component } from 'react'; import Ball from './Ball'; import { getWinNumbers }.. 2022. 12. 1.
[React.js] useContext 찍먹, useFetch 구현, loading, error 상태 관리 useContext를 찍먹해봤습니다. 원티드 프리온보딩 과제 중 useContext API를 API와 연동하라는 요구사항이 있어 급하게 학습 => 사용해보았습니다. 시간이 많이 부족해 제대로 contextAPI를 사용하지 못해 많이 아쉽습니다. 그래도 찍먹에 의미를 두고 PR 내용을 블로그에 남깁니다. 이번 과제를 통해 useFetch로 로직 분리 하는 방법을 확실히 배웠습니다. 커스텀 훅을 만드는데 두려움 없는 수준이 된 것 같습니다. 앞으로 컴포넌트에서 로직을 뺄 수 있다면 꼭!!! 커스텀훅으로 빼야겠습니다. 커스텀 훅을 통해 component의 view단이 깔끔해지니 너무 마음에 들어서 앞으로 커스텀 훅을 애용할 것 같습니다. 또한, [isLoading, errors] 상태를 만들어 loading중.. 2022. 10. 31.
[React.js] axios instance.interceptor를 이용한 미들처리 interceptor interceptor 기능을 사용하면 response, request 등 axios을 활용한 통신 중간에 내가 지정한 처리를 하도록 만들수 있다. 전문용어로 미들웨어라고 부르면 이해가 빠르겠다. 이 interceptor 기능을 사용하면 아래 코드 중 가장 아래와 같이 req.headers.Authorization을 localStorage.getItem('token')을 하며 리퀘스트를 보내도록 만들 수 있다. 이렇게 하면 코드 상에서 중복되는 토큰 부분이 사라진다. 이 이외에도 인터셉터를 활용한 기능들이 많이 있다. 예를들면 이전 axios 포스팅에서 말했던 fetch문에서의 res와 axios의 res가 달라서 헷갈릴 때를 대비해 res를 res.data로 만들어서 .. 2022. 10. 29.
[React.js] 리팩토링 하며 생긴 질문 - axios 의 catch() 와 try-catch의 catch가 같은건가? 리팩토링 하면서 생긴 질문들 axios…..catch(error ⇒ console.error(error)) 에러처리를 할 때 axios의 프로미스객체가 rejected 될 때를 catch 하는 형태로 해주는걸 봤다. 이걸로 에러 처리가 전부 된다면 try-catch문은 필요가 없는 것일까? 찾아봐야겠다. https://stackabuse.com/handling-errors-with-axios/ 위 링크의 글을 보면 아래 두 코드에서 catch의 역할이 완전 똑같다는 걸 알 수 있다. 심지어 res, error 마저 같은 값을 나타낸다고 한다. export async function getTodoList(token: string | null) { try { const res = await http.get(.. 2022. 10. 28.
[React.js] 제로초 웹게임 - 5. 가위바위보 (life Cycle, useEffect) 강의를 통해 배운 점 useEffect에 대해 알고 있었고, 사용법 또한 알고 있었습니다. 프로젝트에서 문제없이 사용했고, 항상 의도한 대로 사용되어 왔습니다. 하지만 강의에서 오류가 생기는걸 보았고, 나는 문제가 없는데 강의에선 왜 문제가 생겼지? 라는 의문이 생겼습니다. 공식문서를 뒤져보니 강의에서의 설명이 맞았고 (rendering될 때마다 useEffect 콜백이 실행이 되고 clean-up또한 실행이 된다.는 내용) 이게 지금도 이해는 안가지만 어쨋든 공식문서에 나와 있는 것처럼 이럼에도 불구하고 문제가 안생긴것은 디펜던시 배열에 빌드 시 자동으로 추가 될 수 있기 때문이라는 것도 배웠습니다. 강의를 보고 나서 오히려 더 이해가 안가는 상황입니다. 지금 진짜 ~~ 이해 안되는 상황인데 일단은 넘.. 2022. 10. 25.

티스토리툴바