티스토리

Caesar Front

검색하기

블로그 홈

Caesar Front

caesar1030.tistory.com/m

caesar1030 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

git add --edit 들어가며우연히 HTTP 완벽 가이드를 번역하신 분의 블로그를 발견했다. 최근 이 책을 읽기 시작했는데, 어딘가에서 스쳐 지나가며 본 "HTTP 완벽 가이드 읽는 법"에 관한 글이 생각나 검색했다. 검색 결과 가장 상단에 있던 글이 바로 그분의 글이었다. 단순히 번역가가 아니라 개발자로서의 면모가 돋보였는데, 다른 글들을 읽어보니 이분은 진정한 개발자라는 느낌이 강하게 들었다. 그렇게 여러 블로그 글을 읽어 내려가던 중, 한 번쯤 내가 고민했던 내용을 다룬 글이 있어 나도 학습한 내용을 짧게나마 정리해보고자 한다.깔끔하게 커밋하기참된 개발자란 꼼꼼해야 한다는 생각이 든다. 이전에 나의 사수 역할을 해주셨던 분도, 현재 사수 역할을 맡고 계신 분도 대단한 실력자이시다. 두 분의 공통점은 실력도 뛰어나지만 무.. 공감수 3 댓글수 0 2025. 1. 12.
Nest를 공부해보자 최근 NestJS를 학습하기 시작했다. 이유는 크게 두 가지 정도가 있는데, 1. 회사 사수분이 풀스택이셨다. 사실 백엔드 개발자라고 말하는게 맞겠지만, 리액트도 어느정도 할 줄 아는 분이셨다. 다른 팀들과의 커뮤니케이션은 원래 사수분이 모두 도맡아 하셨는데.. 이직을 하시고 나선 많은 커뮤니케이션을 담당하고 있다. 웹개발자가 아닌 다른 팀원분들은 프론트엔드 / 백엔드에 대한 이해가 딱히 없으셨다. 나한테 백엔드는 너무 먼 영역이라 생각됐지만 ML개발자 분들에겐 웹개발잔데 뭘 분류해? 이런 느낌으로 다가오나 보다. 사수분은 모든 이슈에 대해 다른 팀 팀원들에게 이런 저런 이유들을 잘 설명해주셨다. 하지만 요즘 나한테 이런 저런 질문을 해주시다 보면 나는 종종 "이건 백엔드 문제라.. 다른 분한테 여쭤보세.. 공감수 1 댓글수 0 2025. 1. 9.
신입 FE 개발자로의 취업, 취준을 돌아보며 코드스쿼드를 수료하고 약 1년의 시간이 지났다. 취준이라는 핑계로 그 동안 어떠한 회고도 하지 않았는데, 이제 입사일이 확정이 되어 마음의 어느정도 여유를 찾아 지난 여정을 정리해보고자 한다. 돌아볼 회 回 , 돌아볼 고 顧 다른 개발자 분들의 블로그를 돌아다니다 보면, '회고' 라는 단어를 많이 접한다. 회고는 어떤 뜻일까? 일반적으로 회고回顧 와 회상回想은 비슷한 의미로 쓰인다. 나는 한자를 잘 모르지만 회상은 의미 그대로 지나간 일을 돌이켜 생각해본다는 뜻인 반면, 회고는 과거를 돌아보며 마음에 새기고 반성한다는 의미가 더해져있다고 한다. 많은 시행착오가 있었다. 개발에 대한 공부법에도, 나라는 사람의 가치관을 정립하는 데에도 일직선으로 걷진 못했다. 학창 시절에 시험을 보고나서 틀린 문제를.. 공감수 1 댓글수 0 2024. 7. 2.
이슈트래커 (5) Vite 전환하기 들어가며 이슈트래커는 webpack으로 구성돼있었다. CRA의 너무나도 느린 dev server 구동 속도를 개선하고자, 또 번들러를 학습하려는 목적으로 직접 webpack으로 개발 환경을 구성했었다. webpack으로 구성된 환경은 CRA와 비교했을 때 어느정도 차이는 있었다. 약 12초 정도 걸리던 dev server 구동 시간을 9초대로 줄일 수 있었다. 하지만 요즘 CRA는 새로운 프로젝트에서 아무도 사용하지 않고, 다른 프로젝트에서 직접 webpack을 구축하는 경우는 적었다. Next가 아닌 이상 대부분 vite를 이용해 프로젝트 환경 설정을 했다. 다른 프로젝트에서 vite의 개발 서버 시작 시간은 굉장히 짧다. webpack과 비교해서 짧은 수준이 아닌 10배 정도의 차이를 보인다. .. 공감수 0 댓글수 0 2024. 6. 8.
오놀 (3) 최적화 들어가며기존에 리액트로 만들어졌던 오놀을 넥스트로 포팅을 하면서, 그리고 웹 성능 지표에 대해 학습을 했기에 성능을 측정해보고 개선점이 있는 곳들은 개선을 해보고 싶었다. Lottie 파일 최적화하기포텐데이에서 진행했던 프로젝트였기에 거의 일주일 안되는 기간동안 프로젝트를 만들어야 했다. 랜딩 페이지의 애니메이션을 디자이너분이 많이 고심하면서 수정사항이 잦았기에 매번 복잡한 애니메이션의 CSS를 수정하는게 부담으로 다가왔다. 디자인 수정 요구 사항을 빠르고 정확하게 반영하기 위한 방법이 없을까 찾아보다가 로띠를 사용하는게 가장 적절하다는 생각이 들었다. 하지만 포텐데이는 꽤 예전에 진행했고, 지금은 다들 바쁘시기에 디자이너 분에게 로띠 파일의 png 파일을 webp로 변경해달라고 말씀 드리기 어려웠다... 공감수 0 댓글수 0 2024. 6. 3.
오놀 (2) 테스트 들어가며오픈소스에 컨트리뷰트를 하면서 테스트 코드의 중요함을 느낀적이 있다. 내가 진행한 프로젝트와는 비교할 수 없이 많은 코드양과 사용자 수. 내가 작성한 코드의 사이드 이펙트가 미칠 영향을 가늠하기가 어려웠다. 그 때 테스트 코드의 힘을 많이 느꼈다. 내가 작성한 코드가 다른 수백명의 사람이 작성한 코드에 영향을 끼치지 않고 + 내가 수정/구현하고자 하는 부분이 정상적으로 동작하는지에 대한 자신감을 줬다. 오놀에서 접근성 개선 작업을 하며 문득 UI에 어떤 변화가 있진 않을까? 키보드 대응 같은 기능적인 측면을 추가할 때 다른 기능이 잘 동작하지 않으면 어떡하지?라는 불안 요소가 있었다. 오픈 소스에서 내게 자신감을 줬던 테스트. 내가 불안한 포인트들을 테스트를 통해 직접 확인하지 않아도 제거하고 .. 공감수 0 댓글수 0 2024. 5. 31.
오놀 (1) 접근성 개선하기 들어가며 최근에 접근성을 학습하며 뭐랄까 반성을 많이 하게 됐다. 다른 사람에게 도움을 주는 사람이 되고 싶어 (계기가 돈이든, 개인적 만족이든 상관 없이 다른 사람을 돕는게 인간에게 주어진 숙제라 생각했다. 물론 군대에서 한 생각이다.) 프론트 개발자가 됐는데 웹의 보편적인 가치를 무시한 채 너무 기술 그 자체에만 몰두했었다. 다양한 사람이 장애 환경에 구애받지 않고 서비스에 접근하는 것. 가장 중요한 가치를 잊은 채 코딩을 했던건 아닐까. 항상 본질을 잊지 말아야겠다. 선택지 오놀은 여러 페이지에 걸쳐 다양한 선택지를 골라야 한다. 기존에는 어떤 ARIA 태그도 사용하지 않았기에 시각 장애 사용자의 경우 스크린 리더를 통해 접근하면 각 선택지의 선택 여부를 알기 어렵다는 문제가 있었다. 따라서 다음과.. 공감수 0 댓글수 0 2024. 5. 31.
Next Script 컴포넌트 코드 읽어보기 들어가며Next 공식문서에 Script태그를 보면 다음과 같은 설명이 나와있다.beforeInteractive: Load before any Next.js code and before any page hydration occurs.afterInteractive: (default) Load early but after some hydration on the page occurs.lazyOnload: Load during browser idle time.하지만 자꾸 제대로 이해했다는 느낌이 들지 않아서 직접 Next의 깃헙을 들어가 코드를 까봤다. 매번 라이브러리/프레임워크의 코드를 까보려고 시도할 때마다 실패했지만, 언젠간 늘겠지 하는 마음이다. afterInteractive, lazyOnload // .. 공감수 0 댓글수 0 2024. 5. 20.
React Server API 알아보기 (feat. edge 환경) RenderToStringreact-dom/server 모듈에서 제공하는 renderToString 메서드는 React 트리를 HTML 문자열로 렌더링한다. 자세히 알아보기 전에 간단한 API 사용법은 다음과 같다.// renderToString(reactNode, options?) // reactNode는 HTML로 렌더하려는 리액트 노드를 의미한다.// options는 서버 렌더에서 사용될 옵션들을 의미한다. // 옵션 중 identifierPrefix의 경우 hydrateRoot에 사용될 prefix와 같아야 한다.import { renderToString } from 'react-dom/server';const html = renderToString(); 위 예제에서 html 에는 App이 렌더된.. 공감수 0 댓글수 0 2024. 5. 19.
널리 웹 접근성 강의 (KWCAG 24가지 항목) 널리 강의 정리본 웹 접근성이란- 접근성이란? 접근하는 정도를 말한다. 사전적 의미로는 사용자가 어떠한 제품이나 서비스 등에 접근해 편리하게 이용할 수 있는 정도를 뜻한다.- 그렇다면 웹 접근성이란? 어떠한 사용자(장애인, 노인)가 어떠한 기술환경에서도 전문적 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것- 간단히 정리하면 모든 사용자, 모든 기기, 모든 정보- 왜 접근성을 준수해야 할까? 1) 장애인차별금지법 장애 환경- 웹의 창시자의 말: 웹의 힘은 보편성에 있다. 장애에 구애 없이 모든 사람이 접근할 수 있도록 하는 것이 웹의 필수 요소다.- 모든 사람에 장애를 가진 사람도 속함- 장애의 정의: 신체적 또는 정신적 결함이 있는 것뿐만 아니라 정보를 얻지 못하도록 방해.. 공감수 2 댓글수 1 2024. 5. 13.
테스트 알아보기 (Unit, E2E 그리고 Snapshot, Visual Regression) Unit Test 단위 테스트(Unit Test)는 함수나 메서드와 같이 하나의 작은 코드 단위를 테스트한다. 즉 특정 모듈이 목표한 기능을 올바르게 수행하고 있는지 검증하는 절차다. 중요한 점은 다른 코드들은 모두 잘 동작한다는 가정하에 해당 모듈이 잘 동작하는 지를 테스트 한다는 점이다. 가장 간단한 Jest 예제를 확인해보자.function sum(a, b){ return a + b;}it("a+b", () => { expect(sum(1, 3)).toBe(4);} toBe는 Jest의 matcher로, expect가 반환한 "expectation" 객체를 Object.is를 사용하여 테스트한다. Jest가 실행되면 실패한 모든 matcher를 추적하여 오류 메세지를 출력한다. 위의 예제.. 공감수 1 댓글수 1 2024. 5. 9.
SEO 알아보기 (feat. Dynamic Rendering, React-snap) 들어가며 SEO는 Search Engine Optimization의 약자로 검색엔진에서 더 찾기 쉽도록 사이트를 개선하는 프로세스이다. 나한텐 너무 많이 듣고 자주 말해서 마치 잘 알고 있다고 착각이 들지만, 막상 누군가에게 설명하려고 하면 한마디도 나오지 않는 주제이다. 가볍게 그 개념이라도 공부해보고자 한다. 참고로 구글을 기준으로 학습하려고 하며, 해당 문서를 참조하려고 한다. 구글 검색의 작동 방식구글 검색은 웹 크롤러라는 소프트웨어를 사용하는 완전히 자동화된 검색엔진이다. 웹 크롤러는 정기적으로 웹을 탐색하여 구글 색인(index)에 추가할 페이지를 찾는다. 실제로 구글 검색결과에 포함된 페이지의 대부분은 사이트 소유자가 사이트를 검색결과에 포함하기 위해 직접 제출한 것이 아닌, 구글 웹 크롤.. 공감수 1 댓글수 0 2024. 5. 5.
웹 성능 지표 웹 성능 지표에는 어떤 것들이 있을까?가장 유명하고 자료도 가장 방대한 라이트하우스를 기준으로 웹성능 지표를 학습해보고자 한다. 성능 말고도 접근성, PWA, SEO에 대한 측정도 가능하다고 한다. 아래는 라이트하우스에서 측정 기준에 대한 가중치를 나타낸 표이다 (버전 10기준). 들어본 지표도 있고, 처음 보는 지표도 있다. 하나하나 조금씩 알아가보자. FCP (First Contentful Paint)FCP는 사용자가 페이지로 이동한 후 브라우저가 첫 번째 DOM 컨텐츠를 렌더링하는 데 걸리는 시간을 측정한다. 페이지의 이미지, 흰색이 아닌 , SVG는 DOM 컨텐츠로 간주되면 iframe 안의 모든 요소는 포함되지 않는다. 참고로 라이트하우스는 HTTP 아카이브의 실제 데이터를 기반으로 성능 지표.. 공감수 2 댓글수 0 2024. 5. 2.
시멘틱 마크업, 그리고 WAI-ARIA 들어가며 종종 프론트엔드 개발을 공부하면서 WAI ARIA라는 용어를 마주하게 됐는데, 접근성과 관련있다는 정도만 알고 그 이상은 알지 못했다. 최근에 입문하기에 적절해 보이는 글을 발견해서, 가볍게 정리해보고자 한다. 참고로 해당 글에서 시멘틱 마크업에 대한 내용은 없지만, 좀 더 기술 흐름을 종합적으로 파악하기 위해 시멘틱 마크업 내용을 추가하였다. 시멘틱 마크업 HTML에서 h1 요소는 시맨틱 요소로, "페이지 최상위 제목"이라는 역할(또는 의미)을 텍스트에 부여한다. 기본적으로 대부분의 브라우저의 사용자 에이전트 스타일시트는 제목처럼 보이도록 큰 글꼴 크기로 h1의 스타일을 지정한다. (물론 원하는 대로 스타일을 지정할 수도 있다.) 반면에 어느 요소도 최상위 제목처럼 보이게 만들 수도 있다... 공감수 1 댓글수 0 2024. 5. 1.
SSR, CSR, SSG, ISR... 뭘 써야할까? 리액트만 배운 분들은 PHP를 배워보세요즐겨보던 개발자 유튜브가 있다. 그냥 분위기만 봐도 고수라는게 느껴진다. 리액트만 배운 분들은 PHP를 배워보세요라는 어쩌면 나한텐 조금 자극적인(?) 영상을 보게 됐는데, 이분이 말하고자 하는 요지는 간단하다. 과거의 기술을 알아야 현재의 기술을 이해한다. 그렇다고 새로운 기술을 배울때마다 1990년으로 돌아가 모든걸 경험해볼 수는 없다. 하지만 Next를 공부하는 요즘 적어도 내가 왜 이 기술을 쓰는지는 이해하고 사용하고자 이런 도입부를 썼다. 한상훈님 유튜브 제목이랑 무슨 관계지? 그냥 의식의 흐름이다.SSR 학부에서 웹 개발을 수강신청하고 리액트나 스프링 같은걸 배우나? 기대하며 수업을 들었지만 var을 사용하는 js와 jsp를 배운 경험이 문득 생각.. 공감수 1 댓글수 0 2024. 4. 23.
클린 아키텍쳐 이슈 트래커 (4) 공용 컴포넌트 나는 그동안 재사용 가능한 공용 컴포넌트를 만들었나? 코드스쿼드에서 했던 프로젝트를 곰곰히 생각해보면 내가 어떤 컴포넌트를 과연 재사용했는가?에 대한 대답은 NO 였다. 물론 내 기준에 적절한 크기로 컴포넌트를 분리는 했지만 과연 공용 컴포넌트 폴더에 넣어둔 공용 컴포넌트가 정말 공용이었을까? 어떻게 하면 컴포넌트를 재사용 가능하게 사용할 수 있을까? 이 글이 정말 큰 도움을 줬다. 코드스쿼드를 다닐 때도 읽었던 글인데, 그 당시엔 전혀 공감되지 않았다. 코드스쿼드 수료 후에 리액트를 다시 공부하고 읽어보니 이제는 조금 이해했다. 아직 그 행간을 모두 이해하지는 못했지만 컴포넌트를 나누는 나만의 기준을 세우는데 가장 큰 도움을 준 글이다. 도메인과 분리된 공용 컴포넌트 1) 이슈 목록을 표시하기 위한 테.. 공감수 3 댓글수 0 2024. 3. 19.
클린 아키텍쳐 이슈 트래커 (3) 웹팩 dev mode 에선 어떤 것이 중요할까? 웹팩의 dev mode에 대해 먼저 말해보고자 한다. 어떤 점을 가장 중요시 해야할까? 바로 빌드 시간일것이다. production mode는 번들 사이즈의 최소화가 가장 중요한 점이지만, dev mode에선 번들 사이즈를 최소화하기 위해 여러 로더를 넣어 빌드 시간을 증가시키는 일을 줄여야 한다. 다음과 같이 dev mode를 설정했다. const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const Dotenv = require('dotenv-webpack'); const ReactRefreshWebpackPlugin = require('@pmmmwh/re.. 공감수 1 댓글수 2 2024. 3. 18.
클린 아키텍쳐 이슈 트래커 (2) 타입스크립트 실제 코드를 예제로 사용하려다, 정리하고자 했던 개념들에 오히려 혼돈만 주는 것 같아 예제를 각색했습니다. Type vs Interface Typescript 문서나 Type과 Interface를 비교한 글을 봐도 개인 기호나 팀 컨벤션을 따를 뿐 명확한 기준점은 찾지 못했다. 하지만 Effective Typescript에서 내 기준으론 가장 정답에 가까운 기준을 보게 됐는데, 바로 declaration merging 이다. interface IState { name: string; capital: string; } interface IState { population: number; } const wyoming: IState = { name: 'Wyoming', capital: 'Cheyenne', p.. 공감수 1 댓글수 1 2024. 3. 17.
클린 아키텍쳐 이슈 트래커 (1) 아키텍쳐 어떤 관심사들이 있을까? 프로그램에는 다음과 같은 관심사들이 보통 존재한다. 1. 뷰를 그리기 위한 렌더링 로직 2. 비즈니스 로직 3. 네트워크 요청 이런 관심사에 따라 크게 세가지 레이어로 나누었다. 1. Domain layer: Entity, Repository Interface, Use Case 2. Data layer: Repository Impl, Data Source 3. Presentation layer: 리액트 코드 Domain layer 도메인 레이어에는 엔티티가 존재했다. 추구했던 방향은 Class로 entity를 나타내고 해당 entity에서 수행해야 하는 비즈니스 로직을 메서드로 표현하고 싶었다. 하지만 2가지 문제점이 있었다. 1. 앱 자체가 어찌보면 단순한 CRUD 앱이었기 때.. 공감수 1 댓글수 0 2024. 3. 14.
클린 아키텍쳐 이슈 트래커 (0) 계기 아키텍쳐 코드스쿼드에서 팀 프로젝트를 진행하면서 처음 사용했던 리액트. 팀 프로젝트 당시엔 데모도 해야하고 백엔드가 제공해준 API를 화면에 그리지 못하면 민폐라 생각해 마구잡이로 컴포넌트를 짜고 어떻게든 화면만 그렸었다. 하지만 항상 마음 속에 무언가 찜찜함이 있었다. 이렇게 지저분한 코드로 어떻게든 화면만 그려내는건 내가 원했던 개발자로서의 모습이 아니었다. 리액트를 처음 배운다는, 팀원들에게 화면을 보여줘야 한다는 핑계 뒤에 숨어 마구잡이로 컴포넌트를 짜고 있다가 문득 이런 생각이 들었다. 지금 내가 하는 프로젝트가 그렇게 큰 프로젝트도 아닌 것 같은데, 만약 회사에서 더 큰 프로젝트를 만들 때 내가 수많은 수정사항들을 다 처리할 수 있을까? 주어진 피그마대로 화면을 그리는건 쉽다. 하지만 내가 걱.. 공감수 2 댓글수 1 2024. 3. 13.
react query v5 상태값들에 대한 정리 useQuery의 반환값들 크게 두 범주로 생각할 수 있는데, 캐쉬된 데이터의 상태와 데이터 페칭에 대한 상태로 생각하면 쉽다. 데이터에 대한 상태값 - status === ‘pending’ 쿼리에 데이터가 없을 경우 isPending - status === 'error' 쿼리에 오류가 생긴 경우 isError - status === 'success' 쿼리가 성공적이었고 데이터가 사용 가능한 경우 isSuccess 페칭 상태에 대한 값 - fetchStatus === 'fetching' - 쿼리가 페칭 중일때 - fetchStatus === 'paused' - 쿼리는 페치를 하고 싶지만, 일시중지 됐을때. - fetchStatus === '.. 공감수 1 댓글수 1 2023. 11. 16.
Facade 패턴 개요 파사드는 라이브러리, 프레임워크 또는 기타 복잡한 클래스 집합에 단순화된 인터페이스를 제공하는 디자인 패턴이다. 해결하려는 문제 정교한 라이브러리나 프레임워크의 다양한 객체들을 다룰 때 모든 객체를 초기화하고, 종속성을 추적하고, 메서드를 올바른 순서로 실행하는 등의 작업을 수행해야 한다. 결과적으로 클래스의 비즈니스 로직이 써드 파티 라이브러리의 구현 세부 사항과 긴밀하게 결합되어 유지 관리가 어려워지게 된다. 해결법 파사드는 복잡한 서브시스템에 간단한 인터페이스를 제공하는 클래스다. 파사드는 서브시스템을 직접 사용하는 것보다 제한된 기능을 제공할 수 있다. 하지만 클라이언트가 실제로 중요하게 생각하는 기능만 포함한다. 파사드는 수십 개의 기능이 포함된 정교한 라이브러리와 앱을 통합해야 하지만 일.. 공감수 1 댓글수 0 2023. 10. 13.
클린 아키텍쳐 6~7장 정리 6장 아키텍처를 고려할 때 변수의 가변성을 염려할까? 대답은 단순하다. 경합race 조건, 동시 업데이트concurrent update 문제가 모두 가변 변수로 인해 발생하기 때문이다. 다시 말해 우리가 동시성 애플리케이션에서 마주치는 모든 문제, 즉 다수의 스레드와 프로세스를 사용하는 애플리케이션에서 마주치는 모든 문제는 가변 변수가 없다면 절대로 생기지 않는다. 변수를 변경하는 컴포넌트와 변경하지 않는 컴포넌트를 분리해야 한다. 이렇게 분리하려면 가변 변수들을 보호하는 적절한 수단을 동원해 뒷받침해야 한다. 현명한 아키텍트라면 가능한 한 많은 처리를 불변 컴포넌트로 옮겨야 하고, 가변 컴포넌트에서는 가능한 한 많은 코드를 빼내야 한다. 이벤트 소싱 계좌 잔고를 변경하는 대신 트랜잭션 자체를 저장한다고.. 공감수 1 댓글수 0 2023. 10. 12.
클린 아키텍쳐 1장~5장 정리 1장 설계 design와 아키텍쳐 사이에는 어떤 차이가 있을까? 아무런 차이가 없다. 아키텍처는 저수준의 세부사항과는 분리된 고수준의 무언가를 가리킬 때 흔히 사용된다. 설계는 저수준의 구조 또는 결정사항 등을 의미할 때가 많다. 설계의 목표는? 필요한 시스템을 만들고 유지보수하는 데 투입되는 인력을 최소화하는 데 있다. 2장 모든 소프트웨어 시스템은 이해관계자에게 서로 다른 두 가지 가치를 제공한다. 행위와 구조가 바로 그것이다. 대부분의 프로그래머는 행위(시스템이 동작하도록 하는 것)가 자신이 해야 할 일의 전부라고 생각한다. 소프트웨어라는 단어는 부드러운soft과 제품ware이라는 단어의 합성어이다. 제품이라는 단어는 상품product를 뜻하며, 부드러운soft이라는 단어는 행위를 쉽게 변경할 수 .. 공감수 1 댓글수 1 2023. 10. 11.
Context는 상태 관리 툴이 아니다 다음의 글을 번역했습니다. 학습을 위해 번역하여 많은 부분을 생략하였습니다. https://blog.isquaredsoftware.com/2021/01/context-redux-differences/ Context와 Redux 이해하기 어떤 도구든 올바르게 사용하기 위해, 다음을 이해하는 것이 중요하다. 도구의 목적 도구가 해결하고자 하는 문제 언제 그리고 왜 이 도구가 생겨났는지 또한 현재 자신의 애플리케이션에서 해결하려는 문제가 무엇인지 이해하고, 이 문제를 해결하기 위한 도구를 선택하는 것 또한 중요하다. 컨텍스트와 리덕스에 대한 대부분의 혼란은 이러한 도구가 실제로 어떤 기능을 하는지, 어떤 문제를 해결하는 지에 대한 이해 부족에서 비롯된다. 따라서 실제로 언제 사용해야 하는지 알기 위해서는 먼저.. 공감수 2 댓글수 0 2023. 9. 24.
옵저버 패턴에서의 Memory Leak 해결하기 (WeakRef, FinalizationRegistry) 코드스쿼드 과정 중 바닐라 자바스크립트로 옵저버패턴을 통해 데이터 바인딩을 시도한 적이 있다. 하지만 Observable이 관리하는 observers에 이미 사용되지 않는 observer들이 누적해서 쌓이는 문제가 있었다. 명시적인 unsubscribe로 제거해주면 되지 않을까? 옵저버 패턴의 메모리 누수 (memeory leak)에 대해 검색해 봤을 때 많은 글에서는 다음과 같은 해결법을 말하고 있었다. 참고로 TS를 사용한다면 Updatable 인터페이스를 정의했을테지만, 글의 간략함을 위해 JS로 작성한다. class Observable { constructor() { this.observers = []; } subscribe(observer) { this.observers.push(observer.. 공감수 1 댓글수 1 2023. 9. 15.
차세대 모듈 번들러 기존 번들러의 어떤 점이 문제였을까? 기존의 번들러들 (Webpack, Parcel, Rollup, … )들은 기존 모듈 시스템들의 문제점을 해결해주었지만, 이제는 속도가 문제가 되었다. Vite의 공식문서에서는 이런 차세대 번들러가 어떤 문제를 해결하는지 명확히 알려주고 있다. “하지만 애플리케이션이 점점 더 발전함에 따라 처리해야 하는 JavaScript 모듈의 개수도 극적으로 증가하고 있습니다. 심지어 수천 개의 모듈이 존재하는 것도 대규모 프로젝트에서는 그리 드문 일이 아닙니다. 이러한 상황에서 JavaScript 기반의 도구는 성능 병목 현상이 발생되었고, 종종 개발 서버를 가동하는 데 비합리적으로 오랜 시간을 기다려야 한다거나 HMR을 사용하더라도 변경된 파일이 적용될 때 까지 수 초 이상 소.. 공감수 1 댓글수 0 2023. 8. 13.
ESM의 동작원리 ESM의 동작 방식을 매우 잘 설명한 글이 있다. 아래의 이 글을 번역하였다. (토스 기술 블로그에 더 잘 번역한 글이 있다.) https://ui.toast.com/weekly-pick/ko_20180402 ESM의 동작 방식 모듈을 사용하여 개발할 때 import문에 의하여 의존성 그래프가 생성되게 된다. entry point로 지정한 파일로부터 import 문을 쭉 따라가면 나머지 모든 코드들을 찾을 수 있게 된다. 하지만 파일 자체는 브라우저가 해석할 수 없다. 따라서 파일들을 Moudle record라고 하는 자료구조로 변경해야 한다. 그 후에 Module record를 Module instance로 전환하게 된다. Module instance는 코드와 상태라는 두 가지를 결합하게 된다. 코드는.. 공감수 1 댓글수 0 2023. 8. 6.
코드스쿼드 4주 회고 1주차 cs 과정이 끝나고 오프라인으로 처음 동료들의 얼굴을 봤던 1주차. 모든게 어색했다. 적응하느라 바빴고 cs 과정동안 javascript 코드만 작성하다 html, css를 다시 작성하려니 꽤나 걱정이 앞섰다. 사람들이랑은 어색해 질문도 하지 못했고 내가 기대한 코드스쿼드의 모습과는 달라서 잠깐의 후회도 있었던 듯 (물론 현재는 단 1의 후회도 없다. 혼자 했으면 못했을 공부를 너무 많이 한다). 지금은 말을 너무 많이해서 문제지만..ㅋ 1주차때 난 어떤걸 학습했고 어떤 문제들을 마주쳤었지? 기억을 되살려보려고 한다. 풀리퀘 언제나 손에 땀을 쥐게 하는 git. 나름 강의도 듣고 꽤 다양한 명령어 옵션들도 노션에 정리해놨는데 막상 내 프로젝트에서 revert나 reset을 적용하기 전엔 긴장이 돼.. 공감수 1 댓글수 1 2023. 4. 2.

문의안내

티스토리
로그인
고객센터

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