JEEWONSCRIPT

[Turborepo/Vite] React & Vue 컴포넌트 라이브러리화를 위한 모노레포 구축 새로운 프로젝트에서 코어와 공통모듈을 별도의 패키지로 분리하려는 시도를 하고 있는데요. Turborepo 와 Vite 를 이용하여 React 와 Vue 컴포넌트 라이브러리를 위한 모노레포 구축 과정을 기록하고자 합니다. History 기존의 서비스는 당분간 Vue 로 유지보수하며 React 로 점진적 마이그레이션을 진행하고, 새로운 서비스는 React/Next 로 제공하기 위한 효율적인 방법을 찾고 있었습니다. 그 대안 중 하나가 "공통 레포지토리를 두어 중복된 코드들과 UI 를 한 곳에서 관리하자" 입니다! 사실 저는 SDK 나 코어 개발을 해본적이 없어 기대가 되더라구요. 또 Webpack 과 Lerna 와..

[Vue.js/Core web vitals] 웹 성능과 유저 경험 개선하기 이번에는 Vue를 사용하는 새로운 프로젝트에서 레거시 코드로 이루어진 서비스의 웹 성능과 유저 경험(UX)을 개선한 내용을 기재해보려합니다~ History 협력업체로부터 새로운 프로젝트를 인수인계 받으며 코드분석을 진행하는데 아무리 보아도 적응되지 않는 이슈가 있었습니다. 메뉴를 이동할 때마다 화면의 모든 컴포넌트가 사라지고, 로딩 시간 동안 화면에서 아무것도 볼 수 없는 현상이었는데요. 화면이 깜빡인다 이말입니다! 이 문제는 프로젝트를 인수하는 저희 팀원들 뿐만 아니라, 서비스를 직접적으로 사용하는 회사 내부 사용자들에게서도 적지 않은 개선 요청을 받은 것으로 보입니다. 해당 프로젝트는 서비스의 규모가 큰 편이고, 도메인도 메뉴..

[Typescript/React-Query] 이미지 api 호출 트러블슈팅 프로젝트를 함께 개발하는 팀원이 api response 로 이미지가 내려오는데 에러가 난다고 하더랍니다. 제가 담당하고 있는 도메인에도 추후 동일한 환경의 api 가 제공될 예정이기에, 페어코딩으로 해결했던 내용을 재구성하였습니다. 이전까지 한번도 이미지 자체를 response 데이터로 받아본적이 없었다능... ...핑계다.. 나레기... hooks / api / ... / foo.ts 처음 코드를 작성할 때는 api 로 부터 이미지 자체를 받는 것이 아닌, 이미지 url을 받을 것이라고 생각했습니다. 그래서 다른 일반적인 api 요청 hooks 와 동일한 컨벤션으로 코드를 작성했지요. const FooApi = { getImag..

[React/디자인 시스템] 알잘딱깔센 표 UI 인터페이스 구현하기 알잘딱깔센 표 UI 인터페이스라니, 이건 또 무슨 말일까요? 알잘딱깔센은 "알아서 잘 딱 깔끔하고 센스있게" 라는 신세대 용어랍니다 ㅎㅎ 표 컴포넌트를 구성하는 방식 일반적으로 위와 같은 표를 구현할때는 아래와 같이 테이블 형태나 리스트 형태로 구현합니다. // 테이블 타이틀 1 {data.value1} 타이틀 2 {data.value2} 타이틀 3 {data.value3} // 리스트 {data.map((item) => ( {item.title} {item.value} ))} 데이터가 배열이라면 리스트의 형태로 반복문을 사용하면 될 것 같습니다. 하지만 위와 같은 표를 만드는데 서버에서 각각의 한글 타이틀을 저장하는 것은 비효율적이며,..

[React/Next.js] 특수한 조건의 라우팅 컴포넌트 제작(삽질)기 라우팅 컴포넌트 정도로 삽질을 한다고? 현업 개발자 맞나요? 사용자 입력값을 라우팅하는 컴포넌트를 개발하는 것은 사실 어렵지 않습니다. 하지만 다 이유가 있다구욧..! 어디 한번 들어나 봅시다ㅋ 프로젝트의 기획을 담당하신 분께서 뒤로가기를 위한 공통컴포넌트가 필요해요라는 요건을 주셨습니다. 그런데 이 컴포넌트는 항상 사용자가 설정한 이전 페이지로 돌아가야한다는 제약 사항이 있었습니다. 그냥 버튼에 history.back() 을 넣으면 되는거 아닌가? 라고 생각했지만, 이전 페이지라는 단어에서 고민해볼 점이 생기게 됩니다. 그래서 고민해봐야 할 점은 뭔가요? 문제를 하나씩 짚어가며 이야기 해보면 좋을 것 같군요. 첫번째 문제 : wi..

[React/Typescript/Styled-components] 모달 창 만들기 이번 포스팅에서는 React 라이브러리와 Typescript, 그리고 Styled-components로 우리가 흔히 모달이라 부르는 Dialog window를 만들어보겠습니다. 뭔가 만들기 어려울 것 같지만, 생각보다 너무 간단해서 놀라 자빠지실지도 모릅니다! Overview 우선 최종 결과가 어떤 식으로 나오는지 보시면 좋을 것 같습니다! 최종적으로 코드를 적용하고 실행한 웹 페이지의 모습입니다. "Open Modal" 버튼을 클릭하면 모달 창이 열리고, 반투명한 회색 배경(Backdrop)을 클릭하면 모달 창이 닫힙니다. 그럼 이제 구현 코드들을 살펴보겠습니다~ 폴더구조 src 폴더의 구조는 아래와 같습니다. 엥 이게 ..

[CS] 웹 브라우저 동작 원리(3) 이번에도 저번 웹 페이지 로드과정에 이어서 웹 브라우저의 구성요소와 동작 과정에 대해서 살펴보겠습니다. 아마도 이번 포스팅이 "웹 브라우저 동작 원리"의 마지막 포스팅이 될 것 같습니다. 웹 브라우저 주요 구성 요소 아래 그림은 웹 브라우저의 주요 구성 요소를 도식화 한 이미지입니다. 브라우저는 어떻게 동작하는가? https://d2.naver.com/helloworld/59361 위의 이미지만 보면 저게 다 뭔지 싶을 수 있습니다.. 각 단계를 찬찬히 살펴보겠습니다. 텍스트로만 보면 이해하기 어려울 수 있기 때문에, 실제 웹 페이지를 보면서 이야기해보겠습니다. 제가 운영하는 핸드메이드 액세서리 브랜드입니다 ^^ 사용자 인터페이스 주소 표시줄, 이전/다음, 새로고침,..

[React/Typescript] 반응형 네비게이션 만들기 (Navigation with CSS media queries) 이번 포스팅에서는 React 라이브러리와 Typescript로 화면 크기에 따라 배치가 바뀌는 반응형 네비게이션을 만들어보겠습니다. 반응형 웹이란 하나의 웹사이트에서 PC, 태블릿/패드, 모바일 등 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말합니다. 위키백과 : 반응형 웹 디자인 Overview 우선 최종 결과가 어떤 식으로 나오는지 보시면 좋을 것 같습니다! 최종적으로 코드를 적용하고 실행한 웹 페이지의 모습입니다. iPhoneX 기준의 디스플레이 사이즈를 적용한 모습입니다. 반응형이 잘 적용되어 상단 메뉴들은 사라지고, 네비게이션 왼쪽에..

[CS] 웹 브라우저 동작 원리(2) 이번 포스팅은 저번 웹 브라우저 동작 원리 (1)에 이어서 웹 페이지 로드 과정 중 Processing과 Load 과정을 살펴볼 예정입니다. 웹 페이지 로드 과정 아래 그림은 W3C Navigation Timing Level 2 Specification에 첨부되어있는 웹 브라우저 네비게이션 동작과정을 도식화 한 이미지입니다. W3C Navigation Timing Level 2 Specification https://www.w3.org/TR/navigation-timing-2/#processing-model 위의 "W3C Navigation Timing Level 2 Specification"의 도식에서 processing과 load 부분을 조금 더 자세히 살펴보면 ..

[CS] 웹 브라우저 동작 원리(1) 그동안 웹 개발을 공부하고 프로젝트를 진행하면서, 필요한 기능을 구현하고 동작시키는 것에 그치지 않고 조금 더 효율적이고 최적화된 코드들을 작성해보고 싶어졌습니다. 그러기 위해서 웹이나 브라우저의 구동 방식 등 기초적인 지식을 차근차근 공부해 보면 좋겠다는 생각이 들었는데요! 이번 포스팅에서는 웹 브라우저 동작 원리 및 브라우저가 웹 페이지를 어떻게 표현하는지에 대해 공부한 내용들을 일부 정리해보겠습니다. 웹 페이지 로드 과정 아래 그림은 W3C Navigation Timing Level 2 Specification에 첨부되어있는 웹 브라우저 네비게이션 동작과정을 도식화 한 이미지입니다. W3C Navigation Timing Level 2 Specification ..