마이구미의 HelloWorld 마이구미의 HelloWorld

이 글은 JWT, Cookie, XSS, CSRF 에 대해 다룬다. JWT 와 Cookie 기반 인증 시스템의 차이점에 대한 내용을 기반으로 XSS, CSRF 를 다룰 것이다. 참고 자료 - https://medium.com/redteam/stealing-jwts-in-localstorage-via-xss-6048d91378a0 각 용어에 대한 간략히 설명한 후, 다른 링크로 대체하겠다. JWT - JSON Web Token 으로 토큰의 형태이다. (https://en.wikipedia.org/wiki/JSON_Web_Token) Cookie - 사용자 컴퓨터에 방문 기록, 로그인 정보 등과 같은 데이터를 기록할 수 있는 작은 파일 형태를 나타낸다. XSS - Cross Site Scripting 으로 ..

이 글은 reselect 라이브러리를 다룬다. 대다수의 경우 redux 를 사용하면서 reselect 를 도입하게 된다. 왜 사용하는지, 어떤 개선점이 있고, 주의해야하는 사항은 무엇인지 알아본다. 관련 문서 - https://github.com/reduxjs/reselect redux 공식문서에서 제공하는 기본 예제를 기반으로 연결되는 점들이 많다. 글을 읽기 전에 먼저 훑어보면, 이해에 더 도움이 될 것이다. https://redux.js.org/basics/example 우리는 상태 관리를 효율적으로 하기 위해 Redux 와 같은 상태 관리 라이브러리를 사용한다. 기본적으로 리덕스 스토어있는 state 를 가져오는 방법은 다음과 같다. todoList 가 존재하고, todo 들의 완료 여부를 필터링..

이 글은 "리덕스를 어떻게 사용할 수 있는가?" 를 나타낸다. 여러 방법 중에 "Normalizing State Shape" 를 다룬다. 공식 문서에서 언급된 것으로, 리덕스를 활용하는 패턴의 하나라고 볼 수 있다. 전반적인 내용과 이를 프로젝트에 적용해본 후기를 작성하려한다. 관련 문서 - https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape 글을 다루기에 앞서, 개발 시나리오를 생각해보자. 프로젝트 진행에 앞서, 서버쪽 API 가 아직 개발되지 않은 상태라면 프론트는 사전 작업을 먼저 하면 된다. 우선 마크업을 미리 진행하면 된다. 그리고 더 나아가 대략 추측 가능한 구조를 기반으로 더미 데이터를 API 응답으로 활용할 수..

이 글은 Tabtrap 이라는 테크닉을 다룬다. 정해진 용어는 딱히 없는 것 같지만 Tabtrap 이라고도 불린다. 크게는 모달에서 사용할 수 있고, 다른 요소의 영역에서도 충분히 활용할 수 있다. 사용자 경험 측면에서도 향상될 수 있는 테크닉이다. 웹 개발에 있어서, 모달(Modal) 여부는 대부분 존재한다. 그렇다면, 모달의 무엇인가? 모달은 팝업과 비교하면 쉽게 이해할 수 있다. 모달은 어느 시점에 사용자가 특정 컨텐츠에 집중해야할 경우에 필요로한다. 즉, 모달은 사라질 때까지 사용자는 그 영역에만 집중할 수 있어야한다. 마치 window 객체에서 제공해주는 alert, confirm 메소드처럼 완료 처리를 하기 전까지는 아무것도 할 수 없는 것처럼말이다. 반대로 팝업은 존재하더라도, 사용자는 다른..

이 글은 "private npm registry" 를 의미하는 사내 npm 저장소를 다룬다. 이를 위해 Verdaccio 를 이용하는데, 전반적인 이해와 사용 방법을 알아본다. 본인은 실제로 우리가 사용하는 npm 에 대해 조금 더 알게 된 계기가 되었다. 사내 npm 저장소를 구축할 일이 없어도 유용한 글이 될것이라 생각한다. Verdaccio - https://github.com/verdaccio/verdaccio private npm registry 는 무엇인가? 우리는 현재 npm 을 통해 많은 모듈들을 이용한다. npm 에서 많은 모듈을 우리는 그저 편하게 install 하여 사용하고 있다. 우리가 이렇게 사용할 수 있는 건, npm 은 public 하게 제공해주기 때문이다. 반대로 privat..

이 글은 ES6 에서 도입된 제너레이터(Generators) 를 다룬다. 사용법보다는 본인이 궁금했던 도입된 이유, 실행 컨텍스트 현황, 사용 이점을 살펴본다. 사용법이나 필요한 용어 및 지식은 크게 다루지 않으니 필요하다면, 다른 글에서 참고하길 바란다. 제너레이터는 ES6 에서 새롭게 도입된 개념이다. 기본적인 형태는 다음과 같다. function* myGenerator { yield "1"; yield "2"; } const it = myGenerator(); it.next(); 제너레이터의 핵심은 동시성 프로그래밍이다. 비동기 프로그래밍에도 많은 도움을 주지만, 여기서는 동시성(concurrency)을 중점으로 다뤄보려고 한다. 동시성이란 무엇인가? 들어갈수록 쉽게 이해할 수 없는 내용이기에 간략..

이 글은 HTML 에서 제공해주는 img 태그와 CSS 속성 중 background-image 의 차이를 다룬다. 본인은 img 태그만을 사용해왔고, background-image 는 지양해야한다고 생각해왔다. 지금도 비슷한 생각이지만, 스스로 잘못된 오해를 가진 것들도 있어서 글로 남기게 되었다. 참고 링크 https://blog.px-lab.com/html-img-tag-vs-css-background-image/ https://nystudio107.com/blog/the-css-background-image-property-as-an-anti-pattern 이미지 컨텐츠를 표현하는 방법에는 크게 두가지가 있다. HTML 의 태그를 활용하는 방법. CSS 의 background-image 를 사용하는..

이 글은 CSS 속성 중 하나인 vertical-align 을 다룬다. 이미지와 텍스트를 통한 예제를 중점으로 글을 진행한다. 이 속성을 어떤 원리로 되는 지 모른 채 일단 사용했거나 혼란스러웠다면, 이 글은 유용할 것이다. 폰트 - https://mygumi.tistory.com/366 vertical-align - https://developer.mozilla.org/ko/docs/Web/CSS/vertical-align vertical-align 속성은 MDN 공식문서에 간단하게 정의되어 있다. vertical-align CSS 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정합니다. vertical-align 속성은 ie7 도 지원하는 거의 모든 브라우저에서 사용할 수 있..