frontend
-
[Design Pattern] 자바스크립트 디자인 패턴 1편 - 모듈 그리고 싱글톤frontend/javascript&web 2023. 9. 11. 21:15
오늘은 자바스크립트 디자인 패턴에 대해서 이야기를 한번 해보려고 합니다. 우리는 때때로 개발을 진행할 수록 소스코드가 점점 더러워지고 가독성이 떨어지는 경우를 겪게 됩니다. 일을 하다보면 이러한 소스코드를 어떻게 깔끔하게 작성할 수 있을지 내 코드를 남이 보고 유지보수를 할때 어떻게 한눈에 알아볼 수 있을지에 대한 많은 고민을 하게 되었습니다. 이때 저는 디자인 패턴을 다시 한번 전체적으로 공부를 하였고, 이를 통해 실제 업무 속에서 더 나은 가독성과 유지보수성을 가진 소스코드를 작성할 수 있게 되었습니다. 제가 실제로 자주 사용하는 디자인 패턴들을 왜? 어떻게? 언제? 라는 내용으로 얘기해보겠습니다. 1. 모듈 패턴 모듈 패턴은 전역 네임스페이스를 오염시키지 않고, 변수와 함수를 캡슐화 하기 위해 자주..
-
[Web] 순수 자바스크립트로 양방향 데이터 바인딩 구현(Pure Javascript Two-way Data binding) - 추가작업(이벤트 재할당)frontend/javascript&web 2023. 6. 13. 12:42
오늘은 지난번에 진행했던 양방향 데이터 바인딩 구현을 이어서 진행해보려고 합니다. 지난번의 작업중 이어서 할 작업은 DOM변경에 대한 이벤트 재할당 기능을 추가하려고 합니다. 이 작업은 아주 쉬운 방법으로 추가할 수 있습니다. 1. DOM 초기화 로직 세분화 아래는 기존의 initializeDOM 함수입니다. 해당 소스는 DOM을 최초로 초기화 하는 작업이 추가 되어 있습니다. 하지만 아래 작업의 내용을 DOM이 변경 된 이후 이벤트 재할당 과정이 필요하기 때문에 DOM초기화 로직을 분리 시켜야됩니다. initializeDOM() { const bindings = Array.from(this.$el.querySelectorAll("[b-model]")); bindings.forEach((element) ..
-
[Web] 순수 자바스크립트로 양방향 데이터 바인딩 구현(Pure Javascript Two-way Data binding)frontend/javascript&web 2023. 6. 12. 12:15
오늘은 순수 자바스크립트를 이용해 데이터 양방향 바인딩을 구현해 보도록 하겠습니다. 종종 레거시한 시스템에서 개발을 진행하다보면 최신 프레임워크의 편리함을 다시 깨닫게 되고, 사용하고 싶은 욕구가 엄청 커질때가 있습니다. 저는 금융권 IT 쪽에 종사하고 있고, 보수적인 개발성향과 분위기로 인해 레거시한 환경에서 개발하는 케이스가 상당히 많았습니다. 그렇다 보니 데이터 하나를 연결할 때에도 일일이 이벤트 처리를 해주는 케이스가 많았고, 이러한 개발 환경은 개발자의 퍼포먼스를 매우 떨어트린다고 생각했습니다. 그래서 전 순수 자바스크립트로 양방향 바인딩을 구현하려고 하였고, 얼추 비슷하게 이를 구현하여 진행과정에 대해 설명을 드리고자합니다. 가장 먼저 콘셉입니다. 정적 파일로 구현이 된 케이스가 많았기 때문에..
-
[Web Security] WEB/WAS 분리 환경에서 CSRF 취약점 대응 방안(CSRF TOKEN)frontend/javascript&web 2023. 3. 9. 21:18
오늘은 개발된 소스를 운영하기 위해서 보안취약점 점검등을 하게 되면 자주 발생하게 되는 CSRF 취약점에 대하여 대응 방안을 말씀드리겠습니다. CSRF가 무엇인지에 대해서는 수많은 공식문서와 블로그 등에 있으니 오늘은 대응방법에 대해 바로 말해보도록 하겠습니다. 이번에 설명 드릴 환경은 일반적인 환경이 아니라 하나의 세션에서 돌아가는 시스템이 아니라 WEB/WAS과 완벽히 분리되어 있는 환경에서의 대응 방안에 대해서 설명드리겠습니다. 1. 구성 제가 적용했엇던 시스템은 WAS와 WEB서버가 위와 같이 물리적으로 완전 분리되있는 구성으로 되어 있었습니다. 단순히 WAS는 API서버로의 의미를 가지고 있는 시스템 이였습니다. 일단, CSRF토큰을 공유하기 위해서는 대표적으로 세션을 통해 공유되고, 이를 통신..
-
[VueJS] Vue2 watch를 통해 중첩 데이터 감지하고 변경된 데이터 확인하기frontend/vue&nuxt 2023. 1. 18. 19:12
오늘은 Vue를 개발할 때 자주 이용하셨던 watch에 대해서 알아보도록 합니다. vue에서 watch는 특정 데이터의 변화를 감지하여 특정 로직을 동작하게 할 때 주로 사용합니다. 성능을 위해서 자주 사용하는 건 권장드리지 않지만 꼭 사용해야될 상황이 있습니다. 오늘은 이러한 watch를 이용해 중첩 데이터를 감지하고 그 이상으로 변경된 데이터를 알 수 있는 방법을 알려드리도록 하겠습니다. 1. 기본 문법 watch: { //감지할데이터 : function(바뀐값,바뀌기전 값) obj: function (val, oldVal) { //로직 } } 기본적인 문법은 위와 같습니다. watch 내부에 감지할 데이터를 넣고 바뀐값과 바뀌기 전 값을 알고 있습니다. 하지만 이러한 구조에서는 중첩데이터를 감지할 ..
-
[사이드 프로젝트 회고] 코드 복붙 서비스 개발기 - 1(기획, 구현물)frontend/javascript&web 2022. 11. 13. 15:04
https://bokboot.net 오늘은 개인적으로 진행하였던 사이드 프로젝트 bokboot에 대해서 얘기해보려고 합니다. 최근 해당 프로젝트가 끝나고 블로그에 글을 쓰려다보니 상당히 글쓰는 주기가 길었던거 같습니다. 해당 서비스의 개발동기는 아주 간단합니다. 친구끼리 소스 코드를 주고 받을 때 주로 카카오톡으로 주고받곤 하였는데 해당 방법으로 주고받았을때 코드에 하이라이트가 입혀지지 않고 급하게 휴대폰으로 소스코드를 보아야 될때는 이런 불편한 소스코드를 계속 보아야되었습니다. 이런게 너무 싫어서 그냥 제가 쓸려고 개발했고 개발하면서는 올해는 DAU100을 목표로 하여 사람들과 같이 공유하고 기능을 붙여나가려고 합니다. 아래와 같은 화면으로 인해서 물론 아래의 화면이 보기 안좋은 것은 아니지만 소스 코..
-
[Mocking] MSWjs를 이용한 API 모킹 쉽고 빠르게 활용하는 법(with React + Webpack)frontend/react&next 2022. 10. 27. 16:17
오늘은 많이들 사용하는 Mocking 라이브러리인 MSW에 대해서 빠르게 파악해볼까 합니다. 아직 모킹을 활용한 개발을 해보신 적이 없으신 분들은 이런 경험이 있을 겁니다. "요청 드린 API언제 나와요?" 이처럼 협업을 하는데 있어서 시간낭비가 발생하게 되는 경우가 많으실 겁니다. 이럴때 사용하는게 API목업 입니다. 개발 시작 전 서버개발자와의 협의를 통하여 통신에 대한 인터페이스를 정의하고, 이에 맞춰 미리 API목업을 하여 서버의 진척상황과 상관없이 프로젝트를 진행할 수 있습니다. 이런 API목업 라이브러리 중 MSW에 대해서 알아보도록 하겠습니다. MSW는 말 그대로 Mock Service Worker입니다. 그래서 아주 자연스럽게 기존의 API호출과 연동하여 개발환경에 따라 셋팅할 수 있습니다..
-
MSWjs : Failed to register a Service Worker for scope () with script () Service Worker script does not exist at the given path.frontend/오답노트 2022. 10. 12. 10:13
문제 : [MSW] Failed to register a Service Worker for scope ('http://localhost:3000/') with script ('http://localhost:3000/mockServiceWorker.js'): Service Worker script does not exist at the given path. Did you forget to run "npx msw init "? [MSW] Failed to register a Service Worker for scope ('http://localhost:3000/') with script ('http://localhost:3000/mockServiceWorker.js'): Service Worker scrip..