소파에서 개발하기

항상 개인 노션에 메모만 하다가 오랜만에 정리된 글로 포스팅을 한다.기본 지식 부족으로 인한 이틀 간의 삽질이 허탈하기도 하고 부끄럽기도 하지만,기계적으로 기능 만들기에 쫓겨 살다가 짬을 내 코드를 들여다 본 과정이 재밌었다.스스로를 글 쓰는 개발 동아리에 집어 넣어 일부러라도 글감을 만들게 하는 것도 괜찮겠다는 생각이 든다.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로 부담없이 블로깅하거나 깃허브에 올렸으면 성취감도 생..

* 컨퍼런스 영상 시청 및 리뷰 스터디를 위한 인증글입니다. 강의 영상 : https://www.youtube.com/watch?v=ul_pozst_EU 리뷰최근 브라우저에서 한 번에 연결할 수 있는 http1 네트워크 개수를 제한한다는 사실을 ‘내가 몰랐다는 것에 충격을 받아’ 관련 영상을 찾아봤다.영상을 통해 (나는 크롬을 os로써 사용하지만) 크롬도 하나의 애플리케이션이라는 것, 크롬 데브 툴즈도 프로토콜과 프론트엔드가 있다는 것을 알았다.그리고 여전히 모듈 시스템의 개념이 명확히 그려지지 않고 있다는 것을 깨달았다. 타입스크립트 보충하면서 첫 번째 후기 쓴 내용을 진짜로 시간 잡아서 다시 뜯어봐야겠다.

* 컨퍼런스 영상 시청 및 리뷰 스터디를 위한 인증글입니다.  강의 영상 : https://youtu.be/v9rcKpUZw4o?si=ypzUZDaTZ_qH_eHp리뷰눈물이 났다. 나도 3개의 저장소를 오가며 저런 오류 케이스 별 유저 피드백 처리를 해야 한다. 문제는 내 경우는 저 동기화 체크를 클라이언트에서 해야 한다는 것인데, 그러자면 웹소켓 또는 주기적 폴링 외에 별다른 방법이 없다는 것이다. 웹소켓을 넣는 건 오버 엔지니어링 같고, 대신 폴링을 어느 주기로 몇 회나, 언제까지 할 것인지에 대한 고민이 많았다.그런에 이 영상에서 진짜 ‘이제 그만’이라고 외치고 싶을 정도로 다양한 케이스를 소개하고 해결 방법을 제시해 줬다. 너무 친절하고 이해하기 쉬워서 영상 다 보기도 전에 회사 대화방에 공유했다..

* 컨퍼런스 영상 시청 및 리뷰 스터디를 위한 인증글입니다. 강의 영상 : https://www.youtube.com/watch?v=mee1QbvaO10 강의 노트 CommonJS 모듈 시스템의 등장 javascript에 ‘모듈’이라는 개념이 없었을 때 라이브러리를 import 하려면, 스크립트 태그를 이용해서 해당 라이브러리의 전역을 참조해야 했다. ‘commonjs’라는 모듈 시스템이 등장해, script 사용으로 인해 발생하는 비효율을 해결하고자 했다. 함수 호출 한 번으로 모듈을 가져올 수 있게 되어 함수를 가져오거나 외부에 노출하는 동작이 쉬워짐. // export exports.add = function (){ ... } // improt const {add} = require('./add.j..

레퍼런스 [Redux] 리덕스의 내부 파헤치기 replaceReducer on @reduxjs/toolkit 설명 / 정의 react 페이지의 크기가 커지면서, 모든 페이지를 한 번들로 가져오기 부담스러워 코드 분할을 하였다. 그러다보니 마찬가지로 redux store도 처음부터 모든 state를 들고 있을 것이 아니라, 해당 state가 필요한 곳에서만 동적으로 추가하도록 변경할 필요가 생겼다. 그래서 선배와 이것저것 뒤지다가 발견한 코드가 이것이다. const staticReducers = { counter: counterReducerSlice, }; export const store = configureStore({ reducer: staticReducers, middleware: getDefaul..

레퍼런스 [리액트] 코드 분할(코드 스플리팅) - React lazy, Suspense, Loadable Components React Suspense 소개 (feat. React v18) Speed Up Your React Apps With Code Splitting 코드 분할이 필요한 이유 브라우저에서 자바스크립트를 실행할 때, 각 기능에 대한 스크립트를 전부 읽어온다. 이 스크립트가 많아지면 네트워크 비용도 높아지고 병목현상이 생기게 된다. 따라서 자바스크립트로 작성된 모듈(js+css+img 등 dependancy가 있는 자원들 모두)을 하나의 번들파일로 만들고 tree-shaking, minify 등의 작업을 통해 사이즈를 줄이는 노력을 한다. 단, 하나의 번들파일로 압축한다고 하더라도 만약 앱..

레퍼런스 ESModule을 동적으로 import 하기 Speed Up Your React Apps With Code Splitting 설명 / 정의 대부분의 경우에는 파일 상단에 필요한 모듈들을 static하게 import하는 것이 일반적이지만, 때때로 이를 필요에 따라 조건부로 불러올 수도 있다. dynamic import라고 불리며, 이는 ES2020(ES11)에 포함된 기능이다. // test.js export const sum = (a, b) => a + b // 상단에서 정적으로 import 하는 경우 import { sum } from './test' // 하단에서 동적으로 import 하는 경우 const sum = await import('./test') // default와 그 외 함수들..