WonnyDocs

Review

[소프트웨어 아키텍처 The Basics 2판] 도서 리뷰

2025.12.29

한빛미디어 서평단 활동을 위해서 책을 협찬 받아 작성된 서평입니다.들어가며소프트웨어 개발을 하다 보면 '아키텍처'라는 단어를 참 자주 듣게 됩니다.그런데 막상 아키텍처가 정확히 무엇인지, 아키텍트는 어떤 일을 하는 사람인지 명확하게 설명하기는 쉽지 않아요.마크 리처즈와 닐 포드가 쓴 이 책은 그 막연함을 걷어내고, 소프트웨어 아키텍처의 본질과 아키텍트의 역할을 체계적으로 정리한 책입니다. 이 책은 ‘소프트웨어 아키텍처 101’의 개정판으로 나온 것인데요.생성형 AI와 클라우드 환경 등 최근 몇 년간 급격히 변화한 기술 환경을 충실히 반영하고 있는 듯 했어요! 목차CHAPTER 01 서론_1.1 소프트웨어 아키텍처의 정의_1.2 소프트웨어 아키텍처의 법칙_1.3 아키텍트의 기대 역할_1.4 로드맵PART..

Review

[개발자는 글을 못 쓴다고요?] 도서 리뷰

2025.12.17

제이펍 서평단 활동을 위해서 책을 협찬 받아 작성된 서평입니다. 들어가며개발자에게 글쓰기가 필요하다는 말을 들으면 어떤 생각이 드시나요? 저는 아주 처음에는 '코드만 잘 짜면 되는 거 아닌가?'라는 생각을 했어요. 하지만 여러 책과 세미나, 그리고 인턴 생활을 통해서 개발자가 하루 동안 얼마나 많은 글을 쓰게 되는지 알게되었어요. 커밋 메시지를 쓰고, 변수명을 짓고, 동료에게 메시지를 보내고, 문서를 작성하는 모든 순간이 사실은 글쓰기였던 거예요. 그런데 정작 이런 글을 '어떻게' 써야 하는지는 배울 기회가 없는게 현실이에요. 얼마전에 ‘개발자 글쓰기’를 주제로 짧게 발표를 한 경험이 있는데, 이 때 대학교 저학년 청중분들께 여쭤보니까 글쓰기에는 거리를 멀다 생각하시더라구요. '개발자는 글을 못 쓴다고요..

Review

DevFest Incheon 2025 후기

2025.12.09

안녕하세요! 이번에 인천 송도에서 열린 DevFest Incheon 2025 행사에 다녀왔습니다.규모가 큰 행사인 만큼 기대가 있었는데요.2년전 쯤에도 이 행사에 참가했던 경험이 있어서, 이번 행사는 또 어떻게 다를지 기대됐어요.체크인하면서 GDG 인천 키링, 스텐머그, 마나부 포인트 쿠폰 등 간단한 굿즈를 수령했구요.저는 시간 상 2개의 세션에 참가해 들어보았습니다.안전하게 AI를 활용하는 개발 문화, CI/CD로 시작하기제가 첫번째로 들은 세션은 임성호님의 '안전하게 AI를 활용하는 개발 문화, CI/CD로 시작하기' 라는 세션이었습니다.성호님은 무신사에서 프론트엔드 엔지니어로 근무하시는 분으로, 실제 프로덕션 환경에서의 경험을 바탕으로 CI/CD 파이프라인 구성에 대한 이야기를 들려주셨어요. 버전 ..

Review

[바이브 코딩 너머 개발자 생존법] 도서 리뷰

2025.11.30

"한빛미디어 서평단 활동을 위해서 책을 협찬받아 작성된 서평입니다."들어가며요즘 SNS에서 AI로 만든 프로덕트들과 후기들을 보면 걱정도 되고 솔직히 겁이 나기도합니다. 개발자로서의 역할이 점점 줄어드는 건 아닐까, 채용이 점점 줄어들겠구나, 이런 생각들도 들구요. 그런데 도서를 읽으면서 그런 두려움이 조금씩 다른 방향으로 바꿀 수 있는 관점을 얻은 것 같습니다. 이 책은 AI 툴 사용법을 알려주는 매뉴얼이 아니라, AI 시대에 개발자가 어떤 역할을 맡아야 하는지를 근본부터 다시 생각하게 만드는 책이었던 것 같아요.목차[PART 1 바이브 코딩]CHAPTER 1 시작하며: 바이브 코딩이란 무엇인가?_1.1 AI 코딩의 스펙트럼: 바이브 코딩부터 AI 보조 엔지니어링까지_1.2 코드 라인을 넘어서: 의..

Tips

Claude가 Notion에 접근할 수 있도록 하기 (feat. MCP 서버)

2025.11.23

Claude를 쓰다보니 노션 문서 내용을 Claude에게 입력시킬 경우가 생기는데요.일반적으로 3가지 방식을 떠올릴 수 있을 것 같아요.직접 복사/붙여넣기 하기노션 페이지를 게시(배포)한 후 링크를 Claude에게 입력하기comet 과 같이 웹페이지를 읽을 수 있는 어시스턴트가 탑재된 브라우저 사용하기위 방법들 모두 나름의 단점이 있습니다. 직접 복사/붙여넣기 하기 매번 수동으로 내용을 옮겨야하는 번거로움 노션 페이지를 게시(배포)한 후 링크를 Claude에게 입력하기 민감한 정보를 포함한 문서여서 게시/배포하기 망설여질 수 있음 comet 과 같이 웹페이지를 읽을 수 있는 어시스턴트가 탑재된 브라우저 사용하기 별도의 도구를 설치해야 함 그래서..

Develop/React Native

[React Native] Liquid Glass 헤더 효과 비활성화하는 방법

2025.11.02

문제expo 기반의 react native 앱 개발 도중, react navigation을 사용하는 헤더에 liquid glass 효과가 자동으로 적용되는 문제가 발생했습니다.liquid glass란, iOS 26에서 새롭게 도입된 UI 디자인으로, 반투명한 유리 질감을 추가하는 효과입니다.이미지를 보면 알 수 있다시피, 네비게이션의 양쪽 버튼에 어색하게 liquid glass 효과가 들어가 있는 것을 알 수 있습니다.의도하지 않은 효과가 적용되면서 앱의 디자인 일관성이 깨진 듯 보였습니다.해결이 문제는 iOS 26부터 새롭게 추가된 UIDesignRequiresCompatibility 설정을 통해서 해결할 수 있습니다.이 key는 앱이 최신 UI 디자인을 사용할지, 이전 SDK 버전의 호환성 모드를 사..

Review

[프런트엔드 레벨을 높이는 자바스크립트 퀴즈북] 도서 리뷰

2025.10.26

들어가며프런트엔드 개발 공부를 하다 보면 리액트나 뷰 같은 프레임워크에 먼저 손이 가게 되죠. 당장 결과물도 눈에 보이고 취업에도 직접적으로 필요하니까요. 그런데 막상 면접장에 앉아보면 프레임워크 질문은 어떻게든 답하는데, 정작 자바스크립트의 기본 개념을 물어보면 말문이 막히는 경우가 많다고 합니다. 이 책의 저자도 면접관으로 들어갔을 때 비슷한 상황을 많이 목격했다고 해요. 리액트 관련 질문엔 술술 대답하던 지원자가 자바스크립트 질문 앞에서는 버벅이다 결국 탈락하는 모습을요. 그 이야기를 읽으면서 '역시 근본이 중요하구나' 싶었습니다. '프런트엔드 레벨을 높이는 자바스크립트 퀴즈북'은 제목 그대로 퀴즈 형식으로 구성된 책입니다. 저는 사실 이런 형태의 책이 처음이라 호기심이 생겼어요. 기존에 읽었던 개..

Review

[실무로 통하는 웹 API] 도서 리뷰

2025.09.27

한빛미디어 서평단 활동을 위해서 책을 협찬 받아 작성된 서평입니다.들어가며웹 개발을 하다 보면 "이런 기능 구현하려면 또 어떤 라이브러리를 찾아야 하나" 하는 고민이 자주 생깁니다.그런데 사실 현대의 브라우저는 이미 우리가 필요로 하는 많은 기능들을 표준 API로 제공하고 있다고해요.는 브라우저 네이티브 기능의 강력함을 보여주는 책이에요!별도의 라이브러리 없이도 음성 인식, 파일 처리, 데이터 저장 등 복잡한 기능들을 구현할 수 있다는 점에서 웹 개발자라면 반드시 알아둬야 할 내용들을 담고 있는 책이라는 생각이 들었습니다.목차CHAPTER 1 비동기 API_1.0 소개_1.1 Promise 다루기_1.2 이미지 로딩 에러에 대비하기_1.3 Promise 체이닝_1.4 async/await 키워드 사용_..

Review

[소플의 처음 만난 Next.js] 도서 리뷰

2025.08.29

“한빛미디어 서평단 활동을 위해서 책을 협찬 받아 작성된 서평입니다.”들어가며웹개발, 특히 프론트엔드 분야에 계신 분들이라면 Next.js 는 이제 피할 수 없는 기술일 듯합니다.Next.js는 React만으로 해결하기 어려운 문제나 한계를 극복하면서, 동시에 개발 생산성까지 높여줄 수 있는 프레임워크예요.하지만 막상 처음부터 Next.js를 배우려고하면 막막할 수 있을 것 같습니다.좋은 기회로 소플님의 책을 읽어볼 수 있게 되어서 이 책을 리뷰해보려고해요.목차0장 준비하기0.1 타입스크립트0.2 (실습) Node.js와 npm 설치하기0.3 (실습) VS Code 설치하기0.4 마치며1장 Next.js 소개1.1 리액트와 Next.js1.2 CSR vs SSR1.3 SSG1.4 Next.js 탄생 배..

Review

[개발자를 위한 글쓰기 가이드] 도서 리뷰

2025.07.20

이 리뷰는 광고나 협찬 없이 작성한 개인적인 후기입니다.들어가며회사에서 매주 진행하는 FE 챕터 발표 시간에 동기 분이 이 책을 소재로 발표를 해주셨어요. 그때 들었던 내용이 너무 실용적이고 흥미로워서 바로 그 분께 책을 빌려 읽게 되었습니다. 개발자라면 누구나 코드만큼이나 자주 마주하게 되는 '글쓰기'에 대한 구체적인 가이드라인을 담고 있어서, 읽는 내내 "아, 이런 부분에서 내가 헤매고 있었구나" 하는 깨달음이 많았던 것 같아요.목차저자의 말1부 테크니컬 라이팅 시작하기1장 테크니컬 라이팅테크니컬 라이팅과 기술 문서테크니컬 라이팅과 일반 글쓰기의 차이테크니컬 라이팅 5단계2장 개발자와 테크니컬 라이팅개발자와 테크니컬 라이팅그냥 쓰는 것이 아니라 제대로 쓰기2부 테크니컬 라이팅 45가지 원칙3장 문서 ..

Tips

Brower MCP, 내 브라우저를 자동화 할 수 있도록

2025.06.15

만약 Claude 가 내가 보고있는 웹 페이지를 탐색하고, 데이터를 추출할 수 있도록 하고싶다면 어떻게 해야할까요?방법을 알아보겠습니다. Brower MCP 브라우저 확장 프로그램을 설치https://chromewebstore.google.com/detail/browser-mcp-automate-your/bjfgambnhccakkhmkepdoekmckoijdlc?pli=1 Browser MCP - Automate your browser using VS Code, Cursor, Claude, and more - Chrome 웹 스토어The MCP to control your browser. Browser MCP is a Model Context Protocol (MCP) server that allows ..

Tips

Claude에 로컬 폴더 연결하기: MCP 서버 설정 방법

2025.06.14

저는 Claude pro 를 매달 구독해서 사용중인데요.다른 AI 들도 있지만, Claude 에는 프로젝트 기능이 있는데, 프롬프트를 미리 모두 세팅해두고 그때 그때 필요한 프로젝트로 들어가 채팅을 하면 편리해서 자주 사용하게 되더라구요.그리고, Claude 에서 MCP 연결 기능도 제공해주는 것을 확인했습니다. 이번에는 MCP 서버를 연결해서, 제 로컬에 있는 코드를 읽을 수 있는 권한을 설정해서 Claude를 좀 더 용이하게 사용해볼까합니다!어려울 줄 알았는데 파일 하나만 생성하면 되는 일이더라구요.아래에서 설명드리겠습니다.MCP 서버 연결방법준비해야할 것은 Claude 데스크탑 앱과 Node.js 입니다.Node 설치 여부는 아래 명령어로 확인할 수 있습니다.node --version설치 방법에 대..

Develop

구버전 브라우저를 위한 JavaScript Polyfill 적용 가이드

2025.06.08

서비스를 오픈한 후 구버전 브라우저를 사용하는 유저에게서 오류가 발생하는 상황을 경험해보셨나요?웹뷰 브라우저 기반 서비스에서 최신 JavaScript 문법을 사용하게 되면, 구버전 브라우저에서는 해당 기능을 지원하지 않아 오류가 발생할 수 있어요. 이런 문제를 해결하는 방법 중 하나가 바로 Polyfill입니다.Polyfill이란?Polyfill은 구버전 브라우저에서 지원하지 않는 최신 JavaScript 기능을 구현해주는 코드예요.Polyfill이라는 단어 자체가 '충전재'라는 뜻인데, 브라우저 간의 기능 격차를 메워준다고 이해하면 좋아요.예를 들어 String.prototype.replaceAll() 메서드가 브라우저에서 지원되지 않으면, 이 기능을 직접 구현한 코드를 추가해서 모든 브라우저에서 동일..

Develop

반복자 패턴에 일급 함수를 더하면

2025.06.07

들어가며프로그래밍을 하다 보면 데이터를 순회하는 일이 정말 많습니다.배열이든 객체든 트리든 상관없이 "다음 요소를 던져줘"라는 동일한 방식으로 데이터에 접근할 수 있다면 얼마나 좋을까?-라는 필요에서 탄생한 것이 바로 반복자 패턴입니다.오늘은 반복자 패턴이 무엇인지, 그리고 이 패턴이 일급 함수와 만나 어떻게 현대 함수형 프로그래밍의 토대가 되었는지 JavaScript 예시와 함께 살펴보겠습니다.반복자 패턴이란?반복자 패턴은 컬렉션의 내부 구조를 노출하지 않으면서 순차적으로 내부 요소들에 접근할 수 있게 해주는 디자인 패턴입니다.어떤 형식의 자료구조든 "다음 요소"를 알 수 있어서 동일한 방식으로 데이터 순회가 가능하게 만들어줍니다.컬렉션: 배열, 리스트, 트리 등 여러 데이터를 담는 자료구조간단한 반복..

Review

[멀티패러다임 프로그래밍] 도서 리뷰

2025.06.01

“한빛미디어 서평단 활동을 위해서 책을 협찬 받아 작성된 서평입니다.”들어가며객체지향, 함수형, 명령형… 개발하면서 많이 들어본 용어들이고 실제로 코드를 작성할 때 자연스럽게 접하게 되는 방식들이에요.책 표지에 '객체지향, 함수형, 명령형의 통합적 사고로 구현하는 소프트웨어 설계와 구현'이라는 문구를 보니 '저 세 가지를 어떻게 통합적으로 사용한다는 거지?'라는 궁금증이 들더라고요.보통은 각각을 따로 배우거나, 어떤 하나를 선택해서 써야 한다고 생각했는데 말이에요!이 책은 '어떤 게 정답이다'라고 단정하기보다는 상황에 따라 어떻게 조합해서 쓸 때 성능적으로도, 가독성 면에서도 더 좋은 코드를 만들 수 있는지를 알려주는 책인 것 같아서 읽어보게 되었습니다.특히 프론트엔드 개발을 하면서 언제는 함수형으로,..

Review

[패턴으로 익히고 설계로 완성하는 리액트] 도서 리뷰

2025.03.29

한빛미디어 서평단 활동을 위해서 책을 협찬 받아 작성된 서평입니다. 들어가며웹 프론트엔드 프로젝트 개발을 하면서 리액트를 라이브러리를 다룰일이 많은데요. 코드를 작성하며 자주 드는 생각이 있습니다. '설계부터 잘 해놓았으면 이렇게 변경사항이 많지 않았을텐데'라는 아쉬움이죠. 프로젝트가 진행될수록 코드 재사용성을 높이는 방법에 대한 고민도 깊어집니다. 이 책의 제목 는 그런 제 관심사와 정확히 맞닿아 있어 궁금증을 불러일으켰어요. 특히 소규모 프로젝트에 익숙했던 제가 회사에서 대규모 프로젝트를 처음 접하게 되면서, 어떤 설계 패턴이 유용할지에 대한 고민이 더욱 커졌습니다. 이 책을 통해 리액트 프로젝트의 구조를 체계적으로 잡는 방법, 리팩토링 기법, 그리고 실무에서 효과적인 설계 원칙을 배울 수 있을 것..

Develop

Tanstack Query 핵심 기능 정리

2025.03.03

들어가며마지막 사이드 프로젝트 때 Tanstack Query를 사용했었고, 마음에 들어서 외주 프로젝트와 이후 사이드 프로젝트에도 Tanstack Query를 도입했었습니다.Tanstack Query를 쓰면서 '이런 기능이 있나? 있으면 좋을 것 같은데' 라고 생각했던 것들이 많았는데, 실제로 찾아보니 이미 있는 경우가 대부분이었고, 미리 한번 전체적으로 공식 문서를 정독했다면 두 번 찾아보지 않아도 되었겠다-라는 생각을 하게 되었어요. 그런 의미로, 이번 포스팅에서는 Tanstack Query에서 자주 쓰일 법한 개념들을 한번 전체적으로 정리하는 시간을 가져보도록 하겠습니다. Tanstack Query(React Query) 개요Tanstack Query는 서버 상태 데이터를 가져오고, 캐싱, 동기화 ..

Review

[고작 다섯 명이 한 말을 어떻게 믿어요?] 도서 리뷰

2025.02.27

한빛미디어 서평단 활동을 위해서 책을 협찬 받아 작성된 서평입니다.들어가며 웹 프론트엔드 개발을 하며 저는 주로 코드와 데이터, 그리고 UI에 집중해 왔어요. UX에 대한 관심은 있었지만, 정성 연구는 거리가 먼 영역이라고 생각했어요. 정량적 분석이 더 객관적이고 신뢰할 만하다고 여겼던 것도 사실입니다. 하지만 실제 프로덕트에서는 단순한 숫자나 클릭 수만으로는 설명되지 않는 사용자 행동이 많다고 알고 있어요.이 책을 우연히 읽게되면서 “왜 사용자는 이렇게 행동할까?“라는 질문에 대한 답을 생각해보게되고, 정성 연구가 단순한 감(感)에 의존하는 것이 아니라 체계적인 방법론을 가진 분야라는 것을 알게 되었어요. 그리고 다섯 명만으로도 의미 있는 인사이트를 도출할 수 있다는 저자의 주장이 흥미롭게 다가왔습니..

Develop

React 메모이제이션 딥다이브

2025.02.02

들어가며얼마전 기술면접 준비를 하면서 React에서의 메모이제이션에 대해 다시한번 짚어보게 되었습니다.일반적으로 메모이제이션을 사용하는 것이 항상 좋지만은 않다고 알고 있지만, 정확히 왜 그러한지 좀 더 알아보고 싶어져서 포스팅을 해보려고 해요.메모이제이션이란?React에서 메모이제이션은 불필요한 재계산과 리렌더링을 방지하기 위해 존재하는 기술입니다.이전 계산 결과를 캐싱한다음, 재사용을 하게 하는 매커니즘을 가지고있어요.따라서 대규모 데이터 처리를 하는 경우에 성능 향상에 결정적인 역할을 할 수 있습니다.메모이제이션의 여러 방법들React에서 제공하는 메모이제이션의 대표적인 방법들은 여러가지가 있는데요.하나씩 알아보겠습니다.React.memo먼저 React.memo 입니다.const MemoizedCo..

카테고리 없음

2024년까지의 회고 (feat. 대학생활, 취준, 그리고...)

2025.01.19

안녕하세요, dawonny 입니다. 지금까지 개발블로그 글을 작성하면서 '회고' 글을 작성해 본 적은 한 번도 없었던 것 같습니다.회고라는 게 제게 굉장히 개인적이고, 비밀스럽게 느껴졌기 때문에 항상 타 플랫폼의 개인 일상 블로그에 몰래 적곤 했어요.하지만 늘 그렇듯, 발자취를 남겨놓으면 미래의 내가 다시 읽었을 때 새롭게 느끼는 것도 생기고, 그때 자신의 나를 보면서 오히려 힘을 얻고 동기부여를 얻기도 하더라고요.그런 의미로, 오늘은 회고글을 작성해볼까 합니다. 개발자 글쓰기 모임인 '글또'에 제출했던 [삶의 지도]의 내용도 포함되어 있어요. 조금은 재미없던 학생학창 시절 때의 스스로를 생각했을 때 저는 마냥 재밌는 학생이 아니었습니다.부모님이 엄하시기도 했지만, 제 성격상 모범생 이미지가 잘 맞고 ..

Develop

자바스크립트 로딩 최적화 전략 알아보기

2025.01.04

들어가며성능 최적화에 대해서 이야기할 때, 백엔드와 프론트엔드에서 접근하는 관점이 꽤 다릅니다.예를 들어 백엔드에서는 데이터베이스 쿼리를 최적화나 서버 리소스 관리에 대해 주요하게 고려한다면, 프론트엔드에서는 페이지의 로딩 시간을 단축하여 사용자 경험을 향상 시키는 것에 초점을 맞추곤 하죠. 이처럼 프론트엔드 성능에 영향을 미치는 여러 요소 중에서도, 자바스크립트가 DOM 구성을 차단하는 현상은 특히 중요합니다.구글의 연구에 따르면 페이지 로딩 시간이 3초 이상 지연되면, 절반 이상의 사용자가 페이지를 이탈한다고 해요. 이번 글에서는 자바스크립트가 DOM 구성을 어떻게 차단하게 되는지, 이를 어떤 기법을 사용해서 최적화할 수 있는 지에 대해서 다루어보려고 합니다. 자바스크립트와 DOM 렌더링의 관계Cri..

Review

[트랜스폼드] 도서 리뷰

2024.12.11

트랜스폼드디지털 전환 시대, 기업의 경쟁력은 프로덕트 오퍼레이팅 모델에 달려 있다. 구글, 테슬라, 넷플릭스, 어도비 등 선도 기업들이 지속적인 성공을 거둘 수 있었던 비결은 바로 이 프로덕트 모델로의 전환에 있다. 이 책은 이러한 전환의 핵심에 있는 프로덕트 오퍼레이팅 모델에 대한 깊이 있는 통찰을 제공하며, 성공적인 도입을 위한 실질적인 방법론을 제시한다. 마티 케이건은 리더들이 반드시 알아야 할 변화의 필요성과 이를 실현하기 위한 구체적인 기술을 솔직저자마티 케이건출판제이펍출판일2024.12.12 안녕하세요. 이번에 소개할 도서는 [트랜스폼드(마티 케이건 지음)]입니다. 이 책은 디지털 시대의 혁신적인 조직 변화에 대해서 다루고 있어요. 특히 프로덕트 운영 전략과 사례를 엿볼 수 있는 책입니다!주..

Review

제55회 SQLD 독학 합격 후기(feat. 1트)

2024.12.10

글을 쓰고 있는 시점인 오늘, 제55회 SQLD 데이터 전문가 자격시험의 사전점수 결과가 나오는 날입니다.결과를 조회해보니 다행히 합격해서 이렇게 후기를 작성할 수 있게 되었네요!처음에 시험에 관해서 알아보고, 이것저것 찾아보는 시간이 많다는 것을 알기에, 정보 공유 차원으로 글을 쓰게 되었습니다. 📌 아예 노베이스는 아니면서, 시간과 여유가 없는 분들에게 도움이 될 수 있는 글입니다! 응시 계기전공 수업에 DB 관련 수업이 있어서 듣긴 했지만, 사실상 잠깐 2-3달 동안 백엔드 개발을 경험하면서 얻었던 지식이 제겐 더 도움이 되었던 것 같아요.아무튼, 이러한 배경으로 용어들을 아예 모르는 상태는 아니었고, 그렇다고 깊은 지식이 있는 상황은 아니어서 처음부터 모두 다시 공부한다는 생각으로 시작했습니다...

Review

[비전공자도 배울 수 있는 타입스크립트] 도서 리뷰

2024.11.26

비전공자도 배울 수 있는 타입스크립트지식이 없는 비전공자도 부담 없이 TypeScript를 배울 수 있도록, 마치 친절한 선생님이 옆에서 설명하듯 구성된 입문서입니다. 다양한 일러스트와 일상적인 비유를 통해 어려운 개념을 쉽게 설명하며, 본문 내 COLUMN, MEMO, POINT 구성과 확인 문제를 통해 중요 내용을 자연스럽게 익힐 수 있습니다. 더불어 배운 내용을 바탕으로 React 애플리케이션을 직접 만들어보는 실습을 제공하여, 이론에서 그치지 않고 실제 프로젝트에 적용할 수 있는 실력저자HIRO출판한빛미디어출판일2024.11.01안녕하세요!오늘 소개드릴 도서는 [비전공자도 배울 수 있는 타입스크립트(HIRO 지음)]입니다. 개발을 공부하시는 분들이라면 한 번쯤은 들어보셨을 타입스크립트.특히 프론트..

Develop

수동 배포에서 CI/CD 파이프라인 구축까지 (feat. Github Actions)

2024.11.26

들어가며저는 웹 외주 프로젝트에 프론트엔드 개발로 참여하며 팀원과 공유할 테스트용 배포 사이트가 필요했습니다.좀 더 구체적으로는 다음과 같은 프로세스를 가졌는데요.develop 브랜치에 개발한 기능을 올리고 EC2 서버에 develop 브랜치를 테스트용으로 배포하여, 팀원과 확인한 후 문제가 없을 시 main 브랜치에 최종적으로 merge하며 진행하였습니다.(현업에서는 더 구체적이고 체계적인 방식으로 진행하겠지만, 신속한 수정이 필요하고 팀원 구성이 적은 저희는 우선적으로 이렇게 진행하곤했습니다.)이 때 배포하는 방식은, 말 그대로 '수동 배포 방식'이라고 할 수 있었는데요.직접 EC2 서버에 접속해서 터미널 명령어로 배포를 위한 명령어를 입력해야했기 때문이에요. 하지만 배포의 빈도가 늘어나면서 다음과 ..

Develop

클라이언트 상태(Client State)와 서버 상태(Server State)

2024.11.21

tanstack query(react) 의 개요를 찾아보다가, 이 tanstack-query 가 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 다룰 수 있도록 도와주는 라이브러리이며 클라이언트 상태과 서버 상태를 명확히 구분하기 위해서 만들어졌다는 내용의 글을 읽었습니다. 클라이언트 상태는 평소에 React에서 관리하고 사용하는 ‘state’ 의 개념으로 이해하면 될 것 같은데, 서버 상태는 정확히 무엇을 의미하는 것인지 궁금해졌습니다.이번 글에서는 클라이언트 상태와 서버 상태를 비교하며 차이에 대해 다루어볼게요. 개인적으로는 ‘서버 상태’ 라는 단어가 익숙하지 않았을 뿐이지, 새로운 개념은 아니었어요.다만, 클라이언트 상태와 서버 상태는 완전히 다른 개념이므로 정확히 이..

Develop

웹에서 새 창(window)과의 데이터 통신 구현하기

2024.11.08

들어가며웹 애플리케이션을 개발하다 보면 종종 새 창(window)을 열어 작업해야 하는 경우를 마주하게 됩니다.특히 관리자 페이지나 기업용 웹 애플리케이션에서는 여러 창을 동시에 띄워놓고 작업하는 것이 사용자 경험 측면에서 더 효율적인 경우가 많습니다.예를 들어 사용자 목록을 보면서 특정 사용자의 정보를 수정하거나, 주문 목록을 확인하면서 개별 주문의 상세 내용을 수정하는 등의 작업이 있죠. 이런 상황에서 중요하게 고려될만한 것은 창 간의 안정적인 데이터 통신입니다.사용자가 새 창에서 데이터를 수정하고 나면, 그 변경사항이 원래 창에도 자연스럽게 반영되어야 하니까요.이를 위한 구현 방식으로는 크게 window.opener를 이용하는 방식과 URL 파라미터를 이용하는 방식이 있습니다.기술 스택이 글의 예제..

Review

[헬로 Bun] 도서 리뷰

2024.11.02

안녕하세요. dawonny 입니다. 오늘은 [헬로 Bun] 도서를 리뷰해보려고합니다.월 방문자 10만명의 기술블로그를 자랑하는 Dale Seo 달레(서대영) 님의 책이네요! 주요 내용자바스크립트 생태계는 나날이 복잡해지고 있습니다.수많은 라이브러리와 개발 도구들 사이에서 선택의 고민도 깊어지고 있고, 빌드 시간은 또한 점점 길어지고 있죠.이런 상황에서 Bun은 새로운 바람을 일으키고 있어요.이 책은 Node.js를 대체할 수 있는 차세대 자바스크립트 런타임인 Bun을 상세히 다루고 있습니다.책의 구성은 크게 세 부분으로 나뉘는데요. 첫 번째 파트에서는 Bun의 설치부터 프로젝트 생성, 패키지 관리, 모듈 시스템 등 기초를 다지는 데 집중하고 있어요.다음으로 두 번째 파트는 CLI 도구 개발, HTTP 서..

Develop

Web으로 구현하는 카메라 기능: 스냅피 프로젝트 개발기

2024.10.27

웹 개발에 있어 네이티브 앱과 같은 기능을 구현하는 것은 항상 고민이 되고, 도전적인 부분이라고 생각합니다. 특히 기기의 카메라에 접근해야하는 기능이라면 더욱 그렇습니다. 이번 글에서는 저희 스파키 Frontend팀에서 스냅피 프로젝트에서의 카메라 사진 촬영 기능을 구현한 경험을 공유드리려합니다.웹에서의 카메라 구현스냅피 프로젝트는 사람들이 쉽게 사진을 찍고, 업로드 할 수 있는 모임 사진 서비스입니다. 때문에 설치를 하지 않아도 링크를 통해 쉽게 접속할 수 있어야한다는 점을 고려하여 Next.js를 활용한 웹 서비스로 개발되었습니다. 하지만 앱을 다운로드 받거나 바로가기를 만들 수 있다는 점에서 PWA(Progressive Web App) 형태로 개발하기로 결정했습니다.프로젝트 초반에 가장 먼저 부딪힌..

Review

[전혀 다른 생성형 AI] 도서 리뷰

2024.10.23

안녕하세요, dawonny입니다. 오늘 소개드릴 책은 [전혀 다른 생성형 AI(심영환 지음)]입니다.생성형 ai, 인문학적 시각으로 바라보다오늘날 생성형 ai 가 우리의 삶에 정말 많은 영향을 미친다고 생각해요. 이에 따라서 단순히 기술적 관점으로 생성형 ai 를 바라보는 것보다 인문학적 시각으로도 바라보는 것이 중요해졌죠. [전혀 다른 생성형 ai]는 IT 전문가이면서도 문과적 소양을 갖춘 저자가 인문학, 기술의 접점에서 생성형 ai를 바라보면서 쓴 독특한 관점의 책이었어요. 요즈음 생성형 ai 관련 도서가 정말 많이 쏟아지고 있는데요. 그 중에서도 특이한 구성을 가진 것 같아 관심이 가더라구요. 목차추천의 글 8여는 글 15이 책에 대하여 20도시 I 생성형 AI 톺아보기 25마을 1 해리가 샐리를 ..

전체 글

[소프트웨어 아키텍처 The Basics 2판] 도서 리뷰

[개발자는 글을 못 쓴다고요?] 도서 리뷰

DevFest Incheon 2025 후기

[바이브 코딩 너머 개발자 생존법] 도서 리뷰

Claude가 Notion에 접근할 수 있도록 하기 (feat. MCP 서버)

[React Native] Liquid Glass 헤더 효과 비활성화하는 방법

[프런트엔드 레벨을 높이는 자바스크립트 퀴즈북] 도서 리뷰

[실무로 통하는 웹 API] 도서 리뷰

[소플의 처음 만난 Next.js] 도서 리뷰

[개발자를 위한 글쓰기 가이드] 도서 리뷰

Brower MCP, 내 브라우저를 자동화 할 수 있도록

Claude에 로컬 폴더 연결하기: MCP 서버 설정 방법

구버전 브라우저를 위한 JavaScript Polyfill 적용 가이드

반복자 패턴에 일급 함수를 더하면

[멀티패러다임 프로그래밍] 도서 리뷰

[패턴으로 익히고 설계로 완성하는 리액트] 도서 리뷰

Tanstack Query 핵심 기능 정리

[고작 다섯 명이 한 말을 어떻게 믿어요?] 도서 리뷰

React 메모이제이션 딥다이브

2024년까지의 회고 (feat. 대학생활, 취준, 그리고...)

자바스크립트 로딩 최적화 전략 알아보기

[트랜스폼드] 도서 리뷰

제55회 SQLD 독학 합격 후기(feat. 1트)

[비전공자도 배울 수 있는 타입스크립트] 도서 리뷰

수동 배포에서 CI/CD 파이프라인 구축까지 (feat. Github Actions)

클라이언트 상태(Client State)와 서버 상태(Server State)

웹에서 새 창(window)과의 데이터 통신 구현하기

[헬로 Bun] 도서 리뷰

Web으로 구현하는 카메라 기능: 스냅피 프로젝트 개발기

[전혀 다른 생성형 AI] 도서 리뷰

티스토리툴바

티스토리툴바