깊고 넓은 삽질

체끼로 속이 메스꺼워 차는 커녕 지하철도 탈 수 없었다. 집까지 걸어가려면 2시간은 족히 걸렸고 자전거를 탈 기력도 없었다. 택시를 타면 토할 것 같았다. 그 때 생각난 건 헝새였다. 헝새는 얼마전 검은색 전기자전거를 샀다고 자랑했다. 나에겐 마치 오토바이라도 탄 것 마냥 멋있어 보였다. 마침 여긴 헝새의 집 근처여서 헝새에게 전화했다. 헝새는 군말없이 나와줬다. 나중에 알고보니 헝새는 중요한 발표를 앞두고 있었고 해야할 일과 긴장이 밀려들어와 정신 없는 상태에서 나의 전화를 받았다고 했다. 오랜만에 만난 헝새는 어제 만난 것처럼 실없는 소리로 맞이해줬다. 형, 콜라를 한 번 먹어봐. 플라시보는 정말로 효과가 있다. 하지만 헝새의 콜라는 나에게 충분한 믿음을 주지 않았기에 한 모금을 마시고 모두 헝새에게..

원티드 프리온보딩 5월 주제로 '프론트엔드 주니어를 위한 네 가지 질문'이 나왔다. 내가 좋아하는 오종택님의 강의라 꼭꼭 챙겨보려 한다. 사전 과제로 '나'에 대한 다섯 가지 질문을 주셨다. 글을 쓰다 보니 나에 대한 글을 쓰는 것이 생각보다 어렵기도 하고 귀찮았다. 그래서 어딘가에 게시하는 글이라는 압박감으로 나에 대해 스스로 성실하게 알아보기 위해 여기에 글을 남긴다.'나'는 어떤 성격을 가진 사람인가요?  환경에 영향을 많이 받고 순응하는 편이다. 누가 울면 같이 따라 울 정도로 남에게 동화도 잘되는 편이다. 눈치를 자주 보는데 잘 보진 못한다. 개인적인 판단은 사실보다 느낌에 의지한다. 작은 일에도 의미부여를 많이 하고 스트레스를 잘 받는다. 하지만 상황에 대해서는 순진할 정도로 낙관적으로 생각하..

React Router loader | React Router 공식 문서의 loader 링크 loader란 react router에서 path에 등록한 element를 랜더링하기 이전에 호출되는 함수다. react router 6.4버전 이후의 data router을 사용했을 때 loader를 사용할 수 있다. ... createBrowserRouter([ { element: , path: "teams", loader: async () => { return fakeDb.from("teams").select("*"); }, children: [ { element: , path: ":teamId", loader: async ({ params }) => { return fetch(`/api/teams/${pa..

리액트 쿼리는 mutate 함수의 옵션 값으로 onSuccess 콜백을 설정할 수 있다. mutate가 성공했을 때 호출되는 콜백함수다. 나는 주로 mutate 성공 시 mutate와 연관되는 쿼리들의 쿼리키들을 invalidate하게 해서 데이터를 동기화할 때 사용한다. 그런데 가끔 mutate를 기다리지 않고 onSuccess를 호출하는 것 같은 때가 있다. 아래의 코드는 찜하기(favorite) 훅의 구현이다. 어딘가 잘못된 코드 ... const { data: favorites, ...rest } = useSuspenseQuery({ queryKey: [queryKey.favorite], queryFn: async () => { const res = await apiInstance.get(`/fa..

Tailwind CSS를 다운받으려고 공식 홈페이지에 들어갔는데 이상한 점이 있었다. 공식 홈페이지 예시에서 Tailwind CSS를 개발 종속성으로 다운받고 있었다. Tailwind CSS는 프로덕션 단계에서 빌드할 때 필요한거 아닌가라는 의문이 들었다. npm 공식 문서에서는 종속성과 개발 종속성을 다음과 같이 정의하고 있다. "dependencies": Packages required by your application in production. "devDependencies": Packages that are only needed for local development and testing. - npm Docs | Specifying dependencies and devDependencies in..

짧은 기간동안 다양한 사람들과 팀 프로젝트를 할 기회가 있었다. 각 프로젝트를 진행한 시간도 모두 2주 내외로 짧기도 하고 쉬는 기간도 짧아서 바로바로 회고록을 쓰지 못했다. 그래서 이 포스팅 하나에 각 프로젝트에 대한 짤막한 회고를 적고자 한다. 아래의 모든 프로젝트에서 팀장과 풀스택을 맡았다. 프로젝트의 결과물들은 현재 배포를 중단하였습니다. 시연 영상과 발표자료는 구글 드라이브 링크를 참고해주세요. 1. 침착맨 팬 페이지 만들기 프로젝트 (2주) Typescript, React, Express, MongoDB GitHub - calmdownmanfanpage/calmdownmanfanpage: 침착맨 팬페이지 침착맨 팬페이지. Contribute to calmdownmanfanpage/calmdow..

이 글은 MSA 혹은 Monorepo를 실제 서비스에서 구축해본 경험이 없는 초보 개발자의 글입니다. 정확하지 않은 정보가 있다면 피드백 부탁드립니다. 모노레포는 서로 다른 프로젝트를 하나의 레포에 관리할 때 사용하는 전략이다. 여기서 서로 다른 프로젝트는 어떤 의미일까? 만약 할 일 관리 앱에서 클라이언트와 서버가 있는데 이를 하나의 레포에서 관리한다고 하면 모노레포 전략이 필요할까? 모노레포의 의의 모노레포는 MSA의 단점에서 나온 전략이다. Micro Service Architecture는 서비스, 즉, 프로젝트가 각각 분리되어있는 환경이다. MSA는 어떻게 나왔을까? 다이어리 앱을 만든다고 가정해보자. 다이어리에는 할 일 관리와 달력이 필요하다. 다이어리 앱이 점점 고도화되면서 할 일 관리와 달력..

firebase는 필드 '하나'에서만 범위나 같지 않음 비교 할 수 있습니다. 헬스 보조자 매칭 웹 서비스를 만들고 있다. 우리 팀은 3명 모두가 프론트엔드 개발자다. 백엔드 개발자를 못 구했다. 이가 없으면 잇몸으로, 우리가 직접 백엔드를 구축할 수 있으나 짧은 시간 안에 완성도 있는 프로젝트를 위해 백엔드 구축을 외부 서비스에 위임하기로 협의했다. 여러 서비스 중 firebase를 선택했다. 많이 사용되는 것 같고 우리 서비스에는 복잡한 쿼리가 없다고 생각해 document db도 충분할 것 같았다. AND 쿼리만 지원한다면 소규모 서비스에선 문제없다고 생각했다. 트랜잭션이나 소켓통신도 지원한다고 해서 필요하다면 나중에 더 발전 시킬 생각으로 firebase를 선택했다. 사용자가 자신의 conditi..

대학을 졸업하고 개발자 학원을 전전하며 취업을 준비한 게 벌써 2년째다. 그간 한 백 번의 지원과 수 번의 면접과 단 한 번의 취업이 있었다. 지금 나는 컴퓨터 앞에 앉아서 예순을 넘기신 아버지가 못과 망치로 벌어온 돈을 받아 먹으며 밥값을 할 준비 중이다. 오늘 아침에는 개발자 학원에서 하는 개발 프로젝트 중간 점검 마감이 있었다. 총 2주 간 진행되는 프로젝트에서 지난 일주일 간의 결과물을 보여주는 일이었다. 일주일을 꼬박 밤을 새 개발해도 부족한 부분이 넘쳐나 오늘 아침까지 꼬박 밤을 샜다. 중간 결과물을 제출하고 침대에 쓰러져 낮잠을 잤다. 저녁 쯤 일어나 끼니를 때우려고 후라이팬에 불을 올리던 차에 아버지 전화가 왔다. 프로젝트 진행이 한창일 때 아버지의 전화가 있었다. 일감이 생겨 지금 서울에..

Execute Asynchronous Functions in Parallel 비동기 함수들의 배열을 병렬적으로 실행한 결과를 배열로 반환하는 함수를 만드는 문제가 있었다. 문제의 조건으로 Promise.all을 사용하지 않아야 한다. leetcode 문제 링크 만들다보니 Promise.all의 병렬 처리에 대해 궁금점이 생겼다. 싱글스레드로 작동하는 자바스크립트 엔진이 어떻게 병렬처리를 할 수 있을까? Promise.all을 사용하면 병렬 처리가 가능하다는데, Promise의 콜백도 결국 콜스텍에서 실행되지 않나? Promise의 콜백은 언제 실행되나 Promise의 콜백은 Promise 객체가 생성될 때 즉시 실행된다. const promise = new Promise((resolve) => { con..