[NPM 배포] SpeechBubble 배포하기 (1)

프로젝트를 할때마다 만나는 ui가 있습니다. 바로 말풍선입니다. 보기에는 상당히 구현하기 매우 쉬워보입니다. 하지만 문제는 저 위에 뾰족 나와있는 저 삼각형이 문제입니다. 저 삼각형을 구현하려면 일단 위치를 일일이 맞춰주어야 하죠. 항상 구현할 때 너무너무 귀찮았습니다. 따라서 이참에 한번 말풍선 라이브러리를 만들어보자! 라는 생각이 들었고 그 배포기를 블로그에 적어보려합니다.1. 프로젝트 설정이번 프로젝트는 번들링 사이즈 개선을 위해서 pnpm과 vite를 사용해서 배포하려고 합니다.일단 vite 프로젝트를 만들어줍니다.React 와 TypeScript를 사용하겠습니다. 2. 컴포넌트 생성필요 없는 파일은 다 지우고 말풍선에 필요한 Pointer 컴포넌트들을 만들었습니다. (Public도 함께 삭제해줍..

→2024.05.15

자유글

[docker] vite 배포하면서 겪었던 시행착오

docker 란?도커는 컨테이너 기반 가상화 플랫폼으로 응용 프로그램과 그 종속성을 격리된 환경인 컨테이너로 패키징하여 실행하는 기술입니다.도커 컨테이너는 가볍고 빠르며 확장성이 좋아서 개발 및 배포 프로세스를 간소화하는 데 사용된다고 합니다.따라서..docker를 사용해서 ec2에 배포하는 것이 목표인데요ec2에 배포하기 전 연습을 위해 로컬에 docker를 사용해서 service 프로젝트 배포했어요 현재 모노레포 디렉토리는 위와 같은 구조로 되어 있습니다.현재 service 는 vite를 사용해서 빌드하고 있고 yarn berry를 사용해 개발하고 있습니다.지금부터 만났던 에러들과 배포하는데 힘들었던 내용을 정리하고자 합니다.본 글은 로컬 배포일때의 겪었던 문제들을 적은 것임을 알립니다. 🔥 첫번째..

→2024.04.16

자유글

[#회고] 지금까지의 회고록

1. 회고록 대학교 수업을 모두 마치고 이제 개발 공부를 이어간지 언 반년 이상이 지났습니다. 그 때보단 아는 것도 많아지고 그랬습니다만은 아직도 느껴지는 부족함과 나약함. 지금 내가 이렇게 하는게 맞는 걸까 라는 생각을 수도 없이 합니다. 처음 혼자 개발할 때는 정말 재밌어서 내가 만들고 싶은 개인 프로젝트도 진행하고 전에 있던 동아리에서 해커톤도 진행했어요. 하지만 갑자기 이게 잘한게 맞는지 되돌아보면 모르겠습니다. 더 넓은 세상으로 예를 들어 다른 개발 동아리나 부트캠프라도 했어야 했나 라는 생각이 듭니다. 2. 잘했던 점 개인 프로젝트 혼자서 개인 프로젝트를 했던게 그래도 웹 구조가 어떻게 돌아가는지 알아 볼 수 있는 좋은 계기가 된것 같아요. 벡엔드와 디자인 모두 혼자 한번 해보았어요. 벡엔드는..

→2024.04.04

자유글

7가지 상위 1%의 프로그래머들의 습관

컴퓨터가 아닌 인간을 위한 코드 "어떤 바보라도 컴퓨터가 이해할 수 있는 코드를 작성할 수 있습니다. 좋은 프로그래머는 사람이 이해할 수 있는 코드를 작성합니다." - 마틴 파울러 코드는 컴퓨터만을 위한 것이 아닌 인간을 위한 것입니다. 코드는 코드를 읽고 관리하고 이를 기반으로 구축하는 팀의 엔지니어를 위한 것입니다. 코드는 휴대전화를 사용하는 어린이, API 요청을 하는 개발자, 나 자신 등 사용자를 위한 것입니다. 최고의 엔지니어들은 제품을 중시합니다. 인간의 문제 해결을 제일 먼저 생각합니다. 최고의 엔지니어들은 항상 그들의 코드의 가치를 사용자들을 위해 평가했습니다. 사용자들중 한 사람의 목표를 놓친 경우 그 코드는 프로덕션에 적용되지 않습니다. 코드 자체에서 벗어나기 놀라운 엔지니어들은 코드 ..

→2024.02.15

자유글

vue 와 react

보호되어 있는 글입니다.

→2022.07.05

자유글

VSCODE(visual studio code) 단축키 정리

그냥 생각날때 마다 정리 한줄 복사 shift + alt + ↑ shift + alt + ↓ 한줄 삭제 ctrl + x 실행취소(undo) ctrl + z 실행취소를 다시실행(redo) ctrl + shift + z ctrl + y 다중 선택 alt + 마우스 클릭 ctrl + d shift + alt +마우스 드래그 줄 이동 alt +↑ alt +↓ 단어 찾기 및 찾은 단어 바꾸기 ctrl + f (옆 화살표를 누르면 바꿀 수 있다) ctrl + shift + L (단어 선택 후) html 템플릿 자동완성(Emmit) !+ tab or enter 주석 처리 ctrl + /

→2021.09.21