한입 크기로 잘라먹는 Next.js!! 윈터루드님의 신규강의 사전등록 이벤트🥹

https://smore.im/form/gIl1v0ftOn 사전등록 이벤트 | 한입 크기로 잘라먹는 Next.js사전등록자 전원 50% 할인 쿠폰 제공, 30명 추첨 100% 할인 쿠폰 제공 중smore.imReact 입문도 너무 쉽게 했는데.. 이 강의도 너무 기대된다… (두근) 같이 들으실 이웃분들 링크로 들어가서 신청하고 쿠폰받아서 같이 완강해요..!!!!

[Electron.js] electron 의 rebuild 란?

electron 의 rebuid 라는 커맨드는, 현재 설치된 Electron 버전에 대해 네이티브 Node.js 모듈을 재 구축하기 위해 사용한다. 일전에 사내 프로젝트에서 electron 과 serialport 라이브러리를 사용할 때, 이 rebuild 커맨드에 대해 알지 못해 상당히 해멨던 적이 있는데... 간단하게나마 정리해 보고자 한다. 왜 reubild 와 같은 작업이 필요하냐? rebuild - 그러니까 재컴파일 과정이 없으면 일렉트론 앱과 네이티브 Node.js 모듈, 그러니까 파일 시스템, 운영체제 등 저수준 기능에 접근하는 모듈간에 문제가 발생할 수 있다. 왜냐면, 일렉트론의 Node.js 는 표준 Node.js 환경과 다른 버전을 사용하기 때문이다... 알다시피 일렉트론은 크로미움 + ..

[Node.js] Node의 require module 은 어떻게 동작하는가?

CommonJS 모듈 시스템 하나의 자바스크립트 파일은 분리된 모듈로서 취급된다. 그리고 nodejs는 CommonJS 시스템을 쓴다. require() 그리고 exports 혹은 module.exports 프론트에서 쓰이는 import/export 는 ES Module 시스템 mjs 를 사용하면 Node 에서도 ES 모듈 시스템을 쓸 수 있다. 하지만 대중적인 pick 은 아닌 것 같음. 모듈을 require 하면 무슨 일이 일어나느냐? const http = require('http'); const fs = require('fs'); 아래와 같은 단계를 거친다. Resolving & Loading 모듈의 주어진 경로를 해석하고 로딩한다. 모듈의 종류는 크게 세 가지가 있음. http 와 같은 Node..

[Node.js] Streams 에 대해서 알아봐요.

Streams 란 데이터를 작은 조각(chunk) 로 나누어서 처리하는 방식 전체 데이터를 읽거나 쓰지 않고, 메모리에 저장도 하지 않는다. 따라서 큰 데이터를 효율적으로 다룰 수 있고, 메모리 절약 및 더 빠른 I/O 작업 처리가 가능해진다. Streams 또한 Event Emitter 의 인스턴스 따라서 Event 를 emit 하고 그에 대한 리스너 & 핸들러에 의해 이벤트 루프를 통해 핸들링된다. 4가지 종류의 Streams Readable 말 그대로 데이터를 읽을 수 있는 stream http request, fs read streams 가 있다. 발생시키는 주요 이벤트로는 data, end Wrieable 말 그대로 데이터를 쓸 수 있는 stream http response, fs write s..

[TIL] 2024-0123 : this 바인딩

Findings - 자바스크립트의 this 문제 : 취준때 공부했던 내용을 실무에서 마주하다니... - 일반적인 함수선언 방식에서 this 는 호출 시점에 결정. - 화살표 함수 방식에서 this 는 선언 시점에 결정. 만약 클래스의 메서드로 일반 함수를 정의해두고 외부에서 호출한다면 그 호출 시점에 결정이 된다. 일반 함수 문법을 사용한다면... - 객체의 메서드로 호출시, 해당 메서드를 호출한 객체를 가리킴 - 단독 함수로 호출될 시, 전역객체 혹은 undefined - 생성자 함수로 사용이 된다면 새로 생긴 객체 인스턴스 오늘 내 코드의 경우엔, 다른 클래스에서 this를 사용해 메서드를 정의해두고 그 메서드를 또 다른 클래스에서 호출했기 때문에, 그 시점의 this 를 가리켜 의도치 않게 동작을 ..

[Electron.js] 일렉트론에 대해서 알아보자!

최근 사내에서 진행하는 키오스크 프로젝트에서 일렉트론을 사용해 데스크탑 앱을 만들어보고 있다. Introduction | Electron Welcome to the Electron documentation! If this is your first time developing an Electron app, read through this Getting Started section to get familiar with the basics. Otherwise, feel free to explore our guides and API documentation! www.electronjs.org 일렉트론이란 웹에서 사용하는 기술, HTML, CSS, JS 를 가지고 데스크탑 프로그램을 개발할 수 있는 프레임워크이다..

[Node.js] Node란 무엇이냐..이벤트 루프란..?

최근에 Nest 를 공부하기 시작했는데, 뭔가 더 기본적인 개념을 알고 싶어서 먼저 Node.js 에 대해 정리를 해보려고 한다. Node.js 란? 자바스크립 런타임 환경, 자바스크립트로 서버 환경을 개발할 수 있는 런타임이다. 비동기 이벤트 기반의 런타임이라고 하는데... 그래서 이벤트 루프가 주요한 개념으로 포함된다. 노드의 구성 요소로는 크게 V8 엔진과 libuv 라이브러리가 있다. V8 엔진은 구글 크롬의 브라우저 엔진과 동일한 것이고, 인터프리터를 기반으로 자바스크립트 코드를 기계어로 변환하는 역할을 함. 그리고 libuv 라이브러리는 비동기 I/O를 담당한다. 이벤트 루프 및 비동기식 태스크 처리, 파일시스템 접근 및 네트워크 등... 서버사이드 개발을 위해 필요한 동작을 libuv 라이브..

[TIL] 2024-0110

Facts - 어제에 이어 여전히 electron 을 파헤치는 중... Feelings - 어쩌다보니 키오스크 개발을 웹 프론트에서 핸들링 하게 되었다. (사실 내가 할 수 있다고! 좋다고 했음..~) - 처음엔 Next.js 로 빌드해서 웹 서버로 띄웠었는데, 기기 펌웨어와 요러쿵 죠러쿵 통신을 해야하는 부분이 있어서 일렉트론으로 로컬 서버를 띄운 뒤에 private Ip 로 post 요청을 보내는 방식으로 했다가... - 동료 개발자분께서 여러 날의 디깅을 해주신 끝에 자동 업데이트 기능이 완성되어서, 본격적으로 일렉트론으로 코드를 옮겨 수정하고 있다. - 일단 전에 하던 것에 비해 새롭게 배우고 부딪혀야 할 것이 많긴 한데, 그게 꽤 재밌다. 웹 환경이 아닌 네이티브 환경이다보니 IPC 라던지, 보..

[TIL] 2024-0109 electron IPC 모듈로 통신하기

Facts - Next.js 로 웹서버에서 띄워주던 UI 를 Electron 내의 renderer 로 옮기는 통합 작업 진행 Findings - Electron 에서 로컬 경로의 이미지를 로드하려면, custom protocol 을 설정해주어야 한다. 그 이유는 일렉트론이 chronium 과 node를 기반으로 하는데 이 두 환경 사이의 상호작용에서 보안 이슈가 발생할 가능성이 있기 때문에 그렇다고 한다. (어떻게 동작하길래 보안 이슈가 발생할 수 있는거지..?) - electron 에서는 main 프로세스와 UI를 띄워주는(브라우저 같은..) renderer 프로세스를 갖는다. 이 두 프로세스 간 통신을 위해서는 IPC 모듈을 사용해야 하는데, 렌더러 프로세스에서 사용할 수 있는 IpcRenderer ..

file, blob 객체의 차이점

최근 사내 프로젝트를 진행하던 도중, ai 인식을 위해 키오스크 기기에서 촬영한 이미지 파일을 서버로 보내야 하는 상황이 있었다. 이미지 파일을 blob 형식으로 보냈는데, 서버에서 정상 인식이 되지 않는 상황이 발생해 디깅을 하다, File 형식으로 보내야 한다는 것을 깨닫고... 두 형식의 차이점이 무엇인지 궁금해졌다. 결론부터 말하자면, File 객체는 Blob 의 확장이다. 만약 input 을 통해 file 을 업로드 하면, 이 데이터의 형식이 바로 File 형식이다. 테스트를 위해 임시로 input 을 통해 file 을 받아 업로드 했을 때 정상 동작했던게 바로 이런 차이가 있기 때문이다... 그렇다면 Blob 객체란 무엇이냐? Blob 은 Binary Large Object 의 약자로, 이진 ..

151. Reverse Words in a String

Reverse Words in a String - LeetCode Can you solve this real interview question? Reverse Words in a String - Given an input string s, reverse the order of the words. A word is defined as a sequence of non-space characters. The words in s will be separated by at least one space. Return a strin leetcode.com 내 풀이 /* [문제] - 문자열 s가 주어졌을 때, 단어들의 순서를 뒤집어라 - 단어들은 공백을 기준으로 나뉘고, 공백을 기점으로 뒤집어야함 - s가 주어질 때 ..

[Leetcode] 345. Reverse Vowels of a String

Reverse Vowels of a String - LeetCode Can you solve this real interview question? Reverse Vowels of a String - Given a string s, reverse only all the vowels in the string and return it. The vowels are 'a', 'e', 'i', 'o', and 'u', and they can appear in both lower and upper cases, more than onc leetcode.com Given a string s, reverse only all the vowels in the string and return it. The vowels are ..

2023년 회고

벌써 2023년의 마지막 날이 되어버렸다. 잊고 있었는데 누군가 쓴 회고를 보고 나도 한 해를 리마인드 하고 싶다는 생각이 들어 몇자 끄적여 본다. 잘한 일 1. 헬스 시작하고 꾸준히 한 것 취업 후 6월부터 PT 를 등록했다. 헬스 정확히는 쇠질 운동을 하고 싶다는 로망(?)은 오래전부터 가져왔는데, 2년 전 쯤 발목 수술 받았던 것도 그렇고 스스로 신체에 대한 자신이 없어서 -외적인 부분이 아니라 기능적인 부분에서- 헬스장에 가는 것을 미뤄왔다. 물론 헬스 하기 전에도 여러 운동을 해오긴 했다. 수영, 필라테스, 체형 교정 목적의 PT 라던지 달리기 등... 특히 달리기와 체형 교정 PT 가 큰 도움이 되었다. 이건 2022년의 잘한 일 중 하나이긴 한데... 종아리 근육도 많이 회복되었고, 발목 유..

[Leetcode] 605. Can Place Flowers

Can Place Flowers - LeetCode Can you solve this real interview question? Can Place Flowers - You have a long flowerbed in which some of the plots are planted, and some are not. However, flowers cannot be planted in adjacent plots. Given an integer array flowerbed containing 0's and 1' leetcode.com You have a long flowerbed in which some of the plots are planted, and some are not. However, flower..

[Leetcode] 1431. Kids With the Greatest Number of Candies

Kids With the Greatest Number of Candies - LeetCodeCan you solve this real interview question? Kids With the Greatest Number of Candies - There are n kids with candies. You are given an integer array candies, where each candies[i] represents the number of candies the ith kid has, and an integer extraCandieleetcode.comThere are n kids with candies. You are given an integer array candies, where ea..

[Leetcode] 1071. Greatest Common Divisor of Strings

Greatest Common Divisor of Strings - LeetCodeCan you solve this real interview question? Greatest Common Divisor of Strings - For two strings s and t, we say "t divides s" if and only if s = t + ... + t (i.e., t is concatenated with itself one or more times). Given two strings str1 and str2, return tleetcode.comFor two strings s and t, we say "t divides s" if and only if s = t + ... + t (i.e., t..

[TIL] 2023-1227 Nest.js 공부하는 중

Facts 사내에서 electron + Next.js 를 활용한 키오스크 POC 개발을 담당하게 되었음. POC 자체는 80% 정도 진행 되었다고 보여짐. 현재까진 여러 이슈가 있지만 일단 눈앞에 놓인 것을 하고 있음. 백엔드에도 관심을 가지게 되어서 TS 기반 프레임웤인 Nest.js를.. 노마드코더 강의 보면서 공부해보는 중. Feelings 스타트업답게 회사에서 정말 많은 변화가 일어나고 있음. 그에 발맞춰 나도 변화해야겠다는 생각이 정말 많이 듬. 대표님과 사내 개발 문화에 대한 이야기를 나누다가, 문제의 본질 중 하나는 '서로 자유롭게 물어보기 힘든 분위기' 도 있음을 깨달음 예전에 팀플하면서도 느꼈던 부분이지만, 설령 실질적인 도움이 되는 이야기가 아니더라도 일단 자유롭게 이야기하고 받아줄 수..

[Leetcode] 1768.Merge Strings Alternately

Merge Strings Alternately - LeetCodeCan you solve this real interview question? Merge Strings Alternately - You are given two strings word1 and word2. Merge the strings by adding letters in alternating order, starting with word1. If a string is longer than the other, append the additional leleetcode.comYou are given two strings word1 and word2. Merge the strings by adding letters in alternating ..

[TIL] 2023-1208 노션 API 활용하기... 근데 그냥 삽질 푸념...

Facts & Feelings & Findings... - 개인 작업은 완전히 삽질 데이... 반년전에 멈춰두었던 블로그 프로젝트를 다시 진행중인데, db 겸 에디터로 활용하려고 했던 노션 api 가 말썽이다. 그냥 깔끔하게 html 로 데이터를 받아올 수 있으면 참 좋을텐데, notion api 는 자체적인 dto 로 데이터를 내보내주고 있다... 근데 이 block 단위가 무진장 헷갈린다... - react-notion-x 에서 제공하는 NotionRenderer 를 활용하면 이를 html 로 변환해주지만, 이를 스타일링 하기가 쉽지 않음... 최근 사내에서도 QR Scanner 라던지 date-picker 같은 외부 라이브러리를 불러와 디자인에 맞게 CSS 커스터마이징을 많이 해봤는데, 현재 프로젝..

[TIL] 2023-1207

Facts & Findings - 리스트의 선택을 관리하는 useSelect 훅을 만들었었는데, 제네릭을 활용해 타입을 유동적으로 받아오면서 여러 로직에 재사용 할 수 있도록 수정해주었다. 이 list 에 대해 중복된 상태를 제거하고, 훅에서 리턴하는 상태를 활용하도록 개선해줌. - QR 스캔에 관련된 테스트 로직을 작성중이다... cypress 에서 전체 시나리오에 대한 테스트를 진행하려고 했는데, QR 데이터를 주입하는게 좀 까다로워서 고민이 된다.... ... } containerStyle={{ width: '100vw', height: '100vh' }} videoContainerStyle={{ width: '100vw', height: '100vh', paddingTop: '0px', }} vi..

[TIL] 2023-1206 크로스 브라우징 지원, 테스트 코드 작성 등등등...

Facts - cypress 테스트를 위한 셋업, QA 수정사항은 테스트 코드와 함께 수정하려고 함... 근데 무진장 오래걸리겠는데 흠... - QR 코드 스캔하는 부분을 cypress 테스트로 작성하려고 함... 흠... 오래걸리겠지만 그래도 해봐야지... Findings - 사파리 브라우저 기본 컬러값이 크롬이랑 달라서, 사파리에서 버튼이 파랗게 보인다던지.. 그런 경우 디자인에 맞는 정확한 컬러를 지정해주면 된다. 전역으로 color 값을 지정한 경우라도 button 태그의 color 는 적용이 안되기 때문에 그런 현상이 있었던 것으로 보여짐. - max-height 과 overflow-y scroll 속성이 있는 경우 blur 처리되어서 나오는 현상이 있음.(크롬브라우저) 이 때 border-ra..

프론트엔드 e2e 테스트 도입기: 구조화가 필요해..! (feat. cypress)

배경 기존에 서비스중이던 프로젝트 구조를 변경에 대응하기 쉽도록 리팩토링하는 작업을 맡게 되었다. 그 중 가장 시급했던 부분은 로그인/인증 파트였는데, 기존에도 이상하게 에러가 많이 발생하는 파트였지만... 에러를 잡기 위해서 고치면 고칠수록 다른 부분에서 또 다른 이슈가 발생하는 상황이 있었다. 규모가 규모인지라, 별도의 QA 팀도 없어서 이슈를 고쳤을 때 또 다른 이슈는 없는지, 또 어느 범위까지 영향을 미치는 것인지 충분히 파악이 되지 않은 상태에서 배포를 하다보니 미흡한 부분이 그대로 유저에게 노출이 되었고... 비슷한 이슈에 대한 반복적인 대응에 나를 포함한 다른 여러 유관부서 팀원들의 리소스를 낭비하게 되는 현상이 있었다. 😢 분명 나는 개선하려고 리팩토링을 시작했던 건데... 가독성도 좋아지..

[TIL] 2023-1129

Facts - QA 넘기고 코드 개선 작업 진행중... 흠... - 디깅한 내용을 문서로 정리하는 중... 빠른 시일내에 블로그 글로 재탄생 시켜야지..! Feelings - 새 프로젝트가 시작되는데 기간이 아주 타이트함.. 하지만 재밌을 것 같다.. 하지만 일정이 제대로 갖춰질까..~? Findings 1. CSS 선택자 꿀팁... only-child 선택자를 사용하면 요소가 1개만 있을 때 속성을 제어할 수 있다. 아래는 2개 컬럼의 그리드에서 요소가 하나만 존재할 때 1개 컬럼으로 변경하는 코드.. display: grid; grid-template-columns: repeat(2, 1fr); /* 자식요소 하나만 있을 때 그리드 컬럼 1줄로 변경... */ & li:only-child { grid..

[TIL] 2023-1124

Facts - 에러 핸들링 로직을 수정했다. 커스텀 에러 바운더리를 쓰고 있는데, 현재 로직상으로 Get 요청에서 에러가 발생해도 에러가 발생한 UI를 다시 재렌더링 하므로 무한 Get 요청과 에러 지옥에 빠지는 현상이 있었다. 일단 급한대로 에러 바운더리에서 에러가 발생한 메서드 타입을 확인해서 분기처리 하도록 했는데.. 조금 더 우아하게 에러를 처리할 방법이 없는지 고민을 해봐야겠다. 흠..~ Feelings - 어제 수도 코드를 쓰자는 셀프 피드백을 받아들여서 적용해봤는데, 작업하다 흐름이 끊겨도 내가 어디까지 생각하고 있었는지 바로 복귀할 수 있어서 좋았음. 역시 메모와 기록을 생활화..~ 생각도 적으면서 하기..~ Findings [Five lines of code] - 함수가 한 번에 한가지 ..

[TIL] 2023-1123

Facts - 기록을 멈춘지 또 한달이 금세 지나버렸다. - api 연동 및 에러핸들링 로직 작성중. - five lines of code 스터디 시작. Feelings - 성장의 동력을 잃은 느낌... 나는 왜 일을하고 공부를 하고 발전해야 하는가... 인스턴스 즐거움 >> 깊이를 요하는 즐거움이 되어버린 요즘. - 하지만 성장의 즐거움과 기쁨을 이미 조금이나마 맛보았으므로, 다시 잃기 전에 빨리 돌아와야겠다. ~.~ Findings [Five lines of code] - 회사에서 기존 코드 리팩터링할 일이 많은데, 효과적으로 하고자 구매하게 됨. - 리팩터링에 있어서.. 메서드를 추출하는 까닭은 긴 코드

[TIL] 2023-1023 부상 주의 삐용삐용

Facts - 또 잠깐 방심한 사이 며칠이 지나버렸다. 회사 일 이외에 운동밖에 안해서 딱히 뭘 써야할지 몰랐다고 하고 넘어가자. - 새로 런칭하는 프로젝트 개발 일정 산출 및 개발 착수 - 배포 전 QA 에서 발견된 이슈 수정 Feelings - 허벅지 부상당해서 병원 다녀왔다. 미세하게 찢어져 피가 고여 감각이 이상하게 느껴질 수 있다는 의사선생님의 말씀이... 가동범위 나온다고 쭉쭉 늘리지 말고 스트레칭 잘 하고 준비가 잘 된 상태에서 들어가도록 하자. 흠 분명 스트레칭 열심히 했는데 참;;; 부상 조심 ㅠ Finding - Sentry init 을 한 뒤 초기 CSS 가 깨지는 현상이 있었다. 원인은 replay 플러그인이었는데, 다음과 같이 App 컴포넌트에서 lazy loadin g 하도록 해..

[TIL] 2023-1011

Facts - 어제 했던 일이긴 하지만, Next.js 프로젝트에 Suspense 를 사용해 로딩 화면을 띄워봄 - 오늘은 빌드시에 환경변수에 현재 날짜와 시간을 주입하는 스크립트 파일을 작성해봄 - 정기 배포일, 브랜치 전략을 수립함 - 왜 하는지 모르겠는 회의 ... Feelings - 정기 배포건과 버그 픽스가 다른 날짜에 배포된다고 생각하니 일단 든든하고, 업무적으로도 더 정리된 느낌이 듬 - 이건 이래서 안되고 저건 저래서 안되고 보단... 일단 해보고 되도록 고친다고 마음 먹는게 좋은 것 같음 Findings - react query 에서 suspense 옵션을 true로 두면, 특정한 useQuery 에 대해 무한대로 요청을 보내는 현상이 있다. 다른 요청과의 차이점이라면 onSuccess ..

[TIL] 2023-1008

Facts - react-notion-x 를 활용해 notion page 를 html 로 옮기는 작업을 하고 있음 - 그냥 문서 보면서 적용해보는 중 Feelings - 이것저것 뜯어보는 재미는 있다. Findings - supperHydrationWarning Next.js 의 app router 와 server component 를 사용하는 도중 아래와 같은 에러를 만났다. 결론적으로 위 에러를 안보이게 하려면 suppressHydrationWarning 옵션을 true로 주면 된다. 이런 에러가 발생하는 원인이 뭘까? 서버를 통해 렌더링 되기를 기대하는 결과물과 실제로 클라이언트에서 렌더된 결과물이 일치하지 않았을 때 발생하는 에러이다. hydration 의 정의를 생각해보면, 서버에서 렌더링된 정..

[TIL] 2023-1006 배포주기에 대한 고민, 하체한 날

Facts - 오래된 e2e 테스트 로직을 최신화함. - 테스트 구조화에 대한 문서 작성 - 이슈 디버깅, 사내 웹 배포관련 의견 리뷰 Feelings - 테스트 로직도 구조화가 잘 되어있으니 작성에 드는 시간이 줄어드는 것이 느껴짐. 역시 일단 단순하고 이해하기 쉬워야 한다. Findings - cypress 에서 대부분의 이해하지 못하는 에러(이게 왜?) 는 껐다 다시 키거나 버전을 업데이트하면 해결 되는 것 같다. 까다로운 녀석 - 배포 주기에 대한 고민... 다른 개발자분께서 타 팀은 어떻게 배포하는지 정보를 가져와주셨는데, 역시 회사마다 팀 상황마다 모두 다른 것 같다. - 최근에 정기 배포로 빠져야 할 변경사항 (리팩토링이라던지..) 들이 핫픽스와 함께 딸려 배포가 되다보니, 제대로 검증이 되..

[TIL] 2023-1005

Facts - 유닛 테스트 짜다가 store 동기화 때문에 짜증나서 잠시 미룸 - 다른 로직의 e2e 시나리오 및 테스트 코드 작성 Feelings - 테스트로직 짜는데 시간이 너무 걸린다. 엉엉 하루종일 테스트만 짠다 엉엉 - 처음부터 TDD 를 시도하면 어떨까.. Findings - jsdom이 업데이트 되어서 jest 에서 localStorage 를 모킹하지 않아도 동작한다고 함. 하지만 어쩐지 내 코드에서는 안되었던 것 같아 모킹이 되어있음. 별 문제는 없어서 이대로 쓸 생각임 ㅋㅋ - 클래스 메소드에서 화살표 함수를 사용하는 것? 좋은 글이 있음, 예전에 this 바인딩 이슈로 클래스의 메서드로는 화살표 함수를 쓰지 말아야겠다고 생각한 적이 있는데, 그 외에 추가적으로 함수에 프로토타입이 생기지..

[TIL] 2023-1004

Facts - e2e 테스트 - 기타 수정 등등 Feelings - 오랜만에 다시 기계식 키보드로 두드리니깐 좋았다. Findings - yarn script 에서 &&는 순차처리 &는 병렬이라는 사실을 알게됨 - cypress 에서 가끔 크롬 브라우저와 연결이 안되는 에러가 뜰 때가 있는데, 이땐 일반 크롬 브라우저를 다 닫고 다시 테스트를 열면 해결된다. Cypress failed to make a connection to the Chrome DevTools Protocol after retrying for 50 seconds. This usually indicates there was a problem opening the Chrome browser. The CDP port requested was..

[TIL] 2023-1003

Facts - 다시 블로그 만들기 시작함 Feelings - 연휴 끝 Findings - 커스텀 컴포넌트에서 JSX Element 가 아닌 일반 Element 타입으로 인식되는 오류가 있었음. - 찾아보니 의존성 패키지 안에서 선언된 타입간에 충돌이 발생할 경우 위와 같은 문제가 발생할 수 있어서, 전체 패키지에 대한 업데이트를 진행했다. yarn upgrade --latest - 노션 블럭 -> html 변환을 직접 모듈 만들어서 하려고 했는데, 너무 오래걸릴 것 같아 잘 만들어진 바퀴 (react-notion-x) 를 활용하기로 함

[TIL] 2023-0930

Facts - cypress e2e 테스트 작성중... 특정 응답에 대한 케이스를 테스트하는 중이라 intercept 활용중 Feelings - 연휴동안 엄청 쉬고 다시 시작하려니 힘들다. 하기 힘든 날에는 30분이라도 들여다 봐야지 Findings - intercept 가 모든 요청에 대해 적용되는게 아니고, 첫번째 요청에만 적용되는 현상이 있음 => intercept 를 위치시키는 순서의 문제, axios interceptor 랑 헷갈렸다. intercept 의 순서가 중요함..! 이 부분만 따로 실행시키는 initialize 메서드가 있으면 좋겠군. Cypress.Commands.add('migrationLogin', (email, password) => { // 이 구문이 실제 api 요청을 보내..

[TIL] 2023-0926 테스트

Facts - 주요 서비스 로직 중 하나의 동작 과정에 대한 e2e 시나리오 작성 - 라우터 관련 이슈가 있어서 수정 - e2e 테스트 도입 및 디자인 패턴에 대한 발표 영상을 공부함 - 가슴운동 및 유산소 Feelings - 몇일 째 비슷한 영역의 이슈로 1일 1회 수정하고 있음 - 비가와서 그런지 연휴 전날이라 그런지 엄청 하기 싫고 생산성이 저하됨 Findings - 재밌는 짤을 찾았다. - e2e 테스트도 시간이 지남에 따라 레거시가 되는 것 같은데 어떻게 하면 쉽게 유지보수 할 수 있을까, 여기도 디자인 패턴을 적용하는 사례가 있는데... 링크 Commands 옵션이 있는데 여기는 아예 관심사별로 클래스를 만들어 재활용 하는 방식을 택하고 있다. Commands 보다 더 명시적으로 관리가 되는 ..

[TIL] 2023-0925 점진적 과부하

Facts - 사내 프로젝트 EsLint 룰 공통화 하면서 정리하는 작업을 했음. - 또 예측하지 못한 오류가 발생해 수정하고 배포했음. - 그래서 정작 오전에 계획한 회사 일은 하지 못했다. - 홀딩했던 전화 영어도 다시 시작! - 로또 과제 진행, view 와 controller간 의존성은 분리했는데 이벤트 바인딩 덕분에 역할을 정의할 수 없는 모호한 영역이 생겨버림. Feelings - QA 가 꼼꼼하게 진행되지 못하고 테스트도 제대로 갖춰져 있지 않아서 이런 자잘한 버그를 찾느라 생산성이 저하되는 것을 느낌. - 좋은 품질의 제품을 만드는 것은 내 시간까지 아껴주는 일이라는 것을 몸소 느끼게 되었음.. - 사람은 적은데 할 일은 많으니 시간을 아껴줄 수 있는 시스템을 잘 구축해야겠다고 다짐한 하루..

[TIL] 2023-0924 : 유연하고 확장되기 쉽고 교체되기 쉬운 코드를 작성하자.

Facts - 미완성 상태긴 하지만 영화 리뷰 STEP1 PR을 올렸다. - 로또 미션 STEP 3 리팩토링 진행 Feelings - 어쨌든 PR 을 올렸다는 것 자체가 마음을 조금 편하게 해줌. - 한 번 재미있다고 생각하면 또 너무 재밌어서 계속 하고 싶음 - 날씨가 좋아서 기분이 좋았다. Findings - 오늘 받은 피드백 중에는 '다른 서비스가 여러 플랫폼에 서비스를 제공하기 위해 어떤 노력을 할지 고민해보면 많은 공부가 될 것이다' 라는 내용이 있었다. 이미 성장한 큰 서비스가 어떻게 생겨먹었고 굴러가는지 관심을 가지고 인사이트를 얻는 것도 큰 공부가 되겠음... - 지난 PR 에서는 일단 로또 게임이 웹 UI 에서 돌아가게 만드는 것에 초점을 맞춰서 메서드고 코드 정리고 하나도 하지 않았었는..

[TIL] 2023-0922

Facts - NextStep 영화리뷰 1단계 미션, 역할 나누고 객체 분리 및 구현 - parcel 도입 - 지속적인 이슈에 대한 디버깅 & 회의 & 버그 픽스 등등... Feelings - 이틀 전 TIL 이라 어떤 감정이었는지 잘 기억이 안난다. ㅋ - 아마 금요일이라서 기분이 아주 좋았을거야... Findings - 말로만 듣던 Parcel 을 써봤는데 config 가 정말 하나도 없고 가볍고 빨랐다. 정말 소규모 프로젝트에는 간편하게 쓰기 좋은듯. yarn add -D parcel # scripts 추가 "preview": "parcel ./index.html --open chrome --port 3000", "build": "parcel build ./index.html", - 특정 path ..

[TIL] 2023-0921

한동안 개발 기록이 뜸했던 것 같아 멈춰두었던 TIL을 다시 써보려고 한다. 매일 기록을 하지 않았더니 나중에 더 큰 기록을 할 때 정리할 양이 너무 방대해서 힘든 것 같음. 모든 성장은 점진적 과부하다… Facts - 출근길에 객체지향의 사실과 오해 읽고 정리함 - 사내 프로젝트 EsLint 룰 공통화, 그에 따라 필요한 세팅 추가하고 룰 별로 주석 추가함 - NextStep 과제 리뷰 (미완성이지만) 어쨌든 리뷰 요청함 - 테스트가 커버하지 못한 이슈 디버깅하고 해결함.. - Vite 마이그레이션 진행한 내용 정리해서 블로깅 Feelings - 가장 독서가 잘되는 공간은 출근길 지하철 - 분명 개선하려고 리팩토링을 했는데, 계속 이슈만 생기고 아주 죽겠음. - 하나라도 리뷰를 요청했다는게 아주 뿌듯하..

CRA to Vite 마이그레이션 및 테스트환경 세팅하기

배경 CRA 기반으로 세팅된 사내 프로젝트 중 하나를 Vite 로 마이그레이션을 진행하게 되었다. CRA 는 최신 번들러에 비해 크기가 크고 속도가 느린 편이고, 현재 리액트에서 공식적으로 deprecated 된 상태라 변경이 필요했다. 공식적으로는 Next.js, Remix, Gatsby 등으로 새 프로젝트를 시작하라고 하는데, 그러면 전체 구조가 바뀌어야 하니까 가장 현실적이고 사례가 많은 Vite 를 도입하기로 함. 성과 빌드 타임과 로컬 컴파일 타임이 무진장진장 거의 3배 정도 줄어들었다. CRA : 빌드 타임 58.68s. Vite : 빌드 타임 19.61s. 기존에는 빌드를 하고 앱을 시작하기 까지 한 세월이 걸렸는데, 거의 시간이 거의 3배 정도 단축되어 DX 가 무척 향상되었다. 번들 사이..

# 5 / 객체간의 결합도 / 객체를 객체답게?

TDD 시리즈의 5번째 글이다. 틈틈히 다음 단계의 과제를 진행하고 있는데, 몇일 전 받았던 피드백을 정리해보면 좋을 것 같아서 글을 쓴다. 시간이 많이 없어서 그냥 간단하게 쓰고 넘어가겠음... 이어지는 이전 글 # 4 / 함께해요, 리팩토링 😇 + 사담 겸 푸념;; TDD, Cleancode with JavaScript 카테고리의 4번째 글이다. 지난 글에서, 자동차 경주 게임이라는 과제를 진행중이라고 작성했는데 어제 1차 과제 PR을 올리고 리뷰를 받을 수 있었다. 개인적으로 어떤 태 friedegg556.tistory.com 이전 글에서도 작성했지만, 각 객체의 역할과 책임을 위와 같이 나누어놓은게 큰 도움이 되었다. 덕분에 기능을 추가하는데에 있어서 설계의 변경사항이 적었고 거기에 따라 긍정적인..

인프콘 2023 짧은 후기 및 개인적인 인사이트

인프콘에 다녀왔다. 사진을 좀 못찍었는데 오후에 슬렁슬렁가서 4개의 세션을 들었다. 들은 내용을 바탕으로 간단한 인사이트를 정리해보려고 한다. 1. 김영한님의 김영한님은 인프런에서 자바 스프링분야 1타 강사로 유명하시다고 알고있다. 한 번도 강의를 들어보진 않았으나… 이번 세션을 한 줄로 요약하면 ‘기술에 대한 학습과 비즈니스에 대한 이해를 동시에 가져가야 한다.’ 임. 사실 어떻게보면 당연하고 기본적인 내용이긴 한데, 기술에 대한 열정이 너무 큰 나머지 비즈니스를 등한시하는 개발자가 있다고 함. 내 경우에 빗대어 보았을 때 나도 좀 그런 경향이 있는 것 같기도 하다. 물론 회사에서 진행하는 여러 사업들이 있기에 현재 하고 있는 것에 더 집중하려고 노력한 것도 있지만.. 아무튼. 비즈니스의 이해가 왜 중..

# 4 / 함께해요, 리팩토링 😇 + 사담 겸 푸념;;

TDD, Cleancode with JavaScript 카테고리의 4번째 글이다. 지난 글에서, 자동차 경주 게임이라는 과제를 진행중이라고 작성했는데 어제 1차 과제 PR을 올리고 리뷰를 받을 수 있었다. 개인적으로 어떤 태스크를 진행할 때 이렇게 글로 정리하고, 기록을 남기면서 했던 경험이 좋았어서, 이번 리팩토링 과정을 이렇게 기록해보려고 한다. (셀프 대화..?) 내 사고의 흐름을 추적할 수도 있고, 어디서부터 문제가 시작되었는지 알 수 있다는 부분이 좋다. 그리고 좀 더 집중도 되고, 나중에 아.. 이랬었구나 기억할 수도 있고, 블로그에 적는거니 나름 구조화도 시킬 수 있고.. 주절주절 사이드 이펙트 관리 이번 과제에서 내가 가장 헤맸던 부분은 1. 구현을 어떻게 해야하는가 2. 어떤 범위로 테스..

# 3 / 일급 컬렉션이 머에영? (우적우적 🍿)

현재 진행중인 (아직도..) 자동차 경주 게임 PR을 날리고, 드디어 리뷰를 받게 되었다. (벌써 이틀 지났어..) 리뷰 도중 일급 컬렉션에 대한 언급이 나왔는데, 이게 뭔지 잘 몰라서 정리해보려고 함. (들어는 본 것 같은데...) 상황은 아래와 같다. export class CarMover { #raceCars constructor(cars) { this.#raceCars = this.#getRaceCars(cars) } #getRaceCars(cars) { return cars.map((carName) => new Car(carName)) } moveCars() { return this.#raceCars.map((car) => { const score = makeRandomNum() car.move..

# 2 / 어떤 과정으로 문제를 해결해 나갈 수 있을까.

오늘은 두 번째 라이브 세션이자 OT 를 제외하고는.. 과제를 진행하며 참여한 첫 라이브 세션이었다. 첫 주차 과제로 '자동차 경주' 게임을 만들게된다. 과제는 STEP1, STEP2, STEP3 으로 나뉘어 있는데 이전 기수에서는 화면단을 가지고 cypress 로 테스트를 하는 방식이었다면, 이번엔 콘솔을 기반으로 jest 로 TC 를 짜는 방식이다. 개인적인 기록이니까.. 그냥 양식에 구애받지 않고 자유롭게 남겨보겠음. 사실 첫 과제 PR 을 이번 라이브세션 전까지 올리고 싶었는데, 생각보다 어려웠고 또 TDD 를 적용하면서 해야한다고 생각하니 어디서부터 시작해야할지 몰라 더더욱 어려웠던 것 같다. 다른 분들의 PR 을 보면 MVC 같은 패턴 구조까지 적용해서 깔끔하게 만드셨는데 나는 '입력을 어떻게..

# 1 / OT. TDD 란 무엇인가.

NEXTSTEP 에서 진행하는 Tdd,Cleancode with JavaScript 5기를 수강하게 되었다. 사내 동료 프론트 개발자분이 이 과정을 수강하면 실력 폭풍 성장 100% 보장한다고 하셔서 내돈내고 듣는다. ㅋㅋ 더 많이 얻어가려면 스스로 열심히 해야되니까 과정에 참여하는동안 간단하게라도 기록을 남겨보려고 한다. 오늘 라이브 세션은 OT 여서, 이 과정에서 무엇을 얻어갈 수 있는지 또 어떤 방식으로 진행되는지에 대한 내용 위주로 진행되었다. 이 과정은 TDD 방식을 자바스크립트로 경험해보는 것이 주된 내용이다. TDD는 Test Driven Development 그러니까 테스트 주도 개발이라는 개발 방법론이다. TDD 정말 좋다, 도입해야한다, 공부해야한다 말은 많이 들어봤지만 이를 실무에서 ..

[회고] 2023년 상반기 회고 (feat. 취업 회고)

들어가는 말. 잘한 점은 끊임없이 무언가를 했다는 점. 아쉬운 점은 그 무언가를 과연 적절한 수준과 난이도로 지속했는지 의문이 남는다는 것. 와~ 취업했다. 지나간 일을 잘 기억하지 못한다는 것은 좋은 걸까 나쁜 걸까... 분명 부트캠프를 수료하고 취업이 안되었던 5개월간 아.. 무척 힘들었던 것 같은데 지금 잘 생각이 나지 않는다. 역시 인간은 망각의 동물. 지난 기간은 '조급함'과 '하지만 난 나의 길을 가겠어'의 아슬아슬한 줄다리기였다. 결국은 그 둘 사이의 어딘가로 타협해 현 회사에 입사를 했다. 아직 입사 한 달이 채 안되었으므로 회사 얘기는 나중에 하고, 오늘은 상반기 회고라는 목적에 충실해보려고 함. 이번 상반기 목표는 "상반기 내 취업" 이었고 그 목표는 달성할 수 있었다. 취준 기간동안..

[Web] Next.js 로 PWA(Progressive Web App)를 적용해보자!

온보딩을 진행중인데, Next.js 를 사용한 PWA 페이지를 만드는 태스크를 받게 되었다. 이에 진행을 하면서 PWA 란 무엇이고 어떻게 만들 수 있는지 알아보며 정리를 해보려고 한다. PWA 의 정의 Progressive Web App 이란 쉽게 말하면 웹 기술로 네이티브 앱과 같은 유저 경험을 제공하는 기술이다. (전혀 쉽지 않은데?) 다시 말하면, 웹을 만드는 기술(Html, CSS, JS) 로 네이티브 앱처럼 홈 화면에 아이콘을 추가하거나, 푸시 알림을 보내는 등의 기능을 하게끔 만들 수 있다. (실행은 브라우저에서...) 브라우저에서 보안상의 이유로 접근하지 못하는 시스템 하드웨어 등에도 접근이 가능하다는 장점이 있다. 왜 사용하는가 웹 기술로 네이티브 앱처럼 만드는 것의 장점을 가지고 있기 ..

Notion API 를 연동해 블로그를 만들어보자 -2

주의! 정보성 글 보다는 삽질 기록에 가깝습니다. API를 연동한 뒤에 데이터를 불러오고, 화면에 표현하는 작업을 했다. 내용 자체는 간단한데 Next13 공식문서도 읽으면서 찾아보고, 또 여러가지 적용 방법을 고민하다보니 생각보다 시간이 오래걸렸다. 우선 글 목록을 불러오는데에는 성공했기 때문에, 이 블로그 아이템을 클릭했을 때 상세 페이지로 이동할 수 있도록 Link 컴포넌트를 적용해주었다. 원래 하고 싶었던 것은 예전에 Next12에 있는 getStaticPaths 처럼 미리 static paths 를 slug 로 만들어 둔 뒤 이를 통해 각 상세 페이지를 만드는 것이었는데, 나는 글 상세 페이지에서 데이터 요청을 위해 id 값이 필요했기 때문에 Notion DB 상에 설정해두었던 slug 문자열과..

Notion API 를 연동해 블로그를 만들어보자 -1

지금까지 개발을 하면서 꼭 해보고 싶었던 것이 바로 직접 기술 블로그를 만드는 일이었다. (매우 멋져...!) Tistory 나 벨로그처럼 이미 만들어진 서비스가 확실히 사용하기도 편하고 또 노출도 많이 되지만, 실제로 내가 운영을 하면서 꾸준히 유지보수를 할만한 프로덕트를 하나 만들고 싶었다. 내가 제일 좋아하고 자주 하는게 기록 남기는 일이기도 하니까, 그러면 블로그가 딱 적당하다고 생각해 진행하게 되었다. 기술 스택 선정 Next.js 먼저 SEO에 유리한 Next.js 를 사용하기로 했다. 하꼬 블로그지만 많이 노출이 되면 좋은거니까..! 그리고 이번에 Notion API를 연동하면서 알았는데, Next.js 에서 제공하는 api 디렉토리를 통해 엔드포인트를 만들 수 있어서 유용하게 쓸 수 있었다..

[React] Hooks의 동작 원리 파악하기 (useEffect 를 중심으로)

이전에 useEffect 훅을 사용할 때 발생했던 에러 때문에 동작 원리가 궁금해 공부를 했었는데, 오늘은 그 내용을 조금 더 깊게 정리하고 기록으로 남겨 공유하고자 한다. (나를 꽤 괴롭게 했던... 카운터 컴포넌트와 그 에러에 대한 기록) 대부분의 내용은 리액트의 공식 문서 (구버전 및 신버전)을 참고하여 작성되었다. useEffect 는 무엇이고, 어떤 상황에서 사용할 수 있는가? 공식문서에 따르면, Effect 훅을 사용하면 함수형 컴포넌트에서 Side Effect를 발생시킬 수 있다고 한다. 일반적인 의미에서 Side Effect는 부수 효과, 즉 원래 목적과 다르게 외부 상태를 변경하는 등, 변화를 발생시키는 효과 (혹은 부작용) 을 의미한다. 함수형 프로그래밍의 기본 개념인 '순수 함수' 란..