홍준혁

전역 상태 관리 라이브러리인 리덕스로 대부분의 프로젝트를 진행을 했었는데, 사용하면서 느낌 문제점은 다음과 같습니다. - 대부분의 전역 상태는 비동기 통신을 위해서 쓰이고 있다. - Store의 역할이 너무 비대하다. - 보통 비동기 전역 상태는 data, error, loading이 세가지로 나누는데 그럼, 전역으로 관리하는 상태가 많아진다면 비효율적일 것이다. - 순수 클라이언트의 전역 상태와 비동기 전역 상태와 비교했을 때 비동기 전역 상태가 월등하게 많다. 해결 방안은 무엇일까요? - store에서 비동기 통신하는 부분들을 걷어내고 온전한 Client의 상태만을 남겨 놓는다. - Store밖에서 서버와 관련된 상태 관리방안 마련한다. - (중요) 서버와 관련된 상태는 전역 상태처럼 사용할 수 있어..

첫 번째 기능 - Automatic Batching setState는 호출될 때마다 리렌더링이 일어나게 된다. 정말로 그럴까? 사실 리액트에서는 조금 다르게 동작한다. 호출될 때마다 리렌더링을 작업하게 된다면 정말 비효율적인 방법일 것이다. 다음 코드를 보도록 하자. function App() { const [count, setCount] = useState(0); const [flag, setFlag] = useState(false); function handleClick() { setCount(c => c + 1); // 리렌더링 발생 setFlag(f => !f); // 리렌더링 발생 set... // 리렌더링 set... // 리렌더링 set... // 리렌더링 set... // 리렌더링 set...

최근에는 많은 자바스크립트 프레임워크들이 나오면서 (React, Vue, Angluar 등...) 쉽고 간편하게 프론트엔드 개발이 가능해졌다. 그렇다면 웹 컴포넌트라는 기술은 왜 나온것이며, 기존의 있던 웹 프레임워크들을 대체할 수 있을까? 한번 알아보도록 하자. 웹 컴포넌트는 아직 널리 사용되는 기술은 아니다. 하지만 앞으로의 프론트엔드 개발에 있어서 중요한 역할을 하게 된다는 사실은 변하지 않는다. 먼저 웹 컴포넌트가 무엇인지부터 알아보도록 하자. 웹 컴포넌트란, 모든 주요 브라우저에서 지원하는 웹 표준 기반의 재사용 가능한 클라이언트 사이드 컴포넌트이다. 코드에서 원하는 부분을 캡슐화하는 방법을 제공하고, 모든 웹 앱과 페이지에서 재사용이 가능하다. 웹 컴포넌트의 장점은 어디에서나 사용할 수 있다는..

본 글은 기존의 자바스크립트 개발자의 시점으로 타입스크립트를 소개하는 글임을 알립니다. 자바스크립트와 타입스크립트의 관계는 매우 독특하다. TypeScript은 JavaScript 위에 레이어로서 자리잡고 있는데, JavaScript의 기능들을 제공하면서 그 위에 자체 레이어를 추가한다. 바로 이 레이어가 타입스크립트의 타입 시스템이다. JavaScript는 number, object, undefined등의 원시 타입을 가지고 있지만 코드 베이스에서 일관되게 작성되었는지 확인해주지는 않는다. TypeScript는 여기서 레이어도 동작한다. 타입 추론 변수를 생성하면서 동시에 특정 값에 할당하는 경우, TypeScript는 그 값을 해당 변수의 타입으로 사용할 것이다. let helloWorld = "He..

프로그래시브 웹앱(PWA)에 대해서 알아보는 시간을 가져보도록 하자. 네이티브 앱, 기기에 최적화된 기능을 구현하다. 네이티브 앱은 스마트폰에서만 작동하는 앱을 말한다. 그에 맞는 운영체제 환경에 맞는 별도의 프로그래밍 언어와 SDK라는 개발 도구를 이용해야 앱을 제작할 수 있다. 대표적인 예시로, 안드로이드 앱은 자바를 이용해서 안드로이드 스튜디오에서 만들고, IOS는 Objective-C나 Swift를 이용해서 XCode에서 개발을 하는데, 네이티브 앱은 기본적으로 개발 난도가 높은 편이다. 또한 각 운영체제 별로 개발을 해야 하니 비용과 시간이 들 수밖에 없다. 그럼에도 네이티브의 장점이라고 하면 기기에 탑재된 모든 기능을 사용할 수 있다는 것이 있겠다. 구분 장점 단점 개발 스마트폰에 최적화된 기..

HLOG는 개인프로젝트로 제작한 소프트웨어 정보공유 플렛폼이다. velog 처럼 글을 작성하고 다른사람과 소통하는 블로그다. 다들 개인 프로젝트로 블로그 하나씩은 장만하는거 같아서 나도 한번 만들어보았다. 프론트엔드 개발스택은 - Next.js + React.js - TypeScript - Emotion.js - Redux + Redux-saga - Immer.js ... 프론트엔드 파일 구조 백엔드 개발스택은 - Express.js - TypeScript - Mysql (DB) - Passport (Session login) - TypeOrm ... 을 사용하였다. 백엔드 파일구조 개발하면서 느낀 점. 이번 프로젝트를 진행하면서 느낀점이 굉장히 많은 것 같다. 특히 프로젝트를 배포하는 과정에서 많은 오..