2023년 개발자 회고록
2024. 1. 31. 13:21
회고
회사에 입사한지도 이제 만 2년이 되어간다. 블로그에 마지막 글을 작성한지 벌써 3개월이 지났다. 핑계를 대자면 요즘은 새로운 개인 공부로 코드를 작성하거나, 책을 읽거나, 위스키에 시간을 쓰고 있다. 그래도 이렇게 회고록을 남기며 글을 갱신해보려고 한다. 블로그의 조회수는 어느덧 15K를 넘겼다. 한참 블로그를 작성할땐 매일 조회수가 얼마나 올랐나 확인했었는데, 오히려 블로그 작성이 뜸해진 10월부터 조회수가 늘어났다. 프론트 엔드 개발자로 나아가고 있는데 대부분 조회수는 백엔드와 인프라 부분이다. 프론트엔드 관련 매력적인 글을 작성해서 벨런스를 맞춰야겠다. 새로운 프로젝트의 시작 2023년의 프로젝트는 내가 프론트엔드 개발자로써 코드를 작성하는 레벨을 바꿔준 프로젝트였다. 새로운 프로젝트는 사내 솔루..
프로젝트 ESLint 설정 in VSCode
2023. 10. 27. 15:07
Front-End/React
React 프로젝트를 개발할 때 각종 편리했던 기능들에 대해 정리해보려 합니다. 그 중 코드를 깔끔하게 정리해주는 EsLint와 Prettier에 대해 작성해보겠습니다. 정의 ESLint Javascript, JSX의 코드를 분석하여 문법 오류나 안티 패턴을 찾아주거나 일괄된 코드 스타일로 작성하도록 코드 포맷을 만들 수 있는 라이브러리 입니다. 그 중 외부에 오픈되어 있는 코딩 규칙도 사용이 가능한데 유명한 Airbnb, Google 등의 Style을 제공합니다. 아래부턴 VScode를 기반으로 설명합니다. Prettier Prettier는 코드를 읽고 다시 작성하여 코드 스타일을 일관성 있게 맞춰주는 도구입니다. ESLint와 함께 사용할 경우 코드 스타일 관련된 ESLint 규칙을 비활성화하고 P..
검색엔진최적화(SEO)
2023. 10. 22. 20:41
Front-End
검색엔진최적화(SEO) 사람들은 검색결과에서 다음 페이지로 넘어가는 일이 거의 없습니다. 그 중 상위 몇 개의 검색결과만을 보고 하나를 선택하여 클릭합니다. 따라서 아무리 좋은 내용물을 가지고 있더라도 검색엔진에서 상위에 노출되지 않는다면 사람들이 내용물을 찾아보지 않습니다. 검색엔진최적화는 검색엔진에서 상위에 노출되기 위한 방법입니다. 검색엔진은 크롤러라는 프로그램을 통해 웹 페이지를 수집합니다. 수집된 웹 페이지는 검색엔진의 알고리즘을 통해 순위가 매겨집니다. 검색엔진최적화는 검색엔진의 알고리즘을 이해하여 웹 페이지를 구성하는 방법을 의미합니다. 검색엔진의 알고리즘 검색엔진에게 높은 순위를 받기 위해서는 검색엔진의 알고리즘을 이해해야 합니다. 그러기 위해선 유명 포털 구글, 네이버, 다음 등의 검색엔..
메모리 사용량을 줄이는 JS 코드 패턴
2023. 10. 13. 01:11
Front-End/JavaScript
JavaScript에서 메모리 사용량을 효율적으로 관리하면 애플리케이션의 성능을 향상시키고 더 나은 사용자 경험을 제공할 수 있습니다. 이 포스트에서는 몇 가지 JavaScript 코드 패턴을 다루고 있으며, 이를 통해 메모리 사용량을 줄일 수 있는 방법을 설명합니다. Context의 정보가 많은 Closure 클로저는 함수가 자신의 내부가 아닌 외부에서 선언된 변수에 접근하는 것을 뜻합니다. 클로저는 실행할 환경의 변수 스코프를 캡처하여 전달하여 실행할 때 외부 변수를 참조할 수 있게 합니다. 클로저를 통해 함수를 생성할 경우 함수 내부에서 사용되어야 하는 변수들이 메모리에 계속 남아있게 되어 메모리에서 손해를 볼 수 있습니다. 대량의 목록을 처리하는데 클로저를 사용할 경우, 많은 메모리를 사용하게 됩..
[React] 중앙상태관리 Context, Redux, Recoil
2023. 7. 28. 19:04
Front-End/React
시작하며 React는 컴포넌트 기반의 라이브러리여서, 작은 컴포넌트들이 모여서 복잡한 구조를 구성하게 됩니다. 앱의 규모가 커질수록 상태관리가 점점 복잡해지고 컴포넌트들 간의 데이터 흐름을 효율적으로 관리하기가 어려워집니다. 이러한 상태 관리의 어려움을 해결하기 위해 상태관리 라이브러리를 사용할 수 있습니다. 상태관리 라이브러리는 앱의 전역 상태를 효과적으로 관리하는 기능을 제공합니다. 이를 이용해서 컴포넌트들 간에 데이터를 손쉽게 공유하고, 상태를 일관성있게 업데이트할 수 있습니다. 덕분에 애플리케이션의 복잡성을 줄이고, 코드 유지보수성을 높이는데 큰 역할을 합니다. 상태관리 라이브러리를 사용하면 앱의 전역 상태를 효과적으로 관리할 수 있습니다. 예를 들어서 부모 컴포넌트의 상태를 하위 컴포넌트로 계속..
[React] Concurrent UI 패턴으로 개발하기
2023. 7. 2. 23:49
Front-End/React
시작하며 프론트엔드 개발자는 웹 애플리케이션을 개발할 때 항상 사용자 경험에 대해 고민하게 됩니다. 사용자들은 웹 앱에서 빠른 응답성, 부드러운 애니메이션, 실시간 업데이트 같은 매혹적인 기능을 기대하고 있습니다. 이러한 기대에 부응하기 위해 프론트엔드 개발자는 사용자가 서비스를 정상적으로 사용할 수 있도록 컴포넌트를 설계하고 최적화하는 등의 고민을 하고 있습니다. 이러한 고민을 해결하기 위해 React Concurrent UI 패턴은 많은 개발자들에게 새로운 개발 방법을 제시하고 있습니다. Concurrent UI 패턴은 React 애플리케이션의 동작 방식을 개선하여 사용자 경험을 향상시키는 방법을 제공합니다. React Concurrent UI를 사용하면 복잡한 UI 상황에서도 부드러운 애니메이션과 ..
JavaScript 비동기 통신 / React-Query vs SWR
2023. 4. 30. 19:23
Front-End/React
비동기 통신은 현대의 웹 페이지에서 사용자에게 더 나은 사용성을 제공하기 위해 필수적으로 구현해야 하는 통신 방법 입니다. 동기 통신은 요청과 응답이 순서대로 진행되어서 서버에서 응답이 오기 전까지 브라우저에선 아무 기능도 수행하지 못해서 네트워크가 느린 사용자일 수록 부정적인 경험을 제공하게 됩니다. 하지만 비동기 통신은 화면이 렌더링되는 동안에도 데이터를 받아올 수 있고, 데이터 요청을 보낸 이후에도 자유롭게 동작 수행이 가능합니다. 요청을 보낸 이후 다른 작업을 수행하다가, 응답이 온 이후 결과를 보여주는 방식을 통해 사용자의 부정적 경험을 최소화 시킬 수도 있습니다. JavaScript 에서는 XMLHttpRequest, Fetch API 등의 라이브러리를 통해 비동기 통신을 처리할 수 있습니다...
lit-element 간단 정리
2023. 1. 10. 23:59
Front-End
원래 회사에서 React Framework + TypeScript 기반의 프로젝트가 진행중이였었는데 회사에서 React를 도입한게 처음이라서 F/E에 추가인원투입을 위해선 React에 대한 전반적인 교육이 필요하였는데 React 교육이 하루 이틀로 끝날 것도 아니고.. 전반적으로 유지보수에서 어려움이 있어서 결국 React 프로젝트를 엎고 대신 그보다 좀 더 깊이가 얕은 lit-element 라이브러리를 사용하는 것으로 변경되었습니다. 그래서 이번에 lit element 를 사용하면서 중요한 부분들에 대해 정리하여 기록해두고자 합니다. Lit-Element 와 React Lit-Element 를 사용한 이유는 컴포넌트화를 통한 재활용 및 관리를 편하게 하기 위함이였습니다. React처럼 Custom El..
CORS 보안 정책 Preflight 구현
2022. 11. 8. 21:30
카테고리 없음
Cross-Origin Resource Sharing 개요 브라우저단에서 컨트롤하는 보안 정책으로 HTTP 통신 중 패킷의 요청 도메인과 응답 도메인이 서로 다를 경우 브라우저에서 강제하는 보안 정책입니다. HTML 의 href 속성을 통해 다른 도메인에 접근하는 것은 Cross-Origin 정책을 따르기 때문에 문제되지 않지만 스크립트 단에서 Ajax, Fetch API 등을 사용하여 접근하는 것은 기본적으로 Same-Origin 정책을 따르기 때문에 서버에서 허용해주지 않을 경우 접근이 제한됩니다. CORS 정책에 걸리지 않기 위해선 아래 3가지 사항에 따르면 됩니다. 1. 브라우저 옵션에서 CORS 옵션 Diabled 가장 쉽게 해결이 가능하나 가장 효용성이 없는 해결 방법 해당 웹 사이트에 접근하..
[React.ts] 객체 리터럴을 이용한 조건문 줄이기
2022. 11. 4. 20:47
Front-End/React
Front End 를 개발할 때 같은 공간의 컴포넌트 안에서 특정 값에 따라 화면이 바뀌는 분기 처리가 필요했었는데 기존엔 if 문이나 switch, input === "A" && 등으로 처리해줬었다. 해당 방법은 분기가 하나 추가되거나 삭제될 때 마다 해당 분기가 들어간 코드들을 다 찾아가서 수정해줘야 하는 유지보수가 굉장히 안좋은 코드였다. 수정 전 { status === "create" && } { status === "update" && } { statue === "delete" && } 그런데 위 처럼 노가다성 짙은 코드를 쓸 필요 없이 객체 리터럴을 활용해서 내부 프로퍼티를 호출할 때 [Key String] 을 사용하면 아래처럼 코드를 수정할 수 있다. 수정 후 const editCompone..