본문 바로가기 메뉴 바로가기

Algoroot's space

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

Algoroot's space

검색하기 폼
  • 분류 전체보기 (106)
    • Python (2)
    • Frontend (50)
      • NextJS (2)
      • React (5)
      • React-native (8)
      • Typescript (0)
      • JavaScript (15)
      • Html&CSS (5)
      • Projects (5)
      • JASON (0)
      • ToyProject (4)
    • git (7)
      • monorepo (2)
      • action (0)
    • Network (6)
    • 알고리즘 (26)
      • 백준-BACKJOON (4)
      • 프로그래머스-Programmers (17)
      • leetcode (1)
      • 자료구조 (4)
    • 회고 (2)
    • Server (1)
    • 항해99 (5)
    • CS (Computer science) (10)
  • 방명록

Frontend (50)
내가 선언적인 코드를 좋아하는 이유 (Feat. FP로 만드는 애니메이션) - 2

안녕하세요. 지난 글 「내가 선언적인 코드를 좋아하는 이유 (Feat. React) – 1」에서 저는 선언적인 코드를 작성하는 방식이 어떻게 코드 품질의 방향키가 되어 주었는지, 그리고 React 렌더링 과정에서 그 철학이 어떤 식으로 구현되는지 살짝 살펴봤습니다. 혹시 1편을 아직 못 보셨다면, 먼저 읽고 오시면 흐름이 조금 더 자연스러울 거예요. 이번 글에서는 선언적 프로그래밍과 깊이 연결된 함수형 프로그래밍(FP, Functional Programming)에 대해 이야기하려 합니다. 1편에서 설명한 것처럼 저는 선언적 프로그래밍은 "제가 알아야 하는 컨텍스트가 적어지는 코드"라고 정의했는데요, FP는 바로 이 개념을 한층 더 깊이 있게 다루는 패러다임입니다. FP를 처음 접했던 순간사실 FP를 처..

Frontend 2025. 6. 22. 19:53
내가 선언적인 코드를 좋아하는 이유 (Feat. React) - 1

안녕하세요. 오늘은 제가 코드를 작성할 때 추구하는 프로그래밍인 선언적 프로그래밍에 대해 기술하고자 합니다. 1년 차에는 개발을 할 때 어떻게 구현할지를 고민했다면, 경험이 쌓이면서는 어떻게 짜야할지 고민을 더 많이 하게 되는 것 같습니다. 하나의 알고리즘 문제를 풀 때도 풀이 법이 수십 가지이듯, 하나의 기능 구현에도 개발자마다 중요도와 스타일에 맞게 다르게 작성됩니다. 그렇기에 "유지보수가 쉽고, 보기 좋고, 디버깅이 편한 코드"를 작성하는 건 더 이상 단순한 선택이 아닌 좋은 개발 습관이자 필요조건이라 생각합니다. 저 역시 처음엔 좋은 코드를 위해 "추상화"라는 개념부터 차근차근 익혀나갔습니다. 하지만 경험이 쌓이면서 점점 더 넓은 컨텍스트에서 코드를 바라보게 되었고, 단순한 추상화를 넘어서 코드..

Frontend 2025. 5. 25. 16:14
프론트엔드 개발자의 AI 챗봇 개발기

안녕하세요! 지난 2월 27일, “AI로 뭘 해볼까?”라는 고민에서 출발해 자기소개 챗봇을 만들어보자! 는 다짐으로 첫 글을 남겼습니다.서비스는 한 달 후 3월 말에 완성이 되었지만, 글을 이제서야 쓰게 되었습니다. 이 글에서는 그동안 챗봇을 개발하며 겪은 기술적 고민과 구현 과정, 그리고 구조 개선의 흐름까지 정리해보려 합니다. 해당 서비스는 GPT-4o-mini 모델의 API 호출 비용 문제로 인해 이름과 주소를 공개하지 않고 있습니다. 혹시 저와 같이 AI Chatbot을 개발해보고 싶은 분들은 이메일(algoroot524@gmail.com)로 보내주시거나 댓글을 남겨주시면, 제가 아는 선에서 최대한 도움을 드리겠습니다. 개발 기간 및 기술 스택개발 기간: 약 1개월AI: LangGraph.js, ..

Frontend 2025. 4. 24. 18:27
[귀찮은건 질색이야-2] 나는 코드를 작성했는데 문서가 생성된다고?: api-extractor (feat. Docusaurus, Github A

안녕하세요. 오늘은 코드와 주석을 기반으로 문서 자동화한 경험을 공유하고자 합니다. 보일러플레이트에서 응집되어 있던 utils, hooks을 용도에 맞게 패키지로 분리하면서, 관리적과 성능적으로는 이점이 있었지만, 실무진 분들이 어떠한 함수를 가져오기 위해 참고할 수 있는 문서가 필요했습니다. 21개가 넘는 패키지들, 총 100개는 넘을 듯한 컴포넌트나 함수들을 개발하는 것을 떠나서 또 문서작업을 해야 한다는 게 굉장히 부담으로 다가왔습니다. 따로 md파일을 생성하여 관리하는 것이 아닌, 명령어만으로 문서가 자동생성 되게 하면 얼마나 편할까요? 다행히도, 아주 다행이도 이미 잘 개발된 라이브러리를 발견했습니다. 바로 MicroSoft 에서 개발한 오픈소스도구인 api-extractor인데요. 해당 ..

Frontend 2024. 12. 20. 00:07
Proxy 사용하여 벨리데이션 체크하기

안녕하세요. 오늘은 JavaScript의 Proxy 객체를 활용하여 벨리데이션 체크를 하는 방법에 대해 소개해드리려고 합니다. 조금 지난 얘기이지만 지난 3월 보일러플레이트의 의 Analytics(GA, 카카오 픽셀 등 분석도구 모음) class로 리팩토링한 후, 테스트를 하지 않아서 문제가 발생했습니다. 그래서 이슈 픽스 할 겸, 리팩토링 과정을 거쳤는데 그 과정에 Proxy를 사용한 경험을 소개하고자 합니다. Proxy란 무엇일까요??Proxy는 JavaScript에서 객체에 대한 동작을 가로채거나 수정할 수 있는 강력한 도구입니다. 객체의 속성에 접근하거나 값을 설정할 때, 이를 중간에서 처리할 수 있습니다. Proxy 기본 사용법1. Proxy 객체 생성먼저, Proxy 객체를 생성해보겠습니다.c..

Frontend/JavaScript 2024. 6. 10. 10:09
활성화된 쿼리 및 로딩 상태를 효율적으로 관리하는 방법

안녕하세요. 오늘은 React Query에서 유용하게 활용할 수 있는 util 함수와 hook을 소개해드리려고 합니다. 특히, 여러 API 요청을 동시에 처리할 때 쿼리의 로딩 상태를 관리하는 데 도움을 줄 수 있는 방법을 다루겠습니다. 리액트 애플리케이션을 개발하다 보면 여러 API 요청을 동시에 처리해야 하는 상황이 자주 발생합니다. 이런 경우 각 요청의 로딩 상태를 효과적으로 관리하고 UI에 반영하는 것이 중요합니다. 오늘은 React Query를 활용하여 다중 쿼리의 로딩 상태를 깔끔하게 관리하는 방법을 공유해보려고 합니다. 왜 다중 쿼리의 로딩 상태 관리가 필요할까요?예를 들어, 블로그 애플리케이션을 생각해보세요. 이 애플리케이션에는 두 개의 탭이 있어, 각각 "최신 글"과 "인기 글"을 표시합..

Frontend 2024. 4. 5. 12:31
SSR 페이지에서 API 응답이 느리다면 어떻게 개선할 수 있을까?

안녕하세요. 이번 글에서는 프로젝트를 진행하면서 성능을 개선했던 경험을 공유하고자 합니다. 저는 현재 현 회사에서 담당한 프로젝트 중 상세 페이지에 대한 전체 부분을 담당했습니다.  설명에 앞서 상세 페이지는 동적인 페이지로 Next.js Page router의 getServerSideProps을 사용하여 SEO에 필요한 데이터를 패칭한 점을 알려드립니다.  이로인해 블로킹 현상을 겪었고, 주 원인이 API 응답 지연으로 파악이 되어 해당 부분에 대해 클라이언트 측에서 개선한 점에 대해 다루었습니다. 요청 캐시는 이미 하고 있으므로, 캐싱에 대해서는 다루지 않고, 주로 페이지 전환시 블로킹되는 현상에 대한 부분에 대한 글입니다. 꼭 원인이 API 응답 지연이 아니더라도, 서버사이드에서 동적패칭을 한다면 ..

Frontend/NextJS 2024. 1. 30. 22:05
React Query의 setQueryData 활용한 캐싱된 데이터 업데이트 훅 소개

안녕하세요, 오늘은 React Query의 setQueryData 함수를 편리하게 사용하기 위해 만든 useSetQueryData 훅에 대해 소개하려고 합니다.배경 이전에는 주로 캐싱 데이터를 업데이트할 때 UI 업데이트를 위한 Optimistic Update 용도로 사용하고는 했는데, 최근 프로젝트에서 수많은 ApI 요청으로 인한 서버 비용을 개선하기 위해 캐시를 수정하게 되었습니다.  동기 Optimistic Update를 처음 접했을 때 인피니티 쿼리에 적용하면서 다가가기 어렵고, 시간도 꽤 소요되었던 경험이었어, 처음 접하시는 분들이 더 쉽게 활용할 수 있도록 쿼리 캐시 수정용 훅을 만들었습니다. setQueryData 용도빠른 UI 업데이트어떠한 데이터를 수정, 삭제, 생성 (mutate) 한 ..

Frontend/React 2023. 11. 3. 22:52
이전 1 2 3 4 ··· 7 다음
이전 다음
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
  • 무한스크롤
  • 자바스크립트알고리즘
  • css
  • reactquery
  • 자바스크립트 비동기 처리
  • 자바스크립트
  • 항해99
  • 프로그래머스 자바스크립트
  • html
  • GIT
  • 알고리즘자바스크립트
  • 모두를 위한 컴퓨터 과학
  • 자바스크립트 클로저
  • 프로그래머스 베스트앨범 자바스크립트
  • React
  • network
  • github
  • 클로저
  • 모두를위한컴퓨터과학
  • React Query
  • 네트워크
  • javascript
  • python
  • 실전프로젝트
  • 리액트네이티브
  • 리액트
  • 프로그래머스
  • 타입스크립트
  • 백준
  • cs50
more
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함

Blog is powered by Tistory / Designed by Tistory

티스토리툴바