해당 포스팅은 Next.js 기반의 프로젝트에서 마크다운 콘텐츠 렌더링을 위한 라이브러리를react-markdown에서 next-mdx-remote/rsc로 마이그레이션 한 과정과 그 결과를 공유한 내용입니다. 길고 복잡한 마크다운 콘텐츠 처리를 클라이언트 대신 서버에서 수행함으로써클라이언트 번들 크기를 줄이고, RSC의 이점을 활용하여 초기 로딩 성능과전반적인 UX를 개선한 과정을 설명하고자 합니다.1️⃣ 마이그레이션을 결심한 이유 React Server Components(RSC)와 tanstack-query의 조합으로 서버 컴포넌트를 사용하기 전,클라이언트 컴포넌트에서 마크다운 콘텐츠가 포함된 페이지를 구성해보고 있었습니다. 당시 서버로부터 문자열(string) 형태로 전달받은 markdown 데이..

토스 slash 24를 시작으로 타임라인을 따라 slash 21까지 보게 되며인상 깊었던 세션이 있었습니다. 진유림 님이 발표하신 토스ㅣSLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code에서응집도와 결합도, 단일 책임 원칙을 기준으로 클린 코드를 작성하는 방법이었는데요. 세션에서 언급한 내용을 기반으로 실무에 작성했던 저의 코드들을 돌아보며난잡하기 짝이 없다는 것을 깨닫게 되었습니다.실무에서 언제든지 적용할 수 있을 때까지 저의 기록을 보며 공부하기 위해 포스팅하게 되었습니다.응집도는 뭐고 결합도는 뭐야?📒  응집도 (Cohesion)응집도는 특정 모듈(예: 함수나 클래스)이 얼마나 잘 관련된 기능을 가지고 있는지를 나타내는 척도입니다.쉽게 말해, 하나의 모듈이 특정한 작업이나 ..

제육을 앞에 두고 시작된 토론새로 입사하신 신입 프론트엔드 팀원분과 점심을 먹던 도중,번들 사이즈와 관련한 대화를 나누게 되었는데요.당시 제가 최적화 작업을 진행하고 있던 터라 이에 대한 팀원분의 견해를 여쭙고자 했습니다.그러던 중, 팀원분이 던진 질문에 저는 상당히 당황했는데요. "???: 지원님 devDependencies는 번들러에 영향을 미칠까요, 안 미칠까요?"라는 질문을 받자마자 저는 영향을 미치지 않는다고 답했습니다. 웹/앱 실행에 필요한 패키지를 dependencies로 설정하고, 번들러가 생성하는 결과물에는dependencies에 설치된 내용들만 포함된다고 덧붙였고요. 하지만 팀원분의 의견을 달랐습니다."devDependencies는 번들러에 포함됩니다!"라고요.팀원분이 주장하신 devD..

기존에 pdf 파일 첨부만 가능하게 구현된 feature에서image 파일도 파일 첨부가 가능하도록 처리해달라는 티켓이 생성되었습니다.화요일 티켓은 아주 달구나라고 생각하며 임했는데, 허를 찔렸습니다.1) input의 기본 속성으로 처리하려 했지만..input의 accept 속성에 사용할 확장자명을 추가해 원하는 파일만을 선택이 가능합니다.accept 속성에 쉼표(',')를 통해 허용 확장자를 추가할 수 있는데요.기존에는 pdf 확장자명을 지닌 파일만 선택하도록 설정해줬지만, 모든 이미지 파일도 포함되도록 변경했습니다. 그러나 QA 단계에서 제한 확장자가 아닌 파일도 업로드가 가능하다는 답이 돌아왔습니다.QA 응답을 보고선 바로 떠오른 게 있었는데요.바로 파일 업로드 시, 모든 파일로 변경하는 상황이었습..

2년 전, 신입으로 인터뷰를 진행하면서 받은 질문 중 하나가 고차 함수였습니다.제대로 답하지 못하자 일급 객체에 대해 알고 있는지 여쭤보셨고,이에 대해서도 답변을 못했던 기억이 있습니다. 그로부터 2년이 지난 지금, 고차 함수 개념을 이용해 타이머 기능을 구현하며다시 한번 고차 함수가 가능한 이유와 일급 객체가 무엇인지 복습할 수 있었습니다. 또한, custom hook과 HOC를 두고 어떤 방식으로 구현해야 할지고민한 이야기도 작성해보고자 합니다.일급 객체와 고차함수와의 연관성일급 객체는 함수가 변수에 할당될 수 있고,함수의 인자로 전달되거나 return 될 수 있는 특성을 의미하는데요.고차 함수는 함수를 인자로 받거나 함수를 반환하는 함수를 말합니다. React에서 컴포넌트는 함수 형태로 작성이 가능..

Tree 문제에 약하기도 하고 경험이 없어 쉬운 난이도부터풀이를 진행했어요. 문제 자체는 쉬웠지만 다른 분들의 코드를 보며 새로 배운 개념이 있어포스팅하게 되었습니다.문제 접근 root의 left와 right가 존재하지 않는 요소가 마지막 node이므로마지막 node라면 배열에 추가를 해준 후, root1의 node를 담는 배열과root2의 node를 담는 배열을 비교하면 될 것으로 예상되었습니다.나의 풀이 & 다른 풀이 첫 풀이 각 결과를 담는 배열들을 문자열로형변환을 통해 비교를 했는데요. 순서가 다를 시에도 true 값으로 결과가 발생하는 케이스가 존재해테스트 케이스에서 실패했습니다.var leafSimilar = function(root1, root2) { const arr1 = [], ar..

카메라의 타이머 기능 구현이 필요한 상황이 발생했는데요.개발하며 비동기를 포함한 자바스크립트 기본 개념을 오랜만에 복습해 볼 수 있는좋은 시간이었습니다. 처음 문제가 발생한 시점부터 개념을 복습하며 문제를 해결하기까지의과정을 정리해보았습니다.타이머 1차 구현'use client';import { useRef, useState, useEffect } from 'react';import BeforeCamera from '@/components/Camera/BeforeCamera';import PhotoShoot from '@/components/Camera/PhotoShoot';import { Flex } from '@chakra-ui/react';const CameraContainer = () => { ..

1이 제일 많은 행과 1의 개수를 배열로 리턴하는 문제.1의 개수가 같은 행이 여러 개라면, 행 번호가 가장 작은 행을 선택해야 합니다.문제 접근행과 개수를 구하는 것이 목적이므로 해당 변수들에 값을 할당해 주면 됐습니다.1이 포함된 행을 찾기 위해 filter 메서드를 사용했고이전 배열의 1의 개수와 현재 배열의 1의 개수를 비교해개수가 동일하거나, 아니면 1을 더 많이 가지고 있는 배열을매번 비교를 통해 설정해 줄 필요가 있어 반복문을 사용했습니다.문제 해결/** * @param {number[][]} mat * @return {number[]} */var rowAndMaximumOnes = function(mat) { let count=0, row=0; for(let i=0; i ..