고양이발일기

프론트엔드 리팩토링 이야기: styled-components, 컴포넌트화, 그리고 useMemo 와 useCallback을 활용한 최적화 프론트엔드 리팩토링에 대한 내 경험을 좀 공유해보려고 글을 쓰게 되었읍니다. 특히 styled-components를 사용해서 스타일을 어떻게 깔끔하게 관리했는지, 그리고 코드의 재사용성을 높이고 불필요한 렌더링을 줄인 방법에 대해서 얘기해보려고 합니다. Inline-Style에서 styled-components로 먼저, 지금 현재 Habit Project의 대부분의 코드는 inline-style 방식을 많이 썼었습니다. 이 방식은 스타일을 직접적으로 컴포넌트 안에 적는 건데, 이게 왜 문제냐면, 코드가 엄청 지저분해지고, 재사용성이 떨어진다는 큰 단점이 있습니다. 그래..

회사 일과는 별개로 현재 사이드 프로젝트로 진행 중인 Habit Project 에서 이번에 맡게 된 태스크는 무려 "애플리케이션 최적화" 였다. 지금 회사 프로덕트도 얼레벌레 만들고 있는 것 같아서 optimazation을 잘 할 수 있을까 걱정했지만 차근차근 클린코드화 시켜본다면 분명 많은 도움이 될 것 같았다. 1. 모듈화와 컴포넌트 기반 개발 코드 모듈화: 기능별로 코드를 모듈화하여 재사용 가능하고 독립적인 단위로 관리합니다. 이는 코드의 가독성과 재사용성을 높이며, 변경에 대한 유연성을 제공합니다. 컴포넌트 기반 개발: UI를 재사용 가능한 컴포넌트로 분리하여 개발합니다. React, Vue, Angular와 같은 현대 프론트엔드 프레임워크/라이브러리들은 이를 잘 지원합니다. 2. DRY(Don'..

바벨(Babel) 바벨은 최신 JavaScript(ES6+) 코드를 이전 버전의 JavaScript로 변환(트랜스파일)하는 도구입니다. 이를 통해 개발자는 최신 JavaScript 기능을 사용하여 코드를 작성할 수 있으며, 바벨이 코드를 변환하여 구형 브라우저에서도 동작하도록 합니다. 폴리필(Polyfill) 폴리필은 웹 개발에서 브라우저가 기본적으로 지원하지 않는 최신 API나 기능을 사용할 수 있게 해주는 코드 조각입니다. 폴리필을 사용함으로써 개발자는 구형 브라우저에서도 최신 기능을 사용할 수 있게 됩니다. Node.js Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. 이를 통해 개발자는 클라이언트 측(브라우저)뿐만 아니라 서버 측에서도 Jav..

프론트 개발을 하면서 느낀 점이 있다. 데이터 베이스나 클라우드가 없으면 데이터를 저장하기 굉장히 난감하다는 것 … 실제로 얀센에서 파트타임을 하면서 그 쪽에서 요구했던 점이 접속하는 사용자의 단순 정보를 담고 있어줄 수 있냐는 것이었다. 하지만 얀센에서 사용했던 MS Sharepoint 툴에서는 서버를 사용할 수 없으니 안될 것 같다고 했었지만… 생각해보니 웹 스토리지가 있었다. 이렇게 데이터가 노출이나 유실에 예민하지 않은 성격이라면 서버보다는 클라이언트에 담을 수 있다. 하지만 이에도 한계가 있는데, 저장하는 데이터 타입이 string 만 가능하다는 점이다. 이를 극복하는 방법은 JSON 형태로 저장하는 것이다. JSON의 stringify함수로 데이터를 직렬화 해준다음, 읽을 때는 parse함수로..

Uncaught SyntaxError: missing ) after argument list 에러 해결방법 바닐라 JS를 사용하는데 익숙하지 않아서 많이 애먹는 중이다 ㅎㅎ... 프레임워크쓰다가 순정을 쓰려니 기본이 부족하다는 걸 많이 느낀다🥲 문제 코드 document.getElementById('categories').innerHTML += ` ` + e + ` ` 해당 코드는 radio 버튼을 데이터에서 map형식으로 넣어주기 위한 코드이다. 여기서 문제가 되는 부분은 onclick="sortData(` + e + `)" 이 onclick 함수부분이었다. 에러가 난 이유는 parameter로 받는 부분이 string 타입이라 따옴표 처리를 해줘야하는데 따옴표 처리가 안되어서 발생한 에러였다. 그래서..

React MVC (model - view - controller) 패턴 프로젝트가 단순할 때 간단하게 쓸 수 있음 데이터 자료의 양과 화면이 많아질수록 model 과 view 의 수 증가 함 → 데이터 흐름을 읽기 어려움 Redux flux 패턴 데이터 수정이 dispatcher 한 곳에서만 가능 action이 발생→ dispatcher에 의해 store에 변경된 사항이 저장→ view가 변경되는 단방향 패턴 dispatcher : 어플리케이션에서 발생한 action들을 정리해주는 역할 Store : 어플리케이션의 데이터들이 저장되는 장소 Redux의 장점 사용자가 어떤 액션을 했고, 어떤 데이터가 어떻게 변경 되었는지 쉽게 관찰할 수 있다. 이 모든 내용은 기록되고, 개발자는 이전의 특정 상태로 돌아..