Dalin's Archive

점핏에서 프론트엔드 개발자 이야기를 들려주는 토크 콘서트를 했다. (개.취.콘 !) 참여 신청하면 추첨을 통해서 오프라인으로 참여할 수 있었는데, 나는 추첨에서 탈락해서 ㅠㅠㅠ 온라인으로 봤다. 좋은 내용, 적용하고 싶은 내용이 많았다 ㅎㅎ 강연 들으면서 요약해 봤고, 내 생각은 보라색 형광펜으로 칠했다. 좋은 강연을 제공해 주신 점핏 & 강연자 님들께 감사하다 ㅎㅎ https://www.jumpit.co.kr/book-concert/12 점핏 개발자 커리어 점프, 점핏 www.jumpit.co.kr 능력 = 하드스킬+ 소프트 스킬 좋은 코드 테스트하기 용이(쪼개기 등) 읽기 쉬움(가독성) -> 내 코드를 다른 사람이, (합의 하에) 한국어 변수명도 가능. 일관성(이름, 파일 구조 등 / 합의 중요) 테..

싸피 팀 프로젝트에서부터 사용했던 Pritter, ESLint. 회사에서 추가로 사용하는 Stylelint. 사용하면 자동으로 스타일을 맞출 수 있고, 문법 오류도 잡아줘서 편리하다. 하지만 잘못하면 엄청 귀찮아진다 ㅠ 코드 전부 빨간 줄이 생기고..ㅠㅠ 오늘도 그런 일이 있었다. 분명히 ESLint, Prettier, vscode setting에서 모두 작은따옴표를 사용하게 했는데(single quote), 파일을 저장하면 자동으로 큰 따옴표로 바뀌는 것이었다. 그리고 규칙에 안 맞는다고 코드에 전부 빨간 줄을 쳐서 보여줬다 ㅠㅠ 이건 vscode setting에서 Editor: Default Formatter를 잘못 설정해서 생긴 문제였다. 아래와 같이 'Prettier ESLint'로 해야 하는데,..

상황 설명 🌈 이번 스프린트에 사용자가 송장(invoice)을 신청하고, pdf로 받아볼 수 있는 기능을 추가했다. 나는 인보이스 신청하는 프론트엔드 코드도 작성하고, pdf생성을 위한 html,css를 작성해서 백엔드 개발자님에게 넘기기로 했다. 디자인도 심플하니까 빨리 할 수 있을 것이라고 생각했다. 그.런.데. 생각보다 오래 걸렸다 🥹 디자이너님도 많이 괴롭혔다 🥹 (죄송하고 감사해요...) 웹 브라우저에서 보는 것과 pdf로 뽑은 결과물이 많이 달랐기 때문이다!! 그래도 이번 시간을 통해서 인쇄용일 때는 html, css을 어떻게 작성해야 할지, 무엇을 고려해야 할지 알게 됐다. 엄청 고생하면서 알게 된 것들이라서ㅠㅠ 블로그에 남기려고 한다 ㅎㅎ (pdf로 뽑는 것은 인쇄용과 동일했기 때문에, 인..

프로젝트를 하면서 MUI를 사용하기로 했다. MUI는 예쁜 스타일을 쉽게 사용할 수 있는 리액트 UI 라이브러리이다. 버튼 등 자주 쓰는 것들이 컴포넌트로 제공해주고, 다크 모드, 테마 관리 등도 할 수 있다. 아, MUI는 전에는 Material-UI와 같은 것이다. 작년에 버전 5로 업데이트되면서 이름도 MUI로 바뀌었다고 한다.(이건 개발자 경험을 위해서라고 한다!) 이전과 비교해서 버전 5에서 뭐가 바뀌었는지 궁금하다면 이 블로그(https://hoontae24.github.io/19)를 보면 좋을 것 같다. mui 설치하기 npm install @mui/material @emotion/react @emotion/styled 로 라이브러리를 설치한다. 일관된 스타일로 CSS 정리하기 브라우저 상관..