삽질Oㅔ는 끝2 없ㄷr...

후기를 남겨 보자개요개편을 시작하게 된 이유UI 가 변경되면서, 프로젝트를 통합하고 최신 기술로 업그레이드할 기회로 삼았다. 개편의 주요 목표Next.js 도입여러 프로젝트를 하나로 합치기개편되는 페이지의 UI 통일컴포넌트 스펙 일관성 유지기술 선택Next.js기존 프로젝트들이 모두 React 기반이었기에 자연스럽게 Next.js를 도입했다.Zustand상태 관리가 필요해 전역적인 store로 Zustand를 사용했다.개발 과정에서 있었던 문제점공통 컴포넌트 설계CI 스크립트 작성Next.js에서 React로의 전환정적 페이지로 전환해야 한다는 의견이 개발이 상당히 진행된 후에 나왔다.서버 확장성에 대한 테스트가 완료되지 않은 상태였기 때문에.. 반대 의견이 나왔다.전역 에러 페이지 발생템플릿에서 타입 ..

개요개인 프로젝트를 진행할 때 Nest 를 사용하려 했더니, class 에 대해서 모르면 안 될 것 같았음따라서 class 에 대해 좀 더 깊게 알아보려 하였다클래스란OOP 의 중요한 구성 요소로, 객체를 생성하기 위한 템플릿이다클래스는 속성과 메서드를 포함하여 객체의 상태와 동작을 정의한다클래스의 주요 특징 (신입 면접 필수 질문이었던...)캡슐화: 클래스는 데이터와 메서드를 하나의 단위로 묶어서 외부에서 접근을 제한할 수 있다상속: 클래스는 다른 클래스의 특성을 상속받아 재사용할 수 있다다형성: 같은 인터페이스를 통해 서로 다른 클래스의 객체를 조작할 수 있다추상화: 클래스는 객체의 복잡성을 숨기고 단순한 인터페이스를 제공한다클래스의 기본 구조class Car { // 속성 (필드) private..

개요이번에 이직한 회사에서 gitlab 을 사용하는데, cicd 가 되어있지 않아 배포 과정이 수동적이었다이에 따라서 gitlab runner 구성과 gitlab ci 스크립트 작성을 통해 자동화 배포 환경을 구축하게 되었다Gitlab runner 구성먼저 gitlab runner 구성하는 작업을 진행했다gitlab runner 는 ci/cd 파이프라인을 실행하는 역할을 한다관련 가이드를 참고해서 runner 를 성공적으로 설치 / 등록할 수 있었다초기 구성은 여기가 잘 나와있음Gitlab ci 스크립트 작성그 다음으로는 .gitlab-ci.yml 파일을 작성해서 ci/cd 파이프라인을 구성했다.나는 파이프라인을 다음과 같은 단계로 나눴다Compile:dev 단계develop 브랜치의 mr 이벤트 발생 ..

들어가며 SSR 를 위해 Nuxt 를 하면서 결국엔 Node 서버까지 알아야 되는 상황에 처했다 이전에 공부하긴 했었지만 "대충" 훑기만 했었기 때문에 이게 뭔지 다시 톺아 보려고 한다 Node.js 가 생기게 된 배경 기존에 javascript 는 웹에서만 쓰이는 언어였다 나 첨 시작할 땐 언어라고 인정해 주지도 않았음 이때는 js 가 그저 html 을 예쁘게 만들어 주는 도구 정도였다 chrome 에서 v8 엔진을 만들었는데, 이게 무지 빠른 엔진이었던 것이었다 그리고 그 당시 웹 서버들은 매 요청마다 별도의 스레드를 생성하고 있었는데, 그게 리소스를 넘 많이 소모하고 확장성에 한계가 있었음 따라서 비동기 이벤트 주도 방식을 도입한 Node.js 를 개발하게 된 것임 I/O 작업이 블락되지 않아서 높..

들어가며 의도치 않게 너무 어그로 끄는 제목이 되었는데, 별 생각 없이 정한 제목입니다... 이 글은 그저 끄적이는 글이기 때문에 엄청난 의식의 흐름일 수 있습니다 갑자기 뿅 하고 끝날 수도 있으니, 이 점 양해 부탁드립니다 ㅎ;; 배경 최근 react 를 공부하면서, 클로저 패턴을 자주 쓰게 되었음 (예를 들어, click과 같은 이벤트 핸들러 함수에 특정 값을 넘기면서 이벤트도 함께 넘기고 싶을 때 이 패턴을 활용하곤 하더라) 예시 export default function App() { const togglePopover = (index) => (e) => { e.preventDefault(); e.stopPropagation(); setOpen(openedIndex === index ? null ..

Backstop 설치 Backstop 실행 스크립트 추가 "backstop:init": "backstop init --config=backstop.config.js", "backstop:test": "backstop test --config=backstop.config.js", "backstop:reference": "backstop reference --config=backstop.config.js", "backstop:approve": "backstop approve --config=backstop.config.js", "backstop:openReport": "backstop openReport --config=backstop.config.js" init backstop 초기 설정을 해 줌 (bac..

개요 디자인 시스템을 만들 때, 컴포넌트 모듈화를 하고 싶다는 생각이 들었다 마치 Vuetify 와 같은 사내 라이브러리를 만들고 싶었다 하지만 사내 기술은 Nuxt2 로 이루어지고 있었다 Vue2 만 지원하기엔, Vue2 에 대한 지원이 끊기고, 앞으로 나아가야 할 방향은 Vue3 이기 때문에 vue2, vue3 둘 다 지원이 필요했다 삽질 다른 라이브러리들은 Vue 버전을 어떻게 지원하는걸까? quasar:: 3버전부터는 vue3 만 지원 Vuetify:: 3버전부터는 vue3 만 지원 ㅜㅜ 진짜 없는걸까 새로운 라이브러리를 발견 https://github.com/vueuse/vue-demi 열심히 구글링하다 보니 vue-demi 라는 것을 발견함 description 에 적혀있듯이, Vue2 와 V..

개요 IDE 를 킬 때마다 매번 node 버전을 셋팅하는 것이 킹받았다 사전 작업 프로젝트의 node version 을 .nvmrc 로 추가해 놓는다 // .nvmrc 12.16.3 이것은 각 개발자가 로컬에 갖고 있는 것이 아닌, 프로젝트 디렉토리에 넣고, git 에 올리는 편이 나을 것 같다 (모든 개발자의 노드 버전을 맞추기 위해) zsh 설정 터미널에 vi ~/.zshrc 입력하여 zshrc 파일을 엶 최하단에 아래 내용을 넣고 > esc > :wq 하여 저장 autoload -U add-zsh-hook load-nvmrc() { local node_version="$(nvm version)" local nvmrc_path="$(nvm_find_nvmrc)" if [ -n "$nvmrc_path"..

간단 배경 설명 아토믹 디자인 패턴 도입하면서 몇 가지 한계점이 보이기 시작하였다 하나를 조금만 바꿔도 전체가 망가지는 상황이 생김 예를 들어, base swiper 에서 height 하나 조정했더니 메인이 이상하게 꼬여버림 이유는 메인에 스와이퍼가 있어서 그런 것 그래서 코드 변경하는 걸 좀 망설이게 되었고 페이지가 망가지는 걸 막기 위해 여러 방어 로직을 넣기 시작했는데, 이런 코드들이 개발자들 간에 오히려 혼란을 주고 있었음 그래서 생각했다 누군가 매번 지켜보고 있다면 이런 문제가 없지 않을까? 여기서 '누군가 지켜보고 있다'는 건 >> 테스트 코드라는 생각을 했다 데이터 중심의 유닛 테스트는 인증 같은 명확한 로직에는 잘 맞지만, 시각적인 변화를 테스트하기에는 한계가 있겠다는 생각이 들었다 “시각..

의식의 흐름으로 작성한 글입니다.. 그냥 무시해 주세요 ,, 적어야지... 적어야지 하다가 3월 중순인 드디어 적게 된다 23년에는 많은 일이 있었다 회사의 일 조직의 변화와 그에 따른 업무 강도 변화 내 역할과 캐릭터의 변화 개인적인 일 비사이드 참여 개발자 커뮤니티와 알고리즘 스터디 참석 특히 회사의 업무 강도는 2023년 중반부터 급격히 세져, 많은 도전을 겪었다 하지만 이런 변화는 나에게 중요한 개인적 발전의 기회가 되었다 깊게 공부하게 된 기술 Node.js 에 대한 공부 상태에 대한 공부 디자인 시스템에 대한 공부 도커에 대한 공부 다른 팀과의 효율적인 커뮤니케이션 방법 탐색 개인 프로젝트에서의 발전 aws 와 비슷한 NCP 에서 처음 서버를 다루게 됨 도커를 처음부터 구축하게 됨 Next.j..