본문 바로가기

전체 글57

MVP pattern, Presentational/Container pattern Presentational / Container pattern 프로젝트에 storybook 을 도입하기 전에, storybook 에 대해서 좀 더 공부해볼 필요가 있겠다는 생각이 들어서 여러 자료들을 살펴보고, 진겸님의 발표 - Say hello to storybook 도 보았다. 발표 당시가 2018년 이었는데, 강의에 소개되고 있는 Container Component pattern 에서는 이전에 테스트 관련 공부를 할 때 보았던 Presenter 라는 키워드도 있었다. (일단 여기서 1차 혼동) 발표 내용에서는 Presenter Component 라는 말을 하는데, 내가 알고있는 Presenter 는 MVP 패턴의 Presenter 라서, 어떤 로직을 제공하는 것이라고 생각을 했었는데 발표에서는 Pu.. 2022. 8. 4.
Node express 에 swagger 얹기 Swagger? 프론트엔드-백엔드가 같이 프로젝트를 하면 API 명세를 통해 의사소통을 하게됩니다. 이 때 API 명세는 사람이 직접 적는 문서 형식으로 Notion, Github Wiki 등을 활용할 수는 있지만 몇가지 불편한 점이 있습니다. 1. 변경을 추적하기 어렵다는 점 2. 변경이 될 때마다 프론트엔드 에게 인지를 시켜줘야 한다는 점 3. 혹시 모를 오탈자로 고생할 일이 적어짐 세 가지 모두 프로젝트를 하면서 겪었던 문제였는데요, Swagger 를 통해 문서화를 자동화하면 이를 해결해볼 수 있습니다. 🚀 설치 npm install -D swagger-jsdoc swagger-ui-express - -D 옵션으로 devDependency 에 설치하였습니다. - swagger-ui-express 는.. 2022. 7. 27.
[JavaScript] 숫자범위( 10의 309승? ), falsy 값 JavaScript 숫자 범위 + falsy Jamie 가 알고리즘을 푸시다가 Javascript 의 문법적 요소에 관하여 질문을 주셨다. 백준 문제를 푸시는데, 1 의 숫자가 늘어나면서 몇의 자리 숫자일 때 특정 숫자(n) 의 배수가 되는지를 찾는 문제였다. ex) n 이 3 일 때 111 은 3의 배수, 3자리 이므로 3, n 이 7 일 때 111111 은 7의 배수, 6자리 이므로 6 여기서 1의 숫자가 늘어나는 것을 multiple 이라는 변수로 설정하고, multiple * 10 + 1 을 무한반복으로 찾을 때 똑같은 로직인 것 같은데 하나는 시간초과, 하나는 틀렸습니다 가 나온다는 것이었다. // 틀렸습니다 while(true){ if (!(+multiple % num)) return ~~ }.. 2022. 7. 21.
Babel 그리고 Polyfill (core-js) Polyfill 은 구형 브라우저에서 지원하지 않는 기능을 제공하는 코드를 의미합니다. ES6의 Promise 같은 객체들은 ES5에 존재하지 않으므로 구문 변환 뿐만 아니라 해당 객체들을 정의하는 코드인 바벨 폴리필(babel polyfill) 을 추가해야 합니다. 1. 아주 먼 옛날.. @babel/polyfill 과거에는 @babel/polyfill 패키지를 직접 전역 스코프에 가져오는(import) 방식으로 바벨 폴리필을 추가하여 사용하기도 했습니다. @babel/polyfill 은 내부적으로 core-js/stable 와 regenerator-runtime 를 포함하고 있는데요, 현재는 @babel/polyfill 은 core-js/stable 을 직접 import 하는 방식을 사용하기 위해서 .. 2022. 7. 21.
2022 - 끄적임 이력서 작성코드스쿼드 과정 중 코드 리뷰를 빰빰에게 받았었는데, 빰빰에게 이력서 를 받아서 모의면접을 진행해볼 수 있는 기회를 주셔서 이력서를 작성했다. 사실 이전에 사용하던 Notion 으로 만든 이력서가 있었는데 코드스쿼드 이전에 작성했던 것이라 프로젝트 관련한 내용이 거의 없다싶이 하고, 프론트엔드 관련된 기술이 거의 없어서 수정해나가는 작업을 했다. 구글에 '개발자 이력서' 라고 작성하면 가장 먼저 나오는 워니 님의 글과, EO 에서 만든 컨텐츠도 참고해보았을 때, 결과와 지표로 설명이 되는 것이 이상적이겠지만, 사용자가 없는 토이프로젝트에서는 가장 어려운 부분이라고 생각이 들었다. 프로젝트의 기획서에 존재하지 않지만 스스로, 혹은 팀원과 상의하여 사용자 경험 측면에서 더 좋은 방향으로 기능 구현.. 2022. 7. 19.
React + Infinity Scroll, Intersection Observer 어떻게 구현했는지를 보여주는 글이 아닌 React 에서 어떻게 적용할 지 생각을 정리한 글 입니다. React + Infinity Scroll 처음 React 를 공부할 때 클래스 형 리액트에서 리액트의 생명주기를 찐하게 느꼈던 기능 구현이 하나 있었는데 바로 무한 스크롤이다. 스크롤 이벤트마다 리렌더링이 일어나고, 스크롤의 위치를 받아와서 viewport 의 scroll height 를 고려하는 등 어려웠던 기억이 난다. 코드스쿼드 과정을 하면서도 무한스크롤은 아니지만 스크롤 이벤트를 받아서 Header 의 CSS 속성을 수정하는 로직을 작성했던 적도 있었는데, 그 때는 throttling 을 활용해서 무수한 이벤트가 발생하는 것을 억제했던 기억이 났다. 그래서 그것을 활용해서 접근해볼까 하다가 다른 .. 2022. 7. 15.

티스토리툴바