FrontEnd/React

이전 블로그에서 toast 기능을 Context API 를 통해 구현하였다. (https://doyourbestcode.tistory.com/140) 물론 당장은 toast 기능 하나만 구현하였기 때문에 불필요한 rendering만 좀 신경 써주면 Context API를 사용해도 큰 문제가 없다. 하지만 여러 기능을 Context API를 통해 구현하고자 하면 문제가 발생할 수 있다. 불필요한 rendering을 처리하는 cost 이전 블로그를 보면 ... export const ToastValueContext = createContext(undefined); export const ToastActionContext = ..

프론트엔드 작업을 하다보면 꽤 많이 발생되는 비효율적인 구조 중 하나가 과도한 props drilling 이라고 생각한다. props drilling 말 그대로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 값을 전달해 주는 것을 말하는데, 너무 깊은 단계를 거쳐야 한다면 그 사이에 있는 모든 컴포넌트에서 작업을 해줘야하기 때문에 매우 불편하다. 이를 방지해주기 위해 Context라는 개념을 사용한다. Context란? Context는 리액트 컴포넌트간에 어떠한 값을 공유할수 있게 해주는 기능이다. 주로 Context는 전역적으로 필요한 값을 다룰 때 사용하지만, 단순히 "리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트간에 값을 전달하는 방법이다" 라고 접근을 하시는 것이 좋다고 참고한 블로..

팀 프로젝트, 회사 등등...개발적인 약속 즉, 컨벤션을 지키는 것은 협업에서 중요하다. 클린 코드 작성도 컨벤션의 일종이라고 볼 수 있고 이를 바탕으로 코드를 짜는 것은 매우 중요한 일이다.'개인 프로젝트에서는 어떤식으로 코드를 짜도 내가 짠 코드이기 때문에 언제든지 해당 코드를 알아볼 수 있다. 하지만 코드를 짜는 스타일은 개개인마다 다를 수 밖에 없고, 여러 사람들의 코드가 들어갈 시 클린 코드를 바탕으로 코드를 짜지 않으면 다른 사람의 코드가 들어간 부분을 건드리게될 상황이 오면 매우 당혹스럽고 효율도 떨어질 것이다. 어떤 식으로 클린 코드 짜는 법을 연습할 수 있을까 고민하던 와중, 토스 개발 블로그에서 매우 좋은 자료를 발견하였다. 참고: https://toss.im/slash-21/sessi..

웹 서비스에서 데이터를 fetch 하는 데이는 어느정도의 시간이 걸릴 수 밖에 없고, 사용자들은 이를 기다린 후에 UI에서 데이터를 확인할 수 있다. 이 시간동안 화면에서 아무것도 볼 수 없다면 사용자들은 답답함을 느끼게 될 것이다. 해당 시간동안 스켈레톤 컴포넌트를 보여줌으로써 데이터를 불러오고 있다는 것을 UI 상으로 보여줄 수 있다. 그럼 데이터를 불러오고 있는 중이라는 것을 상태로 나타내야 한다. fetch 메소드를 사용하고 있다면 useState로 로딩 상태를 관리해야 하고, tanstack query같은 라이브러리를 사용한다면, 이가 제공해주는 isLoading 상태로 관리한다. 이도 문제는 없지만 삼항 연산자나 if 문으로 로딩상태를 관리해야 하므로 코드가 좀 지저분해 질 수 있다. 리액트는..

프로젝트에서 공간 상세화면에 들어가면 해당 공간의 위치를 지도로 보여주는 기능이 있으면 좋겠다는 피드백이 들어왔다. 추가로 큐레이션에 담겨 있는 모든 공간의 위치도 띄워주어야했다. 지도를 보기 위해 서비스 밖으로 이동하는 것이 아닌 서비스 자체에서 지도를 띄워야 했고, 이를 위해 나는 네이버에서 제공해주는 map api를 사용해 보기로했다. https://www.ncloud.com/product/applicationService/maps 위 링크에 접속한 뒤 신청하기를 누른다. 회원가입을 하면 네이버 클라우드 콘솔로 이동된다. 네이버가 제공하는 map 기능이다. 나는 Web Dynamic Map와 Geocoding을 활용하였다. 네이버 지도 api는 일정 사용 횟수 이전까지는 무료이지만 그 이후부터는 과..

프론트엔드에서 애니메이션 주입은 필수적이다. framer-motion 등 많은 애니메이션 라이브러리가 있지만 이번에는 DOM을 조작하여 애니메이션을 부여할 수 있는 react-transition-group 라이브러리를 활용하였다. 크게 4가지 컴포넌트가 있다. Transition CSSTransition SwitchTransition TransitionGroup 주로 사용할 컴포넌트는 CSSTransition과 TransitionGroup 이다. CSSTransition CSS로 변화를 주어 애니메이션을 실행시키고 싶다면 `CSSTransition 컴포넌트를 활용한다. 이 컴포넌트는 Transition 컴포넌트의 모든 요소를 상속받는다. 나는 CSSTransition 컴포넌트를 활용하여 Toast 기능을..