코딩하는 고릴라

let arr = ['r', 'a', 'n', 'd'];arr.sort((a, b) => a.localeCompare(b));console.log(arr); // [ 'a', 'd', 'n', 'r' ] 아시다시피 배열의 경우에는 sort 메서드를 통하여 간편하게 배열 내 값들을 정렬시킬 수 있습니다.그렇다면, 문자열도 위와 같은 방식으로 정렬시킬 수 있을까요?let str = 'andomword';[].sort.call(str, (a, b) => a.localeCompare(b));console.log(str); // ??? 문자열 자체에는 sort 메서드를 호출할 수 없어, call을 활용해 배열의 메서드인 sort를 빌려와 사용하였습니다.문자열은 이터러블이며 유사 배열 객체이기 때문에 배열의 sor..

기존에 Map 객체를 활용해 API 응답 데이터 캐싱 로직을 구현했었습니다.const cacheData = API_CACCHE_DATA.get('http://localhost:8080/api/team'); if (!cacheData || cacheData.exp { // 캐시 데이터 설정 {data, exp} API_CACHE_DATA.set('http://localhost:8080/api/team', { data: res.data, exp: new Date().getTime + 1000 * 60 * 10, }) // 응답 데이터 활용 console.log..

SSAFY 10기 비전공 JAVA 트랙 교육과정 회고23년 5월 ~ 6월그 간의 경험을 비추어 보았을 때, 나는 문제가 생겼을 때 문제 해결을 지시하고 과정을 관리하는 사람보단 직접 문제를 해결하는 사람이 되길 원했던 것 같았다. 그래서 다니던 직장을 퇴사하고 개발 직무로의 전환을 위해 SSAFY에 지원했다. JAVA가 대세라는 말에 가까운 지역인 대전, 비전공 JAVA 트랙으로 지원했다. 이 때는 아직 어떤 개발자가 되겠다 싶은 생각은 하지 않았었다. 막연히 개발로 돈을 벌어보고만 싶었다. 서류 제출 과정에서는 개발 직무로의 전환 이유와 간절함에 대해 어필했다. 시험은 공기업 인적성 시험을 잠시 준비했던 경험이 도움 됐던 것 같았고, 면접은 최신 IT 트렌드 뉴스들을 주제별로 독서하듯 쭉 읽어나가면서 ..

컴포넌트의 상태 별 UI를 관리하기 위해 프로젝트에 스토리북을 적용해보기로 결정했습니다. npx storybook@latest init프로젝트의 루트 디렉토리에서 스토리북을 설치합니다. 위 명령어를 이용하면 루트 디렉토리에 .storybook 폴더와 stories 폴더가 생성됩니다.프로젝트의 구조입니다. ui 패키지에 존재하는 컴포넌트를 blog, lab 서비스에서 가져다가 사용하는 방식입니다.따라서 ui 패키지 내에 존재하는 컴포넌트들을 스토리북으로 관리해줘야 합니다.import type { StorybookConfig } from '@storybook/nextjs';import { join, dirname } from 'path';/** * This function is used to resolve ..

turborepo를 활용해 만든 next.js 프로젝트에서 blog 서비스에 대한 jest 테스트 실행 후 위와 같은 에러를 맞이했습니다. Page 컴포넌트 내에는 테스트용 Div 요소와 다른 패키지에서 가져온 Button 컴포넌트를 포함하고 있습니다. 에러 메시지를 토대로 예상했을 때, 서로 다른 패키지에서 작성된 컴포넌트를 하나의 패키지 내에서 렌더링 하려 했고, 각각의 패키지 내에 설치된 react의 버전이 다를 것이라 생각해 확인해 봤습니다. apps/blog/package.json "react": "19.0.0-rc-f994737d14-20240522", packages/ui/package.json "react": "^18.2.0", 페이지 컴포넌트가 존재하는 패키지와 Button 컴포넌트가 존..

자바스크립트에서 비동기 작업을 다루는 것은 매우 중요한 일이나 개인적으로 헷갈리는 부분이 많았습니다.해당 게시물에서는 예시 코드와 함께 코드가 어떤 순서대로 작동되는지 나타내는 모식도와 함께 정리해 보았습니다.node.js 와 브라우저에서의 비동기 작업은 다소 차이가 있기에 브라우저를 기준으로 설명했습니다. 호출 스택 (Call Stack)자바스크립트 코드에서 호출된 함수가 쌓이는 공간입니다.이벤트 루프 (Event loop)호출 스택, 콜백 큐를 감시하며 실행될 작업을 조정하는 역할을 합니다.동기적으로 작업하는 함수는 호출 스택에 쌓아가져 실행시키고, 호출 스택이 비어있을 때만 콜백 큐에 있는 작업을 순차적으로 호출 스택에 올리는 역할을 합니다.콜백 큐 (Callback Queue)비동기 작업의 처리 ..