전체 글 40

접었다 폈다. 자연스러운 Accordian UI 만들기!

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

프론트엔드 2024.02.14

줄바꿈 되는 Input Text ( Textarea ) 입력창 만들기

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

프론트엔드 2024.02.09

Sentry 를 알아보자 - (3) Sentry 는 어떻게 성능을 측정할까?

이전 글에서 설명한 개념이 필요합니다. 이전글을 읽지 않았다면 먼저 읽고 오시기를 추천합니다. 2024.02.04 - [프론트엔드] - Sentry 를 알아보자 - (1) Trace, Transaction, Span 이란? 2024.02.05 - [프론트엔드] - Sentry 를 알아보자 - (2) Transaction, Span 직접 생성해보기 오늘은 Transaction, Span 의 개념을 바탕으로 Sentry가 어떻게 성능을 측정하는지 알아보겠습니다. 일반적으로 FE 에서 사용하는 Sentry는 Browser Integration을 사용하며, pageload 단위로 성능 데이터가 수집됩니다. 즉, Pageload 단위로 트랜잭션이 수집됩니다. Pageload 시에 발생하는 하위 이벤트들을 트랜잭션..

카테고리 없음 2024.02.06

Sentry 를 알아보자 - (2) Transaction, Span 직접 생성해보기

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

프론트엔드 2024.02.05

Sentry 를 알아보자 - (1) Trace, Transaction, Span 이란?

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

프론트엔드 2024.02.04

모노레포의 개념, 장단점, 종류

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

프론트엔드 2024.02.01

7개월간의 네카라쿠배 개발자 취업 스토리

취준을 마치고 바로 후기를 작성할까 했지만, 미루다가 결국 잊혀졌다. 취직한지도 2년이 다 되어가지만, 취업 준비를 하시는 분들께 도움이 되고자 늦게나마 취업준비 후기를 작성해볼까 한다. 이전 글 (https://codeboyed.tistory.com/31) 에서 이야기했지만, 나는 비전공자였고 네이버 부스트캠프로 개발자 취업준비를 시작했다. 부스트캠프를 시작하기 직전까지 나의 코딩 경험은 다음과 같았다. 교양으로 들었던 Python 기초 대학교에서 수강했던 CS 과목들 ( 객체지향프로그래밍, 자료구조, 데이터베이시스 ) 방학 때 국가기관으로부터 배웠던 Python 데이터 분석 위 경험들 덕분에 부스트캠프 입학시험에 합격할 수 있었다. 다만, 웹개발(JavaScript)은 처음이었기 때문에 부스트캠프 과..

성장스토리 2024.01.08

Docker-Compose Nginx, Certbot 컨테이너로 HTTPS 웹서버 설정하기

안녕하세요! 오늘은 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 왜 도커를 사용했나? 크레딧의 한계 때문에 클라우드 서비스를 이리저리 옮겨 다닐 것 같다는 생각이 들어서 (아..

프론트엔드 2022.01.23