1일: 30번 실험 끝에 성공한 여기어때 상품 카드 UX 개선기원문 보기UI의 정보를 덜어내는건 직관적이고 단순한 디자인을 위해서라고만 단편적으로 생각했는데,많은 고민과 수십 번의 테스트로 이뤄진 결과라니! UX에 진심인 게 글에서 느껴졌다.그리고 그 긴 여정을 회사에서 기다려 준것도 놀랍고, 건강한 회사의 분위기와 조직 문화가 느껴진다. 2일: 아토믹 디자인을 활용한 디자인 시스템 도입기원문 보기Material UI, PrimeNG 와 같은 UI 라이브러리를 사용하면서, 디자인 시스템이나 UI 라이브러리를 만드는 일을 하고 싶다고 생각했다. 자연스럽게 UI 컴포넌트와 디자인 쪽에도 관심을 많이 가지고 있었는데 이번엔 Atomic design을 알게 되었다. 3일: 당근페이 FE, 4개의 프로젝트를 하..
개요백오피스에서는 사용자의 등급에 따라 다양한 UI를 효과적으로 제공해야 하는 요구사항이 있었습니다.이를 해결하기 위해 Angular에서는 사용자의 등급에 따라 UI를 동적으로 변경할 수 있는 Structure Directive를 사용하였습니다. *ngIf 사용*ngIf="로그인한 계정의 등급 === 대상 등급"처음에는 *ngIf 디렉티브를 사용해서 조건부로 UI를 렌더링하는 방식을 사용하였지만, 아래와 같은 문제점이 있었습니다.로그인한 계정 정보를 가져오는 로직이 사용하는 컴포넌트 마다 중복됨조건의 가독성이 좋지 않음 Structure directive 제작이러한 문제를 해결하기 위해 Custom Structure Directive를 제작하였습니다. 아래는 해당 Directive의 구현 내용입니다.@D..
3월 5일: 가입은 쉽게, 로그인은 실패 없이! 휴대폰번호로 계속하기원문 보기 내가 IT기업에 가고 싶은 이유.. 무언가를 변경할 때 그냥 이뻐서가, 자기가 보기엔 불편해서가 아닌 문제점을 찾고, 가설을 세우고, 정확한 수치를 통해 결정한다는 것과 개선 이후 상황을 모니터링하여 성공/실패 여부를 확인하는 절차가 너무 부럽다.나도 내가 하는 일이 어떤 변화를 가져오고, 사용자의 반응을 살펴보고 싶다. 3월 6일: 초거대 AI 시대, 대체불가 개발자로 살아남기원문 보기 AI가 계속 성장하고, 말만 하면 ChatGPT가 뚝딱뚝딱 코드를 만들어주는 걸 보면서 일자리를 잃지 않을까 두렵기도 했다. 다행히 아직까지는 사람만이 할 수 있는 일이 있어서 개발자라는 직업은 사라지지 않을 것 같다. 더 넓은 분야들에 관심..
리액트를 공부하고 처음으로 만든 토이 프로젝트인 투 두 리스트!디자인부터 프로젝트 세팅, 기능 구현까지 하나 쉬운 것 없었지만 그래도 해내서 뿌듯하다.기술 스택: React 18, Typescript, Styled-components, MSW 주소: https://semin-97.github.io/react-to-do-list/Github: https://github.com/SEMIN-97/react-to-do-list 기능✅ 아이템 추가✅ 아이템 업데이트 ✅ 아이템 삭제✅ 다크/라이트 모드 지원Rest APIAPI통신은 MSW(Mock Service Worker)를 통해 구현하였다.아이템이 업데이트될 때 마다 List를 다시 불러오기 위해 API 호출 로직을 상위 컴포넌트에 정의하고, 메소드를 pro..
API 통신을 어떻게 구현할지 고민하던 중, 우아콘에서 봤던 MSW가 생각이 났다. MSW는 백엔드 API가 구현되기 전, 프론트에서 사용할 Mockup 용으로 주로 이용된다. MSW로 API와 통신하는 척을 할 수 있고, 요청 응답을 자유롭게 커스텀할 수 있어 이번 프로젝트에 채택하게 되었다. MSW 공식 도큐먼트와 함께 사용법을 따라가보자. 1. 설치 npm install msw --save-dev 2. 초기화 npx msw init public/ --save 브라우저에서 MSW를 사용할 수 있도록 서비스 워커를 등록하는 커맨드 `npx msw init ` public 폴더의 주소를 적어주고, `mockServiceWorker.js`를 저장하기 위해 `--save`옵션을 추가한다. 2. 핸들러 등록 ..
2월 1일: 새 배송지 추가 form 개발하기 원문 보기 Angular는 자체적으로 Reactive form을 지원하기에 백오피스 내의 수 많은 유효성 검사를 적용할 수 있었다. 러닝커브가 당연히 있지만 효자가 따로 없다👍 하지만 React document로 공부를 시작할 때, form에 대한 내용이 너무 부족해서 의아했었다. 복잡한 form은 어떻게 처리할 수 있을까 궁금했는데, 운좋게 해당 아티클을 통해 미리 방법을 엿볼 수 있었다. 결론은 Angular가 더 낫다.. 패턴은 비슷하지만 React의 경우 input tag에 로직을 정의하는 방식이라서 양이 많아지면 가독성이 안좋을 것같단 생각이 들었다. Angular처럼 form을 완전 별개의 파일로 관리할 수 있으면 좋을텐데! 따로 검색해보니 나와 ..
HTTP란 HTTP(HyperText Transfer Protocol), HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 클라이언트-서버 프로토콜이다. 보통 브라우저인 클라이언트에 의해 전송되는 메시지를 요청(requests), 그에 대해 서버는 요청을 처리하고 응답(responses)이라고 부르는 응답 메시지를 제공한다. 요청과 응답 사이에는 게이트웨이 또는 프록시 등이 있을 수 있다. 요청 HTTP 메서드 Path: 가져오려는 리소스의 경로 HTTP 프로토콜의 버전 서버에 대한 추가 정보를 전달되는 선택적 헤더들 응답 HTTP 프로토콜의 버전 요청의 성공 여부와, 그 이유를 나타내는 상태 코드 상태 코드의 설명을 나타내는 설명 메시지 HTTP 헤더들 가져온 리소스가 포함되는 본문 출처 아래의..
개요여러 이유로 서버가 재시동되는 경우가 있는데, 이전까지는PM2의 node와 Nginx를 수동으로 실행했다.최근 회사에서 서버 리부팅이 예정되어 있었고, 이 기회에 수동으로 하던 작업들을 자동화하기 위해 조사를 하고 적용해 보았다. Systemd(system demon)리눅스용 시스템 및 서비스 관리자이며, 부팅부터 서비스관리 로그관리 등을 담당하는 init 프로세스이다.systemctl은 service(데몬)를 관리하는 명령어 systemctl start, stop, restart, status 등의 명령어가 있다./etc/systemd/system/: 부팅 시 필요한 작업들을 모아놓은 디렉토리 PM2pm2 startup을 실행하면 startup script를 실행하기 위한 커맨드가 나온다.커맨드를 ..
개요 styled-components로 정의한 font-face에서 폰트 파일을 인식하지 못하는 문제가 발생하였다. 문제가 됐던 방법과 해결 방법을 기록해 보았다. 1. font-face url에 주소 지정 import { createGlobalStyle } from 'styled-components'; export default createGlobalStyle` @font-face { font-family: 'Noto Sans KR'; font-weight: normal; font-style: normal; src: local('Noto Sans Regular'), local('NotoSans-Regular'), url('./NotoSansKR-Regular.woff') format('woff'); }..
1월 11일: 웹 접근성 준수를 통한 모두에게 배달되는 일상의 행복 원문 보기 퍼블리셔로 일했을 때는 정적인 사용자 페이지 위주라서 웹 접근성 준수에 큰 어려움이 없었고, 몇몇 프로젝트에서는 웹 접근성 인증을 받았다. 그러나 현재는 백오피스를 맡고 있다 보니 웹 접근성에 대한 인식이 떨어진 것 같다.. 사내 운영진에는 장애인이 없다는 확고한 편견이 있었던 게 아닐까? 나 같은 개발자들이 장애인 분들의 직업 폭을 좁히는데 기여하고 있는 게 아닐까라는 생각이 들어 부끄러움을 느꼈다. 이전에 웹 접근성을 위해 대체 텍스트, 올바른 태그, 태그의 순서, 탭 인덱스 정도만 신경 썼었고, WAI-ARIA는 크게 활용하지 않았다. 아티클을 읽고 다시 생각해 보니 "웹 접근성을 잘 지키고 있었다"라는 말도 못 할 것 ..
