frontend/javascript&web
-
[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토큰을 공유하기 위해서는 대표적으로 세션을 통해 공유되고, 이를 통신..
-
[사이드 프로젝트 회고] 코드 복붙 서비스 개발기 - 1(기획, 구현물)frontend/javascript&web 2022. 11. 13. 15:04
https://bokboot.net 오늘은 개인적으로 진행하였던 사이드 프로젝트 bokboot에 대해서 얘기해보려고 합니다. 최근 해당 프로젝트가 끝나고 블로그에 글을 쓰려다보니 상당히 글쓰는 주기가 길었던거 같습니다. 해당 서비스의 개발동기는 아주 간단합니다. 친구끼리 소스 코드를 주고 받을 때 주로 카카오톡으로 주고받곤 하였는데 해당 방법으로 주고받았을때 코드에 하이라이트가 입혀지지 않고 급하게 휴대폰으로 소스코드를 보아야 될때는 이런 불편한 소스코드를 계속 보아야되었습니다. 이런게 너무 싫어서 그냥 제가 쓸려고 개발했고 개발하면서는 올해는 DAU100을 목표로 하여 사람들과 같이 공유하고 기능을 붙여나가려고 합니다. 아래와 같은 화면으로 인해서 물론 아래의 화면이 보기 안좋은 것은 아니지만 소스 코..
-
[웹 최적화] 이미지 로딩 최적화(Image loading Optimzation)frontend/javascript&web 2022. 9. 13. 15:15
오늘은 웹 개발시에 자주 접하게 되는 이미지 로딩에 대해서 알아보겠습니다. 그 중에서도 이미지와 관련된 성능 최적화에 대해서 한번 알아보도록 하겠습니다. 우리는 개발을 하다 보면 이미지를 아주 많이 접하게 됩니다. 배경이 될 수 도 있고, 아이콘이 될 수도 있고, 사람의 프로필 등으로 다양한 모습으로 접하게 될 겁니다. 이렇게 자주 만나는 이미지는 웹 성능에 큰 영향을 미치는 요소 중 하나입니다. 실제로 lighthouse에서 검사 시에도 이와 관련된 작업을 따로 하지않는다면 매우 많이 검출되는 것을 볼 수 있습니다. 제가 아는 한도내에서 어떻게 이미지를 효율적으로 다뤄야 될지에 대해 알아보겠습니다. 1. preconnect 옵션 이 옵션은 말 그대로 사전연결 옵션입니다. 특정 주소에서 리소스들을 불러올..
-
이벤트 위임 - 캡처링/버블링 (Event Delegation - Captruring / Bubbling)frontend/javascript&web 2022. 2. 21. 19:45
쉽게 이해하는 이벤트 위임(Event Delegation) 이벤트 특정 행위시 발생하는 사건 브라우저는 이벤트를 감지할 수 있고 이벤트 발생 시 알려줄수 있으며 이를 통해 웹 페이지와 상호작용가능하며 핸들러를 통해 원하는 함수와 연결해 사용할 수 있습니다. 이벤트 타입 마우스 click(클릭), dbclick(더블 클릭), mouserover(마우스 오버), mouseout(마우스 아웃), mousedown(마우스 눌림), mouseup(마우스 뗌), mousemove(마우스 움직임), contextmenu(오른쪽 마우스) 키보드 keydown(키 눌림), keyup(키 뗌), keypress(키 눌린상태) 폼 focus(포커스 인), blur(포커스 아웃), change(값 변경), submit(제출)..
-
자바스크립트 thisfrontend/javascript&web 2022. 2. 18. 10:16
쉽게 이해하는 자바스크립트 this this 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가르키는 자기참조변수 자바스크립트의 this는 자바를 비롯한 여타 언어들과는 상이하게 동작합니다. 이 개념을 잘 이해하신다면 우리가 특정 변수나 객체에 접근할 때 발생할 수 있는 문제에 대하여 사전에 방지할 수 있는 효과를 가지게 될 것입니다. this의 동작방식 this 값은 호출방법에 의해 결정됩니다. 실행중에 할당으로 설정할 수 없고 호출할 때마다 다르게 동작합니다. 우리는 이러한 this의 값 결정 방식을 5가지로 분류 해볼 수 있습니다. 전역공간 함수 호출 메소드 호출 생성자 함수 호출 apply / call / bind 호출 함수와 메소드를 혼동하지 맙시다. 함수는 객체로 부터 독립적이지만, 메소드는 ..