티스토리

Pocoding

검색하기

블로그 홈

Pocoding

pocoding.tistory.com/m

소소하지만 So-So 하지 않은 기록

구독자: 2

방명록 방문하기

주요 글 목록

ResizeObserver 활용하기 목표 및 문제정의- do-with 프로젝트에서 shadcn UI 라이브러리를 사용해서 "가입 대기 스페이스"를 보여주기 위해 popover 컴포넌트를 활용했다.- 아래는 반응형 디자인에서 각 화면 크기에서 "file" 이미지를 클릭했을 때 "가입 대기 스페이스" UI가 나타나는 모습이다. 모든 화면 크기에서 "참여중인 스페이스"의 너비와 동일한 너비가 적용되도록 디자인했다.- 하지만 문제는 Popove 컴포넌트가 React portal을 사용해 렌더링되면서 발생했다. Portal은 DOM 트리의 계층을 무시하고 컴포넌트를 body의 직속 자식 요소로 렌더링하기 때문에, Popover가 "참여중인 스페이스"와 같은 DOM 트리 안에 위치하지 않게 되었다.- 이로 인해 반응형 디자인에서 "참여중인 스페이스.. 공감수 0 댓글수 0 2024. 11. 19.
Zustand를 활용한 모달 상태 관리 목표- 모달은 프로젝트에서 다양한 화면과 상황에서 자주 사용되는 UI 요소인데, 프로젝트 규모가 커질수록 여러 곳에서 공통적으로 모달을 사용하게 되고, 각각의 모달 상태를 관리하는 코드는 점점 복잡해질 수 있다.- 일반적으로 모든 모달마다 useState를 선언하고 상태를 관리해야 하기 때문에, 상태 관리 로직이 중복되고 반복되는 문제가 발생한다.import { useState } from 'react';import Modal from './Modal'; // 공통 모달 컴포넌트const Example = () => { const [isFirstModalOpen, setIsFirstModalOpen] = useState(false); const [isSecondModalOpen, setIsSecond.. 공감수 0 댓글수 0 2024. 11. 2.
next.js에서 Open Graph 적용하기 Open Graph란?- Open Graph (OG)는 Facebook에서 만든 메타데이터 프로토콜로, 웹페이지가 소셜 미디어 플랫폼에서 공유될 때 어떤 정보를 표시할지 제어할 수 있게 해준다.- 쉽게 말해서 위 이미지와 같이 소셜 미디어 플랫폼에 공유할 때 표시될 제목, 설명, 이미지 등을 오픈그래프를 통해 정의할 수 있다.문제정의- you-together는 친구와 youtube 영상을 함께 볼 수 있는 서비스로 별도 로그인 절차 없이 언제든지 간편하게 사용 가능하도록 만들었다.- 따라서, 링크를 통해 방에 접근하는 경우가 많을 수 밖에 없는데, 기존 SEO(Search Engine Optimizaion, 검색 엔진 최적화)를 위해 metadata를 추가 및 객관적 지표인 크롬 lighthouse에서 .. 공감수 2 댓글수 1 2024. 9. 23.
Axios interceptors를 활용하여 액세스 & 리프레시 토큰 자동 갱신 구현하기 - do-with 프로젝트에서 로그인 및 사용자 인증을 위해 정리한 내용은 다음과 같다. 1. 사용자는 카카오와 구글 OAuth를 통해 로그인을 할 수 있고, 서버에서 발급한 access token과 refresh token을 받는다.2. API 요청 header에는 access token을 담아보내고 서버에서는 API 요청 header에 있는 access token을 해독하여 사용자를 인증하고 응답을 보내준다.3. access token은 보안을 위해서 유효기간이 존재하고, access token이 만료되는 경우에는 refresh token을 사용하여 token을 갱신할 수 있다.4. refresh token 또한 유효기간이 지난 경우에는 사용자는 다시 로그인을 한다. - 이전 프로젝트에서는 acces.. 공감수 2 댓글수 0 2024. 9. 7.
twin.macro 도입 및 Tailwind CSS + styled-components - dowith 프로젝트를 시작하면서 프론트엔드 동료와 스타일링을 위한 도구로 Tailwind CSS를 선택했다.- Tailwind CSS를 선택하게 된 가장 큰 이유는 "편리함"이었다.- Tailwind CSS는 다양한 스타일 속성을 작은 유틸리티 클래스 형태로 미리 정의해 제공하기 때문에 유틸리티 클래스들을 조합하여 원하는 디자인을 즉시 적용할 수 있기 때문에 편리하다.- 하지만, Tailwind CSS를 사용하면서도 불편한 점이 있었고 회의 끝에 새로운 방식을 도입하였고 그 내용에 대해 설명해보겠다.HTML 태그만 보고 이 태그가 어떤 역할을 하는 요소인지 직관적으로 파악하기 어렵다는 점입니문제 정의- Tailwind CSS를 사용하면서 우리 팀이 느낀 불편한 점은 바로 "가독성"이었다.- Tai.. 공감수 0 댓글수 0 2024. 9. 7.
서버에서 데이터 프리패칭을 위한 InitialData vs Hydration API - 앞서 Next.js 프로젝트에서 초기 로딩 성능 최적화를 위한 서버 데이터 프리패칭을 적용한 것을 정리한 글(Hydration API를 사용한 데이터 프리패칭을 통한 초기 로딩 속도 개선)에서 언급했던 initialData 방식과 Hydration API 방식에 대해 정리해보고자 한다. - 서버 데이터 프리패칭이란 서버 데이터 프리패칭은 클라이언트가 페이지를 요청했을 때, 서버에서 해당 페이지를 렌더링하기 전에 데이터를 미리 패칭하여, 클라이언트에게 데이터를 함께 전달하는 방식을 말한다.- 주로 서버사이드 렌더링(SSR)에서 사용되며, 클라이언트가 페이지를 로드할 때 이미 서버에서 필요한 데이터를 미리 준비하여 제공하기 때문에 초기 로딩 속도를 크게 개선할 수 있다. - React Query 공식문서.. 공감수 0 댓글수 0 2024. 9. 3.
Hydration API를 사용한 데이터 프리패칭을 통한 초기 로딩 속도 개선 문제 정의- YouTogether는 누구나 손쉽게 친구와 Youtube 영상을 함께 보는 서비스로, 별도의 로그인 없이 사용이 가능하다.- 따라서, YouTogether 프로젝트의 메인 페이지는 전체 방 목록을 확인할 수 있는 사용자 진입점 역할을 한다.- 하지만 기존 메인 페이지에서 방 목록을 불러오는 API 호출과 응답에 대한 로딩이 길어 아래 영상과 같이 로딩 스피너가 꽤 오랜시간 표시되고 이를 수정하고 싶었다.새로고침을 눌렀을 때 모습해결 방안- 나는 초기 로딩 속도 개선을 위해 서버에서 데이터 프리패칭(prefetching) 하기로 했다. - 내가 고려했던 사항은 다음과 같다.1. 방 목록은 사용자에게 무한 스크롤을 이용해 콘텐츠를 보여주고 있기 때문에, 서버에서 방 목록의 첫 페이지의 데이터를.. 공감수 0 댓글수 0 2024. 8. 29.
You-Together 회고 팀프로젝트 You-Together 📼이번에 진행한 프로젝트는 사용자들이 함께 Youtube 영상을 보며 실시간으로 채팅을 하는 서비스를 제공한다. 예상보다 난이도가 있었고 중간중간 어려움이 많았던 프로젝트를 마치고 회고를 해보려고 한다.프로젝트 시작이번 프로젝트는 코드스쿼드 프론트엔드 동료의 권유로 시작했다. 그 친구는 프론트엔드의 개발 환경 설정을 완료한 상태에서 개인사정으로 프로젝트를 하차하게 되었고 나에게 프로젝트 합류를 권유하였다. 처음에는 프론트엔드 개발과 UI 디자인 등을 혼자 담당해야 하는 점에서 조금 부담을 느꼈지만, 이전에 진행했던 프로젝트 중에서 기간 등의 이유로 채팅 기능을 구현하지 못한 아쉬움을 가지고 있던 나에게 이번 프로젝트는 재미와 도전 두 가지의 목표를 이룰 수 있다는 점에.. 공감수 0 댓글수 0 2024. 7. 26.
실시간 동기화를 위한 웹 소켓 사용: 영상 싱크 및 채팅 구현 - 이번 You-Together 프로젝트는 사용자들이 함께 Youtube 동영상의 동일한 부분을 실시간으로 시청하고 동시에 채팅을 할 수 있는 서비스이다.- 즉, 같은 방에 있는 사용자들은 실시간으로 서버에 저장된 동영상의 동일한 부분을 시청하고 동시에 채팅을 할 수 있다.- 이전 코드스쿼드 마지막 프로젝트에서 채팅 기능을 구현해보지 못하고 프로젝트가 종료가 되었고 이에 대한 아쉬움이 많이 남아있었기 때문에, 실시간 서비스는 내가 이 프로젝트를 선택한 가장 큰 이유였다.- 데이터의 실시간 동기화를 위해서 기존의 API 요청 방식인 HTTP를 사용하는 것이 아닌 웹소켓을 사용하여 프로젝트를 구현하였고, 내가 구현한 방법과 왜 웹소켓을 선택했는지에 대해서 설명해보겠다.웹 소켓이란?- 웹 소켓(WebSocke.. 공감수 0 댓글수 1 2024. 7. 26.
react-query 에러 중앙화 처리 - 이전부터 프로젝트를 진행하면서 에러 처리를 일관적이고 효율적으로 처리하는 방법에 대해서 고민을 많이 했고 이번 프로젝트에서는 개선된 내용을 적용해보고자 했다.- 특히 이번 프로젝트에서는 모든 API를 호출하는 커스텀 훅을 react-query를 사용하여 만들고, 각 훅에서 API 호출 시마다 개별적으로 에러를 처리하는 것이 비효율적이라고 생각했다.- 또한, react-query의 최신 버전인 5부터는 useQuery의 onError 콜백이 제거되었기 때문에, useQuery를 사용하는 컴포넌트 내에서 에러 처리를 해야 했기 때문에 에러 처리를 중앙화하는 방법이 훨씬 효율적이라고 판단했다. 문제정의- 먼저 중앙화 처리 이전에 각 훅에서 API를 호출할 때마다 개별적으로 error를 처리하는 로직을 살펴.. 공감수 0 댓글수 0 2024. 7. 26.
SEO 처리하기 SEO(Search Engine Optimization, 검색 엔진 최적화)란?- 검색 엔진은 웹사이트에서 사용자가 검색한 키워드와 관련된 가장 적절한 결과를 제공하기 위해 웹 사이트의 컨텐츠와 구조를 분석하- 검색 엔진 최적화는 웹에 올리는 컨텐츠가 구글, 네이버와 같은 웹사이트의 검색 엔진에서 검색 결과에서 상위에 노출되도록 최적화하는 과정을 말한다. 문제정의- You-Together 프로젝트의 기능을 구현하고 크롬 개발자 탭의 Lighthouse를 통해 웹 페이지의 성능을 측정해본 결과, SEO 항목에서 72점이라는 낮은 점수가 기록된 것을 확인했다.- 기존에 CSR을 사용하는 React만을 사용했던 프로젝트에서는 SEO에 대해 단점을 가질 수 밖에 없다고 생각했지만, 이번 프로젝트는 nextjs.. 공감수 0 댓글수 0 2024. 7. 25.
[기능 구현] requestAnimationFrame을 활용한 애니메이션 목표 - 뉴스스탠드 프로젝트에서 화면 상단의 뉴스 헤드라인이 5초마다 무한으로 롤링되는 애니메이션의 구현이 필요했다. - 즉, A, B, C, D, E라는 뉴스 헤드라인이 있을 때, 사용자에게 보여지는 헤드라인은 1개이며 처음에는 A가 보이고 5초가 있으면 B가 보이며 E 다음에는 다시 A가 보여야 한다. - 무한으로 E 다음에 다시 A가 나타나는 로직 또한 고민이 필요한 부분이었지만, 이번 글에서는 5초마다 다음 뉴스의 헤드라인이 애니메이션과 함께 나타나는 기능에 대한 내용을 다뤄보려고 한다. 문제정의 - JavaScript를 공부하면 일정 시간마다 반복되는 기능을 사용할 때 가장 먼저 setInterval() 메서드를 생각할 수 있고 나 역시 setInterval() 메서드를 사용하여 5초마다 헤드라.. 공감수 0 댓글수 0 2024. 1. 25.
데이터 크롤링 및 json-server 활용 데이터 크롤링 - 뉴스스탠드 프로젝트는 네이버의 뉴스스탠드를 클론 코딩하는 프로젝트였다. - 처음 기획서를 보고 네이버의 뉴스 데이터를 어떻게 가져올 수 있을까 대한 고민이 생겼고, 동료의 도움으로 데이터 크롤링에 대해서 학습하고 사용했다. - 데이터 크롤링은 웹상의 정보들을 탐색하고 수집하는 작업을 의미하며 주로 규칙에 따라 자동으로 웹 문서를 탐색하는 컴퓨터 프로그램, 웹 크롤러(Crawler)를 사용한다. - 나는 네이버 PC 메인 화면에서 개발자 도구에서 DOM 요소를 선택하여 정보를 수집하는 방법을 사용했고, 실제 프로젝트에서 사용한 크롤링 코드와 db.json의 모습은 다음과 같다. // 데이터 크롤링 코드 const result = []; // DOM 요소를 선택하여 정보를 수집 docume.. 공감수 1 댓글수 2 2024. 1. 25.
Sass/Scss - 코드스쿼드 두 번째 개인 프로젝트인 News-stand를 CSS 전처리기 Sass/Scss를 활용했다.- 먼저 CSS 전처리기는 자신만의 특별한 syntax를 가지고 CSS 생성하며 중복 코드를 제거하고 재사용성을 높일 수 있다.- 여기서는 Sass/Scss를 사용하면 여러 장점들이 있지만, 실제 프로젝트에서 사용한 부분들을 다루도록 하겠다.믹스인(mixin)- 믹스인(mixin)은 코드 블록을 만들어 재사용 가능한 스타일을 정의할 수 있는 기능이다.- @mixin으로 선언하고 @include로 사용한다.- 다음은 실제 프로젝트에서 font 스타일을 정의하는 믹스인(mixin)을 선언하고 사용한 코드이다./* mixin 선언 */@mixin font($size, $weight) { font-size.. 공감수 0 댓글수 0 2024. 1. 25.
옵저버 패턴 - 코드스쿼드 두 번째 개인 프로젝트인 News-stand를 진행하면서 옵저버 패턴이라는 학습키워드를 접하게 되었고, 프로젝트에 적용해보았다. - 옵저버 패턴은 프론트엔드 개발에서 자주 사용되는 디자인 패턴으로, 모듈간의 의존성을 낮게 하기 위해 사용된다. - 옵저버 패턴은 간단하게 말해 "구독"과 "발행" 개념으로 표현되며 View는 Model을 구독하고 Model의 상태가 변경되면, 이를 구독하고 있는 View의 렌더링 함수(혹은 등록해놓은 함수)가 실행된다. - 즉, Model의 상태가 변경함에 따라서 해당 Model을 구독 중인 View가 자동으로 렌더링이 되는 구조이다. Observer pattern 코드 및 사용 - 옵저버 패턴에서 옵저버를 구현해보자. - 옵저버는 다음과 같은 역할을 한다. .. 공감수 0 댓글수 0 2024. 1. 23.
[Trouble Shooting] UUID를 사용한 고유한 키 값 사용 문제정의 - 프로젝트에서 상품 정보를 수정했을 때, 수정(작성)페이지에서 선택된 지역을 설정하는 기능을 수정하고 있었고 개발자 도구에서 전혀 예상하지 못한 경고를 발견했다. - 애플리케이션은 정상적으로 동작하고 있었기 때문에, 개발자 도구에서의 경고는 당황스러웠고 찾아보니, 동일한 키를 가진 요소가 있다는 의미였다. - 리액트에서 map과 같이 반복문을 사용할 때는 고유한 key 값을 사용해야하는 것은 알고 있었고, 이를 코드에 적용했었는데 어느 부분에서 발생한 에러인지 확인해보니 DB에서 받아온 상품의 이미지를 map을 통해 렌더링을 하고 있는 부분이었다. - 먼저 상품의 이미지를 렌더링하는 코드는 위와 같다. images 배열을 map으로 통해 렌더링하면서 각 요소들의 key 값으로는 image의 n.. 공감수 0 댓글수 0 2024. 1. 23.
[Trouble Shooting] 사용자 디바이스에 따른 다수의 이미지 조회 방법 문제정의 - 프로젝트의 기획에는 상품의 조회(상세페이지)에서 상품의 이미지가 1개 이상인 경우, 모바일 기기의 슬라이드 기능으로 다수의 이미지를 조회할 수 있게 되어있었다. - 하지만, 모바일 기기가 아닌 웹에서 접근시에는 다수의 이미지를 조회할 수 있는 기능이 누락되어 있었고, 이에 사용자의 디바이스에 따라 다수의 이미지 조회 방법을 다르게 구현하는 작업이 필요했다. - 해당 작업을 위해서는 먼저 사용자의 디바이스를 조회해야했고, 기존 슬라이드 기능 외에 추가로 캐러셀 기능 구현이 필요했다. 시도한 방법 및 해결방안 1. 사용자의 디바이스 조회 ⭕️ - 사용자의 디바이스 조회는 window.navigator의 userAgent 속성을 사용했다. - userAgent는 HTTP 요청을 보내는 디바이스와 .. 공감수 0 댓글수 0 2024. 1. 22.
[기능 구현] 동적 portal 만들기 portal이란? - 리액트(React)에서 portal은 컴포넌트 트리 내에서 다른 위치로 자식 요소를 렌더링할 수 있는 기능이다. portal은 주로 모달 창, 팝오버, 툴팁과 같은 오버레이 컴포넌트를 구현하거나, 외부 DOM 요소에 컴포넌트를 렌더링할 때 사용된다. - portal을 사용하면 자식 요소는 DOM 트리의 지정된 위치로 이동되지만, 해당 자식 컴포넌트는 여전히 컴포넌트 트리의 일부로 유지된다. - portal을 사용하면 컴포넌트가 렌더링되는 위치와 실제로 화면에 표시되는 위치를 분리할 수 있으며, 레이아웃, 스타일링, 이벤트 처리 및 zIndex 관리를 보다 쉽게 할 수 있게 해준다. - portal은 보통 모달창을 구현할 때, 많이 사용된다. - 프로젝트에서도 모달창을 구현할 때, p.. 공감수 0 댓글수 0 2024. 1. 22.
[기능 구현] 커스텀 훅(Custom Hook)을 사용하여 비동기 로딩 및 에러 상태 처리 - 프로젝트를 진행하면서 React 커스텀 훅에 대해서 알게 되었고, 팀 동료 스눕과 함께 프로젝트에서 사용할 커스텀 훅을 만들어보기로 했다. React 커스텀 훅이란?- React 커스텀 훅이란, React의 기본 훅(Hook)을 조합하여 사용자 정의 로직을 재사용하기 위한 매커니즘이다.- 즉, 자신만의 커스텀 훅을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있으며, 컴포넌트에서 사용하고 싶은 값들을 반환해주면 된다.- 커스텀 훅은 use 라는 키워드로 시작하는 파일을 만들고 그 안에 함수를 작성한다.- 커스텀 훅의 장점은 재사용성(비슷한 로직을 여러 컴포넌트에서 반복적으로 사용해야 할 때, 커스텀 훅을 만들어 코드를 재사용할 수 있음)과 복잡한 컴포넌트 로직을 외부로 분리하여 관리할 수 있어.. 공감수 0 댓글수 0 2024. 1. 22.
[기능 구현] OAuth를 통한 로그인 기능 구현 - 지역 기반 중고거래 사이트를 만드는 프로젝트에서 로그인 기능을 구현해야했고, 팀원들과 상의 결과 자체 로그인과 github OAuth 로그인 두 가지를 사용하기로 했다. - 이 글에서는 OAuth에 대한 간단한 설명과 실제 프로젝트에서 github OAuth 로그인을 구현한 부분에 대해 설명하겠다. OAuth(Open Authorization)란? - OAuth는 권한 부여를 위한 공개된 인증 프로토콜(접근 권한을 위임하는 개방형 표준 프로토콜), 제3자 애플리케이션에 대한 보안 인증 및 권한 부여 프로토콜이다. - 쉽게 설명해서 애플리케이션(Client)에서 별도의 회원가입 없이 사용자(Resource owner)를 대신하여 리소스 서버(Resource server)에서 제공하는 자원에 대한 접근 .. 공감수 0 댓글수 0 2024. 1. 22.
var, let, const 차이 - var와 ES2015(ES6)에서 추가된 let, const는 JavaScript에서 변수를 선언하는 키워드이다. - var, let, const는 변수를 선언하는 키워드라는 공통점이 있지만, 재선언과 재할당 가능성, 범위(Scope), 호이스팅(Hoisting)에서 차이점을 가지고 있다. ※ 재선언, 재할당 - 재선언 : 동일한 이름의 변수를 같은 스코프 내에서 두 번 이상 선언하는 것을 의미힌다. - 재할당 : 이미 선언된 변수에 새로운 값을 할당하는 것을 의미한다. - var는 재선언, 재할당이 모두 가능하다. var name = 'poco' console.log(name); // 'poco' // 재선언 var name = "Kim" console.log(name); // "Kim" // 재할.. 공감수 1 댓글수 1 2024. 1. 15.
call, apply, bind - JavaScript의 함수는 각자 자신만의 this를 정의한다. 일반 함수 호출(전역 함수, 중첩 함수, 일반 함수로 호출되는 메서드 내에서 정의한 중첩 함수 내부, 콜백 함수) : 기본적으로 this에는 전역 객체가 바인딩 된다. var name = "kim" // const, let으로 선언한 전역 변수는 window 전역 객체에 추가되지 않는다. function fn() { var name = "lee" console.log(this.name); // "kim" // 전역 객체 (브라우저에서는 window, Node.js에서는 global) } fn(); 메서드 호출 : 메서드 내부의 this는 메서드를 소유한 객체가 아닌 메서드를 호출한 객체가 바인딩 된다. const person = { na.. 공감수 0 댓글수 0 2024. 1. 14.
가비지 컬렉션 - 가비지 컬렉션(Garbage Collection)은 메모리 관리의 한 형태로, 프로그램이 더이상 사용하지 않는 메모리를 자동으로 회수하고 재활용하는 과정이다. - 이는 메모리 누수를 방지하고, 프로그램이 효율적으로 작동하도록 도와준다. - JavaScript의 원시값, 객체, 함수 등 우리가 만드는 모든 것은 메모리를 차지하고, JavaScript는 눈에 보이지 않는 곳에서 메모리 관리를 수행한다. 가비지 컬렉션 기준 - JavaScript에서는 도달 가능성(reachability)이라는 개념을 사용해 메모리 관리를 수행한다. - 도달 가능성이라는 것은 어떻게든 접근하거나 사용할 수 있는 값인가를 의미한다. - 루트(root) : 처음부터 도달 가능하기 때문에, 명백한 이유 없이는 삭제되지 않는다. .. 공감수 0 댓글수 0 2023. 12. 19.
HTTP 1.1 VS HTTP 2.0 HTTP 1.1 VS HTTP 2.0 HTTP 1.1 * HTTP 1.1 특징 - HTTP 1.0에서는 Connection 당 하나의 요청을 처리할 수 있다보니 동시 전송이 불가능했고(하나의 요청에 대한 응답이 온 후 다음 요청을 처리하기 때문) 이는 네트워크 시간을 지연시키는 단점이 있었다. - 따라서, HTTP 1.1에서는 HTTP Pipelining이 도입하여 네트워크 시간을 줄이는 방식을 도입하였다. - HTTP Pipelining : 하나의 Connection으로 다수의 Request와 Response를 처리할 수 있게하는 것으로 HTTP 1.0과 달리 여러 요청들에 대한 응답 처리를 뒤로 미루는 방법을 사용한다. - 하지만, 이는 완전한 멀티플렉싱이 아닌 응답처리를 미루는 방식이므로 각 응답의.. 공감수 0 댓글수 0 2023. 12. 18.
커링과 클로저 1. 커링(Currying) - 커링 : 커링은 f(a, b, c)처럼 단일 호출로 처리하는 함수를 f(a)(b)(c)와 같이 각각의 인수가 호출 가능한 프로세스로 호출된 후 병합되도록 반환하는 것이다. - 커링은 함수를 호출하는 것이 아닌 단지 반환할 뿐이다. - 함수 호출을 체인으로 연결할 수 있으며, 함수의 재사용성을 높일 수 있다. * 커링 예제 function curry(f) { // 커링 변환을 하는 curry(f) 함수 return function(a) { return function(b) { return f(a, b); }; }; } function sum(a, b) { return a + b; } const curriedSum = curry(sum); console.log(curriedS.. 공감수 0 댓글수 2 2023. 12. 5.
[Trouble Shooting] 상품 수정 등록 후 뒤로가기 경로 문제 - 세컨핸드 프로젝트를 수정하면서 겪은 고민과 문제 해결에 대해서 기록해보고자 한다. - 먼저 아래 두 개의 영상을 보면 사용자 입장에서 불편함을 느낄 수 있다고 생각한다. 홈화면 - 상품상세 - 상품수정 판매내역 - 상품상세 - 상품수정 - 프로젝트의 로직은 아래와 같다. 1. 홈화면 또는 판매내역에서 상품을 선택했을 때, 해당 상품의 상세페이지로 이동을 한다. 2. 만약 내가 등록한 상품이라면 상품 게시글을 수정할 수 있고, 수정 완료가 되면 해당 상품의 상세페이지로 이동한다. - 이때, 위의 두 개의 영상에서 확인할 수 있듯이 상품의 수정 완료를 하고 해당 상품의 상세 페이지로 이동했을 때, 뒤로가기 버튼을 클릭하면 상품의 상세페이지의 진입점(홈화면 또는 판매내역)이 아닌 다시 상품 수정 페이지로 .. 공감수 0 댓글수 0 2023. 11. 23.
React에서 서버와 통신하는 과정을 구현하는 방법 1. 사용자 상호작용으로 인한 서버 통신 - 사용자의 상호작용으로 인한 서버 통신은 예를 들어 "버튼 클릭으로 서버와 통신", "사용자 입력으로 서버에 요청", "사용자 상호작용에 의한 서버 통신" 등을 의미한다. - 사용자가 버튼을 클릭하거나 어떤 입력을 하면 이벤트 핸들러가 실행되고, 그 내부에서 서버와의 통신이 이루어지는 것을 의미한다. import React, { useState } from 'react'; function App() { const [data, setData] = useState(null); const fetchData = async () => { try { // 서버와 통신하여 데이터 가져오기 const response = await fetch('https://api.exampl.. 공감수 1 댓글수 1 2023. 11. 21.
Virtual DOM이란? - DOM(Document Object Model) : 하나하나의 Element(HTML)들을 담고 있는 웹페이지를 Document라고 하는데, 이를 브라우저가 분석해 페이지를 띄워주는 방식이다. - Virtual DOM이란 React에서 사용하는 가상 DOM으로 실제 DOM 기반으로 만들어지며 실제 DOM이 아닌 JS 객체 형태로 메모리 안에 저장되어 있다. - 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업은 무겁기 때문에, React는 실제 DOM의 변경 사항을 빠르게 파악하고 반영하기 위해 내부적으로 가상 DOM을 만들어서 관리한다. - 예를 들어, document.querySelector("#title").style.color = "red"와 .. 공감수 1 댓글수 1 2023. 11. 21.
리액트에서 list 태그에 key 값을 추가해야하는 이유 - 리액트에서 배열 항목을 렌더링할 때, key 값을 추가하지 않으면 아래와 같은 오류 메시지가 콘솔에 표시된다. "Warning: Each child in a list should have a unique "key" prop." * key 값이 필요한 이유 - 고유성을 보장 : key는 각 컴포넌트가 어떤 배열 항목에 해당하는지 React에게 알려주어 나중에 매칭할 수 있도록 하며 이는 배열 항목이 (정렬 등으로 인해) 이동하거나, 삽입되거나, 삭제될 수 있는 경우 중요하다. - 성능 최적화 : key 속성을 제공함으로써 리액트는 리스트의 변경 사항을 더 빠르게 감지할 수 있다. 예를 들어, list의 일부가 업데이트되는 경우 virtualDOM에서 변화를 감지하고 realDOM과 비교하여 새로운 DO.. 공감수 0 댓글수 0 2023. 11. 21.
useReducer를 활용한 상태관리 흐름 - useReducer Hooks API는 flux 아키텍쳐를 따른다. - useReducer API는 복잡한 상태관리에서 useState보다 유리하다. - useReducer는 구체적인 상태변경을 감추고, reducer에게 맡길 수 있고, 콜백(setState 등)을 계속 하위 component에 전달해줘야 하는 불편함을 줄일 수 있다. 대신 dispatch라는 매개체 역할의 함수를 전달해준다. * flux 아키텍처 - dispatcher는 애플리케이션에서 발생하는 모든 action을 수신하고 이 action을 처리할 적절한 store에게 전달한다. - action은 dispatcher에 전달되는 객체로 애플리케이션에서 발생하는 이벤트나 사용자의 상호작용을 나타낸다. - store는 애플리케이션의 상태.. 공감수 1 댓글수 1 2023. 11. 21.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.