webpack이란 webpack은 Frontend Framework에서 가장 많이 사용되는 모듈 번들러입니다. 현재의 반응형 웹 프로그램은 HTML, CSS, JS로 구성되어 있으며, 웹 페이지에서 점차 많은 기능들을 요구함에 따라 다양한 기능이 추가되고, 다양한 라이브러리들을 추가하게 됩니다. 기능이 추가된다는 것은 대부분의 경우에 작성하는 코드의 양이 많아진다는 것을 의미합니다. 하지만 방대한 코드를 개발자가 하나의 파일에서 모두 작업하는 것은 개발과 유지보수를 어렵게 만들게 됩니다. 따라서 개발자들은 의미 있는 부분(기능 단위, 페이지 단위 등)들로 코드를 쪼개어 별도의 모듈에서 작업하는 경우가 일반적입니다. (여기서 모듈이란 웹 애플리케이션을 구성하는 모든 자원을 의미합니다. HTML, CSS, ..

Kent. C Dodds의 'One simple trick to optimize React re-renders'를 Reference 하였습니다. Overview React를 사용해서 Web Application을 만들 때, 퍼포먼스의 향상하기 위하여 여러 가지 렌더링 최적화 기법들을 시도합니다. 대표적인 방법이 React.Memo를 사용하여 불필요한 리렌더링을 방지하기, 상태(State)를 업데이트 하는 로직은 최대한 하위 컴포넌트로 내리기등이 있습니다. 이번 포스팅에서는 자주 사용되고, 또 자주 접할 수 있는 위 두 가지 최적화 방법 이외에도 JSX가 가지고 있는 특성을 사용해서 불필요한 리 렌더링을 방지하는 방법을 살펴보려고 합니다. JSX JSX는 Javascript의 확장 문법으로, React에서..

Overview 최근 2주동안 멤버쉽 구독 관련 개발을 계속 진행했다. 멤버쉽이라는 것이 웹페이지 하나, 혹은 서버 API하나 잘 만든다고 잘 돌아가는 것이 아니라 전체 플로우를 고려해야 하기 때문에 클라이언트(앱), 웹뷰, API 서버, 멤버쉽 서버, 결제서버 등의 전체 아키텍쳐를 이해하고, 전체 플로우차트를 같이 설계하고, 각각의 요소들에 있어서 역할과 책임을 명확히 분리하고 논의하는데 주로 시간을 사용했다. 웹뷰는 결제 랜딩 페이지 2개를 동시에 개발했다. 기획이 확정되지 않은 상태에서 개발을 진행했기 때문에 Nextjs를 사용해서 만들기는 했지만, 결국에는 사실상 Nextjs를 사용하는 것이 별로 의미가 없어보이는? Static HTML 형식으로 개발이 되었다. 웹 서버를 하나 두고 클라이언트의 ..

Overview Web Programming 여러 분야의 개발을 동시에 하면서 항상 그래 왔지만 유난히도 '참 가야 할 길이 멀구나' 싶은 생각이 들었던 한 주였다. 우선 프런트엔드 쪽에서는 그동안 개발했던 웹 랜딩페이지(+모바일 대응) 보다는 철저히 모바일을 위한, 데스크톱이 아닌 디바이스의 환경에 최적화된 웹뷰 작업이었다. 프론트엔드 개발을 하면서 가장 귀찮았던 것이 크로스 브라우징이었는데 디바이스 쪽은 훨씬 고려해야 할 것들이 많았다. 기본적으로 브라우저 대응(iOS -> Safari, Android -> Chrome)및 다양한 해상도와 Notch 등의 디바이스 특성 등을 고려하면서도 전반적으로 데스크톱이 아닌 디바이스이기 때문에 고려해야 할 사항들(보안상 이슈로 인한 동영상 플레이 제한 등)까지 ..

Overview 본격적으로 2021 1Q 업무를 수행하면서 개발하는 내용들이 구체적으로 정해지고, 그에 따라 공부해야 하는 내용들도 구체적으로 정해졌던 한 주였다. 지난주의 다짐에 따라 우선 주말에는 취미로 iOS 개발 공부를 시작했다. iOS개발을 하기 위한 여러 가지 방법 (Object C, Swift, React Native등) 들이 있지만 Stanford cs193p강의를 메인으로 삼았기 때문에 개발 내용은 Swift, SwiftUI로 진행하는 일이 대부분이었다. 좋은 학교에서 체계적으로 진행하는 수업이다보니 과제의 퀄리티도 굉장히 좋았고, 단순히 클론 코딩으로 가르치는 방식이 아닌 내부적으로 Swift라는 언어가 동작하는 방식까지 소개하는 수업이라 흥미가 있었다. 개인적으로는 OOP를 '지원'한..

Overview 웹 레이아웃을 짜다 보면 남은 시간을 표시하는 타이머를 표시해야 할 때가 종종 있습니다. 로그인 시 이메일 인증이나 SMS 인증을 할 때, 세션 만료까지 남은 시간을 표시해주어야 할 때도 있고, 브라우저에서 동작하는 간단한 게임을 만들 때 게임 종료 시까지 남은 시간을 표시해주어야 할 때도 있습니다. 자바스크립트에는 특정한 시간마다, 혹은 특정 시간이 지난 후에 callback함수를 호출할수 있는 setInterval, setTimout이라는 내장 함수를 제공하기 때문에, 이를 이용해서 타이머를 구현할 수 있습니다. 하지만, 싱글 스레드로 동작하는 자바스크립트의 특성상 setTimeout, setInterval이 항상 정확한 시간에 호출되지는 않기 때문에 브라우저에서 처리하는 일들이 많은..