유령이 나오는 젤리하우스

웹/일반

[모던 프론트엔드 구성] 2. npm workspace로 각 패키지별 dep 설정하기

TLDR; 🦄-w 플래그로 각 패키지 별로 다른 버전의 라이브러리를 설치하여 운용할 수 있다🦄 🦄 각 패키지는 자신의 package.json에 선언된 종속성을 우선적으로 따라 간다.🦄 🦄 그러나, 모노레포는 컨테이너 개념이 아닌, 관심사의 분리에 촛점을 맞춘 개념이므로, 패키지 간 종속성 교환을 완전히 막을 수는 없다 🦄 Previously on lastest post... 지난 포스트에서는 npm workspace를 이용해서 각 모듈을 패키지화하여 하나의 저장소에 관리할 수 있는 모노레포 구조를 구현해봤습니다. 모노레포 구조를 가져가게 된다면, 의존성 지옥에 빠지는 일 없이, 개발자들이 각자의 관심사에만 집중할 수 있고, 작업환경의 통일로 데브옵스에서도 큰 이득을 얻을 수 있다고 했습니다. 그러나, 만..

웹/일반

[모던 프론트엔드 구성] 1. npm workspace로 모노레포 구현하기

TLDR; 🦄 npm workspace를 사용하여 모노레포를 구성해봅시다🦄 ✨Sample Code✨ https://github.com/SpookyJelly/workspace GitHub - SpookyJelly/workspace: study in workspace for own good study in workspace for own good. Contribute to SpookyJelly/workspace development by creating an account on GitHub. github.com Before we start npm workspace는 npm 7 버전 이상부터 사용할 수 있습니다. node.js LTS를 설치하셨다면 기본적으로 npm 8 버전이 설치되어있어 바로 시작하시는데 문..

웹/일반

[모던 프론트엔드 구성 ] 0. 모노레포의 개념과 구현 방법

TLDR; 🦄모노레포 구조란, 하나의 저장소에 여러개의 서브 프로젝트가 존재하는 환경으로, 관심사의 분리를 용이하게 할 수 있도록 하는 방법론이다. 🦄 모놀리식 애플리케이션 모노레포를 설명하기 앞서, 모놀리식 애플리케이션에 대한 설명을 잠시 하겠습니다. 모노리스 (Monolith) 라고도 부르는 이 아키텍쳐는 이름처럼 크고 거대한 하나의 대규모 구조로, 어플리케이션에 사용되는 모든 코드가 들어가있습니다. 거대한 아키텍처는 그 자체로 강건한 아키텍처를 빠르게 구축할 수 있다는 장점이 있었으나, 아이러닉하게도 프로젝트의 규모가 커지면 커질수록 생산성이 떨어지게 됩니다. 모놀리식 애플리케이션의 한계는 다음 3가지로 줄일 수 있습니다. 1. 사소한 수정에도 기나긴 빌드, 배포 시간을 가지게 된다. - 내부 컴포..

웹/일반

도와줘요!! Antd DatePicker에서 한글이 안나와요!!

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄 import 'moment/dist/locale/ko'🦄 🦄 import 'moment/locale/ko' 아님!!!🦄 🦄아주 황당한 일이 생겼으니 재미로 봐주세요🦄 본문 Dependency antd: ^4.19.5 moment: ^2.29.2 아시다시피, antd는 moment를 사용합니다. 모멘트가 사망선고가 내려진지 엉겁의 시간이 흘렀지만, 모멘트가 감히 사망할것이라 추측하지 못한 탓인지, 아니면 그간 정이 너무 들었던지는 몰라도 antd는 계속해서 moment를 사용하고 있습니다. API도 moment 객체를 기준으로 설명하고 있고요. 물론, 모멘트 사후 moment.js를 쓰는 Component를 Day.js로 바꾸는 방법도 소개하고 있는데, 이..

웹/React

JSX에서 list를 랜더링 하는 방식

한 줄 요약 🦄React는 Array와 같이 이더너블 한 객체 안에 있는 태그들을 인덱스 순서대로 차례차례 랜더링한다🦄 🦄이때, Virtual DOM에서 어떤 요소에 변화가 있는지 감지하기 위해 부여하는 안정적인 고유값이다🦄 빌드업 리액트를 사용하다보면, 동일한 타입을 가진 데이터들을 비슷한 모습의 컴포넌트로 랜더링 해야할 경우가 많다. 여러개의 컴포넌트를 렌더링 하기 위해서 리액트는 엘리먼트의 모음을 { } 사이로 낑겨넣어서 JSX에 포함시킬 수도록 해줍니다. 쇼핑몰 홈페이지에 보여질 품목 리스트를 화면에 그린다고 간주해봅시다. const items = [ {title:'노트북',price:'1000000',stock:12}, {title:'커피콩', price:'5000', stock:100}, {t..

공략

(개발글 아님) 게임 World of Horror 한글 패치 제작을 마치고

80년대 일본괴담을 베이스로 러브크래프트를 듬뿍 묻힌 텍스트 어드벤처 게임. 월드 오브 호러이다. 흑백 + 호러 + 텍스트 + 로그라이트 라는 사람 지지리도 안꼬이는 힙스터 요소만 잔뜩 가져다 뭉개놓은 게임이지만, 난 이 게임이 퍽 마음에 들었다. 그래서 인터넷 게시판에 이 게임을 소개하는 글을 시리즈로 하며 몇 편 썼는데, 어라? 반응이 상당히 괜찮았다. 반응이라고 해봤자 댓글 몇개에 추천 몇개지만, 거기에 고무된 나는 몇 주간은 거의 정신이상자처럼 게시글을 쓰는 것에 몰두했다. 댓글들은 다 참 좋았지만, 몇 가지 마음 아팠던게, 연재글 보고 이 게임 꼭 하고 싶어졌는데, 한글이 아니라서 못하겠다는 것이다. 나도 내심 누가 한글패치 안 만들어주나 하고 끙끙 앓고 있었는데, 조사해본 결과 텍스트가 파일 ..

TIL

(22.02.13) Flutter 프로젝트에 Google Map API 연동 (사진 짱 많음)

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄 잘 보고 따라 하면 됩니다. 🦄 🦄 플러그인 공식 문서 를 같이 띄워놓고 보시면 더욱 편합니다.🦄 들어가는 말 회사에서 지금 제공 중인 서비스를 모바일 앱으로도 제공하자는 말이 나와, 나에게 플러터를 공부하도록 지시하였다. 왜 플러터가 채택되었는지를 설명하자면 너무 길고, 게시글 본연의 목적과 거리가 멀어지므로 생략하겠습니다.여하튼 나는 업무 시간에 플러터를 공부할 수 있는 시간을 부여받았다. 당연히 무작정 시간을 부여받은 건 아니고, 간단한 토이 프로젝트를 완성해 제출하기로 했다. 곰곰이 생각해보던 나는 예전에 친구가 심심풀이로 제작한 회사 근처의 식당을 추천해주는 웹 앱을 참조하여 같은 기능의 모바일 앱을 만들기로 하였다. 원래는 이 친구와 동일하게 ..

TIL

(22.02.06) Intellij - Javascript heap out of memory 오류

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄힙 메모리 : 사용자가 동적으로 할당하고 해제하는, 직접 관리할 수 있는 영역🦄 🦄Intellij 같은 IDE는 VScode와는 다르게 프로젝트마다 사용할 수 있는 힙 메모리를 제약하는데, 프로젝트의 메모리 크기가 설정된 힙 메모리보다 커지면 터지는 오류이다. (여기서 "vscode는 IDE 처럼 쓸 수 있는 텍스트 에디터이다." 라는 말이 조금 다가왔다.) 🦄 들어가는 말 항상 vscode 만을 쓰는 나였지만, 팀장님께서 intellij가 좋다며 전환을 강력히 주장하시는 바람에 얼떨결에 intellij로 넘어오게 되었다. 인텔리제이는 그냥 java 전용 IDE 인줄 알았는데 왠걸, 자스 기반 프로젝트도 커버해주고, flutter 프로젝트도 관리해주는 짱짱..