[{"_1":2},"routes/home",{"_3":4},"data",{"_5":6},"posts",[7,33,52,62,72,82,92,102,112,123,134,146,158,170,180,190,200,211,221,231,241,251,262,278,288,301,311,321,331,343,353,365,375,385,397,407,417,427,437,448,458],{"_8":9,"_10":11,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_27":28,"_29":30,"_31":32},"id","article/tranning-buying","path","/article/tranning-buying/","category","article","slug","tranning-buying","title","2025-10-20 우리는 왜 훈련하지 않고 구매하는가","description","훈련보다 구매가 익숙한 개발자들에 대한 이야기","excerpt","💡 2025년 6월, Toss Frontend Accelerator 교육 코스를 만드는 과정에서 작성했던 글입니다. 윤문하여 기술 블로그로 옮겼습니다. 탁월함을 향하여 요즘 전문성 과 탁월함 에 대해 많은 생각을 하고, 대화를 나누고, 자료를 읽고 공부하고 있다. 나는 언제나 멋진 걸 만들어 내는 멋진 사람이 되고 싶었으며, 더구나 이 주제를 돈을 받으며 일로서 고민하고 있다니 기쁜 나날을","date","2025-10-20","tags",[26],"Article","ogImage","/og/article/tranning-buying.png","thumbnail","/thumbnails/hello-world.jpg","draft",false,{"_8":34,"_10":35,"_12":36,"_14":37,"_16":38,"_18":39,"_20":40,"_22":41,"_24":42,"_27":51,"_29":30,"_31":32},"react/fizz-flight","/react/fizz-flight/","react","fizz-flight","2024-12-24 React Fizz & Flight (긴 글 주의)","그간의 오개념에 속죄하는 포스팅... Fizz, Flight에 대해 제대로 알아보자","그동안 와 에 대한 기술 포스팅을 해왔다. 2023 10 24 \"처음부터 RSC가 있었으면 됐잖아?\" 2024 01 27 Streaming SSR로 비동기 렌더링 하기 [2024 02 23 \\[A는 B\\] 1. RSC란?](https://saengmotmi.netlify.app/react/what is rsc/) 2024 11 01 React Router v7, Static Prerender","2024-12-24",[43,44,45,46,47,48,49,50],"React","Nextjs","Development","RSC","React Router","Fizz","Flight","SSR","/og/react/fizz-flight.png",{"_8":53,"_10":54,"_12":36,"_14":55,"_16":56,"_18":57,"_20":58,"_22":59,"_24":60,"_27":61,"_29":30,"_31":32},"react/rrv7-static-prerendering","/react/rrv7-static-prerendering/","rrv7-static-prerendering","2024-11-01 React Router v7, Static Prerendering?","RSC인데 딱히 서버는 아닌","react router v7이 출시를 위해 열심히 준비 중입니다. 아직 정식 버전까지는 못왔고 10/31일 기준 (링크) 까지 와있습니다. dev 브랜치 타겟의 공식 문서를 들어가보면 변경에 대한 설명을 읽어볼 수 있습니다. 이번 메이저 업데이트에는 재밌는 변경 사항들이 많은데요. 그 중에서 가장 눈길이 갔던 Static Prerendering에 초점을 맞춰 살펴보겠습니다. 1. ‘라우터’는","2024-11-01",[43,44,45,46,47],"/og/react/rrv7-static-prerendering.png",{"_8":63,"_10":64,"_12":13,"_14":65,"_16":66,"_18":67,"_20":68,"_22":69,"_24":70,"_27":71,"_29":30,"_31":32},"article/learning-like-a-child","/article/learning-like-a-child/","learning-like-a-child","2024-07-08 내부 구현을 열어보며, 아이처럼 배우기","'뒷이야기가 너무 궁금한 나머지 불빛이 새어나가지 않도록 이불을 뒤집어쓰고 손전등에 의지해서 읽는, 그렇게라도 읽을 수밖에 없는 읽기'","1. 동심에 대해 생각하기 이 이야기를 어떻게 시작하면 좋을지를 조금 고민하다가, 이런 문장으로 운을 띄워보려 한다. \"동심을 잃지 않고 아이처럼 배우기. 그것을 어떻게 지속할 수 있을지를 고민하기.\" 처음 개발 블로그를 만들던 시절, 훗날 동심에 관한 이야기를 개발 블로그에 적게 될 줄은 몰랐을 것이다. 하지만 나는 앞으로 점점 더 많은 '동심'과 '즐거움'에 대한 이야기를 하게 될 것만 ","2024-07-08",[26],"/og/article/learning-like-a-child.png",{"_8":73,"_10":74,"_12":13,"_14":75,"_16":76,"_18":77,"_20":78,"_22":79,"_24":80,"_27":81,"_29":30,"_31":32},"article/backend-newbie","/article/backend-newbie/","backend-newbie","2024-06-16 백엔드 찍먹해보려 GPT와 보낸 하루 (백엔드 뉴비의 단상)","그냥 알아서 하기로 했습니다","<p align=\"center\" style=\"color: 666; font size: 12px; margin top: 10px;\" 오늘 블로그 요약</p 1. 개발자의 포트폴리오 다각화란 최근 커피챗 겸 강의 제작 관련하여 조언도 구해볼 겸 병진님과 처음으로 저녁 식사를 했다. 여러 이야기가 오갔는데 그 중 한 갈래가 vs 였다. 내 관심사는 언제나 시장에서의 주체적인 방식의 생존이다. 조금","2024-06-16",[26],"/og/article/backend-newbie.png",{"_8":83,"_10":84,"_12":13,"_14":85,"_16":86,"_18":87,"_20":88,"_22":89,"_24":90,"_27":91,"_29":30,"_31":32},"article/compiler_study","/article/compiler_study/","compiler_study","2024-06-06 컴파일러 스터디 회고 (23.11 ~ 24.03)","컴파일러를 공부하세요","💡 이 글은 2024 03 02를 기준으로 작성되었으며, 사내 스터디로 진행했던 '컴파일러 만들기' 북 스터디 회고를 옮긴 글입니다 1. 교재 컴파일러 만들기 컴퓨터 프로그램의 구조와 원리 (유종원) https://product.kyobobook.co.kr/detail/S000001805053 2. 배운 점 컴파일러는 1) 어휘 분석(tokenize) 2) 구문 분석(parse) 3) 인터","2024-06-06",[26],"/og/article/compiler_study.png",{"_8":93,"_10":94,"_12":13,"_14":95,"_16":96,"_18":97,"_20":98,"_22":99,"_24":100,"_27":101,"_29":30,"_31":32},"article/effort-engineering","/article/effort-engineering/","effort-engineering","2024-04-28 자기 이해를 기반으로 생존을 엔지니어링 하기","재미 있게, 행복하게","자기 자신을 올바르게 이해하는 건 중요합니다. 당연합니다. 하지만 왜 중요할까요? 참 재밌는 사실은… 인생은 꽤나 자주 우리를 속이고, 종종 자기 자신에게 조차 속곤 합니다. 많은 사람들이 인생의 ‘가짜 문제’에 속아 많은 시간과 기회를 내다버리곤 합니다. 잘 알지 못하는 주제에 대해서는 속아 넘어가기 쉽지요. 사실은 책 싫어하는 사람이 ‘나는 책 좋아해’ 라고 착각하고 글쓰기를 업으로 삼으","2024-04-28",[26],"/og/article/effort-engineering.png",{"_8":103,"_10":104,"_12":13,"_14":105,"_16":106,"_18":107,"_20":108,"_22":109,"_24":110,"_27":111,"_29":30,"_31":32},"article/mentoring","/article/mentoring/","mentoring","2024-04-06 [A는 B] 2. 멘토링이란?","나의 시작이자 끝이 될 멘토링에 대해 생각해보기","글을 다 쓰고 나서 내가 내린 '멘토링'에 대한 정의는 이러하다. 📖 멘토링이란 긍정적인 방향으로 멘티의 변화를 이끌어내는 기술의 총체를 의미한다. 따라서 멘토링은 심리 상담의 성격을 띌 수 밖에 없다. 1. 멘토링에 대해 생각해나가는 과정 어려운 주제다. 멘토링이란. 이걸로 커리어를 시작했지만, 제대로 공부해 본 적도 없고 어떻게 공부를 해야 할지도 모르겠는 분야라는 생각이 든다. 일단은","2024-04-06",[26],"/og/article/mentoring.png",{"_8":113,"_10":114,"_12":36,"_14":115,"_16":116,"_18":117,"_20":118,"_22":119,"_24":120,"_27":122,"_29":30,"_31":32},"react/what-is-hydration-and-errors","/react/what-is-hydration-and-errors/","what-is-hydration-and-errors","2024-03-03 더 나은 Hydration Error Overlay를 위한 여정","Hydration이 무엇이며, 관련 에러를 표시하는 방법이 어떻게 발전하고 있는지 알아봤습니다","1. 리액트가 이벤트를 처리하는 방법 리액트에서 화면이 그려지는 과정에 대해서는 익숙할 것이다. 에서부터 출발하여 쭈우욱 자식 요소를 탐색하며 가상돔을 어쩌구… 하는 Render 과정 이후 호스트 객체(ex. DOM)에 Commit 하면 사용자에게 보여진다. 이벤트는 어떨까? 너무 멀리 가지 않기 위해 결론 부터 말하자면 리액트는 네이티브 이벤트 대신, 이를 한번 래핑한 를 사용한다. 왜 굳","2024-03-03",[43,44,45,121],"Hydration","/og/react/what-is-hydration-and-errors.png",{"_8":124,"_10":125,"_12":36,"_14":126,"_16":127,"_18":128,"_20":129,"_22":130,"_24":131,"_27":133,"_29":30,"_31":32},"react/what-is-rsc","/react/what-is-rsc/","what-is-rsc","2024-02-23 [A는 B] 1. RSC란?","RSC란 무엇인가에 대해 직접 답을 내려보다","‘면접 질문에 어떻게 답하면 좋을까요?’ 라는 질문을 종종 받는다. 그럴 때마다 “A는 B다” 라고 정의를 먼저 내린 후 그에 대한 추가 설명이나 비유, 사용 경험 등을 이어서 답변하라고 대답한다. B가 A의 핵심적인 부분을 정의하는 서술일 수록 이후에 이어나갈 설명이 쉬워지기 때문이다. 그리고 이러한 정의를 얼마나 적확하게 하는가는 설명하고자 하는 대상에 대한 서술자의 이해 수준에 깊게 연","2024-02-23",[43,44,45,46,132],"React Server Components","/og/react/what-is-rsc.png",{"_8":135,"_10":136,"_12":36,"_14":137,"_16":138,"_18":139,"_20":140,"_22":141,"_24":142,"_27":145,"_29":30,"_31":32},"react/streaming_ssr","/react/streaming_ssr/","streaming_ssr","2024-01-27 Streaming SSR로 비동기 렌더링 하기","준비된 Chunk로 부터 낙하!","주의: 이 글은 2023년 7월 즈음 작성되었으며, 약간의 윤문을 거쳐 최근 발행되었습니다. React의 신규 스펙에 대한 글인 만큼 그 사이 변경이 생겼을 수 있습니다. 어떻게 보면 React SSR의 비동기 렌더링은 이미 정해져 있는 미래였다고도 할 수 있을 것 같습니다. 이 동기 함수라는 속성을 타고 태어난 순간 부터 말이죠. 1. Node.js, 싱글 스레드 그리고 이벤트 루프 다들 ","2024-01-27",[43,143,50,144,46,132],"React Canary","Streaming SSR","/og/react/streaming_ssr.png",{"_8":147,"_10":148,"_12":36,"_14":149,"_16":150,"_18":151,"_20":152,"_22":153,"_24":154,"_27":157,"_29":30,"_31":32},"react/use","/react/use/","use","2024-01-26 use()에 대한 매우 짧은 단상","단상이란 짧은 생각을 의미합니다","Suspense를 트리거 하는 방법 Suspense는 흔히 로딩 스피너를 띄우는 용도로 많이 알려져 있다. 반은 맞고 반은 틀리다고 생각한다. 물론 그런 용례가 있기는 하지만 그게 전부는 아니다. Promise를 로딩 스피너를 표현하는 데 사용할 수 있지만 그 본질적인 의미는 '비동기 상황을 값으로 다루는 것'에 있다. Suspense는 컴포넌트의 비동기 상황을 React에서 일급으로 지원하","2024-01-26",[43,143,155,156],"React Experimental","use hook","/og/react/use.png",{"_8":159,"_10":160,"_12":161,"_14":162,"_16":163,"_18":164,"_20":165,"_22":166,"_24":167,"_27":169,"_29":30,"_31":32},"javascript-study/2024-01-04-실행-컨텍스트-under-the-hood","/javascript-study/2024-01-04-실행-컨텍스트-under-the-hood/","javascript-study","2024-01-04-실행-컨텍스트-under-the-hood","2024-01-04 코드로 구현해보는 실행 컨텍스트","꼭 이렇게까지... 해야겠어...?","주의: 이 글은 2023 08 06을 기준으로 작성되었으며, 약간의 윤문을 거쳐 최근 발행되었습니다. GPT에 의존한 글로 오류가 있을 수 있습니다. 1. 실행 컨택스트, 낯짝 좀 보자 github을 뒤적거리며 실제 동작을 보고 Next.js를 이해하던 어느 날... 이런 생각을 했던 것 같다. 다른 코드들은 다 까볼 수 있는데 는 왜 맨날 책에서 나온 문장으로만 봐야 하지? 실행 컨텍스트도","2024-01-04",[168],"JavaScript","/og/javascript-study/2024-01-04-실행-컨텍스트-under-the-hood.png",{"_8":171,"_10":172,"_12":13,"_14":173,"_16":174,"_18":175,"_20":176,"_22":177,"_24":178,"_27":179,"_29":30,"_31":32},"article/retrospect-2023","/article/retrospect-2023/","retrospect-2023","2023-12-27 2023까지 내가 기술적으로 깨달은 것들","2024 레지고 레지고~","2023년이 끝났다. 남은 것은? 개인 회고에서 적었지만 2023년은 힘들었지만 내가 엔지니어로서 큰 도약을 할 수 있게 해준 해였다. 2022년은 굵직하게만 따졌을 때 1) 리멤버로의 이직 2) UTS(유저 타겟팅 시스템)라는 UI 기반 쿼리 빌더를 만들었던 것과 3) Yarn Berry 마이그레이션 했던 것으로 요약할 수 있었다면, 2023년은 그것들로 부터 얻은 자신감으로 더 많은 것들","2023-12-27",[26],"/og/article/retrospect-2023.png",{"_8":181,"_10":182,"_12":13,"_14":183,"_16":184,"_18":185,"_20":186,"_22":187,"_24":188,"_27":189,"_29":30,"_31":32},"article/my_career","/article/my_career/","my_career","2023-11-05 신방 전공자가, 부캠 출신으로, 강사 일 하다가, 개발자로 살아남기(-ing)","초장문 TMI 주의","1. 살아남은 자는 강한걸까 나는 어쨌든 혼돈의 개발 시장에서 살아남아 밥 벌어먹고 살고 있는 프론트엔드 개발자다. 전업 프론트엔드 개발자로 일한 경력은 내년이면 3년 차, 개발 분야 전체로 치면 5년 차에 접어든다. 내가 잘 나서 밥을 벌어먹고 있다는 말을 하고 싶은건 아니다. 한 때는 솔직히 조금은 그런 생각을 가져본 적도 있다. 하지만 최근 많은 스타트업들이 감원 및 폐업한다는 소식, ","2023-11-05",[26],"/og/article/my_career.png",{"_8":191,"_10":192,"_12":13,"_14":193,"_16":194,"_18":195,"_20":196,"_22":197,"_24":198,"_27":199,"_29":30,"_31":32},"article/retrospect_2023_chunk","/article/retrospect_2023_chunk/","retrospect_2023_chunk","2023-11-01 어느덧 10월 마무리","2023 회고 전반전 Chunk","저번에 bullet point로 적어보니 나쁘지 않아서 한번 더 해본다. 너무 완벽한 기획을 만들어서 기승전결 완벽한 아티클만을 뽑아낼 필요도 없는거니까 말이다. 주로 생각이 복잡할 때 이런 식으로라도 글을 써봐야겠다는 생각을 많이 하게 되는 것 같다. 실제로 최근에 정신적으로 꽤나 피폐하게 살았던 거 같고... 어떤 매체든 표현할 수 있는 수단이 있다는 것만으로 그래도 많은 위안이 된다. ","2023-11-01",[26],"/og/article/retrospect_2023_chunk.png",{"_8":201,"_10":202,"_12":36,"_14":203,"_16":204,"_18":205,"_20":206,"_22":207,"_24":208,"_27":210,"_29":30,"_31":32},"react/rsc_and_isomorphic","/react/rsc_and_isomorphic/","rsc_and_isomorphic","2023-10-24 \"처음부터 RSC가 있었으면 됐잖아?\"","왜 처음부터 안 넣어서 이 사단을 만드냐? (그런거 아님;)","생각해보면 이 모든 건 RSC가 처음부터 있었으면 됐을 일이다 진짜 그렇죠. 만약 처음부터 (이하 RSC)가 있었다면, 'RSC는 Client Components를 해치지 않아요' 'RSC는 React를 변화시키는게 아니라 오히려 완전하게 만드는 거에요' 같은 궁색한 설명들을 안해도 됐을 겁니다. 하지만 어쨌든 RSC는 2023년 Next.js를 등에 업고 React 생태계에 핵폭탄처럼 떨어","2023-10-24",[43,44,45,46,132,209],"Isomorphic","/og/react/rsc_and_isomorphic.png",{"_8":212,"_10":213,"_12":13,"_14":214,"_16":215,"_18":216,"_20":217,"_22":218,"_24":219,"_27":220,"_29":30,"_31":32},"article/hey_jt","/article/hey_jt/","hey_jt","2023-10-09 그간 무슨 생각을 하며 살았는가? (23-08월 ~ 23-10월)","Hey, JT. What you've been thinking these days?","13에서 새로 도입된 관련 공부를 한건 나쁘지 않았지만 딱히 업무에 쓸모는 없었다. 면접관 업무를 볼 때 관련 어설픈 대답들을 알아보는 수단 정도로만 종종 사용되었다. 제품에도 당장은 도입할 생각이 없고, 일단 원리만 잘 파악해둔 다음 많은 이들이 먼저 뛰어가 지뢰를 밟고 폭사(?)하고 나면 그 때 천천히 진입해도 늦지 않다고 생각한다. 오히려 롱테일보다는 파레토 법칙(80:20)에서 이야기","2023-10-09",[26],"/og/article/hey_jt.png",{"_8":222,"_10":223,"_12":13,"_14":224,"_16":225,"_18":226,"_20":227,"_22":228,"_24":229,"_27":230,"_29":30,"_31":32},"article/frontend_architecture","/article/frontend_architecture/","frontend_architecture","2023-10-05 우리는 정말 프론트엔드 '엔지니어'일까?","전혀 스윙... 아니, 엔지니어링을 하고 있지 않아...?","프론트엔드에서 구조를 추구하면 안 되는 걸까? 몇 달째 제 머릿속을 꽉 사로잡고 있는 주제는 ‘프론트엔드에서 구조를 추구하면 안 되는 걸까?' 입니다. 문장만 놓고 보면 프로그래머가 구조를 추구하는 게 잘못된 일이라는, 애초에 성립하지도 않는 이상한 문장인 것만 같습니다. 동의할 사람도 많지 않을듯 하고요. 하지만 유독 웹 프론트엔드 분야에서는 어플리케이션이 어떠한 구조를 갖추어야 한다는 강","2023-10-05",[26],"/og/article/frontend_architecture.png",{"_8":232,"_10":233,"_12":13,"_14":234,"_16":235,"_18":236,"_20":237,"_22":238,"_24":239,"_27":240,"_29":30,"_31":32},"article/for_students","/article/for_students/","for_students","2023-10-01 근데 한번 저 개발자나 해볼까요?","라고 누군가 내게 물어본다면","일단 '하지 마세요' 라고 할거다. 사다리 걷어차기가 아니라 지금까지 쌓아온 데이터베이스를 기반으로 따져보았을 때 저 대답이 통계적으로 옳은 대답에 가깝다. 그리고 무엇보다도 잘 안되었을 때 괜히 욕 얻어먹기 싫기도 하다 :) 에잉 대답이 그게 뭐야 진짜 제대로 알려줘 라는 대답이 돌아온다면 다시 한번 자세를 고쳐 앉아 대답을 할 의향이 생긴다. 그리곤 다시 '하지 말라니까' 라고 대답할 것","2023-10-01",[26],"/og/article/for_students.png",{"_8":242,"_10":243,"_12":13,"_14":244,"_16":245,"_18":246,"_20":247,"_22":248,"_24":249,"_27":250,"_29":30,"_31":32},"article/contribute_with_gpt","/article/contribute_with_gpt/","contribute_with_gpt","2023-09-23 ChatGPT로 SWR 컨트리뷰트 날로 먹어보기","헤이 GPT, 컨트리뷰트 \"해 줘\"","주의: 이 글은 2023 06 20를 기준으로 작성되었으며, 약간의 윤문을 거쳐 최근 발행되었습니다. 얼마 전 에 내가 올린 PR(https://github.com/vercel/swr/pull/2666) 이 머지되었다. 동네방네 떠들고 다닌 걸로 모자라 블로그까지 쓴다. 리액트와 SWR 공식 문서 오타 수정한 건이나 처럼 업무하면서 만져야 했던 라이브러리의 타입 수정 정도는 기여를 해봤고, ","2023-09-23",[26],"/og/article/contribute_with_gpt.png",{"_8":252,"_10":253,"_12":254,"_14":255,"_16":256,"_18":257,"_20":258,"_22":259,"_24":260,"_27":261,"_29":30,"_31":32},"nextjs/rsc_with_ipc","/nextjs/rsc_with_ipc/","nextjs","rsc_with_ipc","2023-06-13 Next.js 13의 서버는 한 개가 아니란다","IPC라고 있는데... 처음 들어보시나요? 사실 저도...","Next.js 13에서 왜 IPC 서버를 추가 구현했을까? 사실 처음에 이 이슈로 파고들게 된 경위는 최근 새롭게 발표된 Server Actions 가 내부적으로 도대체 어떻게 동작하는건지 감도 안잡혀서 관련한 구현을 찾아보려고 했던 게 시작이었다. 하지만 Next.js는 React와 다르게 RFC로 미리 공개하고 작업하기 보다는 내부에서 뚝딱 뚝딱 만들어서 갑자기 짠! 하거나 트위터에서 관","2023-06-13",[43,44,45],"/og/nextjs/rsc_with_ipc.png",{"_8":263,"_10":264,"_12":265,"_14":266,"_16":267,"_18":268,"_20":269,"_22":270,"_24":271,"_27":277,"_29":30,"_31":32},"toolchain/package_manager_1","/toolchain/package_manager_1/","toolchain","package_manager_1","2023-06-06 ChatGPT 시켜 패키지 매니저 만들기 (1)","이름은 택키지매니저로 하겠습니다","나의 올해 목표는 패키지 매니저 뜯어보기였는데 이 정도 속도로는 내후년에도 어려울 것이 자명했다. 뜯어보기는 커녕 Yarn Berry 한창 뒤적거릴 때 이후로 레포지토리 입구까지도 못가봤다. 그렇게 미루다가 요즘 ChatGPT를 개인 과외 교사로 쓰고 있는데 생각해보니 아예 GPT를 부려먹으면 손 안대고 코 풀수 있겠다는 생각이 문득 들었다. 적어도 GPT4 버전 같은 경우 과거에 이미 정립","2023-06-06",[272,273,274,275,276],"패키지 매니저","javascript","npm","yarn","package manager","/og/toolchain/package_manager_1.png",{"_8":279,"_10":280,"_12":254,"_14":281,"_16":282,"_18":283,"_20":284,"_22":285,"_24":286,"_27":287,"_29":30,"_31":32},"nextjs/why_ssr_route","/nextjs/why_ssr_route/","why_ssr_route","2023-06-01 Next.js의 SSR은 왜 페이지 단위로만 가능할까?","그러게...?","라는 질문은 다소 넌센스 적으로 느껴질 수도 있다. 생각하기에 따라 다양한 층위에서 정답이 가능하기 때문이다. Next.js는 프레임워크이고, 페이지 단위 SSR은 Next.js에서 규정한 방식이기 때문이다. Next.js의 SSR 렌더링 단위와 라우터 구조가 서로 강결합 되어 있기 때문이다. Next.js가 페이지 단위로 SSR을 한다는 전제 자체가 잘못되었다. 이런 식으로 말이다. 모순되","2023-06-01",[43,44,45],"/og/nextjs/why_ssr_route.png",{"_8":289,"_10":290,"_12":265,"_14":291,"_16":292,"_18":293,"_20":294,"_22":295,"_24":296,"_27":300,"_29":30,"_31":32},"toolchain/yarn_berry","/toolchain/yarn_berry/","yarn_berry","2023-05-31 리멤버 웹 서비스 좌충우돌 Yarn Berry 도입기","야옹","라는 글을 쓰게 되었다. 기술 수준이 아주 높은 글은 아니지만 삽질했던 경험을 공유하는 글이라서 그래도 나름의 정보 값이 있다고 생각한다. 발행은 2월 말에 됐고, 태스크는 작년 말에 진행됐던 건인데 뭉개고 뭉개다가 채용에 조금이라도 도움될까 싶어 귀찮음을 무릅쓰고 기술 블로그로 옮겼던 글이다. 바이럴이 나름 잘 됐는지 계속 검색 상위 노출이 되고 있고, 종종 글 읽고 연락주시는 분들도 계셔","2023-05-31",[43,297,298,45,299,272],"Yarn","Yarn Berry","NPM","/og/toolchain/yarn_berry.png",{"_8":302,"_10":303,"_12":36,"_14":304,"_16":305,"_18":306,"_20":307,"_22":308,"_24":309,"_27":310,"_29":30,"_31":32},"react/observer_pattern_with_redux_react_query","/react/observer_pattern_with_redux_react_query/","observer_pattern_with_redux_react_query","2023-05-23 아름다운 것 (Redux에서 React Query 까지)","옵저버 패턴(Observer Pattern)은 한 객체의 상태가 바뀌면 그 객체에 의존하는 다른 객체에게 연락이 가고 자동으로 내용이 갱신되는 방식으로 일대다(one-to-many) 의존성을 정의합니다.","1. 고도로 발전한 과학은 마법과 구분할 수 없다 아서 C. 클라크 요즘은 잘 안쓰지만 2021년 즈음 까지만 해도 시장의 부정할 수 없는 대세였고, 여전히 많은 프로젝트에서 선택 받고 있는 라이브러리이다. 사실 그렇게까지 딥하게 써본 적은 없지만 나 를 가지고 앱 전체의 api call을 컨트롤 하는 코드들을 보면 그만 정신이 아득해지는 걸 참을 수가 없었다. 류 라이브러리를 사용할 수 있","2023-05-23",[43,45],"/og/react/observer_pattern_with_redux_react_query.png",{"_8":312,"_10":313,"_12":13,"_14":314,"_16":315,"_18":316,"_20":317,"_22":318,"_24":319,"_27":320,"_29":30,"_31":32},"article/debug_small_talk","/article/debug_small_talk/","debug_small_talk","2023-05-19 개발... 아주 조금 늘었을까...?","미생물을 벗어나려 몸부림치던 날들이 있었다","얼마 전 부터 내가 운영하기 시작한 FE 전용 디스코드 서버에 질문이 하나 올라왔다. vite 쓰면서 performance is not defined 에러 겪어보신분 계신가요?? codebuild상에서 저 에러가 나는데 찾아봐도 나오질 않네요 순간적으로 CI/CD 환경에서 Node.js 버전이 개발 환경보다 낮아서 생기는 문제 아닐까 싶어 ChatGPT에 질문을 넣었고, 아래와 같이 답변을 ","2023-05-19",[26],"/og/article/debug_small_talk.png",{"_8":322,"_10":323,"_12":36,"_14":324,"_16":325,"_18":326,"_20":327,"_22":328,"_24":329,"_27":330,"_29":30,"_31":32},"react/react-lazy","/react/react-lazy/","react-lazy","2023-05-02 React.lazy API 구현 살펴보기","컴포넌트 동적 import 그거 어떻게 하는건데","는 React 애플리케이션에서 코드 분할을 쉽게 구현할 수 있는 API입니다. 이를 사용하면 렌더링 시 필요한 컴포넌트만 로드할 수 있어 초기 로딩 시간을 줄일 수 있습니다. 는 주로 와 함께 사용됩니다. 아래는 RFC(https://github.com/reactjs/rfcs/blob/main/text/0064 lazy.md) 의 원문 일부와 그 대목을 번역한 내용입니다. (땡스 DeepL…","2023-05-02",[43,45],"/og/react/react-lazy.png",{"_8":332,"_10":333,"_12":36,"_14":334,"_16":335,"_18":336,"_20":337,"_22":338,"_24":339,"_27":342,"_29":30,"_31":32},"react/rtk-query-deepdive","/react/rtk-query-deepdive/","rtk-query-deepdive","2023-02-01 RTK Query는 어떻게 use이름Query를 만드는가?","아니 근데 진짜 어케했누?","1. 사건의 발단 사건의 발단은 아래에 있는 코드에서 부터다. 라는 값이 라는 hook을 리턴하고 있는데, 그게 어떻게 가능하냐는 것이다. 그 비밀을 알기 위해서는 결국 의 구현을 확인하는 수 밖에 없다. 레포지토리의 주소는 여기 이다. 레포를 보면 는 를 실행한 결과물이라는 사실을 알 수 있다. <br 2. 코드 뜯어보기 에 모듈을 넘기고 있는데, 에는 api 생성에 필수적인 로직들이 들어","2023-02-01",[43,45,340,341],"Redux","RTK Query","/og/react/rtk-query-deepdive.png",{"_8":344,"_10":345,"_12":13,"_14":346,"_16":347,"_18":348,"_20":349,"_22":350,"_24":351,"_27":352,"_29":30,"_31":32},"article/bye-2022","/article/bye-2022/","bye-2022","2023-01-01 영욕의 2022...","잘 가요, 2022년. 힘들었지만 그리울거야.","변화의 소용돌이 나의 2022는 첫 퇴사와 함께 시작되었다. 2020년 6월 부터 약 1년 10개월 여를 다닌 직장(위코드)에서의 업무를 마무리했던게 1월 말이었다. 프론트엔드 멘토로 입사한 뒤, 팀원이 2 3배 정도 늘었기에 막바지엔 총원 6명의 작은 기능조직 팀장 역할도 경험해볼 수 있었다. 이곳은 내가 처음 개발을 배운 부트캠프이기도 했는데, 아무 능력도 경험도 없던 내가 첫 직장으로서","2023-01-01",[26],"/og/article/bye-2022.png",{"_8":354,"_10":355,"_12":161,"_14":356,"_16":357,"_18":358,"_20":359,"_22":360,"_24":361,"_27":364,"_29":30,"_31":32},"javascript-study/2022-05-13-monad","/javascript-study/2022-05-13-monad/","2022-05-13-monad","2022-05-13 함수형 프로그래밍 & 모나드","[주의] 쫄지마시오!","1. 함수형 프로그래밍이란? 1) 정의를 발췌하는 것부터 시작해보자 💡 “함수형 프로그래밍은 성공적인 프로그래밍을 위해 부수 효과를 최대한 멀리하고 조합성을 강조하는 프로그래밍 패러다임이다. 함수형 프로그래밍이 부수 효과를 최대한 멀리하는 이유는 다음 두 가지를 위해서다. 하나는 오류를 줄이기 위해서고, 또 하나는 조합성 혹은 모듈화 수준을 높이기 위해서다. (...) 높은 모듈화 수준은 ","2022-05-13",[168,362,363],"Functional Programming","Monad","/og/javascript-study/2022-05-13-monad.png",{"_8":366,"_10":367,"_12":13,"_14":368,"_16":369,"_18":370,"_20":371,"_22":372,"_24":373,"_27":374,"_29":30,"_31":32},"article/how-to-be-a-good-frontend-dev","/article/how-to-be-a-good-frontend-dev/","how-to-be-a-good-frontend-dev","2022-04-19 내가 그 때 성장이라고 믿었던 것들","신입 프론트엔드 개발자가 알아야 할 ‘실전 압축 지식’","개발자에게 성장은 연차 무관 언제나 가장 중요한 과제다. 그 관심사나 중요도에 비해 달성하기는 굉장히 어렵고 구체적으로 다루기도 어려운 문제다. 추상적인 개념이기도 하거니와 연차별로 딱딱 떨어질 수도 없는, 개인차가 워낙 큰 화두라는 점이 정확한 이야기를 나누기 힘들게 하는 요인인 것 같다. 나 또한 전 회사에서 성장이 막혀 있다는 생각에 사로잡혀 한참을 힘들어 했었다. 다행히 요즘은 뭘 공","2022-04-19",[26],"/og/article/how-to-be-a-good-frontend-dev.png",{"_8":376,"_10":377,"_12":36,"_14":378,"_16":379,"_18":380,"_20":381,"_22":382,"_24":383,"_27":384,"_29":30,"_31":32},"react/react-query","/react/react-query/","react-query","2021-12-10 react-query 시작부터 적용까지","Why? 부터 Suspense 까지 한방에 뿌셔보자!","0. Before Start 예전 부터 정리하고 싶었던 내용인데 우연한 기회로 실제 써보면서 터득한 부분이 있어서 정리해둔다. 결론부터 짚어두자면 의 핵심은, 1. 라는 개념을 도입하며 프론트엔드에서 서버 데이터를 다루는 방식을 재정의했으며, 2. 그렇게 재정의 한 문제를 전략을 통해 효과적으로 해결하면서도, 3. + 등 React 생태계의 중요 API에 잘 어울리는 형태를 채택하며 DX(D","2021-12-10",[43,45],"/og/react/react-query.png",{"_8":386,"_10":387,"_12":388,"_14":389,"_16":390,"_18":391,"_20":392,"_22":393,"_24":394,"_27":396,"_29":30,"_31":32},"graphql/graphql-code-generator","/graphql/graphql-code-generator/","graphql","graphql-code-generator","2021-12-01 graphql-code-generator 적용기","커뮤니티에 질문 동냥하며 찾은 practice 정리","1) Motivation 1 1) 타입스크립트를 사용하는 이유 <div align=\"center\" <img alt=\"img\" src=\"./images/typescript.png\" / </div 우리가 타입스크립트를 사용하는 것은 런타임이 아닌 컴파일 타임에 정적 분석을 하여 보다 많은 타입 관련 에러들을 미리 찾아내어 안전한 서비스를 작성하기 위함 입니다. VSCode 등의 IDE가 타입 추","2021-12-01",[395,45],"GraphQL","/og/graphql/graphql-code-generator.png",{"_8":398,"_10":399,"_12":161,"_14":400,"_16":401,"_18":402,"_20":403,"_22":404,"_24":405,"_27":406,"_29":30,"_31":32},"javascript-study/2021-09-16-프로토타입","/javascript-study/2021-09-16-프로토타입/","2021-09-16-프로토타입","2021-09-16 프로토타입","OOP가 클래스 만의 전유물은 아니라고요","프로토타입 예전부터 자바스크립트의 에 대하여 검색해보면 나오는 문구들은 대체로 아래와 같았다. \"자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어 다.\" 이웅모, <모던 자바스크립트 Deep Dive , 259p \"자바스크립트는 클래스 기반 객체지향 프로그래밍 언어보다 효율적이며 더 강력한 객체지향 프로그래밍 능력을 지니고 있는 프로","2021-09-16",[168],"/og/javascript-study/2021-09-16-프로토타입.png",{"_8":408,"_10":409,"_12":161,"_14":410,"_16":411,"_18":412,"_20":413,"_22":414,"_24":415,"_27":416,"_29":30,"_31":32},"javascript-study/2021-09-01-클로저","/javascript-study/2021-09-01-클로저/","2021-09-01-클로저","2021-09-01 클로저","자신이 생성될 때의 스코프에서 알 수 있었던 변수들 중 언젠가 자신이 실행될 때 사용할 변수들만을 기억하여 유지시키는 함수","최근 부쩍 깨닫고 있지만 자바스크립트 대부분의 핵심 개념은 정말이지 몽땅 와 연결되어 있다. 역시 마찬가지다. 사실 클로저는 자바스크립트 고유의 개념은 아니고, 함수형 프로그래밍 언어에서 등장하는 보편적 특성이다. 그래서 명세에 정의되어 있지 않고, 문서나 서적마다 각기 달리 설명할 수 밖에 없다. 대체로 MDN의 다음 정의를 인용하는 듯 하다. \"A closure is the combina","2021-09-01",[168],"/og/javascript-study/2021-09-01-클로저.png",{"_8":418,"_10":419,"_12":161,"_14":420,"_16":421,"_18":422,"_20":423,"_22":424,"_24":425,"_27":426,"_29":30,"_31":32},"javascript-study/2021-08-23-콜백-함수","/javascript-study/2021-08-23-콜백-함수/","2021-08-23-콜백-함수","2021-08-23 콜백 함수","Call Me Back.","callback, 제어권을 위임하다 담백하게 콜백 함수( )의 정의부터 한번 보고 가자. A callback function is 1) a function 2) passed into another function as an argument , which is then 3) invoked inside the outer function to complete some kind of routine ","2021-08-23",[168],"/og/javascript-study/2021-08-23-콜백-함수.png",{"_8":428,"_10":429,"_12":161,"_14":430,"_16":431,"_18":432,"_20":433,"_22":434,"_24":435,"_27":436,"_29":30,"_31":32},"javascript-study/2021-08-18-this","/javascript-study/2021-08-18-this/","2021-08-18-this","2021-08-18 this","객체가 호출해주기 전에는 그는 다만 하나의 일반 함수에 지나지 않았다.","What is 'this'? 는 일반적으로 객체지향 언어에서 를 의미하고, 클래스 내에서만 사용 가능하다. 자바스크립트에서는 동일한 키워드의 의미가 조금 다르다. 클래스가 아닌 어느 곳에서든 사용할 수 있고, 실행 위치에 따라 가 가리키는 대상이 달라진다. 호출되는 방식에 따라 동적으로 결정된다. 사정이 그렇다 보니 이를 두고 많은 개발자들이 혼란스러워 한다, 고 한다. 실제로 JSON의 아","2021-08-18",[168],"/og/javascript-study/2021-08-18-this.png",{"_8":438,"_10":439,"_12":161,"_14":440,"_16":441,"_18":442,"_20":443,"_22":444,"_24":445,"_27":447,"_29":30,"_31":32},"javascript-study/2021-08-05-실행-컨텍스트","/javascript-study/2021-08-05-실행-컨텍스트/","2021-08-05-실행-컨텍스트","2021-08-05 실행 컨텍스트","자바스크립트 동작의 시작이자 끝","\"Kick the can down the road\" <div style=\"80%\" align=\"center\" <img src=\"./images/080501.jpeg\" alt=\"짤\" / </div <br 결국 돌아오고 말았다. 코어 자바스크립트는 솔직히 스키밍으로만 3회독 하고 있는 중이고 그 중에서 휘황찬란한 단어들이 많이 나오는 실행 컨텍스트 파트는 그간 건너뛰어 버리곤 했다. 각잡고 스터","2021-08-05",[446],"Algorithm","/og/javascript-study/2021-08-05-실행-컨텍스트.png",{"_8":449,"_10":450,"_12":161,"_14":451,"_16":452,"_18":453,"_20":454,"_22":455,"_24":456,"_27":457,"_29":30,"_31":32},"javascript-study/2021-08-01-프로그래머스-크레인","/javascript-study/2021-08-01-프로그래머스-크레인/","2021-08-01-프로그래머스-크레인","2021-08-01 프로그래머스 크레인","Stack으로 크레인 문제 풀기","<img src=\"https://grepp programmers.s3.ap northeast 2.amazonaws.com/files/production/69f1cd36 09f4 4435 8363 b71a650f7448/crane game 101.png\" alt=\"크레인\" / <br / 내가 접근한 풀이의 핵심은 Stack 자료 구조의 활용이다. 크레인이 쌓인 인형을 위에서부터 뽑아간다는 상황","2021-08-01",[446],"/og/javascript-study/2021-08-01-프로그래머스-크레인.png",{"_8":459,"_10":460,"_12":161,"_14":461,"_16":462,"_18":463,"_20":464,"_22":465,"_24":466,"_27":467,"_29":30,"_31":32},"javascript-study/2021-07-30-데이터-타입","/javascript-study/2021-07-30-데이터-타입/","2021-07-30-데이터-타입","2021-07-30 데이터 타입","Hello, JavaScript!","데이터, 기억할게! <br <div align=\"center\" <img alt=\"img\" src=\"./images/remember.jpeg\" / </div <br 오늘은 에 대한 이야기를 해보자. 처음 프로그래밍 언어를 배우면, 흔히 \"Hello, World\"를 화면에 어떻게든 출력하는데 성공하고 나면, 으레 다음 과정으로 대체로 변수 선언과 할당을 맛보게 된다. 이 과정을 인간 일상에 빗대","2021-07-30",[168],"/og/javascript-study/2021-07-30-데이터-타입.png"]