소파에서 개발하기

항상 개인 노션에 메모만 하다가 오랜만에 정리된 글로 포스팅을 한다.기본 지식 부족으로 인한 이틀 간의 삽질이 허탈하기도 하고 부끄럽기도 하지만,기계적으로 기능 만들기에 쫓겨 살다가 짬을 내 코드를 들여다 본 과정이 재밌었다.스스로를 글 쓰는 개발 동아리에 집어 넣어 일부러라도 글감을 만들게 하는 것도 괜찮겠다는 생각이 든다.TL;DRNextJs App Router에서, 최상위 레벨의 layout.js는 한 번 마운트되면 페이지 이동에 상관없이 리렌더링되지 않으면서 상태를 유지한다.그래서 그 하위에 layout을 중첩해서 사용할 때도 같은 효과가 있을 것이라고 착각했다.하지만 그 중첩된 layout이 client 컴포넌트가 아니라 server 컴포넌트라면 매번 새로 마운트되므로 같은 효과를 얻지 못한다...

설명 / 정의로컬 이미지 파일을 태그 또는 태그를 통해 브라우저에서 받았을 때, url을 활용해 동적으로 이미지를 로드하는 2가지 방법을 비교했다.(다른 방법으로는 canvas에 띄우기, webGL 이용하기, svg 파일을 삽입하기 등이 있다고 한다)둘 다 파일을 url로 변환하기 때문에 비슷해 보이지만 실제 작동하는 방식은 달랐다.기존에는 FileReader를 사용해서 로드하고 있었는데, createObjectURL 메소드를 사용하는 방법을 찾으면서 코드를 변경했다.내가 다루는 파일들이 고화질 파일이고, 또 실제로 화면에 로드할 필요 없이 metadata만 뽑으면 되기 때문에 blob 방식이 더 유리했다.FileReader를 사용하는 방법const file = event.target.files[0]..

설명 / 정의언제 tabindex가 유용한가?MUI를 기본 CSS 라이브러리로 쓰고 있는데, datagrid의 셀이 탭으로 인덱스가 불가하다는 이슈가 제기되었다.(결론부터 얘기하자면 아니었다. 개발 초기 디자이너측 요청으로 셀 포커스 시의 outline을 강제로 지웠는데, 그 때문에 탭과 키보드 탐색이 되고 있는데도 화면에 표시가 안 되는 것이었다.)그런데 MUI 문서를 살펴보니 일부러 각 셀에 대한 탭인덱스를 지웠다는 것을 알게 되었다. 페이지 내 모든 요소에 탭 인덱스를 넣는 것은 오히려 접근성을 해칠 수도 있다는 것이다.먼저 tabindex의 목적과 유용성에 대해서 찾아봤을 때는 다음과 같이 정리되었다.키보드 내비게이션 지원: 데이터 그리드 내의 셀이나 특정 요소에 대해 **tabindex**를 설..

정말이지 회고 간격에 화들짝 놀라서 글쓰기 버튼을 눌렀다.취준할 때는 그래도 자주 글을 올렸는데, 그 뒤로는 '입사 후 일주일', '입사 후 3개월'이다.그리고 맙소사, 지금은 1년 6개월차다.1년 3개월의 기간이 너무 길다 보니 어디서부터 써야 할 지 단번에 떠오르지 않는다. 꾸준함을 되찾자요즘 자주 하던 생각을 적어 보자면, 이제 슬슬 머리를 밭갈이(?)해야 하지 않을까 싶다.차마 하나의 글이 되지 못하고 노션에 쌓여 있는 메모나 에러 케이스들이 많은데,내 언어로 적어보지 않아서 그런지, 충분히 깊게 파고들지 않아서 그런지 머릿속에서 금방 휘발된다. 오늘만 해도 내 블로그에 들어왔다가 '내가 이런 걸 적어 올렸었구나' 하고 새삼스러워 놀랐다.TIL로 부담없이 블로깅하거나 깃허브에 올렸으면 성취감도 생..

프론트엔드 개발자라는 역할을 가지고 일을 한 지 벌써 3개월차가 되어 간다. 그 말인즉 아직 수습 기간을 지내고 있는 별 거 아닌 신참이다. 그런데도 하루하루가 쉽지만은 않아서, 짧은 회고도 제대로 하지 못하는 게 마음의 빚이었다. 공부할 때는 매일매일 특정한 챕터, 특정한 주제를 정해놓고 공부했기 때문에 하나의 완성된 글을 써 내기가 비교적 수월했는데 (물론 당시에는 이렇게 말하는 날이 올 거라곤 생각도 못 했다) 일을 시작하면서부터는 모르는 게 사방 천지게 깔려 있기 때문에 그때그때 땜질식으로 알아내는 게 훨씬 많다. 그래서 개인 노션 페이지에 블로깅 아이템은 늘어가고 있는데, 그걸 누구에게 보여줄 수 있을 만한 수준으로 다듬는게 마음만큼 잘 되지 않는다. 어쩌면 그냥 관성일 지도 모른다. 관성이라는..

폭풍같은 일주일이었다. 많은 것들이 지나갔는데 그 사이 아무것도 기록하지 못한 것이 신경쓰여서 간단한 기록을 남긴다. 1. 첫 기업 과제를 제출했다. 개인적으로 여러 면에서 의미가 있었다. 일단 서류 과정을 통과하고 기업 과제를 받아볼 수 있었다는 것 자체로 특별한 일이었다. 거기에 이전까지 원티드에서 훑어보던 기업들에 비해 관심을 가지고 있는 도메인이어서 과제 구현하는 것도 재밌었다. 프로젝트 종료된 이후에 자소서 작성, 일반면접 준비, 기술면접 준비 등 이런저런 이유들로 리팩토링도 미뤄지고 직접 코드 작성하는 시간이 줄어서 에너지가 좀 다운되는 느낌이 있었다. 다시 구현에 집중하는 시간을 끼워넣은 게 일정 환기 면에서도 도움이 되었고, 또 나름대로 타입스크립트도 써 보고 계속 생각만 하던 바닐라 Da..

메인 프로젝트 이후 동기분들의 결과물을 보다가 React query를 이용하신 분들이 꽤 많다는 걸 알게 되었다. 구두로만 '좋아요 써 보세요'라고 듣다가 모 기업 과제를 진행하면서 구체적으로 무엇이 좋은지 알아보았다. 참고자료는 1. 카카오 기술블로그 : React에서 서버 데이터를 최신으로 관리하기(React Query, SWR) https://fe-developers.kakaoent.com/2022/220224-data-fetching-libs/ 2. 오픈소스컨설팅 테크블로그 : React-Query 도입을 위한 고민 (feat. Recoil) https://tech.osci.kr/2022/07/13/react-query/ 3. 노경환님 블로그 : react-query 가이드 https://kyou..

문제 더보기 문제 설명 나만의 카카오 성격 유형 검사지를 만들려고 합니다. 성격 유형 검사는 다음과 같은 4개 지표로 성격 유형을 구분합니다. 성격은 각 지표에서 두 유형 중 하나로 결정됩니다. 지표 번호성격 유형 1번 지표 라이언형(R), 튜브형(T) 2번 지표 콘형(C), 프로도형(F) 3번 지표 제이지형(J), 무지형(M) 4번 지표 어피치형(A), 네오형(N) 4개의 지표가 있으므로 성격 유형은 총 16(=2 x 2 x 2 x 2)가지가 나올 수 있습니다. 예를 들어, "RFMN"이나 "TCMA"와 같은 성격 유형이 있습니다. 검사지에는 총 n개의 질문이 있고, 각 질문에는 아래와 같은 7개의 선택지가 있습니다. 매우 비동의 비동의 약간 비동의 모르겠음 약간 동의 동의 매우 동의 각 질문은 1가지..

문제 더보기 문제 설명 최빈값은 주어진 값 중에서 가장 자주 나오는 값을 의미합니다. 정수 배열 array가 매개변수로 주어질 때, 최빈값을 return 하도록 solution 함수를 완성해보세요. 최빈값이 여러 개면 -1을 return 합니다. 제한사항 0 a-b); let freq = []; let temp = 0; let max_f = 0 let max_v = 0; // 다른 수가 나올 때까지 카운팅 for(let idx in sort){ temp += 1 if(sort[parseInt(idx)] !== sort[parseInt(idx) + 1]){ freq.push(temp) if(temp > max_f){ max_f = temp max_v = sort[parseInt(idx)] } temp = ..

문제 더보기 문제 설명 첫 번째 분수의 분자와 분모를 뜻하는 denum1, num1, 두 번째 분수의 분자와 분모를 뜻하는 denum2, num2가 매개변수로 주어집니다. 두 분수를 더한 값을 기약 분수로 나타냈을 때 분자와 분모를 순서대로 담은 배열을 return 하도록 solution 함수를 완성해보세요. 제한사항 0 (a % b === 0) ? b : GCD(b , a % b) const gcd = denum3 >= num3 ? GCD(denum3, num3) : GCD(num3, denum3) var answer = [denum3/gcd, num3/gcd]; return answer; }