큰 꿈은 파편이 크다!!⚡️

눈팅하던 커뮤니티에서 “생각없이 코딩하는 사람들이 리액트 철학 무시하고 개발” 이라는 표현을 보았다. 그리고 스스로에게 리액트의 철학을 물어보니 대답할 수가 없었고.. ㅎㅎ 나는 생각없이 남들 다 쓰니까 쓰는 기술을 사용하는 사람이 된 것 같았다. 예전에 면접을 볼 때에도 어떤 기술을 왜 썼는지, 그 특징이나 장점이 뭔지에 대해 어버버 거렸던 기억이 떠올라서 원래 쓰려던 글을 미뤄두고 작성해본다. 면접용으로 외울 수는 있겠지만 정말 이런 것을 아는 게 왜 필요할까? 에 대한 내 생각도 정리해보았다. 어떤 기술, 예를 들면 리액트를 서비스 관점에서 본다면 다른 제품들이 그러하듯 어떤 문제를 해결하기 위해 나왔다. 그렇다면 그 제품은 해당 문제 해결에 최적화되어 있고 앞으로의 발전 방향도 그에 맞춰져 있을 ..

살면서 위와 같은 팝업을 본 적이 있을 것이다. 오래 켜둔 페이지에 다시 들어가거나, 새로고침을 했을 때 주로 발생한다. 그리고 이러한 팝업에 불편함을 느끼는 사용자들도 있다. 이 글에서는 회사에서 ASP.NET을 개발하면서 만나게 된 이 Resubmit 문제와, 이를 해결하기 위한 디자인 패턴인 PRG 패턴에 대해 간단하게 설명하고, 어떻게 적용하는지에 대해 알아본 내용을 기록하고 있다. 😱 내가 겪은 문제 만들고자 하는 것 ASP.NET을 사용하는 웹사이트로 로그인 시도 시, 비밀번호를 몇 번 틀렸는지 알려주는 오류 메세지를 띄우고자 함. 사용자가 비밀번호를 잘못 입력하면 (POST) 서버에서 “비밀번호를 1회 틀렸습니다” 라는 문구와 함께 페이지를 새로 그려냄. (이것을 Content를 반환한다고 ..

들어가며: 나의 기술부채 💰 리액트를 배울 때 정말 기본으로 포함되어있는 useMemo, useCallback 훅과 React.memo는 재사용과 리렌더링 방지를 통한 성능 향상을 야기한다고 알려진 함수들이다. 이 주제에 대해 처음 학습할 때 성능 향상에 대한 효과까지는 이해를 했었으나 항상 성능을 향상시키는 것이 아니라는 글을 보고서는 이해가 안되어서 그냥 사용을 안해버렸는데.. 이번 기회를 통해 간단하게나마 전체적인 정리를 해보려 한다. useMemo: 연산 값 재사용 리액트에서 제공하는 useMemo 훅은 메모이제이션Memoization 이라는 기법을 통해 기존에 계산했던 결과를 저장하여 필요 시 재사용하므로써 불필요한 연산을 줄여 성능을 향상시킨다. 반대로, 항상 바뀌는 값이라면 결과를 재사용할 ..

꽤 영향력이 있는 문제를 수정한 뒤 리액트 앱을 배포했을때, 업데이트된 내용이 보이지 않는다는 피드백을 듣고는 식은땀이 났던 기억이 있다. 당시 급하게 문제를 해결한 뒤 다시는 발생하지 않을 것이라 생각했는데 같은 피드백을 또한번 마주하게 되어 캐시로 인해 두 번의 고통을 겪은 경험을 공유해보려 한다. 개발환경 React Typescript Webpack5 IIS 📌 캐싱Caching이란? 웹사이트 접근 시 로드하는 여러 리소스(css, js, 이미지파일 등)를 ‘캐시Cache’로 저장하여, 추후 해당 페이지에 재방문했을 때 리소스 로딩 속도를 줄이는 기법 문제 1. 항상 main.js를 사용한다 처음 겪었던 문제의 원인은, index.html의 에서 호출하는 js파일의 이름이었다. 업데이트한 main...

15. 동적 데이터에 인덱스 시그니처 사용하기 JS 객체는 문자열 키를 타입의 값에 관계없이 매핑한다. TS에서는 타입에 인덱스 시그니처를 명시하여 매핑을 표현할 수 있다. type Rocket = {[property: string]: string}; const rocket: Rocket = { name: 'Falcon 9', variant: 'v1.0', thrust: '4,940 kN', }; // OK 인덱스 시그니처 [property: string]: string 의 의미 키의 이름: 키의 위치만 표시하는 용도 키의 타입: string | number | symbol이어야하지만 보통 string 사용 값의 타입: 무엇이든 단점도 있다. 잘못된 키를 포함한 모든 키를 허용하게 되거나, 특정 키가 필..

2장 (2)를 작성하며.. 사실 2장에 들어가면서부터 꽤 어려운 개념들이 나오는건지 책을 읽어나가기가 쉽지않았다 ㅎㅎ 개념도 그렇고 한글 문장 자체도 쉽게 이해되지는 않았다. 무엇보다 몇 주만에 다음 장을 다시 읽다보니 분명히 이해했고, 너무 감명깊게 읽었던 앞 장의 내용들이 기억이 나지 않았다.. 역시 읽을때 이해하는 것만으로는 머릿속에 들어오지 않나보다. 11. 잉여 속성 체크의 한계 인지하기 구조적 타이핑 관점에서 보면 아래 코드는 오류가 나타나지 않아야 한다. 그럼에도 불구하고 나타나는 이유는 잉여 속성 체크가 수행되었기 때문이다. 타입이 명시된 변수에 객체 리터럴을 할당할 때, TS는 해당 타입의 속성이 있는지, 그리고 그 외의 속성은 없는지 확인한다. interface Room { numDoo..

2장 타입스크립트의 타입 시스템 (1)편에 들어가며 2장은 양이 생각보다 아주 매우 너무나 많아서 부득이하게 세 챕터로 나눠서 작성한다. (페이지 수가 1장의 거의 세 배) 6. 편집기를 사용하여 타입 시스템 탐색하기 TS를 설치하면 타입스크립트 컴파일러(tsc), 단독으로 실행할 수 있는 TS서버(tsserver)를 실행할 수 있다 - TS서버에서도 설정을 통해 편집기 자동완성, Go to Definition 등의 기능을 꼭 사용하자! - 편집기에서 함수 또는 변수 위에 커서를 올리면 추론된 타입이 나타난다. 만약 기대한 타입과 다르다면 타입 선언을 직접 명시하자 7. 타입이 값들의 집합이라고 생각하기 🧐 이 아이템은 엄청 헷갈렸다.. - 코드가 실행되기 전, 즉 TS가 오류를 체크하는 순간에 변수는 ..

들어가며 타입스크립트는 지금 회사에서도 사용하고 있지만 굉장히 얕은 지식과 스킬들로 연명하고 있는 느낌을 지속적으로 받았다. 사실 학습해야할 게 많다보니 우선순위에서 밀리기도 하던 중에.. 이펙티브 타입스크립트 스터디에 참여하게 되었다. 확실히 오프라인 스터디를 하면 책임감이 생겨 더 열심히 하는 것 같다 ^^ 스터디를 계기로 학습 내용을 기록하고자 한다. ⚠️ - 이펙티브 시리즈는 초급자를 대상으로 하는 책이 아니다. 책의 서문에도 나와있듯이, 초급자/중급자가 전문가로 발전할 수 있을 정도의 난이도를 제공한다. - 책의 모든 내용을 요약하는 것이 아닌, 읽어보며 정리하고 싶은 내용+스터디 내용+내가 궁금해서 찾아본 내용 등, 책을 기반으로 재구성한 혼합체..에 가깝다. - 이하 작성의 편의를 위해 타입..

책 "클린 코드"에서는 의미 있는 이름을 지어야 하는 이유와 이름을 의미있게 짓는 방법에 대해 한 챕터에 걸쳐 설명하고 있다. 입사하거나 팀 단위 프로젝트를 할 때에도 네이밍 컨벤션을 정해서 따라야 하는 만큼, 이름을 잘 짓고 바르게 이용하는 것은 소프트웨어 개발과 협업에 있어 중요한 요소이며, CSS를 작성할 때에도 예외가 아니다. 올바른 코드 스타일을 적용하면 유지보수하기 쉬운 코드가 되며, 이는 개발 과정의 효율성을 높여준다. CSS 네이밍 방법론 중에서 가장 널리 알려진 BEM에 대해 정리하고, 이제부터 배운 내용을 적용해가며 내 기존 코드들의 CSS 네이밍을 리팩토링해보려 한다.🫡 BEM (Block, Element, Modifier) 👈 SMACSS (Scalable and Modular Ar..

RTSP(Real Time Streaming Protocol)란? IP 카메라(주로 CCTV와 같이 secure한 특징이 있는)에 많이 사용되는 동영상 프로토콜 목표 IP 카메라와 웹브라우저를 직접 연결해서 웹에서 영상을 나타내기 회사 업무 중 하나로 웹 브라우저에서 RTSP 프로토콜을 사용하는 비디오를 재생해야 했다. IP 카메라가 이미 네트워크에 연결되어 있으니 어떻게든 되지 않을까? 🥹 라는 가벼운 마음으로 시작했으나 웹 브라우저에서 RTSP 비디오를 직접 재생하는 것은 불가능하다는 사실을 깨달을 수 있었다. 문제 As a rule, browsers do not support RTSP, so the video stream is converted for a browser using an interme..