최신 글
-
Access Token을 브라우저에 저장 시 고려해야 할 사항들
1. 들어가며프론트엔드 개발 시에 인증과 관련된 작업을 하면서 Best Practice가 없다보니 헤맸던 경험을 많이 했었습니다. 이는 특히 JWT 방식의 인증을 할 때 더욱 심해지는데요. access token을 클라이언트 쪽에서 관리해주게 되면서 여러가지 문제를 마주할 수 있습니다. 이에 대한 구현 방식은 정말 프로젝트마다 다르기 때문에 프로젝트 요구사항이나 보안 요구사항에 맞게 구현해 주어야 하는데, 적절한 방법을 골라 사용하기 위해서는 어떤 상황들이 발생할 수 있고 각 상황별 어떤 대처 방법이 있는지 알아야 합니다. 더 이상 웹 애플리케이션은 단순한 정적 사이트가 아니라 정적 컨텐츠와 동적 컨텐츠의 복잡한 구성을 이루고 있습니다. 일반적으로 웹 애플리케이션의 모든 로직은 브라우저 단에서 실행된다고..
2024.11.27
-
React에도 디자인 패턴이 있다고?
1. 들어가며소프트웨어쪽 공부를 하다보면 디자인 패턴이나 아키텍처에 대해 많이들 들어보셨을 겁니다. 사실 디자인 패턴이 많이 사용되는 분야는 백엔드이지만(싱글톤, 팩토리, 빌더, .....) 프론트엔드도 마찬가지로 이와 비슷한 고민으로부터 나온 몇가지 디자인 패턴이 존재한다는 사실 알고 계셨나요? 디자인 패턴이란? 디자인 패턴은 소프트웨어 개발의 일반적인 문제에 대한 표준화된 솔루션을 제공합니다. React에서의 디자인 패턴 React에서 디자인 패턴을 활용하면 확장성, 유지보수성, 효율성 측면에서 더욱 뛰어난 애플리케이션을 만들 수 있습니다. 이번 포스팅에서는 컨테이너 & 프레젠테이션 컴포넌트 패턴(Container and Presentational Components Pattern), 고차 컴포넌트 ..
2024.11.24
-
[TypeScript] enum vs. const
1. 들어가며이 포스팅에서는 타입스크립트에서 enum이란 무엇이고, 런타임 동작 시에 어떻게 동작하는지, 왜 const enum을 쓰는 것이 더 좋은지 알아보도록 할 것입니다. 또, 일반적인 enum과 const enum의 차이점과 컴파일 후 각각이 코드에 어떤 영향을 미치는지에 대해서도 다룰 것입니다. 2. Enum 이란?Enum은 자바스크립트의 확장 type-level이 아닌 TypeScript의 몇 안 되는 기능 중에 하나입니다.- 공식 TS 문서 enum은 enumeration(열거형)의 줄임말로, 명명된 상수 집합을 정의할 수 있게 해줍니다. 여기서 말하는 상수는 애플리케이션에서 보통 '고유한 값'을 나타내기 위해 사용하는데요. 예를 들어, 'on', 'off' 기능이 있는 스위치 버튼의 경우 ..
2024.11.22
-
[React] 알아두면 쓸 데 있는 React Custom Hooks 10가지
1. 들어가며React 개발을 하다보면 custom hooks를 구현해주어야 할 일이 많이 있는데요. 커스텀 훅을 사용하면 개발자가 여러 컴포넌트에서 로직을 재사용할 수 있기 때문에 코드를 더 유지보수하기 쉽고, 모듈화하여 읽기 쉽게 만들 수 있다는 장점이 있습니다. 다음에 나올 10가지의 커스텀 훅은 실제로 많이 사용되는 것들이며, 경우에 따라 유용한 커스텀 훅이 있으니 참고하시면 좋을 것 같습니다. 2. useFetchuseFetch 훅은 일반적으로 API에서 데이터를 가져오는 데 사용될 수 있습니다. loading, error 및 response status를 관리하며 데이터 검색에 필요한 모든 로직들을 캡슐화하고 있습니다. import { useState, useEffect } from 'reac..
2024.11.19
-
[프로젝트 | 트러블 슈팅] 강의 수강 완료의 기준 설정 및 트리거 방식
만났던 문제해당 프로젝트에서 겪었던 가장 크리티컬 했던 이슈는 강의를 다 들었는지에 대한 기준을 어떻게 잡을 것인가에 대한 것이었습니다초기에 클라이언트 측에서 제시한 요구사항은 플레이어바가 마지막에 도달하는 트리거(onPlayerEnd)를 기반으로 완료 처리를 하자는 의견이 나왔지만, 이는 강의를 실제로 다 듣지 않고 플레이어바를 끝으로 넘기는 인원이 있을 수 있기 때문에 다른 방식을 고안해야 했습니다. 첫 번째로 떠올린 방법은 setInterval() 을 통해 1초마다 상태를 업데이트하다가 영상의 길이와 똑같아 졌을 때 완료 처리를 하는 API를 보내는 방식으로 진행을 하기로 했습니다.실제로 이 방식으로 몇 주간 사용을 했었는데 사용자들의 불만이 몇 가지가 존재하였습니다.“강의를 끝까지 들었는데 체크가..
2024.11.17
-
[React] Tanstack Query(구 React-Query)에서 query key 관리하는 라이브러리(query-key-factory)
1. 들어가며Tanstack Query는 React에서 데이터 페칭을 위해 다양한 기능을 제공하는 라이브러리로, 캐싱 및 동기화, 데이터 업데이트 등을 효율적으로 관리할 수 있습니다. Tanstack Query에서 'Query Key'는 핵심 요소 중에 하나로, 데이터를 식별하는 key로 동작하여 데이터의 고유성(unique)을 식별하고 알맞은 캐싱 동작이 이루어지도록 하는 데 중요한 역할을 합니다. 2. Query Key FactoryQuery Key Factory는 Tanstack Query에서 Query Key를 생성하기 위한 함수나 객체 자체를 의미하빈다. 복잡하거나 계층적인 구조를 갖는 Query Key를 관리해야 하는 경우 유용하게 사용될 수 있는데요. Query Key Factory 기법을 ..
2024.11.16
-
[Next.js] Sentry로 효율적인 에러 모니터링하는 법(자동화 에러 추적 도구)
최근 프론트엔드 개발을 진행하면서 Sentry라는 에러 모니터링 도구를 알게되었습니다. 제가 맨 처음 프론트엔드 개발을 했을 때는 에러가 발생하는 경우 그냥 브라우저의 console.error()를 통해 에러 로그를 찍었었는데 이는 사용자 입장에서는 보이지도 않을 뿐더러 개발자 도구를 열어서 본다고 하더라도 의미없는 에러 로그만 보이게 됩니다. 개발자 입장에서도 어떤 에러가 발생했는지 사용자 브라우저에 들어가보지 않는 이상 모르기 때문에 디버깅을 하기 또한 어렵습니다. 그래서 최근에는 사용자 입장에서 유의미한 에러 문구를 보여주기 위해 콘솔을 찍지 않고 toast UI에 에러 메세지를 담아 보여주는 방식으로 사용하고 있습니다. 하지만 그렇다고 해도 그러한 에러를 수집하지 않는 이상 개발을 하는 제 입장에..
2024.11.14
-
[AWS] 서버가 갑자기 다운되는 문제 (CPU 점유율 100%, Memeory 부족)
해당 문제는 AWS EC2에 올려 운영 배포 중이던 서버가 중간중간 죽는 문제를 겪게 되면서 이를 해결하기 위해 시도했던 방식들을 바탕으로 글을 작성해보았습니다. 아직도 정확한 원인은 파악하지 못해 계속해서 찾아보고 있는 중이며, 관련된 내용에 대해 의심이 가는 부분이 있다면 댓글로 남겨주시면 감사하겠습니다 :) 1. 문제 상황AWS EC2에 클라우드 환경을 구축하여 NestJS, NextJS, MySQL, Nginx를 Docker를 통해 컨테이너로 띄워 서비스를 운영을 하던 와중이었습니다. 실제 사용자를 받아 운영 중이던 서비스였고 사용자를 정식으로 받기 전부터 3명 정도가 미리 사용해보면서 문제가 되는 부분을 수정하는 느낌으로 미리 QA도 진행하여 성공적으로 서비스 런칭을 하게 되었습니다. 서버 스..
2024.11.13
-
[kakao tech bootcamp] React 컴포넌트를 PDF로 만들기(react-pdf(O), react-to-pdf(X))
본 포스팅은 '카카오 테크 부트캠프'에서 진행한 프로젝트인 '깃트폴리오'를 진행하면서 겪었던 트러블 중 react-pdf과 관련된 내용을 바탕으로 작성하였습니다. 1. 들어가며'깃트폴리오'에서는 사용자의 이력서를 자동으로 생성해주며 AI와 같이 수정해 나가면서 최종적으로 나에게 온전히 맞춰진 이력서를 손쉽게 만들어 주는 것에 초점을 두고 있습니다. '이력서를 만들어준다'라는 것은 AI를 통해 만들어진 이력서의 내용을 단순히 보는 것에 그치는 것이 아니라 해당 이력서를 pdf 등의 문서로 저장하는 것까지 포함해야 했습니다. react 컴포넌트를 pdf로 저장하는 기능을 구현하려는 분들에게 제가 대신 겪었던 문제와 해결 방법을 공유하여 이 글이 조그만 이정표가 되어줬으면 하는 바램으로 글을 작성해보았습니다...
2024.11.12
-
OpenAI(ChatGPT)가 Next.js에서 Remix로 전환한 이유
1. 들어가며2024년 9월 초 즈음에 OpenAI에서 기술 스택 전환에 대한 내용이 화두가 된 적이 있습니다. 생태계가 꾸준히 RSC(React Server Component), SSR(Server Side Rendering)으로 발전하고 있으며, 머지 않아 SPA(Single Page Application)이 없는 것처럼 동작하는 react 생태계를 보게될 것이라는 예측이 항간에 나오고 있습니다. Vercel은 Next.js와 자사의 플랫폼 사용을 증가시키고, 이를 통해 수익을 창출하기 위해 노력해왔습니다. 이런 행보는 매우 자연스러운 일이죠. 하지만 여기서 문제가 되는 것은 많은 React Core 팀 멤버들이 Next.js 팀으로 이동하면서, React의 방향을 Next.js의 우선순위에 맞추는..
2024.11.11
-
[React] Redux가 좋은 경우 vs Zustand가 좋은 경우
1. React 상태 관리React에서 상태 관리는 애플리케이션 내에서 데이터의 동적인 변화를 추적하고 조작하는 그 행위 자체를 의미합니다. React에서 '상태(state)'는 컴포넌트의 렌더링 결과에 직접적인 영향을 미치는 데이터로, 사용자 입력, 서버로부터 받은 응답, 혹은 기타 이벤트에 따라 변경될 수 있다는 특징을 가지고 있습니다. 주요 특징은 아래와 같습니다.컴포넌트 상태: 각 컴포넌트는 자체적으로 상태를 가질 수 있도록, useState와 같은 훅을 통해 관리합니다.상태의 복잡성 증가: 애플리케이션 규모가 커지면서 여러 컴포넌트 간에 상태를 공유해야 하는 상황이 발생합니다.상태 관리의 중요성: 효율적인 상태 관리는 코드의 가독성, 유지보수성, 그리고 애플리케이션의 성능에 직접적인 영향을 줍니..
2024.11.10
-
[kakao tech bootcamp] 카카오테크 부트캠프 챗봇(피카부) - 2 (트러블 슈팅)
1. 들어가며[프로젝트] - [kakao tech bootcamp] 카카오 테크 부트캠프 챗봇 프로젝트(피카부) - 1 [kakao tech bootcamp] 카카오 테크 부트캠프 챗봇 프로젝트(피카부) - 1카카오테크 부트캠프(카테부) 챗봇, "피카부"는 카카오테크 부트캠프에서 진행한 팀 미션으로부터 시작된 프로젝트입니다. 카카오테크 부트캠프에서는 각 과정별로(풀스택, 인공지능, 클라우cdragon.tistory.com지난 포스팅에서 카테부 챗봇인 "피카부(Pikaboo)" 프로젝트에 대한 내용을 정리하였습니다. 이번 포스팅에서는 개발을 진행하면서 발생했던 트러블 슈팅과 개인적으로 최적화를 진행했던 내용에 대해서 정리해보려 합니다. 2. 내용메시지를 스트림으로 받아올 때 문제사이드바 데이터 공백 문제채..
2024.11.09
-
[kakao tech bootcamp] React에서 드래그한 텍스트를 관리 하는 방법 (text selection, getSelection API)
본 포스팅은 '카카오 테크 부트캠프'에서 진행한 프로젝트인 '깃트폴리오'를 진행하면서 겪었던 트러블 중 text selection과 관련된 내용을 바탕으로 작성하였습니다. 1. 들어가며 깃트폴리오의 궁극적인 목표는 이력서를 생성해주는 데에서 그치지 않고 AI와 커뮤니케이션을 통해 나에게 맞는 최적의 이력서를 뽑아내는 데에 있습니다. 그렇기 때문에 '내 이력서'를 확인하는 화면에서는 이력서의 내용뿐만 아니라 AI에게 이력서의 특정 부분을 수정 요청할 수 있도록 우측에 마련한 '채팅 사이드바'가 존재하는데요. 기획 단계에서 이 부분을 구현하는 방식에 있어서 팀원들끼리 다양한 의견이 오고 갔었습니다. 물론 가장 이상적인 상황 은 요구사항만 딱 보내도 AI가 알잘딱하게 알아서 수정해주는 것일 것입니다. 하지만 ..
2024.11.08
-
[CS 지식] GraphQL이 뜨는 이유(feat. RESTful API 와 다른 점은?)
이 글은 최근 다양한 기업들의 기술 스택을 보면서 GraphQL이 많이 보이는 현상에 대한 궁금증으로부터 비롯되어 왜 요즘 많이 사용되고 있는 기술이며 어떻게 발전되었는지 그 과정들을 함께 살펴보려고 합니다. 1. "API를 위한 쿼리 언어""API를 위한 쿼리 언어" GraphQL 공식문서에 들어가보면 첫 페이지에 대문짝만하게 박혀있어서 가장 먼저 볼 수 있는 문장입니다.GraphQL은 API를 위한 쿼리 언어이며 이미 존재하는 데이터로 쿼리를 수행하기 위한 런타임입니다. GraphQL은 API에 있는 데이터에 대한 완벽하고 이해하기 쉬운 설명을 제공하고 클라이언트에게 필요한 것을 정확하게 요청할 수 있는 기능을 제공하며 시간이 지남에 따라 API를 쉽게 진화시키고 강력한 개발자 도구를 지원합니다.- ..
2024.11.07
-
[Front-End] React 렌더링 방식 (React 탄생 배경)
1. 들어가며[Front-end] - [Front-End] 웹 브라우저 동작 방식 이해 (feat. 렌더링) [Front-End] 웹 브라우저 동작 방식 이해 (feat. 렌더링)1. 들어가며우리가 컴퓨터를 하면서 가장 많이 사용하는 프로그램은 무엇일까요? 단연 웹 브라우저(크롬, 사파리, Edge,...)일 것입니다. 웹 프론트엔드의 근간이라고도 할 수 있는 웹 브라우저가cdragon.tistory.com 지난 포스팅에서 브라우저가 어떤 방식으로 화면을 그리는지에 대해서 알아보았습니다. 이번 포스팅에서는 그렇다면 React는 어떤 과정들을 거쳐 브라우저에게 파일을 전달하며, 렌더링은 어떻게 되는 것인지에 대해 알아보도록 하겠습니다. 지난 시간 다루었던 웹 페이지가 렌더링 되는 과정을 간단히 요약하면 아..
2024.10.09
-
JWT는 안전할까?
1. 들어가며그동안 많은 프로젝트에서 대부분 토큰 방식의 인증 방식을 채택하여 진행을 한 경우가 많았는데, 최근 진행한 프로젝트에서는 세션 방식의 인증을 사용해보았습니다. 카카오 OAuth2 로그인을 제공하는 Spring Security의 강력한 기능으로 백엔드에서도 적은 코드 양으로 구현을 할 수 있었지만 프론트엔드에서 토큰 관리를 따로 해줄 필요가 없다보니 너무 편해서 로그인에 거의 시간을 소모하지 않아 다른 기능에 온전한 집중을 할 수 있어 굉장히 큰 메리트로 다가왔었습니다. 하지만 서버 측에서 관리하는 세션이다보니 k8s 배포 환경에서 여러 가지 문제가 생기는 것을 볼 수 있었는데, JWT를 사용했을 때도 그러한 문제가 전혀 없던 것은 아니었기 때문에 이와 관련된 인사이트를 얻고자 올라온 글 중..
2024.10.05
-
[Front-End] 웹 브라우저 동작 방식 이해 (feat. 렌더링)
1. 들어가며우리가 컴퓨터를 하면서 가장 많이 사용하는 프로그램은 무엇일까요? 단연 웹 브라우저(크롬, 사파리, Edge,...)일 것입니다. 웹 프론트엔드의 근간이라고도 할 수 있는 웹 브라우저가 어떤 방식으로 화면에 요소들을 그리는지에 대해서 알아보도록 하겠습니다. 2. 웹 브라우저란?어떤 내용으로 시작을 할까 고민을 하면서 웹 브라우저의 역사부터 시작해야 하나 생각도 했지만 항상 드는 생각은 너무 많을 것을 담으려다 보니 내용이 고봉밥이 되는 문제가 있었기 때문에 이제는 좀 핵심적인 내용만 담으려고 합니다. 웹 브라우저란 무엇일까요? 우리가 흔히 사용하는 크롬, Microsoft Edge, 사파리 등이 모두 웹 브라우저입니다. 인터넷 상에 존재하는 모든 페이지들을 넘나들 수 있다는 특징을 갖고있죠..
2024.09.17
-
[kakao tech bootcamp] 카카오 테크 부트캠프 챗봇 프로젝트(피카부) - 1
카카오테크 부트캠프(카테부) 챗봇, "피카부"는 카카오테크 부트캠프에서 진행한 팀 미션으로부터 시작된 프로젝트입니다. 카카오테크 부트캠프에서는 각 과정별로(풀스택, 인공지능, 클라우드) 2명씩 모여 총 6명 인원의 팀을 구성하여 6개월간 3개의 팀 미션과 각종 현업 프로젝트를 진행하는데, 이 글은 그 중 가장 첫 번째로 진행했던 팀미션의 내용을 정리한 글이 되겠습니다. 제가 이번 프로젝트에서 주로 맡은 부분은 프론트엔드와 약간의 백엔드였으므로 프론트엔드 개발에 대한 내용을 주로 작성 하였습니다. 1. 왜 '카테부' 챗봇인가?첫 번째로 진행한 팀미션의 주제는 '카카오테크 부트캠프 정보를 제공하는 챗봇'입니다. 팀 미션 주제를 선정하는 방식은 게이미피케이션 기반 미션 관리 페이지인 구름 exp에 리스트업 ..
2024.09.09
-
[데이터베이스] RDBMS를 활용한 데이터베이스 설계 및 최적화
🔎진행 및 완료 사항1. 문제 정의: RDBMS를 활용한 데이터베이스 설계 및 최적화의 필요성 및 목적 정의애플리케이션은 날이 갈수록 보다 더 많은 데이터를 수용해야 하고 그러한 수많은 데이터를 효율적으로 저장하고 검색할 수 있는 강력한 데이터베이스 시스템에 의존할 수밖에 없다. 그러나 이러한 데이터베이스 시스템 중에서도 관계형 데이터베이스 관리 시스템(RDBMS)은 데이터의 무결성, 일관성, 안정성 등을 보장하며, 다양한 비즈니스 요구사항을 충족시킬 수 있는 강력한 기능을 제공하여 많이 선택되는 데이터베이스 방식 중 하나이다.하지만, 데이터베이스의 성능이 떨어지면 전체 시스템의 성능에도 큰 영향을 미치기 때문에 데이터베이스의 설계 및 최적화는 매우 중요한 작업이다.RDBMS를 활용한 데이터베이스 설계..
2024.09.03
-
mysql 커넥션 풀 오류 해결 과정
예전에 node.js express로 백엔드 개발을 진행한 적이 있었는데 그 당시 개발 중 발생했던 문제 상황에 대해서 기록을 남겨보려고 한다. GET / --ms--' is a log message generated by the node.js HTTP module. It indicates that a GET request was made to the root ("/") path and that the response took some time to complete, measured in milliseconds. The "--ms--" suffix is appended to the log message to indicate the time taken for the response to complete. ..
2024.08.26
