본문 바로가기

전체 글29

소프트웨어 원칙을 소통의 재료로 사용하기 (소프트웨어 개발 3대 원칙) 소프트웨어를 개발하며 중요하게 생각하는 주제가 있습니다. 의사소통하며 좋은 코드를 만들어가는 경험을 바탕으로 동료들과 신뢰를 만드는 것입니다. 그 과정을 함께하기 좋은 동료가 되기 위해 노력하고 있습니다. 어떻게 하면 근거를 바탕으로 소통할 수 있고 동료들이 좋은 커뮤니케이션을 하고 있다고 느낄 지 고민해봤습니다. 개발팀 내의 소통을 위한 좋은 도구중 하나가 소프트웨어 원칙들이라고 생각하고 있습니다. 소프트웨어 원칙들은 코드베이스의 발전을 위한 의견을 낼 때 좋은 근거가 되주는 것을 많이 경험하고 있습니다. 소프트웨어 설계 원칙들은 설득력을 가지게 된 지 시간이 오래 지나 관련 자료들을 찾기도 쉽고 강한 키워드가 되곤 합니다. 원칙들의 등장배경을 이해하기 위한 대전제가 있습니다. 소프트웨어는 자주 변합니.. 2023. 12. 26.
브라우저 스토리지를 이용하여 네트워크 요청 줄이기 프론트엔드에서 네트워크 요청을 줄일 수 있는 두 가지 방법에 대해 다루는 글을 작성하였다.이전 글 바로가기첫번쨰 글에서 작성한 두 가지 방법은 다음과 같았다.적당한 단위를 산정하여 인피니티 스크롤 적용하기정적 페이지로 만들어 관리하기이번에는 브라우저 스토리지를 이용한 캐싱 방식에 대해서 글을 작성해보려 한다.브라우저 스토리지는 메모리보다 값을 오래 저장할 수 있도록 도와준다. Table Of Content브라우저 스토리지들의 차이점장바구니 개수 컴포넌트로 생각해보는 장바구니 개수 캐싱캐싱을 이용할 때 주로 고려해야할 것들브라우저 스토리지를 이용한 캐싱브라우저 스토리지에는 로컬 스토리지, 세션 스토리지, 쿠키가 있다.위 세개의 스토리지에 저장을 해두고 값이 갱신되지 않는 경우에 값을 그대로 받아오는 방식을.. 2023. 8. 10.
프론트엔드에서 네트워크 요청 줄이기 DAU 50만 정도의 순간 트래픽이 높은 서비스를 개발중이다.그리고 외부 API를 사용하기 때문에 트래픽 제어가 쉽지 않고 요청이 많아질 경우 비용도 높아지는 문제가 있다.또 현재 개발하고 있는 앱의 연령층은 10대, 40~50대 위주이기 때문에 데이터 비용의 부담도 유저의 이탈을 만들게되곤 한다.그렇기에 사용자 경험을 저해하지 않는 수준의 API 요청 최소화를 생각하며 개발하고 있다.시행착오를 겪으며 사용한 방법들과 고려해야했던 이유들을 다시 한번 검증하고 공유하기 위해 글을 정리한다.내용을 잘 정리하기 위해 글을 두 편으로 정리하려한다. Table Of ContentAPI 요청을 줄여야 할 때는 언제일까적당한 단위를 산정하여 인피니티 스크롤 적용하기정적 페이지로 만들어 관리하기다음 글 Table Of.. 2023. 7. 24.
Node.js 버퍼를 이용하여 이미지를 만들어보자 이미지를 브라우저에 보여주거나 저장하거나 가공할 때가 있다. 그렇지만 이미지를 컴퓨터가 어떻게 이해하는지, 색상 데이터에 어떤 정보를 추가해야 완전한 이미지 파일이 되는지 모르고 있었다. 이 글은 이미지를 잘 이해하기 위해 또 이미지를 직접 가공해야 할 때를 대비해 코드로 이미지를 만들며 학습한 기록이다. Table Of Contents - Node.js에서 이미지를 읽어보며 버퍼 이해해보기 - 비트맵 이미지를 만들어보며 이미지 파일의 구성요소 알아보기 - 사용하기 쉬운 인터페이스를 고민하며 npm에 패키지 배포하기 이미지를 읽어보자. const fs = require('fs'); fs.readFile('./asset/groot.png', (err, data) => { if (err) { console... 2023. 7. 11.
상태관리 (관찰자 클래스 방식과 createStore 방식 비교해보기) 상태 관리를 어떻게 하면 좋을지는 프로젝트를 시작할 때, 혹은 상태 관리가 포함된 코드를 리뷰할 때 자주 나오는 주제이다. 라이브러리를 잘 사용하는 것도 중요하지만 결국 상태가 무엇이고 어떻게 상태관리하면 좋을지 이해한다면 능동적으로 라이브러리를 활용하거나 직접 구현하여 상태관리할 수 있을 것이다. 상태를 다루는 일반적인 방법을 살펴본 후 이를 옵저버 패턴을 이용하여 개선해 보자. 또 옵저버 패턴을 이용하여 관찰자 클래스 방식과 createStore 방식을 바닐라 JS로 구현해 보고 비교해 보자. 프론트엔드에서 상태란 이 글에서 다룰 상태는 값의 변함에 따라 화면에 반영돼야 하는 값으로 정의한다. 그렇다면 프론트엔드에서 상태의 예로는 무엇이 있을까? 이러한 탭바에서 상태는 내가 무슨 탭을 보는지(현재는 .. 2023. 5. 25.
2022년 회고 2022년이 지났다. 상용되는 프로그램을 개발 및 운영하고, 좋은 교육을 받고, 동아리를 운영하기도 하며 2022년을 보냈다. 2022년의 기억이 휘발되기 전에 2022년을 정리할 목적, 또 2023년을 잘 대비할 목적으로 글을 정리하려 한다. 충북 SW JUDGER 상반기는 학교에서 사용되는 코드 채점 프로그램을 만들며 보냈다. 갑자기 사용자가 많아지고 기능이 추가되며 프로그래밍 과제를 채점하는 기능, 각종 버그들 수정 및 UX 개선등을 2개월 안에 추가해야 했다. 교수님께서는 프론트 팀을 이끌며 개발하라 하셨고 할 지 말 지 고민할 시간조차도 부족했기에 어떻게 해야 될까?라는 생각만 했다. 평소처럼 살아서는 쉽게 될 것 같지 않아 체계를 만들었다. 루틴 만들기 학습해야 하는 부분과 개발할 내용이 동시.. 2023. 1. 11.