직장에서 디자인을 위해 아코디언 UI 를 구현해야하는 상황이었습니다. 데모영상 구현과정에서 알게된 점들을 적어봅니다. 1. height 속성에 Transition 효과 적용하기 CSS height 속성은 % 와 같은 상대값이 아닌 px 과 같은 절대값을 부여해야 트랜지션 효과가 적용됩니다. 문제는 클라이언트의 디바이스, 폰트 등의 요소에 따라서 height 값이 달라질 수 있기때문에 px 값을 미리 정의해두는 것은 불가능합니다. 때문에, max-height 값에다가 트랜지션 효과를 부여하는 대안이 있었습니다. // open max-height: 100vh (혹은 엄청나게 큰 절대 값, 999px) // cloase max-height: 0 그러나 열리는 모션과 닫히는 모션이 동시에 실행되는 경우, 타이밍..

오늘은 다음과 같은 text input 컴포넌트를 만들어보고자 합니다. 텍스트 입력 시, 줄바꿈이 자동으로 되는 컴포넌트를 만들어보겠습니다. 어떤 태그를 써야할까? 일반적으로 를 사용하지만, 줄바꿈 기능을 지원하지 않습니다. 때문에 태그를 사용합니다. 문제점 textarea tag 를 사용하게 되면, 기본적으로 줄바꿈을 해줍니다. 그러나, 자신의 height 이상으로 글 길이가 늘어나면 스크롤이 생기게 됩니다. height 이상으로 영역이 늘어나지 않습니다. 해결방법 텍스트 입력시 줄바꿈이 생길 경우, textarea 영역의 height를 자동으로 늘려주는 JavaScript 코드를 넣어줍니다. 원리는 이렇습니다. textarea 영역의 height 을 1px로 줄여버립니다. 그러면 내부에 있는 글자 영..

* 이전 글을 먼저 읽고 와주세요 2024.02.04 - [프론트엔드] - Sentry 를 알아보자 - (1) Trace, Transaction, Span 이란? 이번 시간에는 Sentry 가 어떠한 단위로 트랜잭션과 스팬을 생성하는지 실습을 통해 알아보도록 하겠습니다. 직접 트랜잭션과 스팬을 생성해보도록 하겠습니다. 트랜잭션 ( Transaction ) 생성해보기 다음과 같이 버튼을 클릭하면 트랜잭션을 생성하고, 2초 뒤에 트랜잭션을 종료하는 코드를 짜보았습니다. 브라우저 코드 ( VueJS 사용 ) 동작 영상 첨부 init 설정을 해두었던 Sentry 객체에서 "startTransaction" 메서드를 통해 트랜잭션을 생성할 수 있습니다. 트랜잭션 역시 스팬의 한 종류이기 때문에, SPAN에 포함되는..

Sentry Docs - Distributed Tracing 을 요약한 내용입니다. Trace 란? Trace 는 추적한다는 의미를 갖고 있는데요, 무엇을 추적한다는 의미일까요? 애플리케이션은 여러가지 서비스로 구성됩니다. 네트워크를 단위로 분리해보면 다음과 같은 서비스들이 있습니다. Frontend (Single-Page Application) Backend (REST API) Task Queue Database Server Cron Job Scheduler 이 서비스들은 다른 언어로 다른 플랫폼들에서 운영됩니다. Sentry SDK를 설치하더라도 개별적으로 운영되기 때문에 전반적인 흐름을 알기에는 어려움이 있습니다. Tracing은 이러한 데이터들을 모아서 전체 흐름을 추적한다는 의미입니다. 만약, ..

안녕하세요 오늘은 모노레포의 기본적인 개념과 자바스크립트 패키지 매니저의 종류에 대해 알아보겠습니다. 모노레포 ( Mono Repository ) 란? 다수의 프로젝트가 하나의 레포지토리에 저장되는 전략을 의미합니다. 이는 코드, 의존성 및 빌드 프로세스를 중앙 집중화하여 개발 생산성과 협업을 증가시키는 목적으로 사용됩니다. 기존에는 모든 프로젝트들이 분리되어 있지 않고 하나의 저장소에 다 들어가있는 Monolith 방식이 사용됐습니다. 그러나 점점 서비스 복잡도가 증가하면서 각각의 서비스 단위로 프로젝트를 생성하는 Multi(Poly) - Repo 방식으로 변화해왔습니다. 최근에는 다수의 프로젝트를 하나의 레포지토리에 모아서 의존성을 공유하는 Mono Repo 전략이 사용되는 경우를 종종 볼 수 있습니..

안녕하세요! 오늘은 Nginx 웹서버를 도커 컴포즈를 이용하여 세팅하고, Certbot 을 이용해서 HTTPS 인증서를 연결하는 과정까지 포스팅해보겠습니다. 해당 과정은 저의 개인 프로젝트에 적용했던 경험을 바탕으로 작성했습니다. 해당 프로젝트 레포 https://github.com/wil953742/study-mbti GitHub - wil953742/study-mbti: 나에게 꼭 맞는 공부 유형은? 나에게 꼭 맞는 공부 유형은? Contribute to wil953742/study-mbti development by creating an account on GitHub. github.com 왜 도커를 사용했나? 크레딧의 한계 때문에 클라우드 서비스를 이리저리 옮겨 다닐 것 같다는 생각이 들어서 (아..

브라우저 라우팅 구현하기 리액트를 사용하지 않고, 타입스크립트로 코드를 구현하면서 라우팅 역시 직접 구현해야 한다는 것을 깨달았습니다. 라우팅은 어떤 작업일까? 라는 고민을 하게 됐고 제가 생각한 기능은 다음 두 가지 입니다. path 값에 해당하는 page가 렌더링 되야 한다. path 값의 흐름이 저장되어 있어서, 뒤로가기나 앞으로가기가 가능해야 한다. 제가 생각한 라우팅은 다음과 같습니다. 라우팅을 하는 path 값을 상태(state)로서 관리하는 것입니다. 그리고 실제 URL path 값을 state 와 일치 시키도록 history API를 적용하였습니다. 실행 로직 path 상태 값은 앞 포스팅에서 구현했던, 전역 store에서 관리합니다. 가장 상위 컴포넌트에서 path 상태값에 따라 moun..

FLUX 패턴 적용하기 부스트캠프에서 Redux 의 구조를 공부하다가, FLUX 패턴을 직접 구현한 글을 보게 되었습니다. 이미 유명한 황준일 개발자님의 글이었습니다. [ 참고 링크 ] 글을 읽고 나서 해당 구조를 이해하고 벤치마킹 해보고 싶었습니다. 먼저, FLUX 패턴을 이해하기 위해 공식 문서를 참고했습니다. Action 액션은 데이터의 상태를 변경하라고 명령하는 함수입니다. 액션 생성자는 새로 발생한 액션의 타입과 데이터 페이로드를 액션 메시지로 묶어 디스패쳐로 전달합니다. Action을 이용하여 명령을 하기만 하면, View 입장에서는 Store 내부의 구조를 몰라도 State를 변경할 수 있습니다. Dispatcher 디스패쳐는 액션 메시지를 감지하는 순간 그것을 각 스토어에 전달합니다. 전달..

! 이 글은 제가 너무 애청하는 유투브 "코딩앙마" 채널의 TypeScript 강좌를 정리한 글입니다. 코딩앙마님 유투브 강의 바로가기 Type Script 기초 유투브 코딩앙마님 강의 정리 by 웅 [1, 2강] 타입스크립트의 기본 타입 let age:number = 30; let isAdult:boolean = true; let a:number[] = [1,2,3]; let b:Array = [1,2,3]; let week1:string[] = ['mon', 'tue', 'wed']; let week2:Array = ['mon', 'tue', 'wed']; week1.push('ja') 리스트 타입은 위와 같이 string[ ] , Array 이렇게 두 가지 정의 방법이 있다. 튜플 : 리스트인데, ..

React에서 Custom Select 구현하기 👋 문제 제기 💡 React에서 Custom Select Component 구현 시 on/off state 관리, Position 설정, 클릭 및 스크롤 이벤트 관리를 어떻게 할 것인가? Custom Select 를 만들기로 결심한 계기 토글 예시 Select tag는 CSS 를 적용하는 것이 어렵습니다. 기본적은 Select tag는 브라우저 마다 다른 디자인을 보이며 특히 option 부분에는 CSS 를 적용하기 위해서 특별한 Plugin을 사용해야 합니다. 물론, 모바일의 경우에는 내장되어 있는 Select의 기능을 지원 받을 수 있지만, 저는 기능적인 이점 보다 디자인적인 통일감을 주고 싶었습니다. 때문에, 위와 같이 직접 디자인하고 같은 기능을 갖..