작심삼일 개발이야기

SunEditor를 사용해서 공지사항 WYSIWYG 기능을 구현하고 있었고, 이미지 업로드 리팩토링이 필요해서 정리해 두면 좋을 것 같았다. Editor를 사용해서 글을 작성하면 HTML로 이루어진 코드를 확인할 수 있다. 글 작성과 함께 추가한 이미지는 base64로 인코딩 되어 HTML코드에 입력된다. 인코딩 된 base64 데이터는 이미지의 품질을 떨어뜨리고 데이터 크기를 늘어나게 하는 단점이 있어서 추가한 이미지는 S3로 업로드하고 업로드된 주소를 HTML코드의 img 태그 src속성에 치환하여 저장했다. 기존 로직 Editor에 글, 이미지 작성(HTML 코드로 작성됨) 이미지 추가 -> 글과 별개로 상태 값에 File 객체 추가 (상태값 2개 관리) 이미지 추가, 수정 될 때마다 File 객체..

Justit을 사용해 Lighthouse를 돌려보았는데 접근성 점수가 엉망진창이다... 알려주는 대로 하나씩 고쳐보았다. Buttons do not have an accessible name 프로젝트 에러 상황 버튼 내 아이콘만 존재하는 경우에 스크린 리더가 접근 했을 때 해당 버튼이 어떤 동작을 하는지 알 수 없었다. 중요한 이유 스크린 리더는 접근 가능한 이름이 없는 role="link", role="button", role="menuitem"이 있는 요소의 용도를 식별할 수 없다. 규칙 버튼에는 스크린리더 사용자를 위해 distination, purpose, function, action을 명확하게 설명하는 식별 가능한 텍스트가 있어야 한다. Name Button label Name 1. 각 버튼 ..

반복되는 고민 매일 점심시간이 가까워지면 팀원들과 함께 생기는 고민이 있었다. 오늘 점심 뭐 먹지…? 고민에 비해 별다를 것 없는 똑같은 점심을 먹었다. 뭔가 이 고민을 매일 하는 게 참 쓸데없다고 느껴졌다. 그래서 그냥 내가 해결해 보고 싶었다. 솔직히 고민을 해결해 줄 수는 없지만 고민의 양을 줄여보자 정도? 이것이 Just it의 시작이었다. 자만심 기획, 디자인, 개발 모두 혼자 다 해보자고 다짐했다. 기능들을 정리하고 디자인을 시작하려는데 너무 막막했다. 디자인에 소질이 없다는 걸 알면서도 욕심이었다. 같은 회사에 계셨던 디자이너님께 조언을 구하며 같이 얘기를 하다 프로젝트에 참여하고 싶다 하셔서 감사하게도 디자이너 팀원이 생겼다. 디자이너님과 기획을 마무리할 때쯤 느꼈다. 백엔드 개발자가 필요..

Just it : 오늘 점심 뭐 먹지? 고민을 덜어줄게요 ❓ Problem : 혼자, 연인과, 친구들과, 직장동료들과 무엇을 먹어야 할지 막막할 때! 😮 ❗️ Idea : 나와 같은 상황일 때 다른 사람들이 무엇을 먹는지 알 수 있는 웹사이트가 있으면 좋지 않을까? 🤔 💯 Solution : 언제, 누구와, 무엇을 먹었는지 여러 가지 조건을 기반으로 분류해서 보여주자!! 😁 팀 소개 프론트엔드 : 최수혁 백엔드 : 이지수 디자인 : 정승훈 서비스 소개 해시태그를 사용해 선택의 폭을 줄여보세요. 실시간 피드와 오늘의 추천 메뉴를 이용해 어떤 메뉴가 있는지 Just it에서 추천해주는 오늘의 메뉴는 무엇인지 확인할 수 있어요. Just it 회원은 나만의 맞춤필터를 설정해서 개인취향에 맞게 추천을 받을 수 ..

useQuery로 프로필 데이터를 가져온 뒤 useMutate를 사용해 프로필 이미지를 업데이트했을 때 프로필 이미지가 변경되지 않는 이슈를 발견했다. const queryClient = useQueryClient(); // 프로필 데이터 GET useQuery const { data: profile } = useQuery(); // 프로필 이미지 수정 useMutate const { mutate: usePostProfileMutate } = useMutate(); // 프로필 수정 핸들러 const handleUpdateProfile = () => { usePostProfileMutate(imageFile, { onSuccess: () => queryClient.invalidateQueries(["프..

정말 핫한 인프콘을 다녀와서 느낀 점?이라고 하고 주절주절 써보려 한다. 추첨을 통해 참석을 할 수 있었는데 운이 좋게 당첨되어서 구경 가봤다. 딱히 기대하지 않고 있었는데 막상 당첨되니까 신기하고 같은 팀에서 나 포함 2명만 당첨되어 다 같이 가지 못해 아쉽긴 했다. 10시를 넘어서 도착해 건물 입구까지만 해도 사람이 별로 없었는데 막상 홀에 들어가니 엄청 많았다. 역시 컨퍼런스를 오면 다른 개발자들의 열정을 느낄 수 있어서 동기부여에 도움이 되는 것 같다. 이렇게나 많은 발표가 있었지만 오전에 3개를 참석하고 오후에는 선물 받으러 부스를 돌아다녔다 ㅋㅋㅋ 선물은 못 참지 내가 들었던 발표는 1. 타입스크립트는 왜 그럴까? (집합으로 이해하는 타입스크립트) 2. 2곳 중 1곳은 무조건 합격하는 개발자 ..

2022년 12월 30일을 마지막으로 2023년 첫 블로깅이다. 처음엔 올해 독서 스터디를 다시 시작하면 작성해야지 하다가 팀원들의 사정으로 스터디가 중단되었고, 새롭게 시작한 사이드 프로젝트를 완성하고 작성해야지 하다가 거의 6개월째 사이드 프로젝트 한다는 핑계로 작성을 미루고 미루다가 지금까지 와버렸다. 처음 블로그를 시작하며 글의 퀄리티는 신경 쓰지 않고 글 개수에 집착을 하며 마구잡이로 작성했었다. 그렇게 글을 적다 보니 어느 순간 이게 맞나?라는 생각이 들었다. 뭔가 남들에게 보여주기에 부끄러움도 느꼈었다. 그러다 보니 더더욱 글 작성을 피했던 것 같다. 사이드 프로젝트를 진행하며 필요한 정보를 얻기 위해 구글링을 하며 여러 블로그를 찾던 중 마음에 드는 글을 발견했었다. 즐겨찾기까지 하며 참고..

자바스크립트는 덕 타이핑 기반이다. 어떤 함수의 매개변수 값을 모두 가지고 있다면 어떻게 생기던 상관없이 사용한다. interface Person { name: string; age: number; } const me = { name: "수혁", age: 27, gender: "M" }; const introduce = (p: Person) => { alert(`내 이름은 ${p.name}입니다. 나이는 ${p.age}입니다.`); }; introduce(me); me라는 객체는 Person의 type보다 gender라는 타입을 더 가지고 있지만 introduce 함수를 실행하는 것에 대한 아무런 문제가 없다. 함수를 만들 때 매개변수의 타입에 적혀있는 것들만 사용될 것이라고 생각한다. 이러한 타입을 '..

리팩토링 2판을 다 읽었다. 100% 완독은 아니지만 내가 생각했던 목표를 이룬 것 같아서 뿌듯하다. 책을 읽으면서 나름 정리했는데 요기서 볼 수 있다. https://choisuhyeok.tistory.com/category/%EC%8A%A4%ED%84%B0%EB%94%94/%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81%202%ED%8C%90 '스터디/리팩토링 2판' 카테고리의 글 목록 개발 공부도 하고 일기도 쓰고 뭐.. choisuhyeok.tistory.com 10월에 시작해서 12월에 끝나 거의 2달 정도 걸린 것 같은데 스터디를 하지 않았다면 이것마저 하지 못했을 것 같다. 처음 이 책을 읽기 시작했을 때부터 오늘까지 참 클린 코드랑 겹친다는 생각이 든다. 클린 코드는 뭔가..

질의 함수와 변경 함수 분리하기 외부에서 관찰할 수 있는 겉보기 부수효과(사이드 이펙트)가 전혀 없이 값을 반환해주는 함수를 추구해야 한다. 함수가 사이드 이팩트가 있다는 것은 한 가지 일을 하기로 했는데 여러 가지 일을 하는 것이다. // before // 아래의 함수는 이름처럼 2가지 일을한다. (부수효과는 아니다) function totalOutstandingAndSendBill() { const result = customer.invoices.reduce( (total, each) => each.amount + total, 0); sendBill(); return result; } // after function totalOutstanding() { return customer.invoices.r..