본문 바로가기

프론트엔드27

[JS] 전역 상태관리 스토어를 만들어보며. 바닐라 js로 다양한 기능을 간단히 만들어보는 js-util 프로젝트의 9번째 모듈로 전역 상태관리 스토어를 만들어보았다. https://github.com/yoonjonglyu/js-util GitHub - yoonjonglyu/js-util: html, css, js, vanillajs, animation, module & util html, css, js, vanillajs, animation, module & util - GitHub - yoonjonglyu/js-util: html, css, js, vanillajs, animation, module & util github.com 바닐라 js로 컴포넌트 단위나 페이지 단위 개발을 진행 할 경우 CSR방식의 SPA 웹애플리케이션의 경우 전역 상태.. 2022. 3. 30.
[AMD]RequireJS에 대하여 자바스크립트 모듈 시스템 js 모듈 시스템은 크게 3가지로 나뉜다. Common JS와 AMD(Asynchronous Module Definition) 그리고 ES2015(ES6)이다. UMD(Universal Module Definition) 라는 것도 존재하긴 하지만 별로 중요하진 않으니 신경 쓸 필요는 없을거 같다. 요즘에는 노드에서는 거의 CommonJS를 많이 쓰고(애초에 브라우저 이외의 곳에서 js를 사용하기 위한 모듈 시스템) 브라우저 즉 프론트엔드의 경우 거의 ES6 모듈 시스템을 많이 사용한다. ES6 모듈 자체를 그대로 사용하기 보다는 webpack과 rollup 같은 번들러를 통해서 많이 사용되는 편이지만 ES6 방식을 주로 사용한다. ES6가 나오기전에는 AMD 방식을 통해서 브라우.. 2022. 2. 22.
[CSS IN JS] 스타일드 컴포넌트에 관하여. 바닐라 js로 여러가지 기능을 만들어 보는 js-util 프로젝트를 시작하고 가벼운 DOM 조작 부터 스타일링 부터 모두 js로 처리하는 방식으로 프로젝트를 진행하다보니 스타일링 관련해서 코드를 관리하는게 매우 귀찮아졌다. 그걸 조금 편하게할 CSS IN JS 기능을 간단하게 개발해보는 것도 나쁘지 않을 거 같아서 뭘 기준으로 삼을까 생각해보니 스타일드 컴포넌트가 가장 쉽고 간편하게 개발 할 수 있을거 같아서 비슷하게 개발했다. 개발하다 보니 대체 스타일드 컴포넌트는 어떻게 되어 있는지 궁금하고 어떤식으로 로직을 처리하는가? 싶어서 바로 스타일드 컴포넌트 Repo를 포크하고 내용 로직을 살펴보았다. 어차피 내가 원하는 것은 바닐라로 다른 기능을 만들면서 스타일링을 스타일드 컴포넌트 처럼 간단하게 하는 것.. 2022. 2. 7.
[프론트 엔드] 주소,Map,Local API 차이 간단 정리 웹 사이트를 개발하다 보면 주소와 관련된 작업은 거의 기본적으로 들어간다. 간단한 마크업 문서가 아닌 이상은 배송이나 우편 관련해서 주소 정보가 필수적으로 필요하기 때문이고 해당 데이터를 사용자 개개인이 다 기억하고 있는 경우는 드물기 때문이다. (나는 솔직히 전화번호도 안 외우고 다니는 편이라 주소는 당연히 기억 못 한다.) 기존의 경우 무료 서비스인 kakao(Daum) 우편번호(postcode) 서비스를 이용해왔다. 개인적으로 단순히 주소가 필요한 것이라면 한국에서 이것 이상의 오픈 API를 찾을 수 없을 거라 본다. 또 개인적으로는 해당 API를 조금 더 쉽게 쓰기 위해서 플러그인 형식의 NPM 패키지인 react-daumpost-hook를 배포해본 경험이 있어서 모든 부분을 세세하게 알지는 못해.. 2022. 1. 21.

티스토리툴바