useMemo와 useCallback으로 감싸면, 실제로 무엇이 덜 실행될까?   이런 코드 리뷰, 다들 받아본 적 있을 것이다. “이 함수 렌더링마다 새로 만들어지니까 으로 감싸 주세요.” 그런데 으로 감싸도, 에 넘기는 화살표 함수 자체는 렌더링마다 새로 만들어진다. 그래서 이 코멘트대로 감쌌을 때 실제로 무엇이 달라지는지 궁금해졌다. 상품 목록에 좋아요 버튼을 붙이는 예제 하나로 , , 이 각각 무엇을 줄이는지 한번 살펴 보자. React 19.3.0과 React Compiler 1.0.0으로 확인했다. 렌더 횟수는 jsdom에서 컴포넌트 함수가 몇 번 실행됐는지를 세었고, 목록의 상품은 5개다. 세는 방법은 Babel로 컴파일한 결과에 함수마다 첫 줄에 실행 횟수를 올리는 코드를 넣는 플러그인을 한 번 더 돌리는 것이다. Compiler를 켠 경우에도 카운터는 컴파일이 끝난 뒤에 들어가서 Compiler의 판단에 영향을 주지 않는다.   부모가 리렌더링되면 무엇이 다시 실행…

서버 응답을 받기 전에 좋아요를 여러 번 누르면, 화면에는 어떤 값이 보여야 할까?   이전 글에서는 optimistic 값을 “사용자가 누르고 서버는 아직 확인하지 않은 값”이라고 정리했다. 그런데 서버가 확인하기 전에 사용자가 또 누른다면 어떻게 될까? 좋아요 버튼 하나를 두고, 요청이 겹칠 때 화면과 서버가 어떻게 어긋나는지 한번 돌려보자. TanStack Query v5.104.0으로 확인했다. 글에 나오는 로그는 React 없이 에 가짜 서버를 붙이고 응답이 오는 시간을 바꿔 가며 직접 돌려 본 결과이고, 로그마다 시나리오를 시작하고 지난 시간을 앞에 붙였다.   한 번 누를 때는 문제없다 좋아요 API는 로, 좋아요를 누른 뒤의 상태를 PUT으로 보낸다. 처음에는 응답을 기다리지 않고 캐시를 먼저 바꾸고, 실패하면 되돌리고, 끝나면 다시 받아오는 코드만 짰다. 한 번 누르면 캐시는 false에서 true로 바뀌고, 서버도 true가 되고, invalidate로 다시 받아…

useState 하나로 시작한 검색어는 어쩌다 URL과 캐시와 history에 나눠 살게 됐을까?   상품 검색 페이지를 만든다고 해보자. 검색어를 입력하고, 카테고리를 고르고, 목록에서 좋아요를 누를 수 있는 평범한 화면이다. keyword와 category는 이 컴포넌트에서만 쓰니 에 두었다. 카테고리로 거른 목록은 와 로 계산할 수 있어서 state에 담지 않고 렌더링할 때 계산했다(Avoid redundant state). 좋아요는 API를 부른 뒤 목록을 다시 받아온다. 처음에는 이 코드가 별로 이상해 보이지 않았다. 검색도 되고, 필터도 되고, 좋아요도 눌린다. 그런데 요구사항이 하나씩 붙기 시작했다. 상세 페이지에 갔다가 돌아와도 검색 조건이 유지되어야 한다. URL을 공유하면 같은 검색 결과가 보여야 한다. 검색어는 입력을 멈추고 300ms가 지나면 자동으로 검색된다. 카테고리는 고르는 즉시 반영된다. 검색 조건마다 서버 응답을 캐싱한다. 좋아요는 서버 응답을 기다리…

서버 기능을 거의 다 내려놓는 static export에서, Next.js에는 과연 무엇이 남는가?   Next.js는 서버 없이 prefetch를 어떻게 할까?를 쓰면서 로 빌드한 결과물을 한참 들여다봤다. 동적 경로를 빌드 때 다 알 수 없어서, 실제 slug 대신 같은 임시 값(placeholder)으로 페이지 하나만 만들고 CDN에서 모든 slug를 그 페이지로 돌려주는 방식도 재현해 봤다. 그 과정에서 가 URL의 값이 아니라 placeholder 값을 돌려줘서 slug를 URL에서 직접 읽어야 했고, CDN 규칙은 Next.js의 문서화되지 않은 파일 이름에 맞춰야 했다. 여기까지 오니 이런 생각이 들었다. 이렇게 쓸 거면 Next.js를 쓰는 의미가 있을까?   export에서 못 쓰는 것 는 빌드 결과를 HTML, JS, CSS 같은 정적 파일로만 내보내는 모드다. 런타임에 Next.js 서버가 없다. 그래서 요청이 들어올 때 서버가 해야 하는 일은 모두 쓸 수 …

런타임 서버가 없는 에서 Next.js 16의 가 무엇을 요청하는지, 빌드 결과와 네트워크 요청을 따라가 본 이야기.   Next.js의 는 빌드 결과를 HTML, JS, CSS 같은 정적 파일로만 내보내는 모드다. 런타임에 Next.js 서버가 없으니 오브젝트 스토리지에 올리고 CDN으로 서빙하면 된다. 그런데 이 모드에서도 는 prefetch를 하고, 클릭하면 페이지를 새로 불러오지 않고 화면을 바꾼다. RSC Payload, 왜 필요한데?에서 정리했듯이 Client Navigation에는 RSC Payload가 필요하다. RSC Payload를 만드는 쪽은 export 모드에도 있다. 같은 글에서 적었듯이, 정적 페이지에서 서버 컴포넌트를 렌더링하는 “서버”는 를 돌리는 빌드 환경이다. 빠진 건 요청을 받는 쪽이다. 빌드가 끝나면 남는 건 파일뿐이다.   Next.js 15로 static export를 하면(기본 설정 기준) 이게 문제가 되지 않았다. 페이지마다 RSC Pa…

HTML이 있는데도 Next.js가 RSC Payload를 따로 보내는 이유를, 최초 로드와 Client Navigation을 따라가며 정리한 이야기.   Next.js App Router 문서를 읽다 보면 RSC Payload라는 말이 계속 나온다. 서버 컴포넌트를 렌더링한 결과라는데, 서버는 이걸로 HTML까지 만들어서 보낸다고 한다. 그럼 HTML만 받으면 될 텐데, RSC Payload는 왜 따로 필요한 걸까? Hydration 설명을 볼 때도 비슷한 데서 막혔다. 흔히 이렇게 설명한다. Hydration은 서버에서 렌더링된 HTML을 리액트 컴포넌트로 변환하는 과정 이 설명대로라면 리액트가 HTML을 읽어서 컴포넌트를 만든다는 뜻이 된다. 그러면 HTML만 있으면 되고, RSC Payload는 할 일이 없어야 한다. 그런데 Next.js는 최초 로드 때도 RSC Payload를 HTML 안에 담아서 보낸다. 질문을 하나씩 적어보면 이렇다. 서버가 RSC Payload로 H…

Sticky 패널 하나를 만들다가, scroll 이벤트와 layout, requestAnimationFrame, IntersectionObserver가 브라우저의 한 frame 안에서 각각 어디에 놓이는지 따라가 본 이야기.   스크롤 위치에 따라 고정 방식이 바뀌는 Sticky 패널을 만든 적이 있다. 베리즈샵의 상품 상세 → 장바구니 → 주문 플로우에서 확인할 수 있다. 상세 페이지에서 흔히 보는 2단 레이아웃이다. 왼쪽에는 긴 본문이 있고, 오른쪽에는 옵션을 고르고 구매 버튼을 누르는 패널이 있다. 오른쪽 패널은 스크롤해도 계속 보여야 하는데, 패널 높이가 상황마다 달라서 조건이 까다로웠다. 패널이 화면보다 짧으면 헤더 아래에 붙는다. 패널이 화면보다 길면 본문과 함께 스크롤되다가, 패널 하단이 화면 하단에 닿으면 거기서 고정된다. 페이지 끝에 닿으면 고정을 풀고 컨테이너 끝에 멈춘다. 푸터를 덮으면 안 된다. 하나로는 두 번째 조건이 안 될 것 같았다. 그래서 스크롤 위치…

state, 클로저, ref, effect, 순수성, race condition. 따로따로 검색하게 되는 문제들이 사실 한 가지 모델에서 나온다는 이야기.   리액트를 쓰다 보면 한 번씩 만나는 장면들이 있다. 안에서 를 찍었는데 버튼을 아무리 눌러도 0만 나온다. 를 바꿨는데 화면이 안 바뀐다. 검색창에 “react”를 쳤는데 결과 목록에는 “r”로 검색한 결과가 떠 있다. StrictMode를 켰더니 effect가 두 번 돈다. 보통 이럴 때 증상별로 검색해서 하나씩 해결한다. 의존성 배열에 넣고, ref 대신 state를 쓰고, AbortController를 붙이고, StrictMode는 원래 그렇다는 글을 읽고 넘어간다. 그런데 넷 다 원인이 같다. 리액트가 컴포넌트를 어떻게 실행하는지 하나만 제대로 알면 전부 정상 동작이다. state는 변수가 아니라 스냅샷이다. 이 한 문장이 어디까지 설명해주는지 따라가 볼 생각이다.   렌더링은 함수 호출이다 컴포넌트는 함수다. 그…

이름이 비슷해서 늘 한 덩어리로 외우게 되는 DI, DIP, IoC를 리액트 코드 위에서 갈라보는 이야기.   객체지향 vs 함수형? 싸울 일이 아닙니다에서 으로 컨텐츠를 받는 Modal을 두고 이렇게 썼다. 이나 render prop으로 구현을 안에서 만들지 않고 밖에서 받는 건 의존성 주입이다. 주입을 했다고 저절로 역전되는 건 아니고, 무엇을 받느냐가 추상이라서 역전이 성립하는 것이다. 의존성 주입(DI)과 의존성 역전(DIP)을 한 단락에 같이 써놓고, 왜 이 둘이 따로 있는 단어인지는 설명 없이 넘어갔다. 둘은 이름만 비슷하고 서로 다른 층의 이야기인데, 여기에 제어의 역전(IoC)까지 끼면 “역전”이라는 단어가 두 번 나와서 더 헷갈린다. 그래서 이번엔 이 세 단어만 놓고 하나씩 떼어보려고 한다.   세 단어, 세 질문 셋은 각자 다른 질문에 답하는 단어다. DIP(Dependency Inversion Principle, 의존성 역전 원칙): 소스 코드가 무엇에 의존하도…

프론트엔드 개발자가 바라보는 명령형, 선언형, 객체지향, 함수형 프로그래밍에 대한 이야기.   “리액트는 함수형 컴포넌트를 쓰니까 함수형 프로그래밍이지.” “클래스 컴포넌트는 안 쓰는데 무슨 객체지향이야.” “for문 대신 map, reduce 썼으니까 선언적인 코드야.” 개발하면서 한 번쯤은 들어봤거나, 어쩌면 직접 말해본 적도 있을 문장들이다. (나도 그랬다..) 그런데 곱씹어보면 이 세 문장에는 공통점이 하나 있다. 패러다임을 문법이나 키워드의 문제로 보고 있다는 것. class 키워드를 쓰면 객체지향이고, function 키워드를 쓰면 함수형이고, map을 쓰면 선언형일까? 나는 그렇지 않다고 생각하는 편인데, 왜 그런지 한 번 정리해보고 싶었다.   용어부터 정리하자 패러다임 이야기를 하려면 용어부터 짚고 가야 한다. 특히 절차형과 명령형은 자주 섞여 쓰이는데, 사실 둘은 같은 층에 있는 단어가 아니다. 명령형(Imperative): 컴퓨터에게 어떻게(How) 할지를 순서…

다들 테라 좋아하시나요? 저는 일본 맥주 차원이 달라 병 말기랍니다..   서버 하나 띄우려고 AWS 콘솔에 접속해서 이것저것 클릭한 경험, 다들 있을 것이다. 처음에는 뭐 괜찮다. 하지만 점점 리소스가 늘어나고, 팀원이 늘어나면 이야기가 달라진다. “이 S3 버킷 누가 만든 거야?” “CloudFront 설정 왜 바뀌었지?” “스테이징이랑 프로덕션 설정이 왜 다르지?” 그렇게 시작되는 추노 대작전.. 수동으로 인프라를 관리하면 히스토리 추적이 안 되고, 재현이 안 되고, 리뷰가 안 된다. 코드는 Git으로 관리하면서, 정작 코드가 올라갈 인프라는 콘솔에서 클릭으로 관리하고 있다니. 뭔가 아이러니하지 않은가?   Infrastructure as Code (IaC) 이런 문제를 해결하기 위해 등장한 개념이 바로 IaC(Infrastructure as Code) 다. 말 그대로, 인프라를 코드로 정의하고 관리하는 것이다. IaC를 사용하면 다음과 같은 이점이 있다. 버전 관리: 인프…

Tanstack Query를 사용한다는 전제 하에 작성되었습니다. 나는 개인적으로 서버와 프론트의 스키마를 동일하게 가져가야한다고 생각을 하는 편이다. 그래야 서버의 잠수함 패치에도 사이드 이펙트를 피할 수 있는 든든 국밥이 되기 때문… (swagger-typescript-api와 같은 코드젠을 정말 애용하는 편이다) 하지만 이 또한 API 명세가 완성되었을 때 사용할 수 있는 것. 만약 빠듯한 일정에서 서버와 프론트의 작업이 동시에 진행되는 상황이라면? 그야말로 비상사태가 아닐 수 없다.   그렇다면 어쩔 수 없다. 인터페이스가 다를 수밖에 없는 코드를 작성할 수밖에. 서로 다른 인터페이스가 호환 가능하도록 하는 방법이 없을까?   Adpater Pattern 어댑터 패턴이란, 말 그대로 서로 다른 인터페이스 사이에 Adapter를 지원하는 패턴이다.   예를 들어, 이름과 나이 정보를 가져오는 기능을 개발한다고 해보자. FE에서는 이름과 나이가 하나의 API에서 함깨 내려올…

JavaScript에는 여전히 Record도, Tuple도 없다. 물론 “레코드처럼 생긴 객체”, “튜플처럼 생긴 배열”은 언제든 만들 수 있다. 하지만 그것들은 이름만 비슷할 뿐, 언어 차원의 새로운 복합 자료형과는 전혀 다른 존재다. 한때 TC39는 진짜 Record & Tuple을 표준 자바스크립트에 도입하려 했다. 그리고 이는 단순한 문법 제안이 아니라, JS의 데이터 모델 자체를 재정의하는 수준의 변화였다. 하지만 R&T는 받아들여지지 않았고, Composites라는 새로운 접근이 그 자리를 대신하고 있다. 그렇다면 애초에 R&T는 왜 필요했고, 무엇이 이 야심 찬 시도를 좌초시켰을까? 그리고 Composites는 어떻게 그 자리를 대신하고 있을까?   왜 Record & Tuple이 필요했는가 한 문장으로 말하면 이거다. 자바스크립트에는 “완전히 불변”하고 “구조적으로 비교 가능한” 복합 자료형이 단 하나도 없기 때문이다.   1. JavaScript에는 “진짜 imm…

Zod is designed to be as developer-friendly as possible. The goal is to eliminate duplicative type declarations. With Zod, you declare a validator once and Zod will automatically infer the static TypeScript type. It’s easy to compose simpler types into complex data structures. Zod는 개발자가 사용하기 편리하도록 설계되었습니다. 목표는 중복되는 타입 선언을 없애는 것입니다. Zod를 사용하면 검증기를 한 번만 선언하면 되고, Zod가 자동으로 정적 TypeScript 타입을 추론해 줍니다. 또한, 간단한 타입들을 쉽게 합쳐서 복잡한 데이터 구조를 만들 수 있습니다.   Zod를 아시나요? Zod는 TypeScript-first 스키마 유효성 검사 라이브러리로, 타…

Parcel v2.14가 React Server Components를 지원하기 시작했다! 🙄 “아니, Parcel은 번들러지, 프레임워크가 아니지 않나요?” 그것이 바로 너무나도 흥미로운 점이다! 파셀은 프레임워크가 아닌, 첫 번째 RSC 지원 툴이 된 것이다. 그 말인 즉슨, 이제 무거운 셋업을 뒤로 하고 로우레벨부터 가벼운 블록을 쌓듯이 RSC를 사용할 수 있다는 것이다. 서버 컴포넌트라고 하니 무조건 서버에서 HTML로 렌더링되는 컴포넌트인 것으로 오해할 수 있는데, 그렇지 않다! React Server Components는 기존의 클라이언트 렌더링 방식의 SPA(Single Page Application)에 통합할 수 있다. API 서버에서 JSON을 받는 대신 서버 컴포넌트를 렌더링한다면, 요청된 데이터를 렌더링하는 데 필요한 컴포넌트만 클라이언트로 보냄으로써 클라이언트 번들의 크기를 줄일 수 있다. 서버에서는 RSC payload만을 전달하고, 실제 컴포넌트는 클라이언트…

99년도 영화를 아주 재밌게 본 99년생이 쓰는 글   나는 대부분 모노레포 환경에서 개발을 해왔는데, 각 패키지의 규모가 커지면 커질수록 CI에 대한 고충도 커져갔다. CI에서 의존성 설치에 시간이 오래 걸린다면 Yarn berry의 Zero-Install을 활용해볼 수 있겠고, 빌드에 시간이 오래 걸린다면 여타 다른 번들러나 빌드 시스템을 써볼 수도 있다. 하지만 이미 프로젝트에서 Pnpm을 쭉 사용해왔다면? Vite나 Turborepo를 쭉 사용해왔다면? GitHub/GitLab Actions API를 적극적으로 사용하는 것이 최선의 방법일 것이다.   Matrix 매트릭스란 무엇인가? 침대 매트리스 아니다.   Matrix의 뜻은 행렬이다. 영화 매트릭스에서의 매트릭스 또한 수식의 행렬처럼 이미 구조화된 세계를 뜻한다. GitHub Actions는 Matrix의 기능을 다음과 같이 설명한다. “각 작업에 대한 변형을 정의하는 행렬을 만듭니다.” Matrix를 어떻게 활용할…

캐시 히트! 🥊   Next.js를 사용하는 대표적인 이유가 뭘까? 누구나 쉽게 답할 수 있다. 서버 ! 사이드 !! 렌더링 !!!   Next.js의 공식 문서를 처음부터 끝까지 정독해 본 적이 있는가? 그렇다면 분명 Next.js 공식 문서의 꽃은 아래의 두 글이라는 의견에 적극 공감할 것이다. Server Components Caching   서버에서 렌더링 작업을 수행하면 데이터 페칭, 보안, 캐싱, 성능, 초기 페이지 로드, SEO, 스트리밍 면에서 장점을 가져갈 수 있다. 이는 서버에서 HTML을 미리 렌더링하여 준비하는 기술인 Prerendering 개념으로 볼 수 있으며, HTML을 빌드 타임에 생성하는 SSG 주기적으로 생성하는 ISR 요청마다 매번 생성하는 SSR 이렇게 세 가지 방식으로 이야기해볼 수 있다. 추가적으로, Next.js에는 SSG와 SSR을 결합한 Partial Prerendering(PPR)이 실험적 기능으로 도입되어있다.   위 공식 문서를 …

컴포넌트에 다형성을 적용하는 방법으로 Polymorphic Component를 소개했다. Polymorphic 컴포넌트의 경우 prop을 전달하여 컴포넌트를 결합하게 되는데, 이때 전달할 수 있는 prop이 어떤 컴포넌트의 것인지 알기 힘들다. 게다가 코드만 봐서는 어떻게 렌더링 되는지도 알기 힘들다. 이를 해결하기 위해 속성과 행동을 자식 컴포넌트에 넘긴 후 자식이 직접 부모 컴포넌트를 대신하여 렌더링하는 Render Delegation이 등장했다. Polymorphic 컴포넌트와 마찬가지로 다형성을 위한다는 점은 동일하지만, Render Delegation의 경우 기존 컴포넌트와 합성이 될 컴포넌트를 코드에서 분리한다는 점이 다르다. Render Delegation 컴포넌트는 보통 Slot과 Slottable이라는 두 컴포넌트를 통해 구성된다. Slot은 자식 컴포넌트를 렌더링하는 역할을 하고 Slottable은 Slot에 들어갈 것이 무엇인지를 나타낸다.   Render D…

테스트 코드를 작성해야 한다~ TDD를 해야 한다~ 프론트에서는 테스트 코드 쓸모 없다~ 참 말 많은 테스트! 우선은 공부해봐야 뭐라도 알겠지? 테스트 계의 거장들과 함께 테스트에 대해 한 번 알아보자!   Kent Beck의 TDD 한 번 쯤은 들어봤을, 그리고 표지 디자인은 꽤나 익숙할 바로 그 책이다. 다들 읽어봤을지는 모르겠지만.. 최근 1회독을 해 본 내 짧은 후기는 다음과 같다. 문장이 상당히 산만한데다 번역체까지 더해지니 살짝 아찔하다.   책 두께의 반 이상을 예시 코드와 개념 설명이 차지하고 있기에, 책을 관통하는 내용은 문장 몇 개로 정리할 수 있었다. TDD의 리듬은 다음과 같다. (빨강 → 초록 → 리팩토링) 우선 테스트를 작성한다. 실패하는 구현을 짠다. (빨강) 성공하는 구현을 한다. 성공하기만 하면 된다. 가짜로 구현해도 된다. (초록) 올바르게 리팩토링 한다. 명백하게 구현해야 한다. 테스트들의 단계는 작게 분리되어야 한다. 그래야 테스트들 간에 서로…

2022년 1월 4일부터 2024년 11월 18일까지, 약 3년을 우아한형제들과 함께해서 즐거웠습니다 :)   왜 떠나는가? 사실 이직해야지! 하고 결심해서 시작한 것은 아니었다. 3-4년차가 이직하기 참 좋을 때라는데, 나는 과연 이직을 할 수 있을까에 대한 궁금증이 제일 컸다. 부업으로 꾸준히 멘토링을 하는 입장에서 취업/이직이 점점 어려워지고 있구나도 많이 느낄 수 있었다. 물론 연차를 더 쌓은 후 이직을 하는 길도 있었다. 하지만 우아한형제들이 첫 회사인 나는, 약 3년이라는 기간동안 대부분 회사 내부 서비스만을 개발했다. 디자인시스템, 어드민, 운영 도구 등등.. 어떻게 보면 서비스 회사에서 서비스 개발은 해보지 않은 셈이다. 이러다가 더 연차가 쌓였을 때, 만일 서비스 회사에 지원을 하게 된다면 서비스 경험이 없는 나를 과연 뽑을지에 대한 의문이 컸다. 주니어라면 와서 배우면 되는 부분이지만, 시니어라면 팀을 이끄는 역량이 필요할지도 모르는데 경험조차 없다면.. 계속 개…

자바스크립트로 문자열을 뒤집고 싶다면 어떻게 할 것인가? 다들 를 떠올렸을 것이다. 하지만 여기에 이모지가 포함되어 있다면?   물론 말고 스프레드 연산자나 을 떠올린 사람도 있을 것이다. 여튼, 어떤 방법을 쓰냐에 따라 결과가 크게 달라질 수 있는데…   위 코드를 실행하면 어떤 글자가 출력될까? 라는 아주 끔찍한 결과가 나온다.   반면 스프레드 연산자나 을 사용한다면?   이 차이는 자바스크립트에서 문자열과 이모지, 특히 ZWJ(Zero Width Joiner) 시퀀스를 처리하는 방식 때문에 발생한다.   잠깐! ZWJ는 뭔데? ZWJ(Zero Width Joiner)는 유니코드 문자 U+200D로, 이모지들을 결합하여 새로운 의미를 만드는 특수한 보이지 않는 결합 문자다. 이러한 결합 이모지를 ZWJ 시퀀스라고 한다. ZWJ는, 시각적으로 보이지 않고 개별 이모지들을 하나로 결합하는데 이는 플랫폼마다 지원하는 조합이 다를 수 있다.   하나의 기본 이모지는 두 개의 UT…

리액트 공식 문서를 읽다보면 다음과 같은 문장을 마주할 수 있다. 주의사항 useState는 Hook이므로 컴포넌트의 최상위 레벨이나 직접 만든 Hook에서만 호출할 수 있습니다. 반복문이나 조건문 안에서는 호출할 수 없습니다. 필요한 경우 새 컴포넌트를 추출하고 state를 그 안으로 옮기세요.   🤔 “왜 useState를 반복문이나 조건문 안에서 쓰면 안 되는 걸까?”   React 훅의 동작 원리 리액트 훅의 핵심 원리 중 하나는 훅의 호출 순서가 항상 같아야 한다는 것이다. 리액트는 컴포넌트가 리렌더링될 때마다 훅들을 순서대로 실행하는데, 만일 이 순서가 변경된다면 리액트는 어떤 상태가 어떤 useState 호출에 해당하는지 추적할 수 없게 된다. 만일 조건문 내에서 useState를 사용한다면, 조건의 값에 따라 훅의 호출 순서가 바뀌게 된다. 반복문 내에서도 마찬가지다. 반복 횟수에 따라 훅의 호출 횟수가 달라지게 된다. 위 두 경우 모두 리액트가 예측할 수 없는 동작…

선언형과 함수형 리액트 공식 문서에서 우리는 선언형이라는 표현을 볼 수 있다. How를 강조하는 명령형 프로그래밍과 달리, 선언형 프로그래밍은 What을 강조한다. 그리고 함수형 프로그래밍은 선언형 프로그래밍을 실현하는 방법 중 하나다. 함수형 프로그래밍의 대표적인 키워드 중 하나는 순수 함수다. 순수 함수란 외부의 값을 변경하는 사이드 이펙트가 없는 함수다. 순수 함수에 대한 더 자세한 내용은 [자바스크립트의 순수 함수와 비순수 함수 ](https://www.jeong-min.com/62-pure-impure-function/)에서 확인할 수 있다. 외부의 값을 변경하지 않는다는 개념은 불변성과도 밀접한 관련이 있다.   불변성이란? 불변성이란 값이나 상태를 변경할 수 없는 것이다. 그리고 자바스크립트의 원시타입은 불변성을 가진다.   자바스크립트의 변수 타입 자바스크립트의 변수 타입에는 크게 원시타입과 참조타입이 있다. 원시타입으로는 string, number, bigint, …

해시 테이블이란? 해시 테이블은 키-값 쌍을 저장하는 자료구조다. 해시 테이블은 평균 O(1)의 시간 복잡도로 삽입, 검색, 삭제 연산을 수행하기에 매우 유용하다. 해시 테이블의 대표적인 예로는 파이썬의 dictionary, 루비의 hash 자바의 map을 들 수 있겠다. 해시 테이블은 해시 함수를 사용하여 키를 배열의 인덱스로 변환한다. 이 과정을 해싱이라고 한다. 해시 함수는 같은 입력에 대해 항상 같은 출력을 반환해야 하며, 다른 입력에 대해서는 최대한 다른 출력을 반환하도록 설계되어야 한다. 그렇지 않으면 최악의 경우 O(n)의 시간 복잡도를 갖게될 수도 있다. 즉, 해시 함수의 품질에 따라 성능이 크게 좌우된다.   해시 함수가 다른 입력에 대해 동일한 출력을 반환한다면 해시 충돌이 발생한다. 해시 충돌을 완화하는 방법도 존재한다. 개방 주소법 (open addressing): 고정된 해시 테이블 내에서 저장 위치를 잘 찾기 분리 연결법 (separate chaining…

함수형 컴포넌트와 화살표 함수가 많이 사용되는 요즘, this 바인딩은 실무에서 점점 찾아보기 힘들어지는 개념이 되어가는 듯하다. 하지만 어쩔 수 없다. 꼭 알아야 하는 개념이다. 공부하자.   함수가 호출되는 방식에 따라 다르게 바인딩되는 this 자바스크립트의 this는 매우 강력하면서도 때로는 혼란스러운 키워드다. 함수가 어떻게 호출되느냐에 따라 동적으로 바인딩되는 this, 한번 같이 알아보자!   1. 일반 함수 호출 일반 함수로 호출될 때 this는 전역 객체를 가리킨다. 즉, 브라우저에서는 window, node.js에서는 global을 가리키게 된다.   🤔 “전역 스코프가 아닌 함수 스코프를 가지는데 왜 전역 객체를 가리키는 거지?” 함수 스코프와 this 바인딩은 서로 다른 개념이다! 함수 스코프는 변수의 접근 범위를 결정하는 규칙인 반면, this 바인딩은 함수가 어떻게 호출되었는지에 따라 결정되는 실행 컨텍스트다. 함수 내부에서 변수를 찾을 때는 스코프 체인…

“자바스크립트의 실행 컨텍스트에 대해 설명해보세요.” 아.. 그.. 알긴 아는데.. 아.. 어떻게 설명을..   질문을 받을 때 마다 머릿속이 새하야지는 바로 그 질문!   자바스크립트 실행 컨텍스트란? 실행 컨텍스트는 말 그대로, 자바스크립트 코드가 실행되는 환경으로, 코드가 실행될 때 생성되는 일종의 컨테이너라고 볼 수 있다. 실행 컨텍스트에는 변수 및 함수 선언, 스코프와 this 바인딩 정보 같은 것들이 저장된다. 실행 컨텍스트는 크게 전역 실행 컨텍스트와 함수 실행 컨텍스트로 나눌 수 있는데, 함수가 호출되면 새로운 실행 컨텍스트가 만들어지고 콜 스택에 쌓이게 되며, 함수 실행이 끝나면 해당 컨텍스트는 콜 스택에서 제거된다. 콜 스택을 포함한 자바스크립트 런다임에 대한 더 자세한 내용은 자바스크립트 엔진: “어, 아직 싱글이야” | JS 런타임에 대해 알아보자에서 확인할 수 있다.   놀랍게도, 이러한 실행 컨텍스트로 인해 스코프 체인, 클로저, 변수 호이스팅 같은 것들…

CLI, 우리는 이미 사용하고 있다. Command line interface 개발을 조금이라도 해봤다면 한 번쯤은 써봤을 것이다. 터미널에서 명령어와 파라미터로 조작하는 CLI, git과 aws를 터미널에서 사용해봤다면 당신은 이미 CLI 마스터!   CLI, 직접 한 번 만들어보자. 최근 CLI를 실행하면 자기 소개 몇 줄을 출력하는 식으로 포트폴리오(?)를 만드신 분을 봤는데, 이에 큰 감명을 받아 여기에 몇 가지 기능을 더 추가한 나만의 CLI를 만들어보려고 한다.   1. 환경 세팅 프론트엔드 개발자는 뭐다? 자바스크립트 개발자다 당연히 node.js 기반의 CLI를 만들고자 했고, 타입스크립트 및 최신 문법 사용을 위해 babel을 함께 사용했다. 그리고 라이브러리를 만들 때 주로 사용되는 rollup을 번들러로 선택했다. CLI 프로그램 개발을 위한 툴로는 commander, inquirer, chalk를 사용했다. commander: node.js 기반의 CLI를…

네비게이션 성능 향상을 위한 API 어떤 페이지에서, 사용자가 그 다음으로 이동할 페이지를 미리 가져올 수 있다면? 사용자 경험뿐만 아니라 성능까지 향상시킬 수 있는 방법일 것이다. 이런 접근은 특정 리소스 파일보다는 문서 URL을 타겟으로 하기 때문에, 싱글 페이지 애플리케이션(SPA)보다는 멀티 페이지 애플리케이션(MPA)에 좀 더 유용하다. 이 기능에 대해서는 두 가지 개념이 존재한다.   1. prefetching 프리패치, 프리패칭. 들어보셨죠? prefetch가 적용된 페이지들에 대해, 브라우저는 페이지의 하위 리소스는 다운로드하지 않고, 응답 바디만 다운로드하여 캐시에 저장한다. prefetch된 문서로 이동하는 경우를 제외하고는 페이지를 떠날 때 캐시는 비워진다. 이를 위해 를 사용할 수 있는데, 이 방법은 여러 한계점을 가진다. 교차 사이트 탐색에 사용할 수 없다. Cache-Control 헤더에 의해 차단된다. 자동으로 우…

이번 글에서는 변수, 함수 호이스팅 위주로 알아볼 예정입니다 :) 호이스팅에 대해 깊에 알아보기 전에, 아마 많은 사람들이 오해하고 있을 세 가지를 짚고 넘어가보겠다. let/const는 호이스팅 되지 않는다. 호이스팅은 ECMAScript에 정의된 용어다. 함수 표현식 코드에서 호이스팅되는 건 아무것도 없다. 놀랍게도, 모두 다 맞다고도, 틀렸다고도 할 수 있다. 잠시 놀라움은 뒤로 하고, 차근차근 알아가보도록 하자.   호이스팅이란? 자바스크립트 인터프리터가 코드를 실행하기 전에 변수, 함수, 클래스, 임포트의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상이다. 이번 글에서는 변수와 함수에 대해 어떻게 호이스팅이 일어나는지 알아보도록 하자!   함수 스코프를 가지는 var var로 선언된 변수의 범위는 현재 실행 컨텍스트다. 즉, 변수 선언을 둘러싼 함수 또는 전역이 될 수 있다. 따라서 var는 현재 함수 또는 전역 스코프 어디에서나 접근할 수 있는 변수를 …

“자바스크립트의 비동기 함수에 대해 설명해보세요.” “Promise에 대해 설명해보세요.” “Promise와 async/await의 차이에 대해 설명해보세요.” 프론트엔드 면접 유경험자라면, 정말 진절머리 나도록 많이 들어본 질문일 것이다.   그래서 어떻게 답변하면 되냐고? 어.. 음.. 그래서 써보는 글!   Promise란? 프로미스는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체다. 개발을 하면서 우리는 대부분 이미 만들어진 프로미스를 사용했을 것이다. 프로미스가 없었을 때는 어떻게 비동기 로직을 순차적으로 처리했을까? 그 해결책은 콜백 함수였다. 대표적인 예시로, 기존의 콜백 기반 API인 XMLHttpRequest을 대체하기 위해 나온 프로미스 기반의 Fetch API를 떠올려볼 수 있겠다.   콜백으로 비동기 처리하기 지금은 누구나 사용하는 fetch와 axios. 그 이전에는 XMLHttpRequest가 있었으니…   XMLHttpRequest를 이용하여 …

Sign을 보내~ Signal 보내~ 찌릿 찌릿 찌릿 찌릿   Signals 라는 개념을 들어본 적이 있는가?! 평소 리액트와 뷰만 써왔다면 처음 들어보는 단어일 수도 있다. 글에서는 시그널(signal), 단수형으로 표현할 예정이다. 한국인들에겐 언제나 단수형이 익숙한 법!   시그널이란? 시그널은 애플리케이션에 상태(state)를 추가하는 방법이다. 리액트의 상태가 변경될 경우 앱이 매번 리렌더링되는 반면, 시그널 값이 변경될 경우 정말 변경이 이루어지는 UI에서 업데이트가 이루어진다. 렌더링도 디핑도 필요없이 말이다!!   이 시그널이라는 개념은 Preact, Angular, Solid.js를 써본 사람이라면 들어봤을 것이다. Preact에서 useState 훅과 signals를 모두 제공하니, 한번 Preact의 시그널을 살펴보자!   vite를 사용해서 Preact + TypeScript 프로젝트를 바로 만들 수 있다!   Preact의 시그널 자바스크립트에서, 값은 …

본격 순수 함수를 시작으로 조금씩 함수형 프로그래밍과 친해져보기로 마음먹은 김에 시작해보는 시리즈 ㅋㅋ 지난 글에서는 함수형 프로그래밍에서 말하는 순수 함수에 대해 알아보았는데, 이번 글에서는 일급 값과 함께, 일급 함수와 고차 함수에 대해 알아보도록 하겠다!   일급이란? 월급 아니고 일급이요 ㅋ.ㅋ 다음과 같은 식으로 쓸 수 있는 값을 일급이라고 한다. 변수에 할당하기 함수의 인자로 전달하기 함수에 의해 반환되기 배열이나 객체에 담기   일급이 아닌 것은? 물론 자바스크립트에는 일급이 아닌 것도 있다. 수식 연산자, 반복문, 조건문, try/catch문 같은 것들은 자바스크립트에서 값이 아니기 때문에 일급이라고도 할 수 없다. 자바스크립트 뿐만 아니라, 대부분의 언어가 일급이 아닌 값들을 가진다.   중요한 것은 일급이 아닌 것을 일급으로 바꾸는 것이다! + 연산자를 변수에 할당할 수는 없지만, + 연산자와 동일한 행동을 수행하는 함수를 만들 수는 있다. 일급이 아닌 것도 …

저번 글에서는 리액트 19의 새로운 훅들에 대해서 알아보았다. 이외에도, 리액트 19에서는 리소스를 렌더링 시점에 읽기 위한 api로 use가 새롭게 등장했다. 이번 글에서는 use의 대표적인 쓰임새 두 가지를 알아보도록 하자!   use(Context) : use로 context 읽기 use는 기존의 useContext를 대체할 수 있다. useContext는 컴포넌트의 최상위 레벨에서 호출해야 하는 반면, use는 if와 같은 조건문이나 for와 같은 반복문 내부에서도 호출할 수 있다. 즉, use는 useContext보다 더 유연하게 사용될 수 있다. 대충_유연한_짤.jpeg   context가 전달되는 상황이라면 언제 어디서든 use를 사용할 수 있다. 참고로, 리액트 19에서는 를 프로바이더로서 렌더링할 수 있게 되었다. 더 이상 를 사용하지 않아도 된다는 것! 따라서 는 곧 depreca…

4월 25일, 리액트 19 베타가 공식적으로 나왔다! 리액트 19에서는 뭐가 달라졌는지 이번 글에서는 Hook 위주로 한 번 살펴보도록 하자.   들어가기 전에,   리액트 19 설치하기 (2024/05/03 기준) React 및 React DOM 최신 버전 설치 TypeScript를 사용한다면 types 설치   리액트의 비동기 처리 리액트 19에서는 전체적으로 비동기 처리와 관련된 훅이 많이 나온 것을 볼 수 있다. 리액트에서 흔히 사용되는 코드 패턴 중 하나는 비동기 요청을 처리한 다음 응답에 따라 상태를 업데이트하는 것인데, 이 과정에서 신경써야 할 몇 가지가 있다.   1. Pending 상태 api 요청이 진행중이라는 것을 노출하기 위한 상태다. 2. Optimistic 상태 api 요청이 성공할 것이라고 낙관적으로 보고, 응답을 기다리지 않고 미리 결과값을 노출하기 위한 상태다. 3. 에러 핸들링 api 요청 단계에서 에러가 발생했을 때 대처하기 위한 개념이다. 4.…

순수 함수요? 자바스크립트로 함수형 프로그래밍이 가능하다고요? 자바스크립트는 프로토타입 기반 프로그래밍 언어 아닌가요? 맞는 말이다. 자바스크립트는 프로토타입 기반 프로그래밍 언어로, 객체지향 프로그래밍 언어의 한 갈래다. 하지만 순수 함수형 프로그래밍 언어가 아닌 자바나 자바스크립트로도 함수형 프로그래밍은 가능하다! 반드시 스칼라와 같은 함수형 프로그래밍 언어를 사용해야만 함수형 프로그래밍을 한다고 말 할 수 있는 것은 아니다. 자바스크립트를 좋은 함수형 프로그래밍 언어로 보기는 어렵지만, 몇 안 되는 함수형 기능을 살펴보도록 하자.   순수 함수란? 순수 함수는 부수 효과가 없는 함수이며, 부수 효과를 잘 관리하는 것은 함수형 프로그래밍의 가장 큰 목적이다. 놀랍게도 우리는 모두 순수 함수와 가까이 지낸 적이 있는데..! 바로 학창 시절 배웠던 수학의 함수가 모두 순수 함수다.   함수 f:X -> Y 는, 집합 X의 원소를 함수 f에 대입하면 집합 Y의 원소가 나온다는 것…

지난 글에 이런 문장을 썼다. 그렇게 내 첫 이력서로부터 취업까지는 2년이 넘는 기간이 있었고, 그 동안 내 이력서는 정말 많이 탈바꿈했다. 그래서 오랜만에 판도라의 상자를 한 번 열어보기로 마음 먹었고, 마침 최근 이력서 업데이트도 한 번 했으니 이력서를 주제로 글을 써보기로 했다.   나의 이력서와 포트폴리오 변천사 아이클라우드를 샅샅이 뒤져 찾은 자료들 누구에게 보여주기 민망할 정도지만,, 벌써 4년 전 이야기니까 대학생의 귀여운 패기 정도로 봐주시길 바랍니다,, 벨로그 짭플루언서로 만들어 준 포트폴리오 사이트 힙한 거 만들고 싶어서 만든 두 번째 포트폴리오 사이트   현재는 포트폴리오는 다른 거 다 치우고 이 블로그 하나고, 이력서는 아래와 같다. 링크에서 더 자세히 볼 수 있다.   놀랍게도, 그 전 이력서에서 현재의 이력서로 탈바꿈하는 데는 반나절이 채 걸리지 않았다. 다 미리미리 정리해 놓은 내용이 있었던 덕분이다. 사내 중간/연말 평가 때 작성해 놓은 것들과 기존…

회사 외 부업으로 개발자 멘토링을 시작한 지도 반 년이 넘어갔다. 개발자 붐이 사그러들었다고는 하나, 여전히 개발자 지망생(?)들은 많은 것 같다. 멘토링을 진행하면서, 그리고 IT 모임에서 다른 개발자들과 인생 이야기를 나누면서, ‘나는 상당히 운이 좋았구나’ 하는 생각도 많이 들었다. 나는 어쨌거나 전공자였고, 공부를 그리 열심히 하는 학생이 아니었음에도 주워 들은 전공 지식은 많았다. 정말 당연한 개념들이라고 생각했는데 모를 수도 있겠구나를 멘토링을 하면서 많이 깨달았다. 주변 사람들도 대부분 전공자들이었기에 좋은 팁과 정보들을 계속해서 얻을 수 있는 환경이었고, 그 덕에 IT 커뮤니티도 일찍부터 시작할 수 있었다. 내가 컴퓨터공학과를 나와서 다른 직군으로 취업을 해본다고 상상해보니, 정말 힘든 일이 아닐 수 없다는 걸 깨달았다. 당장 무얼 해야할지 감도 잡히지 않는 사람들에게 조금이라도 도움이 될 수 있는 내용들을 한 번 정리해보면 어떨까 하는 생각으로 글을 써보려 한다.…

배열에서 특정 값 찾을 때, find만 쓰진 않았나요? 자바스크립트 배열을 다룰 때, map, forEach, find, findIndex 등의 메서드는 정말정말 유용한 친구들이다. 하지만 매번 똑같은 배열에 대해 루프를 여러 번 돌아야 한다면..? 루프의 루프의 루프를 돌아야 한다면..? 우리들의 시간은 소중하니까!!! 더욱 효율적인 방법이 어디 없을까?   reduce, 들어는 보았나 reduce 함수는 줄인다는 뜻과 일맥상통하게, 배열을 하나의 값으로 줄여 반환해주는 친구다. 즉, 배열을 하나의 값으로 만들어버리고 싶을 때 쓰면 되는 것! (물론 새로운 배열을 만들 수도 있다) 위 처럼 acc와 cur로 표현되는 reduce 식을 본 적은 다들 한 번 쯤 있을 것이다. 정확히는, reduce가 실행하는 콜백은 네 가지 인수를 받는다. accumulator: 콜백의 반환값을 누적 currentValue: 현재 처리할 요소 currentIndex: 현재 처리하는 요소의 인덱스 …

Context API부터 시작해보는 리액트의 상태 관리 이야기. Flux, Proxy, Atomic에 대해서도 알아봅시다.   리액트 상태 관리, 왜 하는데?   1. 단방향 바인딩 양방향 바인딩을 하는 앵귤러나 뷰와 달리, 리액트는 단방향 바인딩을 지원한다. 즉, 부모의 상태를 자식으로 전달할 수는 있지만(props) 자식의 상태를 부모로 전달하는 방법은 없는 것이다. 물려받기만 할 줄 아는 불효자 리액트 자식에서 부모의 상태를 바꾸려면 상태를 바꾸는 setState도 자식에게 전달해야 하니, props의 개수는 점점 증가하게 된다.   2. props drilling , 그리고 A의 자식인 , 그리고 B의 자식인 있다고 해보자. A의 상태값을 B에서는 사용하지 않는데 C에서는 사용한다면, 우리는 어쩔 수 없이 B에게도 상태값을 props로 전달하게 된다. 만약 이런 형태의 컴포넌트가 계속 깊어진다면.. 그리고 상태값도 더 많아진다면.. props drilling으로 꽤나 고생…

엑셀이나 구글 스프레드 시트를 input에 그대로 복붙할 수는 없을까? 엑셀 또는 스프레드 시트 파일을 서버에 업로드하기 전에, 프론트에서 한 번 validation을 한다든가 하는 전처리 과정을 진행해볼 수도 있다. 그렇다면 엑셀이나 구글 스프레드 시트를 복붙해 넣을 수 있는 input과 뷰가 필요한데, 과연 엑셀과 스프레드 시트 파일은 어떤 형태로 클립보드에 저장될까? 복붙 가보자고~   input의 onPaste 속성 input에는 onInput만 있는 줄 알았지? HTMLElement의 paste 이벤트의 이벤트 타입은 Event를 상속받는 ClipboardEvent이다. 우리가 자주 사용하는 input 이벤트와 한 번 비교해보자!   1. 어떻게 복사한 값을 가져올 수 있을까? 의 의 메서드를 활용하면 포맷에 따른 값을 가져올 수 있다. 위와 같이 작성된 컴포넌트를 만들고, 다음과 같은 화면에서 를 복사해서 위 컴포넌트에 붙여넣어 본다고 해보자. 그럼 다음과 같은 결…

공부를 해보겠다고 책이나 독스를 읽어 내려가다 보면, 무념무상이 되곤 한다. 타입 가드.. 그렇구나.. 타입 좁히기.. 그렇구나.. 타입 서술어.. 그렇구나.. 그러다 문득 든 생각, 🤔 실제로 개발할 때 써본 적은 없는 것 같은데? 이거 왜 쓰는 거지?   반환 타입을 굳이..? 우리는 생각보다 타입스크립트의 기능 중 정말 일부만을 사용한다. 반환 타입이 타입 서술어인 함수를 사용하는 일은 거의 없다 보니, 와 같은 문법은 잊혀지곤 한다. 그렇다 할지라도, 기능이 있는 데에는 다 이유가 있는 법! is를 어떻게 요리해볼 수 있을지 한 번 알아보도록 하자.   생각보다 타입스크립트는 멍청하다 위와 같은 코드가 있다고 할 때, 함수를 통과한 값은 어떻게 타입이 추론될까? 😯 통과했으니 당연히 Developer 타입으로 추론되지 않을까? 는 큰 오산이다. TS: ? 니가 라며   위와 같은 상황을 마주하면, 당황스러운 마음에 as를 써버리곤 한다. 이럴 때 잊혀졌던 is 친구…

이것도 필요하고 저것도 필요하고 다 필요한 속성인데..? 싶을 때 우리는 종종 “일단 다 optional 처리하고 조건부 렌더링 해버리자!” 또는 “그냥 as 써버려!” ..가 되어버리는 것 같다. 애써 무시하기 스킬을 획득하셨습니다. 하지만 그렇게 짜게 되면 optional 속성에 대해 불필요한 값들도 조건부 렌더링에 추가하게 되는 불상사가 일어나곤 한다. 현실에선 일어나지 않을 코드이지만, 위 상황에 대한 연출을 위한 간단한 코드로 한번 예시를 들어보도록 하겠다!   서로 다른 상황에서 사용되는 동일한 인터페이스를 만들어야 한다고 해보자. 예를 들어, 내가 작성한 포스트와 남이 작성한 포스트를 다르게 노출시켜야 한다고 해보자. 위와 같은 구조를 만든다고 할 때, Post 컴포넌트의 props를 어떻게 설계할 것인지 꽤나 고민이 된다. 우선은 두 가지 상황에 대한 대처가 필요하다.   1. 아묻따 optional 처리 일단 다 optional 처리를 하는 방법이 있겠다. 하지…

지난 회고에서 말했듯, 2022년은 인생 권태기 그 자체였다. 그랬던 만큼, 2023년은 재밌고 뿌듯하게 살아보는 것이 목표였다. 그렇게 실제로 도파민이 넘치다 못해 폭발하는 한 해를 완성할 수 있었다.   회사에선 말이죠.. 운영도구개발팀 1년동안 함께했던 웹프론트개발그룹 직속팀이 사라지고, 나는 기존 팀원의 일부와 함께 새로 만들어진 운영도구개발팀에 들어가게 되었다. 운영도구개발팀은 배민 관련 업무 효율을 증대하기 위해 만들어진 팀으로, 운영에 필요한 도구를 만들어 제공함으로써 생산성을 높이는 팀이다. 새로운 팀에서 여러 운영도구와 여러 물류어드민을 함께 개발하면서 컨텍스트 스위칭 능력을 많이 기를 수 있었고, 다른 실 및 팀과의 협업이 잦았기에 커뮤니케이션 능력도 많이 기를 수 있었던 것 같다. 나도 물류센터에서 일해봤다! 그럼에도 아직 배우고 성장해 나가야 할 부분이 산더미라고 느끼고 있다. 1월 4일부로 3년차가 된 시점에서, 나는 정말 아무것도 할 줄 아는 게 없는데…

그 시작은.. 디프만 출신 세 명이 모여 수다를 떨다가 나온 이야기. 😮 “디프만 또 하실 거예요?” 😮‍💨 “커뮤니티는 너무 좋은데, 사이드 프로젝트가 부담스럽긴 해요..” 🤔 “그쵸? 저도.. 사이드 프로젝트 안 하는 동아리는 없나?” 😏 “음.. 그냥 저희가 만들어서 해볼까요?”   SIPE의 시초 원래 사이프는 일회성으로 진행되었던 이벤트였다. 사이드 프로젝트에 관심이 있거나, 해본 사람들이 모여 이야기를 나누는 행사였고, 안그래도 일회성으로 끝나고 말았던 아쉬움이 있던 와중, 새로운 커뮤니티를 만들어보자는 의견이 나왔기에 기존 사이프를 한층 더 발전시켜보기로 결정되었다.   지속가능한 커뮤니티가 되려면? 사이드 프로젝트라는 공통의 목적 없이도 지속가능한 커뮤니티를 만들기 위해서는 어쨌거나 또 다른 연결고리가 필요했다. 그래서 미션이라는 제도를 도입하게 되었다! 미션의 주제로는 사이드 프로젝트도 가능하고, 더 가벼운 스터디나 회고 같은 것들도 가능하도록 설정하였다. 그렇게 사…

Demo Website: jeong-min.com Open source Code: Github   👋 소개 X로그, X스토리, X런치, X디엄.. 안 써본 블로그 플랫폼이 없을 정도로 유목민 생활을 해왔는데요, 결국 돌고 돌아 블로그를 직접 만들게 되었습니다! 이 템플릿의 베이스가 되어준 줌코딩 님의 블로그 템플릿도 많은 관심 부탁드리며, 흔쾌히 커스터마이징을 허락해주신 제 사우님, 줌코딩 님께 감사드립니다! 🙇   ✨ 기능 ✨ 홈 화면에 원하는 글 선택적 노출 🌘 다크모드 지원 💅 코드 하이라이팅 지원 👉 글 목차 자동 생성(ToC) 💬 Utterances 댓글 기능 지원 ☕️ 후원을 받을 수 있는 Buy me a coffee 컴포넌트 📚 글을 카테고리별로 보여주는 Posts 페이지 👨‍💻 타임스탬프로 활동 경력을 보여주는 About 페이지 👋 Utterances를 활용한 방명록 페이지 😎 프로젝트를 보여줄 수 있는 Playground 페이지 📈 다양한 개츠비 플러그인 지원 (Goog…

| Bun is an all-in-one toolkit for JavaScript and TypeScript apps. Bun은 자바스크립트 런타임이자 패키지 매니저이자 번들러이자 테스트 러너이다. 만두 귀여워 Bun을 다른 JS 런타임들과 비교해보고, 간단하게 사용도 해보자!   그래서 Bun이 뭔데? 즉, Bun은 bundler, transpiler, task runner, npm client를 모두 포함하는 새로운 자바스크립트 런타임이다. 즉, JS/TS 프로젝트를 번들링하고, 트랜스파일링하고, 설치하고, 실행시킬 수 있다는 것이다. Bun의 기능들을 한 번 살펴보자. Fetch, WebSocket, ReadableStream과 같은 web API들을 제공한다. 모든 파일을 트랜스파일하기 때문에, TS와 JSX도 동작한다. Node.js의 모듈 resolution 알고리즘을 구현하기 때문에, npm 패키지들을 사용할 수 있다. 엄청 빠른 SQLite3 클라이언트를 제공한다…

closure와 closer해져보자 ㅋ.ㅋ   클로저를 알기 전에, 자바스크립트의 렉시컬 스코핑에 대해 먼저 알아보도록 하자!   스코프(Scope)란? 스코프란 참조 대상 식별자(변수와 함수같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다. 전역 스코프를 가진 변수는 어디서든 참조할 수 있지만, 함수 레벨 스코프를 가진 변수는 함수 외부에서 참조하려고 할 경우 참조에러가 발생하게 된다. 이러한 개념을 스코프라고 한다.   렉시컬 스코프(Lexical scope)란? 렉시컬 스코프는 함수를 어디에 선언하였는지에 따라 상위 스코프가 결정되는 것을 말한다. 자바스크립트를 포함한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따르며, 이를 정적 스코프(Static Scope)라고 부르기도 한다. 내부 함수에서 외부 함수의 변수에 접근이 가능한데, 이것은 함수가 중첩될 때 구문 분석기가 변수 이름을 확인하는 방법을 설명하는 정적 스코프의 예시다.…

자바스크립트 엔진과 런타임에 대해 이야기하기 전에, 자바스크립트 자체가 무엇인지 이해하는 것도 중요하다! 자바스크립트는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나로, 웹 브라우저에서 실행되는 스크립트 언어다. 실제로 자바스크립트는 웹 브라우저뿐만 아니라 다양한 환경에서 실행될 수 있으며, 이때 코드가 실행되는 환경을 “런타임(runtime)“이라고 한다. 특히 자바스크립트 엔진과 브라우저 런타임은 웹 개발에서 핵심 역할을 하는 주요 구성 요소다. 이 두 가지는 웹 애플리케이션의 동작과 성능에 중요한 영향을 미친다.   자바스크립트 엔진 자바스크립트 엔진은 자바스크립트 코드를 해석하고 실행하는 핵심 구성 요소다. 가장 널리 사용되는 자바스크립트 엔진 중 몇 가지를 살펴보도록 하자. V8 (Google Chrome, Node.js) V8은 Google에서 개발한 자바스크립트 엔진으로, Chrome 브라우저와 Node.js에서 사용된다. V8은 JIT(Just-In-Tim…

그냥 도메인 주소만 입력하면 뚝딱 되는 건 줄 알았지? 우리가 을 입력하고 화면이 뜰 때까지, 그 뒤에선 수많은 일들이 바삐 일어나게 된다. 우리에게 친숙한 호스트네임을 IP 주소로 변환해주는 DNS(Domain Name System)이 있기에 가능한 일이다. 즉, DNS는 인터넷의 중추로 볼 수 있다. DNS는 계층적인 이름 구조를 가지는데, , , 은 모두 도메인 이름의 계층이다.   DNS 관련 용어를 알아보자 Domain Registrar: 도메인 이름을 등록하는 곳이다. 대표적으로 AWS의 Route 53와 GoDaddy가 있다. DNS Records: A, AAAA, CNAME, NS 등 다양한 종류가 있다. Zone File: 모든 DNS 레코드를 포함한다. Name Server (DNS Server): DNS 쿼리를 실제로 해결하는 서버다. TLD (Top Level Domain): 최상위 도메인으로 , , 등이 있다. SLD (Second Level Doma…

개발을 하다보면 다이어그램을 작성해야 할 때가 종종 있다. ERD를 그릴 때 뿐만이 아니라, 다이어그램은 도메인 또는 아키텍처를 더 쉽게 파악할 수 있도록 돕는 도구가 되어주기도 한다. draw.io, ppt, figjam, excalidraw, cloudcraft, eraser.io 등 다이어그램을 그릴 수 있도록 해주는 서비스는 다양하다. 하지만 나는 직접 그리는 게 아닌, 더 쉽고 체계적으로 작성할 수 있는 무언가가 필요했다..!   마크다운으로 다이어그램을 그릴 수 있다고? 누구든 쉽게 작성할 수 있는 마크다운. 애초에 지금 이 글도 마크다운 파일로 작성되고 있는데..! 머메이드는 마크다운 문법으로 다이어그램을 그려주는 라이브러리다. 즉, UI를 직접 그리지 않고 텍스트로 다이어그램을 표현할 수 있다는 것! 더더욱 좋은 점은, mermaid 문법은 컨플루언스, github, gitlab, vscode(플러그인 필요)에서도 지원이 된다. 나의 경우 현재 회사에서 컨플루언스를…

Git으로 협업을 하고 있다면 당연히 써봤을 clone과 fork 기능! 프로젝트 초기에 그라운드 룰을 정할 때면 항상 하게 되는 고민이 있다. 🤷‍♂️ 클론받아서 피쳐별로 브랜치 파서 main으로 PR 올릴까요? 🤷‍♀️ 포크 떠서 origin에서 upstream으로 PR 올리는 건 어때요?   Git Clone clone은 원격 저장소를 로컬 환경으로 복제해오는 방법이다. 이를 통해 원격 저장소에 있는 모든 코드, 히스토리, 브랜치 등을 로컬 환경에 가져올 수 있다.   Git Fork Fork는 다른 사람의 원격 저장소를 복제해서 내 저장소를 따로 만드는 방법이다. 즉, Fork를 한 후 내 저장소를 Clone해서 작업하게 되는 것이다.   보통 다른 프로젝트나 오픈소스에 기여할 때 Fork를 많이 사용하곤 한다. 원본 프로젝트와 완전히 분리된 환경에서 작업하여 코드를 안전하게 수정하고 실험할 수 있기 때문이다. 그렇다면 팀 프로젝트를 할 땐 어떻게 해야 할까?   Clone은 위험할…

input 또는 scroll 이벤트를 아무 생각 없이 다루다보면 내 의도와 다르게 엄청나게 많은 요청이 발생하게 되곤 한다. 예를 들어, 스크롤 이벤트가 걸려있는 상태에서 스크롤을 몇 천 픽셀 내리게 되면 100개 이상의 스크롤 이벤트에 대한 콜백이 발생할 것이고, 이는 엄청난 리소스를 잡아먹을 것이다..! 바로 이때 나 을 사용하여 이벤트나 함수의 실행 빈도를 줄여 성능을 높일 수 있다. 이벤트 핸들러가 많은 연산을 수행할 때, 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키게끔 하는 것이다. 그렇다면 이 둘의 차이는 뭘까?   Debounce 는 이벤트를 그룹화하여 특정 시간이 지난 후 하나의 이벤트만 발생하도록 하는 것이다. 즉, 연이어 호출되는 함수들 중 마지막 또는 제일 처음만 호출하도록 하는 것이다. 따라서 일정 시간 내에 이벤트가 계속 발생하면 함수가 실행되지 않다가, 이후 일정 시간 동안 이벤트가 발생하지 않으면 함수가 실행된다. 특히 텍스트 인풋에 글자를 …

원티드 아티클 원티드를 한번쯤은 채용 사이트로 접해 본 경험이 있으리라 생각한다. 나도 취준 때 원티드를 정말 많이 사용하곤 했다. 원티드는 커리어 플랫폼으로 현재 여러 서비스를 제공하고 있는데, 직장인을 위한 다양한 아티클을 만드는 것도 그 중 하나다. 원티드의 이벤트 탭에 들어가면 다양한 카테고리의 아티클을 볼 수 있다. 이미 내 아티클들이 올라가 있는 걸 볼 수 있다 😇   개발 취업 관련 아티클 필진으로 섭외되다 어느 날 원티드의 콘텐츠 에디터 분께서 연락을 주셨고, 세 가지 주제로 시리즈 연재를 하게 되었다. 그렇게 지난 6월 5일, 6월 26일, 7월 19일에 각각 글이 한 편씩 발행되었고, 현재 나만 알고 싶은 개발자 취업 치트키 시리즈의 6, 7, 8화로 올라가있다.   미팅하면 빠질 수 없는 회사 구경 놀랍게도 롯데타워에 같이 입주해있었던 원티드..! 덕분에(?) 퇴근 후에 빠르게 미팅 장소로 갈 수 있었다 :) 회사에 커피 머신과 간식 창고가 …

타입스크립트는 자바스크립트의 상위 집합 언어로, 정적 타입을 지원하여 코드의 안정성과 생산성을 향상시켜준다. 이젠 더 이상 자바스크립트를 쓸 수 없는 몸이 되어버린.. 그 중에서도 제네릭(Generic)은 타입스크립트의 핵심 기능 중 하나다. 오늘은 제네릭의 개념, 사용법, 그리고 실제 활용 방법에 대해 알아보자!   제네릭이란? 제네릭은 타입스크립트에서 코드의 일반화(generic)를 가능하게 해주는 기능이다. 제네릭을 사용하면 함수, 클래스, 인터페이스 등을 다양한 타입에 대해 작동하도록 만들 수 있다. 제네릭을 사용하면 컴파일 시점에서 타입 체크를 할 수 있어 런타임 에러를 사전에 방지할 수 있고, (타입 안정성) 한 번 작성한 제네릭 코드를 다양한 타입에 대해 재사용할 수 있고, (재사용성) 제네릭을 통해 일반적인 동작을 정의하고, 구체적인 타입은 사용하는 곳에서 결정할 수 있다. (추상화) 그렇다면 실제로 어떻게 제네릭을 사용하는지 살펴보자!   1. 함수 제네릭 함수를…

💡 깨알 상식 : etc.는 라틴어 et cetera의 줄임말이다.   자바스크립트 사용하는 사람~? 타입스크립트 사용하는 사람~? 외부 패키지 사용하는 사람~?   패키지 매니저란? 자바스크립트 프로젝트를 개발한다면 당연하게 사용하는 패키지 매니저! 자바스크립트 패키지 매니저는 자바스크립트 프로젝트에서 사용되는 의존성 관리 도구다. 패키지 매니저는 프로젝트에 필요한 외부 라이브러리, 모듈, 플러그인 등을 손쉽게 설치하고 관리하는 역할을 한다. 우리들의 만능 집사 패키지 매니저!   자바스크립트 패키지 매니저의 주요 기능은 다음과 같다. 패키지 설치 패키지 매니저를 사용하여 프로젝트에 필요한 패키지를 설치할 수 있다. 패키지는 일반적으로 오픈 소스 라이브러리이며, 패키지 매니저를 통해 패키지의 이름 또는 버전을 지정하여 설치할 수 있다. 의존성 관리 패키지 매니저는 프로젝트의 의존성을 관리한다. 패키지는 다른 패키지에 의존할 수 있으며, 패키지 매니저는 이러한 의존성을 자동…

우리 회사는 구성원으로서 외부 기고/연사 활동을 진행할 경우 승인을 받아야 하는데, 꽤나 큰 행사라고 생각되어 절차가 까다로워지지 않을까 걱정이 들기도 했다. 근데 오히려 재하님께서 매우 긍정적인 응원의 말씀을 해주셔서 너무나도 감사했다. 그렇게 해당 제안을 반갑게 받아들여서, 나는 멘토로서 프로그램에 참여하게 되었다.   리얼 인턴 리얼 인턴은 진학사 캐치에서 6/13일부터 2주간 진행된 캐치 커리어 콘이다. 연사로서 줌 라이브 강의를 찍게 되었는데, 커리어 콘이 시작되는 날 방송되는 유튜브 라이브에도 참석하게 되었다.   연사자 프로필용 사진을 요청받아서 (제주도에서 열심히 찍어서) 공유드렸는데… 100% 합격이라뇨… 🤦‍♀️🙅‍♀️🙅‍♀️🙅‍♀️ 그래도 덕분에(?) 맘에 드는 프로필 사진을 건질 수 있었다 :)   1. 캐치TV 라이브 토크콘서트 진학사 캐치에서는 캐치TV라는 유튜브 채널을 운영하고 있는데, 인턴 취업 산증인 토크를 주제로 촬영을 하게 되었다. 해당 촬영은 진학사 본사에서…

1탄의 내용을 참고하여 이미지 업로드 미리보기를 구현해보자. 놀랍게도 그 방법은 한두 개가 아니다!   1. URL.createObjectURL 참고 자료: MDN web docs: URL.createObjectURL() 메서드를 사용하여 선택한 이미지 파일을 Blob 또는 File 객체로 변환하고, 그 객체를 URL로 변환하여 미리보기 이미지로 사용할 수 있다. 이 방법은 메모리 사용량이 적고 효율적이다. 하지만 URL은 사용이 완료되면 을 호출하여 메모리 해제를 해주어야 한다. 장점 간단하고 직관적인 방법으로 이미지를 미리보기할 수 있다. 추가적인 데이터 변환이나 처리 없이 바로 URL을 생성하여 사용할 수 있다. 메모리 관리에 대한 부담이 적다. 단점 생성된 URL은 페이지 세션이나 브라우저 세션 동안 유지되며, 페이지를 벗어나도 자동으로 해제되지 않는다. 큰 이미지 파일을 다룰 경우 메모리 사용량이 늘어날 수 있다.   2. FileReader.readAsDataURL …

침착맨 라이트노벨 제목 월드컵 편을 보고 재밌어서 써본 제목입니다   파일을 다루는 일이 생길 때마다 구글링을 하게 되는 것 같다. 나만 그런 거 아니겠지? 여튼 그래서 들고와 본 주제!   Blob, File, 그리고 URL File, Blob, 그리고 URL은 웹 애플리케이션에서 파일과 데이터를 표현하고 다루는 데 사용되는 개념들이다. Blob Blob은 일련의 데이터를 나타내는 객체다. Blob은 Binary Large Object의 약자로, 텍스트나 이미지, 오디오, 비디오 등과 같은 다양한 종류의 데이터를 처리할 수 있다. File 객체는 Blob 객체의 하위 클래스로 볼 수 있다. File File은 사용자의 로컬 파일 시스템에서 선택한 파일을 나타내는 객체다. 일반적으로 파일 업로드나 파일 조작을 위해 사용된다. File 객체는 Blob 객체를 상속하며, 파일의 이름, 크기, 타입 등의 추가적인 정보를 가지고 있다. URL URL은 웹 리소스의 주소를 나타내는 문…

현재 IT 동아리를 운영 중에 있는 나. SIPE 많관부탁드립니다 😉😉 구글폼으로 서류 원서를 접수받고, 서류 결과 메일을 보내야하는 상황에 다다르는데..   이거, 한 사람 한 사람 메일을 다 따로 보내야 하는 건가?   하지만 개발자로서 그런 노가다를 하는 것은 용납할 수 없는 일. 결국 구글에서 제공하는 API를 발견해내고야 말았다. 링크를 들어가보면 메일 말고도 다양한 API를 제공하는 것을 볼 수 있다.   1. 구글폼 상단의 를 클릭하면 응답을 스프레드시트로 확인할 수 있다.   2. 스프레드시트 메뉴의 를 클릭하자.   3. 코드를 작성하자! 이제 상단의 Run만 누르면 메일이 발송되는데, 정말 배포도 아닌 코드 실행이 이렇게 긴장되는 건 처음이었다. 이렇게 많은 수의 사람들에게 동시에 메일을 보내는 것도 처음인데다, 누군가에게는 불합격 소식을 전할 수밖에 없었기에 너무 죄송스러운 마음이 들기도 했다.   여튼 무사히 한 고비를 넘겼고, 이제 시작인 우리 S…

지난 글에서 에 대해 알아보았다. 어떤 독자는 해당 글을 읽으면서 한 궁금증이 떠올랐을지도 모른다. ‘왜 은 타이머 주기를 보장하지 않는 거지?’ 이를 알기 위해서는 이벤트 루프에 대해 알아야 하는데, 우선 자바스크립트가 어떻게 동작하는지부터 알아보자.   자바스크립트의 동작 자바스크립트 엔진은 하나의 콜 스택을 가지는 싱글 스레드 모델로 동작한다. 하지만 현실에서 자바스크립트는 웹 브라우저나 노드js와 같은 멀티스레드 환경에 임베디드되어 실행되기 때문에 자바스크립트와 웹api, 이벤트 루프 등을 분리하여 말하기는 어렵다. 따라서 자바스크립트를 작동시킬 때는 싱글 스레드와 멀티 스레드의 타이밍이 따로 존재한다고 말할 수 있다. 일반적으로 프로그램은 코드를 위에서 아래로 순차적으로 실행하지만, 이벤트 루프를 통해 이벤트가 발생할 때마다 해당 이벤트에 대한 작업을 처리할 수 있다. 이를 통해 비동기 작업을 효율적으로 처리할 수 있고, 블로킹되는 작업 없이 다른 작업을 계속 수행할 수…

과 이 정확한 타이머 주기를 보장하지 않는다는 사실, 알고 계신가? 과 이 불필요한 리소스를 소비할 가능성이 있다는 사실, 알고 계신가? 과 이 비동기적으로 작업을 비동기적으로 예약한다는 사실, 알고 계신가?     requestAnimationFrame이란? 은 브라우저에서 제공하는 메서드로, 애니메이션과 그 외의 반복 작업을 수행하기 위해 사용된다. 이 메서드는 브라우저의 리페인트 주기에 맞게 콜백 함수를 실행하도록 예약한다. 콜백 함수는 화면이 갱신되기 전에 실행되므로, 부드럽고 성능이 좋은 애니메이션 효과를 구현할 수 있다.   requestAnimationFrame을 사용해보자! 을 호출할 때, 실행하고자 하는 콜백 함수를 전달한다. 이 콜백 함수는 브라우저에서 리페인트 주기에 따라 호출된다. 콜백 함수는 브라우저에 의해 전달되는 단일 인수로 실행된다. 이 인수는 형식으로 제공되며, 현재 프레임에서 콜백들이 실행되기 시작한 시각을 나타낸다. 처럼 페이지가 열린 시점을 …

개인적으로 보통은 styled-components나 emotion을 사용한 CSS-in-JS 기법을 많이 쓰는데, 이번 글에서는 생략하도록 하겠다.   외부 CSS 프레임워크를 쓰는 우리 팀. 하지만 CSS 프레임워크 하나로 모든 게 뚝딱 완성될 리는 없었다. 어쨌거나 CSS 커스터마이징이 필요했는데… 🙋 “inline으로 커스텀할까요? 아니면 className을 추가할까요?”   Inline Style을 지양하자 위와 같이, 인라인 스타일은 HTML 요소의 style 속성을 사용하여 직접 스타일을 적용하는 방법이다. 인라인 스타일을 사용하면 간단하고 빠르게 스타일을 적용할 수 있다. HTML 요소에 직접 스타일을 작성하므로 별도의 CSS 파일을 만들 필요도 없다. 하지만 편리함이 있기에 단점도 있는 법. 인라인 스타일의 단점을 살펴보자. 코드의 재사용성이 떨어진다. 인라인 스타일은 요소마다 개별적으로 작성되기 때문에 스타일을 재사용하기가 어렵다. 유지보수가 어렵다. 스타일을 인…

문득 개발을 하면서 라우팅을 하다가 궁금증이 떠올랐다. ‘왜 우리는 URL에 케밥 케이스를 사용하고 있지?’ 뇌 빼놓고 코딩하는 습관을 고치기 위해, URL 컨벤션에 대해 한 번 찾아보았다!   URL에서 케밥 케이스를 사용하는 이유 가독성과 사용자 친화성 URL은 사용자에게 직접 노출되는 요소다. 따라서 가독성이 좋고 사용자가 이해하기 쉬운 URL을 제공하는 것이 중요한데, 특히 케밥 케이스가 단어 사이에 대시를 사용하여 각 단어를 명확하게 구분해주기 때문에 가독성이 좋다. 특수 문자 제한 URL은 특수 문자를 제한하는 경우가 많다. 공백이나 다른 특수 문자를 URL에 직접 사용할 수 없기 때문에, 단어를 구분하는 데에는 특수 문자를 사용할 수 있는 유일한 방법은 대시(-)다. 케밥 케이스는 단어 사이에 대시를 사용하여 단어를 분리하므로, URL의 구조를 깨지 않고 유효한 문자만 사용하여 URL을 작성할 수 있다. 검색 엔진 최적화(SEO) URL은 검색 엔진 최적화에 영향을 …

삐까뻔쩍 나도 한번 잘살아보자🎵 웹사이트를 만들다 보면 피할 수 없는 그것… 바로 모달 창 만들기..! 드롭다운이 아닌 일반적인 모달의 경우 화면 전체를 채우게끔 구현을 해야 하는데, 이 때 사용할 수 있는 몇 가지 팁을 정리해보려 한다. 현재 내 블로그에 있는 컴포넌트를 예시로 들어보도록 하겠다.   일단은 모달을 만들어보자 버튼을 클릭하면, 다음 사진처럼 모달이 열리게 된다. 자.. 그렇다면 닫히는 건 어떻게 해야 할까? 보통 모달은 모달 바깥을 클릭하면 닫히곤 한다.   모달 밖을 클릭하면 모달이 닫히게 하고 싶어! 여기에는 두 가지 방법이 있다. 1. ref 사용하기 ref를 사용해서 클릭 이벤트가 컴포넌트 내부에서 발생한 것이 아니라면 close를 해주는 방법이다.   2. Wrapper를 추가하기 모달을 감싸면서 화면 전체를 덮는 Wrapper를 추가하여 onClick 이벤트를 걸어주는 방법이다. 나는 어차피 모달 뒤에 배경을 넣어주고 싶었기에 Wrapper(Mod…

hosts 파일이란? hosts 파일은 운영체제가 호스트 이름을 IP 주소에 매핑할 때 사용하는 파일이다. 우리가 주소창에 url을 입력하면 DNS를 통해서 해당 도메인의 실제 IP 주소로 접속하게 되는데, 이 때 DNS를 통하지 않고 원하는 IP 주소로 접속하고자 할 때 hosts 파일을 수정하는 방법을 이용할 수 있다. 개발을 하다보면 로컬 환경에서 도메인 테스트를 해야 하는 경우가 생긴다. 이 때 원하는 도메인을 로컬 IP 주소를 바라보게끔 hosts를 수정할 수 있다.   sudo vi /etc/hosts vscode를 사용한다면 를 입력해도 된다. 터미널에서 위 명령어를 입력하고 비밀번호를 입력하자. 그러면 아래와 같은 파일이 뜰 것이다. 나는 이미 수정된 내용이 있다. 입력 hosts 파일 수정 입력 (저장 후 종료) 입력   요즘은 이런 거 해주는 앱도 있더라 Gasmask와 같은 앱을 사용하는 것도 좋은 방법이다. 기존 hosts 파일을 직접 건드리지 않고 …

제목을 ‘form생form사’로 하고 싶었으나 처참히 실패 폼과 관련된 서버 통신 작업을 할 때, 보통은 이미지를 업로드하는 api와 폼데이터를 전송하는 api를 함께 사용해 서버로 데이터를 전송하곤 했다. 그러던 어느 날, 파일은 파일대로 json data는 json 대로 넣어서 하나의 api를 사용해 같이 전송해달라는 서버 개발자의 요청을 받게 되었는데…   FormData란? FormData는 HTML 폼 데이터로, 폼을 쉽게 보내도록 도와주는 객체다. 네트워크 메서드의 바디에 FormData 객체를 넣으면, HTTP 메시지는 인코딩되고 속성은 로 지정된 후 전송된다.   어떻게 동시에, 따로 보내야 하지? 그냥 다짜고짜 파일과 함께 보냈더니, 에러가 발생했다. 그래서 file은 multipart/form-data, 그 외의 데이터는 application/json 형식으로 따로 보내기 위해 Blob을 사용해주었다. Blob(Binary Large Object)은 이미지,…

CORS 에러는 터지는데.. 아무힘이 없는 프론트 개발자가 과연 무얼 할 수 있을까?   CORS란? CORS (Cross-Origin Resource Sharing)는 웹 어플리케이션에서 다른 도메인의 리소스에 접근할 때 발생하는 보안 이슈를 해결하기 위한 표준 방법이다. CORS는 브라우저 단에서 작동하며, 웹 서버가 특정한 HTTP 헤더를 반환함으로써 웹 브라우저가 자원에 대한 권한을 부여하도록 한다. 이 헤더는 서버에게 특정한 도메인, 프로토콜, 포트에서만 요청을 허용하도록 지시할 수 있다. CORS는 웹 어플리케이션에서 다른 도메인으로부터 리소스를 요청하는 데에 있어서 발생하는 보안 문제를 해결한다. 이전에는 같은 도메인에서만 요청할 수 있었기 때문에, 다른 도메인으로 요청을 보내는 경우 보안 문제가 발생할 수 있었다. 그러나 CORS를 사용하면 다른 도메인에서도 자원에 접근할 수 있다. CORS는 다음과 같은 방법으로 작동한다. 브라우저는 HTTP 요청을 보낸다. 서버…

JSX란? React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 마크업과 로직을 모두 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. JSX도 결국엔 표현식입니다. 컴파일이 끝나면, JSX는 JavaScript 객체로 인식됩니다. 이전 글에서, 우리는 마크업과 해당 엘리먼트 내의 로직을 따로 분리하여 코드를 작성했었습니다. JSX를 구현하여 이를 함께 포함할 수 있도록 해봅시다! JSX를 구현한 후, 우리는 컴포넌트 내 렌더함수에서 다음과 같은 형태로 컴포넌트를 작성하게 될 것입니다. 위의 구조가 동작될 수 있게끔 JSX를 구현해보도록 하겠습니다. (Header의 props로는 스트링 타입의 와 함수 타입의 를 전달해주도록 하겠습니다.)   1. jsx 함수 기본 구조 우선 jsx 함수는 스트링 배열과 ${}에 포함된 아규먼트를 받아서, 공정을 거쳐 최종적으로 엘리먼트를 반환하게 됩니다. 초기 template은 div 엘리…

컴포넌트와 라우터가 만들어졌으니, 한번 애플리케이션을 띄워봅시다!   src/index.ts   src/pages/Main.ts   src/pages/Sub.ts   src/components/Header.ts state와 props가 잘 동작하는지도 확인해보기 위한 코드도 함께 넣어주었습니다. 한 번 실행시켜 볼까요? 1. BrowserRouter의 경우 2. HashRouter의 경우 HashRouter의 경우 BrowserRouter와 다르게 이 들어가있는 것을 볼 수 있습니다. 두 경우 모두 state와 props가 잘 보여지고 있네요! 지금은 메서드로 string을 반환하여 UI를 그리고 있는데요, 때문에 클릭같은 이벤트도 메서드 내부에서 등록해주고 있는 것을 볼 수 있습니다. 다음 글에서는 jsx를 구현하여 더욱 효율적으로 엘리먼트를 그릴 수 있도록 해봅시다. src/index.ts src/pages/Main.ts src/pages/Sub.ts src/co…

이번 글에서는 BrowserRouter를 구현해보도록 하겠습니다.   1. Route 타입 정의 이는 HashRouter와 동일합니다.   2. Router 구조 라우터 구조 또한 HashRouter의 경우와 똑같이 잡아주도록 하겠습니다. 다만 이번에는 가 아닌 로 네이밍해주었습니다.   3. Class 초기화 당연히 생상자 내부 코드도 동일하겠죠? 최상단 엘리먼트 객체, fallback url, 라우트들을 초기화해주고, 를 실행합니다.   4. hash가 변경될 때의 이벤트 처리 이제부터 HashRouter와 다른 로직이 등장하게 됩니다. HashRouter의 경우 Hash가 변경될 때 이벤트 처리를 해주었지만, BrowserRouter의 경우 history API를 사용합니다. 에서 window 객체의 이벤트 리스너에 핸들러를 등록해줍시다. 여기서 의문이 들 수 있습니다. document 객체의 이벤트 리스너에 라는 이벤트가 있었나? 싶을 텐데요. 맞습니다. document 객…

라우터를 구현하는 대표적인 방법에는 두 가지가 있습니다. 바로 BrowserRouter와 HashRouter인데요, 이 둘의 차이에 대해 잘 모르신다면 아래의 글을 먼저 읽어주세요! [BrowserRouter와 HashRouter, 뭐가 다를까? (feat. React Router)] HashRouter와 BrowserRouter를 모두 구현해 볼 텐데요, 이번 글에서는 HashRouter에 대해 먼저 다루어보도록 하겠습니다.   1. Route 타입 정의 라우트는 path와 해당 path에 해당하는 컴포넌트를 가지는 객체입니다.   2. Router 구조 SPA의 최상단 엘리먼트 객체와 정의된 라우트들을 필수적으로 받게 됩니다. 그리고 이벤트와 라우트를 다루는 여러 메서드를 통해 라우팅을 하게 됩니다.   3. Class 초기화 우선, 라우터 객체가 인스턴스화될 때의 설정을 생성자에서 해주어야겠죠. 최상단 엘리먼트 객체, fallback url, 라우트들을 초기화해주고, 를 실행…

CRA로 리액트 프로젝트를 생성하면, 기본적으로 react-router-dom을 사용하게 됩니다. 이 react-router-dom은 두 가지 라우터를 제공합니다. 바로 BrowserRouter와 HashRouter죠. 이 두 개념은 react-router-dom에만 해당되는 이야기는 아닙니다. BrowserRouter는 HTML5의 history API를 사용한 방식이고, HashRouter는 URL의 hash를 사용한 방식입니다. 리액트를 사용하지 않고 직접 라우터를 직접 구현한다 하더라도, 우리는 이 방식 중 하나를 선택할 수 있습니다.   react-router 우선은 리액트 라우터에 대해 잠깐 살펴봅시다. SPA가 등장하기 전에는 어떻게 페이지를 이동시켰을까요? 를 사용해서 직접 url을 변경시켰습니다. 하지만 이렇게 하면 모든 페이지를 reload하게 되므로 속도가 느려질 수밖에 없습니다. 리액트에서는 SPA라는 특성을 활용하여 라우터를 이용하여 변경된 소스만 바뀌도록 …

리액트 컴포넌트와 유사한 구조를 class로 만들어 봅시다!   1. Component 구조 target으로는 해당 컴포넌트가 들어갈 Element를 받게 됩니다. 컴포넌트는 부모로부터 받은 props와 스스로 관리하는 state를 가집니다. 컴포넌트 생명주기와 관련된 메서드, 첫 렌더링과 이후 상태가 변경되었을 때의 리렌더링을 위한 메서드, 상태 업데이트와 이벤트 등록과 관련된 메서드를 적어주었습니다. template 메서드에서는 실제 엘리먼트를 그리게 됩니다. 기본값으로는 빈 스트링을 반환하도록 해주었습니다.   2. Class 초기화 우선, 컴포넌트 객체가 인스턴스화될 때의 설정을 생성자에서 해주어야겠죠. 컴포넌트가 들어갈 Element를 받아 등록하고, props도 받아서 등록해줍니다. state는 빈 객체를 할당합니다. setup 메서드에서는 state 초깃값 선언, api 호출 등 컴포넌트가 렌더링되기 전에 일어나야 할 일들을 처리하는 용도입니다. 그 후 컴포넌트를 마…

별도의 SPA 라이브러리 없이 Single page application을 만들어봅시다! 언어는 타입스크립트, 번들러는 웹팩을 사용하도록 하겠습니다. html과 css 웹팩 플러그인도 함께 설치하고, 바벨 트랜스파일러도 설치합시다. 저는 sass를 사용하기 위한 추가적인 설치를 함께 해주었습니다. devDependencies @babel/cli @babel/core @babel/preset-env @babel/preset-typescript babel-loader css-loader html-loader html-webpack-plugin mini-css-extract-plugin sass sass-loader ts-loader typescript webpack webpack-cli webpack-dev-server   1. webpack.config.js   2. tsconfig.json 절대 경로를 alias를 따로 설정해주었습니다.   3. .babelrc   4. index…

DOM이란? DOM(Document Object Model)이란, 웹 페이지를 이루는 태그들을 브라우저가 트리 구조로 만든 객체 모델입니다. HTML과 자바스크립트를 이어주는 역할로 볼 수 있습니다. 자바스크립트로는 Document라는 전역 객체를 통해 HTML 태그들을 조종할 수 있습니다. 기존의 웹 애플리케이션은 자바스크립트로 직접 DOM을 제어했습니다. 이렇게 돔을 직접 제어하는 방식이 아닌, 리얼 돔을 추상화한 자바스크립트 객체를 구성하여 사용하는 방식이 가상 돔의 개념입니다.   SPA의 등장 전통적인 웹 사이트는 인터렉션이 발생할 때마다 완전히 새로운 페이지를 서버에서 전송해 주었습니다. 그러나 점차 웹 사이트가 고도화됨에 따라 한 페이지에 해당하는 페이지 용량이 커져갔고, 매번 새로운 페이지를 전달하는 게 점점 버거워지게 되었습니다. 또한 기존의 웹 애플리케이션은 돔 전체를 직접 접근하여 조작해서 브라우저에 화면을 나타내는 방식이었고, 웹 어플리케이션의 규모가 커질수록…

렌더링이란? HTML, CSS, JS 문서가 브라우저에 출력되는 과정을 말합니다. 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있는데, 크롬은 블링크(Blink), 사파리는 웹킷(Webkit), 파이어폭스는 게코(Gecko)라는 렌더링 엔진을 사용합니다. 렌더링 순서는 다음과 같습니다. HTML 파일과 CSS 파일을 파싱해서 각각 Dom Tree와 CSSOM Tree를 만든다. (Parsing) 두 Tree를 결합하여 Render Tree를 만든다. (Style) Render Tree에서 각 노드의 위치와 크기를 계산한다. (Layout) 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만든다. (Paint) 레이어를 합성하여 실제 화면에 나타낸다. (Composite)   1. Parsing 파싱 우선 HTML을 파싱하여 DOM(Documnet Object Model) Tree를 만들게 됩니다. 파싱 도중 CSS를 만나면 파싱하여 CSSOM(CSS O…

1. 기본 맥북 세팅 세 손가락 드래그 애플리케이션 창을 움직여 이동시키거나, 문서 내 글을 드래그할 때 클릭으로 하면 불편함이 많죠. 이걸 굳이 클릭해서 끌지 않아도, 간편하게 터치 & 드래그로 할 수 있는 방법이 있습니다. 시스템 환경설정 > 손쉬운 사용 > 포인터 제어기 > 트랙패드 옵션으로 들어가면 드래그 활성화 옵션이 있는데, 세 손가락으로 드래그하기로 설정해주면 됩니다. 저는 세 손가락으로 드래그 활성화를 하고, 페이지를 쓸어 넘기거나 Mission Control을 사용할 경우 네 손가락을 씁니다. 앱 expose 시스템 환경설정 > 트랙패드로 들어가면 앱 Expose를 켤 수 있습니다. 현재 포커스 된 탭과 동일한 애플리케이션 내의 탭들만 노출시키는 기능으로, 큰 기능은 아니지만 유용합니다.   2. 설치할 앱 이건 지극히 프론트를 하는 제 주관적인 의견입니다 크롬, 카카오톡, 노션, VScode, Zoom, Slack, Figma, Typora, iTerm2, Git…

2021.09.27 - 2021.12.26 동안의 경험에 관한 글입니다. 아마 제 인생 마지막 인턴십이 되겠죠?   Minnie로 보냈던 당근마켓에서의 3개월. 새 맥북 기기부터 다양한 당근마켓 굿즈와 사원증까지! 많은 환영을 받았던 인턴 입사였다. 너무 설레는 순간이었다. 날 포함한 18명의 인턴들 모두가 비슷한 감정을 느꼈으리라 생각한다 :)   저엉말 잘 먹었다. 3명으로 이루어진 6개의 팀 당 법인카드가 하나 씩 주어졌다. 당근마켓은 식비 금액 제한이 없기 때문에, 정말 금액에 대한 고민 없이 마음껏 맛있는 식사를 하며 즐겁게 일할 수 있었다. 사진이 더 많지만 이하 생략.. 식사뿐만 아니라 당근마켓에는 층마다 간식 창고가 있는데, 다양한 과자와 음료수가 넘쳐나 하루 종일 배고플 틈이 없었다ㅎㅎ 그리워!!!!!!!!!!!   꿀 같은 도서 지원 복지 중 하나인 도서구입비 지원으로 평소 종이책으로 보관하고 싶었던 개발 책들을 몇 권 구입했다. 생각보다 많이 비싼 개…

3차 검증 마지막으로 당장모아에 방문했던 찐 유저들의 이야기를 들어보고 싶어요. 우리 서비스에서 어떤 것이 더 필요할까요? 앞서 짧은 기간 동안 진행되었던 검증들에서는 얻기 어려웠던 좀 더 상세한 정보들을 얻기 위해 당장모아를 사용한 찐 유저들을 대상으로 인터뷰를 진행해보기로 했다. 그렇게 총 6명의 찐 방문 유저들을 인터뷰하게 되었다. 주로 저장하는 카테고리, 기존 장소 저장 서비스에서 참고하던 정보의 종류, 당장 모아에서 추가됐으면 하는 정보, 당장모아의 차별성 등에 대한 생각을 물어보았다.   유저 인터뷰로 얻은 인사이트 유저들이 생각하는 당장모아의 가장 큰 차별성은 당근마켓의 신뢰도와 동네 이웃들이 제공하는 장소라는 것이었다. 그렇기에 보다 더 구체적인 장소 정보와 이웃들의 후기가 필요하다. 하지만 POI에 없는 가게와 정보들이 상당히 많다.   유저의 의견과 검증을 통해 느낀 인사이트를 기반으로 마지막으로 프로덕트를 개선해보자! 동네에 저장할 장소가 많지 않다. 동네…

2차 검증 유저는 테마에 관심이 있는 걸까요? 프로덕트를 이용하지 않고 새로 검증해봐요! ‘유저가 테마보다 장소 저장을 더 선호한다’는 검증에서 허점은 없었을까? 단편적으로 봤을 때는 테마보다 장소를 저장한 비율이 더 높았다. 하지만 엄청난 차이는 아니었다. 둘 다 낮은 퍼센트였다. 단순히 테마냐 장소냐의 차이로 발생한 문제가 아니었을 수도 있다. 그렇다. 장소를 랜덤으로 보여줘 놓고 저장을 해보라고 했기에, 유저가 원하는 장소가 없었을 수도 있었다. 우린 잘못된 방식으로 검증을 하고 있었다. 다른 요소에 영향을 받지 않는 검증 방식을 찾아야 했다.   “테마에 대한 수요와 공급을 다시 확인해볼까?” “장소와 테마를 직접 테스트로 받아보자!”   검증 2 (수요) - 테마를 텍스트로 받아보기 우선, 사용자들에게 알고 싶은 테마가 있는지 물어봤다. 그 결과, 총 99개의 답변을 받았고 그중 58명의 유저가 추후 테마에 대한 글이 작성되면 알림을 받아보고 싶다고 응답했다. 99개…

1차 검증 유저는 테마에 관심이 있는 걸까요? 프로덕트를 이용해서 검증해봐요! 유저는 테마에 관심이 있는 걸까? 유저가 테마를 만드는 것에 관심이 있나? 유저가 테마 글을 저장하고 싶은게 맞을까? 유저는 우리 서비스를 어떻게 생각할까? 3. 유저의 의견을 직접 들어보자! 이전에는 프로덕트의 개선을 통해 공급과 수요를 늘리려고했는데, 그게 아니라 본질적으로 공급과 수요가 있는지부터 확인하고자 했다. 그래서 이미 만든 프로덕트를 활용해서 공급과 수요를 나누어 검증하는 동시에, 유저테스트를 진행해서 현 프로덕트에 대해서 처음보는 유저가 어떻게 느끼는지 보고자 헀다.   1. 유저가 테마를 만드는 것에 관심이 있나? 장소를 하나의 주제로 묶는 테마에 관심이 더 많은지, 장소 자체에 관심이 더 많은지를 파악하기 위해 테마를 작성하는 것과 장소만 저장하는 것을 각각 풍성피드에 띄워 A/B테스트를 진행했다. 검증1의 결과는…? 장소 저장을 한 유저 비율이 더 높았다.   2. 유저가 테마…

3차 프로덕트 유저가 작성과 저장을 쉽게 할 수 있는 방법을 고민해요 1. 공급을 늘리기 위해 1-1. 장소만 저장 가능하다면 테마 생산이 늘어날까? - 장소 저장 기능 장소만 저장할 수 있다면 테마 작성이 더 쉬워지지 않을까? 그래서 기존 장소 카드에서 바로 테마에 저장할 수 있도록 개선했다. 이때 새로운 테마를 간단하게 바로 만들어 추가할 수 있는 방법과 기존 테마에 추가하는 방법 2가지를 제공했다.   1-2. 처음부터 테마를 만들지 않고도 장소들을 저장할 수 있도록 하면 어떨까? - 기본 테마 제공 기본 테마를 제공한다면 테마 작성에 대한 부담감을 덜어줄 수 있지 않을까? 우선적으로 기본 테마에 장소들을 쉽게 추가할 수 있게 되니, 테마를 떠올려야 한다는 부담감을 덜고 좀 더 테마 작성이 쉬워질 것이라 판단했다. 그래서 회원가입을 하면 기본 테마를 비공개로 하나씩 제공하고, 카드를 터치해서 바로 장소를 추가할 수 있도록 구현했다.   1-3. 저장하고 싶을 만한 장소들…

2차 프로덕트 수요와 공급이 상호작용할 수 있는 프로덕트를 만들어요 ” 테마 작성이 어려운 걸까? ” 그럼 텍스트 필드에서 자세한 예시를 보여주고, 작성완료된 글이 어떻게 보이는지도 함께 보여주면 어떨까? ” 저장할 만한 장소가 떠오르지 않는 걸까? ” 그럼 동네 장소들을 여러 개 보여주면 어떨까? ” 만든 테마를 볼 수 있는 곳이 없어서일까? ” 그럼 만든 테마를 볼 수 있는 공간을 마련해주면 어떨까? 테마에 대한 예시를 구체화한다면 테마 작성이 쉬워지지 않을까? 동네 장소들을 보여준다면 테마에 추가할 장소들을 떠올리기 쉬워지지 않을까? 만든 테마를 볼 수 있는 공간이 있다면 테마를 만들고 싶어 하지 않을까? 이 가설에 대한 검증을 진행해보고자 테마 작성 기능을 개선하고, 엔터테인 요소인 둘러보기 기능을 추가했다. 우리는 이 검증을 거치기 위해 프로덕트를 우선적으로 만들어서 당근마켓 생활서비스 내에 런칭해보기로 했다. 당장모아 서비스는 수요와 공급이 함께 보이고 상호작용이 되…

사실상 PPT 만든 게 아까워서 쓰는 글. 다시 발표자료를 봤을 때, 가치관이 달라진 부분도 있는 것 같다. 한낱 1년차의 시점으로 만들어진 것이기에 공감 안 가는 부분 있을 수 있음 주의   경희대학교 컴퓨터공학부에서는 최근 TechKHU Concert라는 IT 테크 콘서트를 꾸준히 주최하고 있다. 경희대 컴공 졸업생들이 연사로 참여하여 후배들에게 조언과 팁을 제공하는 자리인데, 어쩌다 보니 내가 연사로 참여하게 되었다 🥲 (복학한 남자 동기들이 대부분 과장, 동장을 맡고 있다 보니 자연스레 제의가 들어왔다.) 엄청 예쁘게 만들어주신 카드 뉴스!! 사실 재학생 입장에서 어떤 이야기들이 도움이 될까를 고민을 해봤지만, 역시나 기술적인 이야기보다는 공부나 취업에 대한 이야기가 더 고프지 않을까 생각이 들었다. 그래서 이전에 오픈부스 컨퍼런스에서 발표했던 내용과 비슷한 이야기를 또 풀어낼 수밖에 없었다. 그때의 발표 내용을 다시 살펴보니, 조금 공격적인 말투도 있었던 것 같고 PPT…

사실상 PPT 만든 게 아까워서 쓰는 글. 다시 발표자료를 봤을 때, 가치관이 달라진 부분도 있는 것 같다. 한낱 1년차의 시점으로 만들어진 것이기에 공감 안 가는 부분 있을 수 있음 주의   나는 디자이너 개발자 협업 동아리, 디프만에서 10기 운영진으로 활동했다. 디프만 10기는 참 많은 일들을 했다. 옥토퍼스 로켓과 함께 애자일 코칭을 진행하기도 하고, 핵클과 함께 A/B 테스트 및 운영 세션을 진행하기도 했다. 오픈부스와의 콜라보도 그 중 하나였다. 오픈부스는 온라인 박람회 플랫폼을 운영하는 스타트업으로, 디프만과 공동 컨퍼런스를 주최하고 싶다는 연락이 왔다. 오픈부스 측에서는 디자이너 2명, 개발자 2명으로 구성했으면 좋겠다고 전했다. “할 사람 없으면 제가 하죠, 뭐.” 그렇게 내가 하게 되었다. 아무 생각없이 시작한 일이었는데, 생각보다 큰 이벤트였다. 페이지에 내 사진이 걸리고 티켓도 5,000원 상당의 가격으로 매겨졌다. 대단한 연사 멤버가 아닌데다 오천원도 부…

요즘 IT가 붐이긴 한가 보다! 아우쓱 지원자도 매 기수마다 기하급수적으로 늘어나고 있다 👀 나는 4기부터 활동하여 현재 6기 모집이 진행되는 현재까지도 열심히 활동하고 있는 일원이다 :)   AUSG? 아우쓱은 AWSKRUG University Student Group의 약자다. AWSKRUG는 AWS 한국 사용자 모임으로, AUSG는 AWSKRUG 밑에 소속되어 있는 느낌이면서 대학생들끼리만으로 따로 구성되어 있는 그룹이다. 즉 AWS와 클라우드에 관심 있는 대학생들의 모임인 것인데…   그렇다면 AWS나 클라우드에 대해 잘 알아야 하나요? 그렇진 않다! 사실 나도 하나도 모르고 들어갔기 때문에..ㅎㅎ 심지어 프론트엔드를 막 공부하기 시작할 때쯤 들어갔기에 개발에 대해서도 빠삭한 상태가 아니었다. 대학생 모임이기 때문에 실력이나 커리어보다는 열정을 많이 보는 것 같다. 그때의 열정 어디 갔을까 AUSG에 들어가고 싶었던 이유는 단 하나였다. 커뮤니티성 동아리였기 때문이다. 계…

내가 디프만을 시작했던 게 8기, 현재 11기가 끝나가고 있다…! 8기부터 참여했던 사람이 아마 나밖에 없을 것 같기도… 어쩌다 고인물이 되었을까..? 이제 디프만 없이는 못 사는 사람이 된 걸지도… 🤔 디프만은 나에게 꿈의 동아리 같은 느낌이었다. 대학생 나부랭이였던 나에게 현직자와 함께 프로젝트를 해본다는 것은 상상조차 못할 일이었다. 부푼 꿈을 앉고 지원했으나 서류에서 탈락한 적도 있었기 때문에 더욱 더 벽이 높게만 느껴지기도 했다. 2학년이 끝나고 열심히 공부한 것을 바탕으로 8기에 또 지원하게 되었고, 결과는 합격이었다. 엄청나게 기뻤다. 당시 코로나가 크게 유행하기 전이었기 때문에 OT도 엄청나게 기대됐었다. 무려 8기 OT 때 찍었던 추억의 사진. 이 때가 2020년도..?   디자이너와 프로그래머가 만났을 때 대학생 신분으로 혼자서 고군분투했던 때와 달리, 디프만에서는 백엔드, 프론트엔드, 디자인 파트 사람들과 함께 프로젝트를 진행했다. 말로만 들어봤던 회사의 개발…

1월. 우아한형제들 입사 뭐니뭐니 해도 올해 가장 큰 사건은 정직원으로 입사를 한 것. 원하던 회사에서 새해를 시작하는 건 무엇보다 짜릿한 일이었다.   2월. 졸업식 이전 회고글에도 올린 사진이지만 한번 더 올려야지 ㅋㅎ 휴학없이 비대면 수업 제대로 뽕뽑고 졸업한 건 다시 생각해봐도 정말 잘한 일.   3월. 코로나 확진 코로나 덕에(?) 1주일간의 유급휴가를 보내게 되었다. 일주일 내내 한 거라곤 누워서 게임하기 만화보기 애니보기… 크게 아프지도 않았어서 정말 꿀같은 시간을 보냈다.   4월. 이사 선릉에서 1년 반을 살고는, 깨끗하고 예쁜 집에서 살아보고 싶다는 로망 하나로 석촌으로 이사를 하게 되었다. 그리고 그 로망은 아주 제대로 실현중. 하지만 너무 비싼 월세와 방음 문제로 인해 1년만 채우고 또 이사를 할 예정… 제주도 본가에서 몇달 살다가 설입쪽으로 원룸을 구해볼까 생각중이다.   5월. 더큰집 지인 방문 더큰집(롯데타워)은 보안이 매우…

입학 나는 경희대학교 컴퓨터공학과에 18학번으로 입학했었다. 사실 컴퓨터공학과에 생각이 있었던 건 아니다. 당시엔 개발 붐이 일어나기 전이었기에, 컴공이라는 과를 떠올리지도 못했다. 수시파 친구들의 경우 생기부와 자소서를 3년 내내 관리해야 하다 보니 자연스레 진로를 일찍부터 고민하게 되는데, 나의 경우 100% 정시파였고 (내신은 거의 4등급 정도 됐었던 걸로 기억한다..ㅎㅎ) 미래에 대해서는 딱히 아무 생각이 없었다. 어떻게든 되겠지~했던 안일했던 나.. 고등학생 시절 제일 좋아했던 과목은 생물이었다. 교육과정에 해당하는 내용 뿐만 아니라 따로 미생물학, 세포학 쪽으로 추가적인 공부를 했을 만큼 관심이 많았다. 생물을 좋아하게 된 계기는 학원 선생님 때문이었지만.. 그래서 그냥 생물학과 가서 연구원을 하고 싶다는 막연한 생각이 있었다. 그런데 막상 수능이 끝나고 정시 원서를 내려니, 겁이 나기 시작했다. 지식인에 생물학과 전망을 검색하니 암울하다는 내용 뿐이었다.(학과 비하 …

본격적인 세 번째 이야기를 시작하기에 앞서, 프론트엔드 개발자인 나, 미니 백엔드 개발자 루디, 디자이너 레일라. 3개월 동안 너무 고생했고 고맙고 미안하고 사랑해요!   문제 정의 아이디어를 구체화하기에 앞서, 우리 팀은 문제를 정의해보았다. 1. 당근 내부에서의 핵심문제 당근에서 알게된 장소 정보를 저장하고 모아볼 수 있는 영역이 없다. 2. 당근 외부에서의 핵심 문제 광고성 게시글이 아닌, 믿을 수 있는 유저로부터 장소를 추천받을 수 있는 공간이 없다. 비슷한 특징/리뷰를 가진 여러 장소들을 한꺼번에 추천받을 수 있는 공간이 없다. 그렇게 나만의 지도를 만들고 공유하는 해결책을 떠올리게 되었다. 원하는 장소를 주제에 맞게 저장할 수 있다. 저장된 장소들을 지도 형태로 동네 이웃들에게 공유할 수 있다. 원하는 장소를 자유롭게 주제에 맞춰 저장하고, 저장된 장소들을 지도 형태로 동네 이웃들에게 공유해보면 어떨까? 나아가 지도를 만든 사람을 구독하거나 세부 장소를 따로 저장할 수 …

팀도 꾸려졌으니, 아이디어 선정해보자! 세 명으로 구성된 총 6개의 팀. 우리는 제공받은 기획안들을 훑어보며 서로 겹치지 않는 선에서 아이디어를 선정해야 했다. 이 과정에서 우리 팀은 큰 난관을 겪었다. 2 지망으로 골랐던 ‘플리마켓’ 아이디어로 결정되었는데, 아이디어 구체화를 하다 보니 서비스가 생각보다 너무 크다고 느끼게 되었다. 삼사 주 내로 런칭을 해야 피드백을 받고 개선할 시간이 생길 것이라 생각했고, 그러기에는 플리마켓 아이디어가 상당히 까다롭게 느껴졌다. “초반에 빠르게 피봇을 하자.” 결론을 내렸지만 쉽게 되지 않았다. 새로 제안한 아이디어들이 또 피봇 되기 부지기수였고 그렇게 우리는 팀 이름도 정해지지 않은 채 일주일을 보내게 되었다. 일주일 동안 우리 팀은 참 많은 감정을 느꼈다. 하지만 확실한 건, 이 과정을 통해 우리가 보다 더 끈끈해졌다는 것이다. 나중 가서 일이 틀어지느니 빠르게 겪어보는 게 나을 거야, 우리는 서로를 다독이며 파이팅을 외쳤다. 그렇게 고난…

당장모아는 11~12월 동안 ‘당근마켓’앱 내 ‘생활서비스’에 런칭되었던 서비스다. 서초동, 잠실동, 한남동 대상으로 오픈을 진행했다.   MVP [ ˌem viː ˈpi ] Minimum Viable Product : 최소 실행 가능 제품 Most Valuable Player : 최우수 선수 ❝당근마켓 앱 내에 미니 서비스 MVP(Minimum Viable Product)를 런칭할 개발과 디자인 분야의 MVP(Most Valuable Player) 분들을 찾아요” 솔깃했다. MVP 인턴십이라니? 미니 서비스란 어떤 걸까? 어떤 도전과제가 주어질까? 당근마켓이 제시한 아이디어로 미니 서비스를 직접 만들어 당근마켓 내에서 런칭해볼 수 있다니! 서비스에 대한 유저의 실제 반응을 분석하고 개선해볼 수 있다니! 당근마켓 팀원들로부터 피드백과 조언을 받을 수 있다니! 지원을 안 해 볼 수가 없었다. 0주 차에는 오리엔테이션 및 팀 구성, 1-7주 차에는 서비스 MVP 개발 및 디자인, 8…

2021.07.05 - 2021.08.31 동안의 경험에 관한 글입니다.   정직원이 하고 싶어! 네이버 인턴이 끝나고, 이제 인턴은 더 하고 싶지 않았다. 소속되지 않은 불안감은 생각보다 힘들었고, 정직원으로서 당당하게 스스로를 개발자라고 소개하는 날이 하루빨리 찾아왔으면 했다. 4월부터 6월까지의 공백기 동안 수많은 도전과 실패를 겪었다. 신입뿐만 아니라 경력 채용 공고에도 서류를 많이 넣었는데, 생각보다 합격률이 높았다. 면접도 1차 면접이나 짧은 전화면접의 경우 무난하게 통과할 수 있었다. 하지만 지원했던 대부분의 회사들이 2-3년 차 경력직을 원하고 있었기 때문인지 심화 기술면접에서 줄줄이 떨어졌다. 좌절감과 실망감도 들긴 했지만, 새로운 질문과 문제들을 경험할 수 있었다는 즐거움이 더 컸다. 내가 경력직만큼의 실력을 갖고 있는 건 당연히 아니었으니 말이다. 면접만 거의 열몇 번을 봤고 그만큼 데이터를 많이 쌓을 수 있었다. 그러던 중 한 스타트업에서 최종 합격을 하게 되…

2021.03.02 - 2021.04.09 동안의 경험에 관한 글입니다. 6주 동안 진행되었던 네이버 전환형 인턴입니다 :)   퇴사가 결정되고.. 3-2의 경우 메가존 클라우드 근무와 학업을 병행했는데, 겨울방학이 끝날 때쯤 더 이상 재학생은 인턴을 받지 않기로 결정되었다는 소식을 듣게 되었다. 하지만 나에게 휴학은 존재하지 않는 선택지였다. 코로나로 모든 대학 강의가 비대면으로 진행되는 꿀 기간을 놓칠 수 없었기도 했고, 적어도 취업계를 낼 수 있는 4-2 전까지는 혹시 몰라서라도 빨리 끝내 놔야 한다는 생각이 컸다. 그렇게 2월 말 퇴사가 확정되면서 다른 회사를 알아보기 시작했다. 그러던 중, 우연히 모집기간이 하루 남은 네이버 채용연계형 인턴 모집공고를 보게 되었고, 하루 남은 걸 발견한 것도 인연이다 싶어 서류를 제출하게 되었다. 해당 공고는 서류 - 코딩 테스트 - 1차 면접 - 5주 인턴 - 2차 면접 - 최종 합격의 절차로 진행된다고 안내되어있었다. 서류를 제출한 지…

2020.11.02 - 2021.02.28 동안의 경험에 관한 글입니다.   AUSG에서의 인연을 시작으로 AUSG는 AWS University Study Group으로, AWSKRGU(AWS 한국 사용자 모임) 소속의 소모임이다. 나는 AUSG(아우쓱)에서 4기부터 활동 중인데, 그곳에서 메가존클라우드에 근무하고 계시는 프론트엔드 개발자 한 분과 알게 되었고 인턴 채용까지 이어지게 되었다.   CloudOne에서의 프론트엔드 개발 CloudOne은 메가존클라우드의 CTC(Commecial Technology Center) 부소에 소속된 팀으로, SpaceONE이라는 Multi Cloud에 대한 오픈소스 CMP(Coud Management Platform)를 개발하고 있다.   1. SpaceONE Storybook 구조 재정립 및 컴포넌트 리팩토링 SpaceONE의 콘솔 앱(대시보드)과 디자인 시스템은 모두 오픈소스로 구축되어있다. spaceone-dev/conso…

2020.06.29 - 2020.10.16 동안의 경험에 관한 글입니다.   경희대학교 현장실습 모든 대학교가 그렇듯, 경희대학교에도 산학 현장실습 프로그램이 있다. 학기 중에 진행하는 장기 현장실습, 방학 중에 진행하는 단기 현장실습으로 나뉜다. 장기 현장실습의 경우, 한 학기에 학점으로 채울 수 있는 학점보다 낮았기 때문에 나는 단기 현장실습을 선택했다. 현장실습의 경우 3-1을 수료한 재학생만 신청 가능하기 때문에, 3학년 여름방학에 지원하게 되었다.   첫 번째 서류, 첫 번째 면접, 첫 번째 인턴 서류 작성도 처음이었다. 작성할만한 내용이 없었기 때문에 프론트엔드 직군으로 지원했음에도, 해봤던 건 뭐든 죄다 적어 넣었다. 어설픈 서류였음에도 학교 현장실습이었기 때문에 무난하게 통과할 수 있었다. 이어서 면접을 진행했고, 칭찬이 가득한(?) 면접이었다. 학부생이 이런 것까지 해봤어요? 와 같은 맥락이었다. 지금 생각해보면 제대로 할 줄 아는 게 없던 꼬꼬마 시절이었지만,…