독학 개발자의 기록

서비스 제목: 안전의증서도구: 웹, (펜이 없는) 태블릿, 모바일타겟: 계약서 작성 빈도가 높은 직장인 일상 생활에서 계약서를 종이로 작성하는 경우가 많다. 그러나, 종이로 작성하는 경우에도 파일로 남겨야 하는 경우가 있는데, 이 때, 종이로 작성하고 스캔을 하여 파일로 저장하는 복잡한 단계를 거쳐야 하는 번거로움이 있다. 이를 대체할 수 있도록 온라인에서 계약서를 작성하는 서비스를 계획하였고, 피그마 툴을 통해 디자인 스케치를 진행하였다.  서비스에 접속하여 처음으로 접하는 화면은 서비스를 이용하는 데 있어서 책임은 사용자에게 존재한다는 확인 페이지이다. 확인하지 않으면 페이지를 접속하지 못하고, 확인 버튼을 눌러야 계약서를 작성할 수 있는 사이트로 이동할 수 있다.  확인 버튼을 눌러 계약서를 작성할..

`단일 책임 원칙(Single Responsibility Principle)`을 이제 대부분 알고 있을 것이다. 아니면, 한 번쯤 들어봤을 것이다. `단일 책임 원칙`은 각 소프트웨어 모듈은 변경의 이유가 단 하나여야 한다는 규칙을 가지고 있다. 즉, 하나의 모듈은 하나의 사용자 또는 이해관계자에 대해서만 책임을 져야 한다는 것이고, 하나의 요소가 하나의 변경의 이유를 갖게 하라는 말이다. 쉽게 말해, 대표가 1명인 개발자와 대표가 4명인 개발자 중 대표가 4명인 개발자는 어떻게 개발해 나가야 하는지 개발 방향이 4명의 대표마다 달라 혼란스러울 것이다. 이를 방지하자는 것이다. 그리고 여기에서 `응집성`이 중요한데, 이는 단일 액터를 책임지는 코드를 함께 묶어주는 힘을 말한다. 만약, 다음과 같은 요구사..

DOMReact의 '가상 DOM(Virtual DOM)'과 '일반 DOM(Document Object Model)'은 웹 페이지 렌더링 방식에서 차이점을 가지고 있다. 일반 DOMDOM은 웹 페이지의 구조를 표현하는 객체 모델로, HTML 문서를 객체 형태로 변환해 자바스크립트로 페이지의 요소를 수정하거나 조작할 수 있게 만든다. 브라우저는 DOM을 기반으로 페이지를 그리고, DOM 트리가 변경되면, 브라우저는 전체 페이지를 다시 렌더링하여 변경 사항을 반영한다. 가상 DOMReact의 가상 DOM은 React에서 사용하는 메모리 내의 DOM의 복사본이다. 실제 DOM에 접근하기 전 가상 DOM에서 변화를 계산하고, 최적화된 방식으로 실제 DOM을 업데이트 한다. React는 컴포넌트의 상태가 변경되면 ..

온라인 강의나 블로그 또는 책을 읽다보면 "중복된 코드는 제거해야 한다", "재사용성을 키워야 한다"는 말을 여러 번 들을 수 있다. 나도 강의를 듣고, 블로그를 읽고, 그러다 보니 이와 관련된 배움을 얻었고, 생각도 하고 있고, 글도 쓰기도 했다. 그러나 정작 제대로 느껴본 적이 없었다. 이것이 얼마나 중요한 지 제대로 느껴본 적이 없는 상태로 생각하고, 글만 작성하고 있었다. 그러다, 이번에 간단한 개인 프로젝트에서 기능 함수를 재사용하는 경험을 하면서 "이래서 필요하다고 한 것이구나"라고 바로 느낄 수 있었다. 간단하게 예를 들어 설명하자면, 아래와 같은 검색 기능을 하는 코드가 있다고 보자.(제대로 된 코드가 아닌 예시 코드)function SearchBar() { const [searchT..

지금까지 페이지를 반응형으로 만들기 위해서는 '미디어 쿼리'를 사용해야 하는 줄 알았다.아니, 정확히 말하면 '미디어 쿼리'만 있는 줄 알았다. 미디어 쿼리를 제외한다면 뷰포트 크기를 조절하기 위해 `rem`, `vw`, `vh` 단위 또는 `flex`, `grid`만 사용해야 하는 줄 알았다. 그러나, 이와 관련된 번역된 글을 보고 나서 '미디어 쿼리'가 아닌 다른 방법에 대해 알게 되었다.  [번역] CSS 미디어 쿼리, 그 너머로어떤 방식으로 반응형 웹을 구축하고 있나요? 우리에게 가장 친숙한 방법은 CSS 미디어 쿼리일 것입니다. 이 글에서는 미디어 쿼리는 여러 도구 중 하나일 뿐이고, 반응성을 높이는 다른 좋은 선velog.io 위의 글을 간략하게 요약하자면, 미디어 쿼리가 실용적인 것은 맞지만..

React에서 컴포넌트는 쉽게 말해 '함수'를 말한다. 함수는 값이 변경되는 등 변화가 생겼을 때, 다시 호출된다. 문제는 'State'의 값이 호출될 때마다 초기화된다는 것이다. 간단한 상황일 때는 문제가 없으나, 복잡한 계산과 같은 경우일 때는 성능에 문제가 발생하게 된다. 이 때, 내용을 기억하라는 의미의 'Memoization'을 담은 'useMemo'를 사용한다면, 매번 호출되는 것이 아닌 해당 함수에 변화가 발생했을 때만 다시 렌더링되도록 하는 것이다. 아래의 예시 코드를 보면, const expansiveCalculate = (numbers) => { console.log("계산중..."); return numbers.reduce((acc, curr) => acc + curr, 0); }; ..

퀵뉴스라는 프로젝트를 만들면서, 오픈 API의 데이터를 가져오기 위해서 나는 "useQuery"를 사용했었다. 이 이전에는 "axios.get()"으로 데이터를 가져왔으나, 조금 더 나은 방법으로 실무에서도 자주 사용하고 있는 "useQuery"를 사용해서 데이터를 가져오도록 했다. 그러나, 이번에 "RTK Query"에 대해 알게 되면서 "둘 중에 무엇이 더 나을까?"에 대해 알아보기 시작했고, 데이터를 "RTK Query"로 가져오는 것이 "useQuery"로 가져오는 것보다 장점이 더 많고, 실무에서도 더 자주 사용하고 있다고 하는 정보를 알게 됐다. 간단하게 "useQuery"보다 "RTK Query"가 가지고 있는 장점에 대해 말하자면, useQuery보다 더 간결한 코드 자체적인 캐싱 기능 에..

올 해 1월, 원티드 프리온보딩 프론트엔드 챌린지를 수강하는 기간동안 디스코드에서 많은 사람들의 경험을 공유받았다. 이 때, 사람들이 모달 생성에 대해 이야기를 나눴고, 이 때, 한 사람이 "createPortal()"에 대해 언급했다. 모달창을 생성하기 위해서 한 가지 방법이라고 추천을 해준 것이다. 이 당시 나는 모달창 생성을 구현하고 있었고, "createPortal()"를 처음 알게 되면서 궁금함이 생겨 공식 문서를 찾아봤다. 생각보다 여러 가지 활용법이 있었고, 그 중 하나가 모달이었다. 구현도 생각보다 단순했다. 그렇지만, 당장 활용할 가치가 있는지 의문이 들었다. 왜냐하면, 개발중인 프로젝트는 모달 컴포넌트를 재사용할 필요가 없는 상황이었고, 예시 코드를 봤을 때, 오히려 컴포넌트의 개수만 ..