팀원 구하기, 왜 이렇게 흩어져 있을까 HATCHIT이 뭔가 이름에 담은 뜻 주요 기능 어떻게 만들었나 써보세요 🐣 팀원 구하기, 왜 이렇게 흩어져 있을까 사이드프로젝트나 스터디를 시작하려고 팀원을 구해본 적이 있다면 공감할 것이다. 오픈카톡방을 뒤지고, 에브리타임을 보고, 여기저기 커뮤니티에 글을 뿌린다. 그런데 정작: 모집글은 금방 위로 밀려 사라지고 어디에 올렸는지 흩어져서 관리가 안 되고 포지션·기술 스택으로 검색·필터도 안 된다 “프론트 한 명, 디자이너 한 명 구합니다” 같은 글이 채팅방 스크롤 저편으로 사라지는 걸 볼 때마다, 이걸 한곳에 모아 제대로 보여주는 게시판이 있으면 좋겠다고 생각했다. 그래서 만들었다. HATCHIT(해칫). HATCHIT이 뭔가 IT 사이드프로젝트·스터디 팀원을 모집하고 탐색하는 게시판. 열람은 누구나, 글쓰기·북마크는 로그인(카카오·이메일) 프로젝트 / 스터디 로 나눠서 브라우징 포지션 · 기술 스택 · 진행 방식 필터 + 제목 검색 모…

MCP(Model Context Protocol)란? MCP는 Model Context Protocol의 약자로, Anthropic에서 만든 오픈 프로토콜이다. AI 모델이 외부 도구, 데이터 소스, 시스템과 안전하게 상호작용할 수 있도록 해주는 표준이다. 쉽게 말해, AI에게 “손과 발”을 달아주는 기술이라고 생각하면 된다. 왜 MCP가 필요한가? 기존 방식의 한계 기존에 AI에게 외부 기능을 추가하려면 각 서비스마다 개별적으로 연동해야 했다. 서비스마다 다른 인증 방식, 다른 데이터 형식, 다른 에러 처리가 필요했다. MCP의 해결책 MCP는 표준화된 인터페이스를 제공한다. 한 번의 표준 연동으로 모든 MCP 서버와 통신할 수 있다. MCP의 핵심 개념 1. MCP 호스트 (Host) MCP 프로토콜을 사용하는 AI 애플리케이션이다. Claude Desktop Claude Code (CLI) Cursor 기타 MCP 지원 앱 2. MCP 클라이언트 (Client) 호스트 내부에…

변화의 시작 2024년, 나는 처음으로 AI 코딩 어시스턴트를 본격적으로 사용하기 시작했다. 처음에는 단순한 자동완성 도구라고 생각했다. 그런데 어느 순간 깨달았다. “내가 코드를 작성하는 시간보다 AI가 작성한 코드를 검토하는 시간이 더 많아졌다.” 이건 단순한 도구의 변화가 아니었다. 개발자의 역할 자체가 바뀌고 있었다. 과거: 코드 작성자 (Code Writer) 불과 몇 년 전까지 프론트엔드 개발자의 핵심 역량은 명확했다. JavaScript/TypeScript 문법 숙달 React, Vue 등 프레임워크 API 암기 CSS 속성과 레이아웃 기법 숙지 알고리즘과 자료구조 이해 면접에서는 이런 질문이 나왔다. “클로저가 뭔가요?” “이벤트 루프를 설명해보세요.” “useEffect의 의존성 배열이 비어있으면 어떻게 되나요?” 얼마나 많이 알고 있는가, 얼마나 빠르게 코드를 작성하는가가 중요했다. 현재: 전환기 지금 우리는 전환기에 있다. AI가 잘하는 것 AI가 아직 어려워하…

React Router v7이 왔다 React Router v7은 단순한 업데이트가 아니다. Remix와 React Router가 합쳐지면서, 라우팅 라이브러리에서 풀스택 프레임워크로 진화했다. 무엇이 달라졌나? Remix + React Router = React Router v7 기존에 Remix를 사용하던 팀은 React Router v7으로 마이그레이션하면 된다. React Router를 사용하던 팀은 Remix의 강력한 기능들을 사용할 수 있게 되었다. 핵심 변화 Remix의 data loading 패턴 통합 서버 사이드 렌더링(SSR) 내장 파일 기반 라우팅 지원 더 나은 타입 안전성 설치하기 새 프로젝트 기존 프로젝트 업그레이드 프로젝트 구조 React Router v7은 파일 기반 라우팅을 지원한다. 라우트 파일 명명 규칙 파일명 URL 설명 인덱스 라우트 기본 라우트 동적 파라미터 레이아웃 무시 , 선택적 파라미터 Data Loading - load…

Turborepo란? Turborepo는 JavaScript와 TypeScript 프로젝트를 위한 고성능 빌드 시스템이다. Vercel에서 개발하고 있으며, 모노레포(Monorepo) 환경에서 빌드 속도를 극적으로 향상시켜준다. 모노레포(Monorepo)가 뭔데? 모노레포는 여러 프로젝트를 하나의 저장소에서 관리하는 방식이다. 예를 들어 프론트엔드, 백엔드, 공통 라이브러리를 하나의 레포지토리에서 관리할 수 있다. 장점 코드 공유가 쉽다 일관된 개발 환경 유지 의존성 관리가 편리하다 원자적 커밋 가능 (여러 패키지 변경을 한 커밋으로) 단점 저장소 크기가 커진다 빌드 시간이 오래 걸릴 수 있다 → Turborepo가 해결! Turborepo의 핵심 기능 1. 캐싱 (Caching) Turborepo의 가장 강력한 기능이다. 한 번 빌드한 결과를 캐싱해서, 코드가 변경되지 않으면 다시 빌드하지 않는다. 2. 병렬 실행 (Parallel Execution) 의존 관계가 없는 태스크들은…

유틸리티 타입(Utility Types)? TypeScript에서 유틸리티 타입은 TypeScript에서 제공하는 여러 전역 유틸리티 타입으로, 일반적인 타입 변환을 쉽게 하기 위해 사용할 수 있다. 유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 유용하게 쓰이며, 간결한 문법으로 새로운 타입을 정의할 수 있다. 하나씩 알아보자 타입스크립트 공식 문서 1. Awaited Promise 형태의 T 타입을 전달받아, 해당 Promise가 반환하는 리턴값의 타입을 반환한다. async ~ await의 await 키워드와 유사한 기능을 담당한다. 2. Partial T 타입의 일부 프로퍼티만 가질 수 있는 타입(subset)을 반환한다. 모든 프로퍼티는 optional로 취급되며, 모든 프로퍼티를 갖지 않는 빈 객체{ }도 허용된다. 3. Required T 타입의 모든 프로퍼티를 필수로 갖는 타입을 반환한다. 기존 타입 내의 모든 optional 프로퍼티는 필…

new Promise와 await new Promise 이해하기 JavaScript를 하다 보면 꼭 만나게 되는 개념이 있습니다. 바로 Promise와 async/await 입니다. 비동기 프로그래밍의 핵심인데, 막상 쓰다 보면 new Promise는 무엇이고, await new Promise는 또 어떤 의미인지 헷갈릴 때가 있습니다. 이번 글에서는 이 둘을 비교하면서 개념을 정리해보겠습니다. Promise란 무엇인가? Promise는 비동기 작업의 완료(혹은 실패)를 나타내는 객체입니다. 위 코드에서 new Promise는 “곧 결과가 생길거야!” 라는 약속을 만든 것입니다. 그리고 resolve를 호출하면 그 약속이 지켜지고, reject를 호출하면 약속이 깨집니다. new Promise는 언제 사용할까? 대부분의 경우 는 이미 API가 반환해줍니다. 예를 들어 는 Promise를 반환하죠. 그런데, 우리가 직접 비동기 동작을 Promise로 감싸고 싶을 때 를 씁니다. 이제…

BFF(Backend for Frontend)란? 프론트엔드(웹, 모바일, 디바이스 등)별로 특화된 백엔드 API를 따로 두어, 클라이언트가 필요한 데이터와 로직만을 최적화해서 제공하는 아키텍처 패턴. 등장 배경 단일 API 서버(모놀리식, 혹은 단일 백엔드)가 여러 클라이언트(웹, iOS, Android, IoT)에 동일한 응답을 주다 보니, 불필요한 데이터가 포함되거나 필요한 데이터가 빠지는 문제가 발생. 각 클라이언트의 UX 최적화를 위해 등장한 개념. 왜 필요한가? 클라이언트 맞춤 최적화 웹은 넓은 화면에 많은 데이터가 필요하지만, 모바일은 데이터 사용량이 적고 UI도 간단해야 함 BFF는 각 클라이언트 특성에 맞는 API 응답을 제공 복잡한 API 호출 단순화 여러 마이크로서비스에서 데이터를 모아야 하는 경우, 클라이언트에서 직접 여러 API를 호출하면 복잡해짐 보안 및 정책 제어 인증, 권한 검증, 로깅 등 클라이언트에 따라 달라질 수 있는 정책을 BFF에서 통제 …

Git Tiers 1년 동안 깃허브 commit, pull request 등 GitHub 활동 contribute에 따라 티어를 볼 수 있는 프로젝트를 만들어 보았다. Git Tiers 에서는 본인의 티어에 대한 정보를 얻을 수 있으며 해 본인의 깃허브 README.md 에 보여줄 수 있다. Git Tiers 홈페이지 Git Tiers 깃허브 페이지에는 티어 순서와 contribute 수에 따른 티어 표가 있다. 차후 계획은 유저가 이미지를 직접 다운로드해서 깃허브 README.md 에 넣는 방식이 아닌, 본인만의 URL을 생성해서 깃허브 README.md 에 URL만 저장해 놓으면 티어가 변경될 시 이미지를 변경해야하는 불편함 없이 자동으로 변경이되는 기능을 구현해볼 계획이다. 사용하는 유저가 많아져 누군가의 깃허브를 들어갔을 때, README.md 에 Git Tiers가 보였으면 좋겠다. https://github.com/git-tiers/gittiers ++ 추가 업데…

Tree Shaking (트리쉐이킹) 트리쉐이킹은 나무를 흔들어 잔가지를 털어내듯 사용하지 않는 코드를 제거하는 이다. Bundler (번들러) 웹개발을 할 때 번들러를 통해서 을 한다. 이때 불필요한 코드가 함께 포함될 수 있기 때문에 번들러는 코드를 최적화하는 트리쉐이킹을 진행한다. sideEffects (사이드이펙트) sideEffects는 package.json에 명시하는 내용으로 패키지의 어떤 파일이 사이드 이펙트를 갖고 있는지 번들러에게 알려주는 역할을 한다. 로 설정하면 해당 패키지의 모든 파일이 사이드 이펙트가 없다고 선언하는 것이고, 이 말은 번들러에게 는 얘기를 하는 것이다. 위처럼 설정하면 CSS파일들과 특정 파일만 사이드 이펙트가 있다고 알려주는 것이고, 나머지 파일들은 효과적으로 트리쉐이킹될 수 있다. 개발자가 할 수 있는 것들 ESM 사용하기 CommonJS(require) 대신 ES Modules(import/export) 사용 동적 import는 …

2024년은 겉으로 봤을 때 심플한 해였지만 내면적으로는 근심 걱정이 많았던 한 해였던 것 같다. 연초부터 일을 쉬게 되었고 상반기 6개월은 , 하반기 6개월은 라고 정리할 수 있을 것 같다. 🏠 상반기 (1월 ~ 6월) 갑작스럽게 연초부터 백수가 되었고 나는 금방 직장을 구할 것이라고 생각했다. 실업급여도 나왔기 때문에, 이렇게 된 이상 한두달 정도 쉬다가 다시 직장을 구해야겠다고 마음먹고 편하게 쉬었던 것 같다. 그것은 안일한 생각… 두달정도 쉬고 나서 이력서를 수정하고 여러 공고들에 지원을 했다. 누구나 그렇듯 초반에는 따질 것 다 따져가면서 완벽하게 마음에 드는 회사만 지원을 했다. 서류 합격 후 코테도 몇 번 보고 1차 면접도 보다보니 시간이 많이 흘렀다. 물론 연락이 안 온 곳도 있지만.. 슬슬 발등에 불이 떨어졌다. 지원해도 연락이 안오는 회사들이 많아졌고, 이력서를 보완하기 위해 내가 무엇을 할 수 있을지 생각했다. 당시 경력을 더 쌓을 수 없는 상황이었던지라 사이드…

지금까지 써 본 상태 관리 라이브러리는 Redux toolkit, mobX, Recoil이었다. 처음 썼던 상태관리가 Redux toolkit이었기 때문에 주로 사용해오다가 이직을 하면서 Recoil을 사용하게 되었다. 그런데 Recoil이 업데이트가 느리다는 글을 보게 된 후에 다른 상태 관리 라이브러리를 찾아보았다. Next도 15가 나왔고 React도 19가 임박한 시점에서 Recoil이 자주 업데이트가 안된다는 점이 맘에 안들었던 것 같다. 그러다 찾게 된 Zustand Zustand는 독일어로 라는 뜻이다. 아직 Redux가 많이 사용된다고 하는데 작은 기능을 사용하더라도 몇개의 파일과 코드들을 만들어야하는 boilerplate의 단점은 어쩔 수 없는 것 같다. Zustand 장점? 간단하고 직관적인 API를 제공한다. boilerplate가 거의 필요 없다. 사용 방법이 간단하다. 상태 변경 시 불필요한 컴포넌트 렌더링을 방지하는 최적화를 자동으로 처리한다. Zusta…

React-Native cli 환경 설정은 항상 한번에 된 적이 없다. 그래서 이번엔 Expo를 이용해서 환경 설정을 진행했다. 지금까지 Expo를 사용하지 않은 이유는 장단점이 극명하기 때문이었다. Expo CLI의 장단점을 가볍게 알아보자 장점 개발 환경 구축이 용이하다. Android Studio와 XCode 하다. 안드로이드 앱과 ios 앱을 하다. 개발 중 내 실제 디바이스로 개발 과정을 바로 확인할 수 있다. 단점 빌드 시간이 길다. Expo에서 제공해주는 모듈만 사용 가능하다. 개발시 (Native 모듈의 사용에 제한적) 프리티어로 1개월 기준 빌드만 가능하다. 그럼 React-Native CLI의 장단점은? 장점 Expo로 사용하지 못하는 에 접근이 가능하다. 빌드 시간이 단점 Android Studio와 XCode 하다. 초기 개발환경 구축과 앱 개발 시 상대적으로 시간 소요된다. Mac일 경우에만 ios 개발 및 배포가 가능하다. 그럼 Expo로 세팅을 해…

새로운 프로젝트 환경설정을 할 일이 있어서 yarn 패키지를 사용해서 진행하였다. 그런데 자주 보던 node_modules 폴더가 안보이는데? 찾아보자 yarn berry 를 사용하면 우리가 자주 봐왔던 node_modules 폴더가 설치되지 않는다. 그 대신 와 파일이 설치된다. Yarn Berry Yarn Berry는 Node.js를 위한 패키지 관리 시스템으로 Yarn의 최신 버전인 을 지칭하는 말이다. 기존의 Yarn 1.x 에서 큰 변화가 이루어진 버전으로, 여러 개선사항과 새로운 기능이 있다고 한다. 그 중 오늘 다룰 내용은 Plug’n’Play (PnP) Yarn Berry는 기존의 node_module 폴더 대신 패키지를 캐시 폴더에 저장하고, 에 의존성을 찾을 수 있는 정보가 기록된다. .pnp.cjs를 이용하면 디스크 I/O없이 어떤 패키지가 어떤 라이브러리에 의존하는지, 각 라이브러리는 어디에 위치하는지를 바로 알 수 있다. 장점 패키지의 모든 의…

이번 포스트는 카카오 컨퍼런스 강의 내용을 정리해서 담아보았다. 물론 다른 컨퍼런스 강의처럼 본인들이 개발한 내용이나 해결한 문제점들을 발표하는 자리이긴 하지만 내 목표인 카카오에서 진행하는 것이라 그런지 더 애정이 갔던 것 같다. 이번엔 내용 정리가 좀 힘들어서 들으면서 적은 그대로 담은 것 같다. 강의 내용 말고 다녀온 후기는 여기에 작성해 보았다. 일단 강의 내용 먼저 정리해보자 [ Kakao AI Native ] 정규돈 CTO - 카카오 카카오의 AI Native 전략 내부 크루들의 일상에도 자연스럽게 녹아드는 것이 목표 카카오 AI Native 성숙도 레벨 탐색 ~ 적용 단계 2년 정도 소요 AI 활용단계 모색 좋은 서비스를 만들려면 먼저 경험해봐야 한다. 교육 및 세미나(최신 ai 기술 학습), 테크톡(지식 공유), ai 해커톤(아이디러 서비스화) 진행 적용 ~ 혁신 단계 일하는 방식의 변화 AI Buddy (아지트, 지라, 위키를 통합하기 위해 만듬) ai 업…

이번엔 카카오 컨퍼런스를 다녀왔다. 주제는 지금까지의 카카오 서비스들에 AI가 접목된다는 이야기였던 것 같다. 경쟁률이 쎌 것 같았는데 의외로 참가자로 선정이 되었다. 회사에도 신청한 FE개발자분이 계셨는데 그 분은 안됐다는.. 나라도 즐기고 와야지 어쩌겠어ㅎ 이 글은 그저 다녀온 후기에 관한 포스트이고 강의 내용은 여기에 남겨놨다. if(KakaoAI) 이번 카카오 컨퍼런스는 진행되었다. 강의 주제는 거의 AI 내용이었고, FE 개발자인 나로써는 FE 강의가 몰려있는 에 신청했다. 컨퍼런스 전, 관련된 내용은 카카오톡의 챗봇에게 물어보면 친절히 답변을 해주었다. 역시 카카오 👍 앞서 얘기했듯이 이번 카카오 컨퍼런스 주제는 이름부터 if(kakaoAI) 인 만큼 만약 카카오와 AI가 합쳐진다면? 이라는 내용이었다. 판교역에서 셔틀버스를 타고 카카오AI센터로 향했다. 셔틀에서 받았던 카카오 굿즈 역시 카카오 👍 그 안에서 들어가면서 커…

저번 포스트에서 Organization 레포를 Vercel에 자동 배포하는 방법을 다뤘다. 발생 오류 main branch에 merge가 되면 자동으로 배포가 진행되는 플로우인데 정작 를 잡지 못하고 있었다. 그러기 위해선 main branch 에 PR을 올렸을 때 build 를 실행해 오류를 먼저 잡아내는 플로우가 추가로 필요했다. 플로우 Organization 레포를 Vercel에 자동 배포하는 플로우에서 PR 올렸을 때 build test를 진행하는 플로우가 추가되었다. 해보자 yml 파일 추가 main branch에 PR 올렸을 때 실행할 플로우가 담긴 yml 파일을 추가한다. 실행할 내용은 코드 내려받기 actions/checkout@v2 프로젝트 내에 사용 중인 yarn 버전 사용하기 corepack enable Install dependencies yarn install lint test yarn lint build test yarn build build-test…

Github Organization 레포를 Vercel에 배포를 하려면 이 필요하다. Organization 레포를 fork 해서 무료로 배포하는 방법을 기록하려고 한다. Todo Organization 레포 main branch에 를 하면 Vercel에 배포되게 작업 플로우 다른 branch에서 작업 후 main branch로 merge한다. main branch에 merge 완료. github action을 통해 fork한 개인 유저 레포로 코드 전체를 보낸다. 개인 유저 레포 main branch가 변경되면 vercel에서 자동 배포를 진행한다. 해보자 개인 계정에서 할 일 Organization 레포를 개인 레포로 fork 한다. Vercel에 로그인 후 fork한 레포(개인 레포)를 연동한다. 개인 유저의 secret 토큰을 발급한다. 로 시작하는 토큰은 다시 볼 수 없으니 어딘가에 잘 기록해야함. Organization 레포에서 할 일 Organization 레포 …

사용자가 로그인하거나 가입했을 때 사용자가 지정한 비밀번호가 그대로 DB에 저장이 되고 있었다. 이는 개발자 모드 네트워크 탭에서도 비밀번호를 확인할 수 있어 비밀번호 노출의 위험이 있다. Crypto JS를 이용해 salt를 생성하고 password + salt 조합으로 SHA-256 해시 알고리즘(단방향)을 통해 비밀번호를 암호화하여 DB에 저장하려고 한다. 아래는 내가 사용했던 방식을 기록해 놓았다. 해시(Hash) 란? 해시는 임의의 길이를 갖는 데이터를 고정된 길이의 데이터로 매핑하는 를 말한다. 암호화된 데이터는 복호화가 불가능하다. 입력값이 동일하면 암호화 데이터 또한 동일하다. 입력값과 상관없이 항상 일정한 길이의 암호화 데이터를 출력한다. 입력값이 다르지만 암호화 데이터가 같을 수도 있다. SHA 256 가장 많이 사용되는 해시 알고리즘은 다이제스트 크기가 256비트인 이다. 암호화된 데이터는 다이제스트(digest)라고 한다. Crypto JS JS 에서 해시…

정말 오랜만에 컨퍼런스를 다녀왔다. 2022년에는 운이 좋게도 INFCON 과 NHN 컨퍼런스에 당첨이 되어서 다녀왔는데 2023년에는 아무 행사도 참여하지 못했다. 2024년 올해 INFCON에 당첨되지 못했지만 Frontend 컨퍼런스인 FECONF에 운이 좋게 신청을 하게 되어서 참석하였다. 신청 당일인 오전 11시에 업무가 바빠서 신청하지 못했는데, 이미 매진이 되고 난 후에 오후까지 새로고침을 하면서 취소 표를 기다렸다. 운이 좋게도 취소표가 올라와 구매를 했던 기억이 있다. FECONF 2024 컨퍼런스가 열린 곳은 세종대학교 멀다.. 자차로 다녀오긴 했지만, 컨퍼런스를 선착순으로 예매할 때도 50,000원이라는 지출이 있는데 주차 요금은 별개로 받는다. 뭐 당연한거겠지만 세종대 광개토관에서 열린 컨퍼런스에 일찍 가지 못하면 걸어서 5 ~ 10분 정도에 있는 주차장에 주차를 해야한다. 이번 FECONF 2024는 발표 세션 A/B, 후원사 홀(굿즈를 받을 수 있…

다른 페이지에 있을 때도 알림이 오면 보여주는 기능을 만들려고 한다. 그러기 위해서는 실시간으로 데이터를 받아오는 로직이 필요하다. SSE(Server-Sent-Events) 라는 것을 알게 되었다. SSE (Server-Sent-Events) 란? 간단하게 서버의 데이터를 실시간, 지속적으로 Streaming 하는 기술이다. SSE 특징 서버에서 클라이언트로 실시간 이벤트를 전송하는 웹 기술로 서버에서 발생하는 업데이트나 알림 등을 으로 클라이언트에 전달할 수 있다. 단방향 통신이기 때문에 만 데이터를 전송할 수 있다. 클라이언트는 HTTP 프로토콜을 통해 SSE 연결을 설정하고, 서버는 HTTP 응답을 유지한 상태에서 데이터를 전송한다. 을 제공하기 때문에 연결이 끊어졌을 때 자동으로 다시 연결한다. WebSocket과의 차이점 가장 큰 차이점은 데이터 흐름에 있다. SSE는 서버 —> 클라이언트 ( 통신 방식) 일방적인 데이터 전송이 필요한 주가 업데이트, 실시간 알림에 적…

오늘 개발 블로그를 둘러보다가 프론트엔드 개발자이신 단민님의 최근 포스트를 마주하게 되었다. node.js로 cli 포트폴리오를 만들어서 npm에 배포하는 글이었다. 상당히 흥미로운 글이었다. 전부터 npm 라이브러리를 만들고 배포해서 유용하게 쓸 수 있는 개발자가 되고 싶은 생각이 있었는데 이번에 배포한 작디작은 CLI가 그 생각의 이 되길 바라며… 시작해보자. 단민님의 글 뿐만아니라 여기저기 블로그를 참고했다. 먼저 디렉토리 구조는 아래와 같다. package.json 새로 프로젝트를 생성한 후 명령어로 package.json 을 생성한다. (node가 설치되어 있다는 전제하에) 사용하는 라이브러리는 chalk (터미널 글씨 스타일 적용) commander (Node.js에서 CLI프로그램을 작성할 때 유용한 라이브러리) inquirer (터미널에서 사용자와 상호작용할 수 있는 질문(prompt) 시스템을 제공) init.js src 폴더 생성 후에 파일을 생성한다.…

Next 또는 React로 프론트엔드 개발을 하다 보면 항상 드는 생각이 있다. “내가 컴포넌트를 잘 분리한 건가..” 디자인 시스템을 공부하고 적극 활용해 본 경험은 없고 그냥 뭉뚱그려 생각하고 진행했던 것 같다. 디자인 시스템을 생각하고 개발을 진행하면 처음엔 불편할지라도 시간이 지나고 나면 만족할 만한 결과가 나오지 않을까 하는 생각이 들었다. 그 중 가장 흥미가 가는 Atomic Design 아토믹 디자인은 에서 영감을 얻은 디자인 시스템 방법론이다. 화학적 관점 이란 말이 흥미를 돋우었다. 먼저 Atom은 분해할 수 없는 단위인 원자를 의미한다. 가 모여서 를 만들고 가 모여서 를 만들고.. Atomic 디자인 역시 각 요소를 분해할 수 없는 단위까지 나누고, 이를 조합하여 컴포넌트를 만들고 나아가 페이지를 구성하는 방식을 의미한다. Atom(원자) Atom은 더 이상 분해할 수 없는 기본 컴포넌트로 input, label, button 과 같이 기본 Html태그…

React Router와 같은 라우팅 라이브러리를 사용하여 페이지를 이동할 때 React Router는 React 컴포넌트의 라이프사이클과 히스토리 API를 이용하여 스크롤 위치를 관리하고, 페이지 간 전환 시 스크롤 위치를 초기화하지 않도록하기 때문에 스크롤 위치가 유지된 채로 페이지가 이동된다. 이를 해결하기 위해 아래와 같이 컴포넌트를 생성해서 사용하였다. ScrollToTop Component useLocation을 이용하여 현재 페이지의 경로를 가져오고, useEffect를 이용하여 경로가 변경될 때마다 window.scrollTo(0,0)을 호출하여 스크롤을 페이지의 맨 위로 이동시킨다. 생성한 ScrollToTop 컴포넌트를 BrowserRouter의 내부에 포함시킨다. Router Component BrowserRouter는 라우트를 처리하고 URL과 연결된 컴포넌트를 렌더링하는 역할을 합니다. 따라서 ScrollToTop 컴포넌트를 BrowserRouter내에 …

Webview PostMessage 회사에서 앱을 개발할 때 React-Native webview로 React 프로젝트를 씌워서 앱 등록을 하였다. 그때 RN -> React 또는 React -> RN 으로 데이터를 전달해야하는 일이 생긴다. 그 당시 사용했던 방법을 기록해 놓으려고 한다. 🔍 React-Native Webview 옵션 세팅 React-Native webview 작업 시 속성에 react에서 보내는 데이터를 받을 때 사용할 함수를 적는다. 🔍 React-Native -> React 🔍 React -> React-Native Webview PostMessage 🔍 React-Native Webview 옵션 세팅 🔍 React-Native -> React 🔍 React -> React-Native

블로그에 글을 오랜만에 쓰게 되었다. 어떤 글로 다시 시작하면 좋을까 하다가 회고록이 생각이 났다. 일 년 동안 나는 무엇을 했으며 어떤 일이 있었고 기억에 남는 일과 보완해야 할 일이 무엇일까 기록을 하면 좋을 것 같았다. 먼저 2023년은 아홉수였으며 다사다난했던 한 해였다. 🏘️ 이직  1년 3개월 정도 퍼블리셔로 근무하다가 올해 5월에 이직을 하였다. 전 직장을 나올 때 아쉬웠던 점은 일했던 사람들이 참 좋았다. 지금도 연락하고 시간이 맞으면 만나서 술 한 잔 하고 모임도 갖는다. 그렇게 아쉬웠던 전 직장에서 나와 이직을 한 곳은 자체 개발팀이 막 만들어진 신입들이 모여있는 곳이었다. 우리 회사와 계약을 한 개발 회사(이하 D사)가 있었는데 해외에 오픈할 우리 회사 사업을 D사에서 개발하고 있었다. 우리는 D사 개발자들 밑에서 배우면서 일을 했다.  우리 회사 IT팀은 신입뿐인 반면에 D사는 경력 있는 개발자들이 많았다. D사에 상주하여 일을 하기도 하고, 우리 사무실로 돌아…

API 통신이 안된다.. 왜? 로컬에서는 잘 되는데 서버에서는 통신이 안되는 이유는 뭘까… 먼저 오류에 대해 알아보자 Access to XMLHttpRequest at ’https://cedarsojt.store:4000/signup/list/country/branch’ from origin ’https://cedarsojt.store’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 오류 내용을 해석해보면 XMLHttpRequest 요청이 CORS(Cross-Origin Resource Sharing) 정책에 의해 차단된 것을 나타냅니다. 이 에러는 요청된 리소스에 ‘Access-Control-Allow-Origin’ 헤더가 없기 때문에 발생합니다. 악명 높은 CORS 에러 메세지라고 한다. 웹 개발을 하다 보면 반드시 마주치는…

현재 진행 중인 개발동아리에서 앱을 만들기로 하였다. 근데 우리는 앱개발자가 없는걸..? 그래서 react-native 를 이용해 웹뷰를 만들어 모바일 웹에 씌우기로 하였다. 이를 하이브리드앱이라고 한다. react-native-webview 를 개발하는 과정에서 엄청난 오류와 시간이 걸렸기 때문에 다음에 작업할 때 이를 방지하기 위해 기록하려고 한다. 처음에 expo를 사용하여 작업을 했지만 알 수 없는 오류들을 해결하는데 시간이 더 걸릴 것 같아서 다 지우고 react-native-cli 로 환경 설정을 진행했다. 나는 mac을 사용하고 있기 때문에 기준으로 작업하였다. 1. Homebrew 설치 Homebrew 는 mac용 패키지 관리자이다. 아래 명령어로 설치하면 된다. 2. rbenv 설치 rbenv 는 Ruby 버전 관리자이다. mac에는 기본적으로 Ruby가 설치되어 있지만 버전이 안맞을 수 있기 때문에 버전 확인 후 설치해준다. 3. Node.js 설치 간단하니 넘…

업무 진행을 하다가 차트 내에 날짜를 입력하는 부분이 있었다. 입력하는 날짜 형식이 배열로 지정되어 있어서 오늘 날짜로 부터 며칠 전까지의 날짜를 구하고 그 사이 기간을 배열로 만드는 작업을 하였다. 오늘 날짜로부터 며칠 전 날짜 구하기 파라미터 값으로 며칠전의 날짜를 구할것인지 입력하게 되면 차트 옵션에 맞는 형식으로 날짜를 반환해주는 함수를 만들었다. 이를 이용해서 오늘 날짜로부터 의 반환된 날짜까지를 배열로 만드는 함수를 만들었다. 파라미터 값 사이의 날짜를 배열로 반환하기 차트는 원하는 형태로 잘 구현이 되었다. 여러 레퍼런스를 참고해서 작업을 했고, 차트 라이브러리는 ApexCharts.js 를 사용했는데 공식 문서에 레퍼런스도 잘 나와있고 js 프레임워크들에서도 쉽게 사용할 수 있어서 확장성이 넓다. (차트, 그래프 모양이 맘에 들기도 한다.) [Reference] https://apexcharts.com/ https://lts0606.tistory.com/230 오늘 …

모든 React Component에는 Lifecycle(수명 주기)이 존재합니다. Component의 수명은 페이지에 렌더링되기 전 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다. 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다. 라이프 사이클 메서드의 종류는 총 아홉 가지입니다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드입니다. 라이프 사이클은 총 세가지, Mount, Update, Unmount 로 나눕니다. Mount DOM이 생성되고 웹 브라우저상에 나타나는 것을 **마운트(Mount)**라고 합니다. 이때 호출하는 메서드는 다음과 같습니다. constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드 ren…

[NHN FORWARD 22] NHN의 다섯 번째 오프라인 컨퍼런스 일자 : 22.11.24 장소 : 그랜드 인터컨티넨탈 서울 파르나스 [NHN 키노트] - 오프닝 발표자 : NHN Cloud 박근한, 이진수, 김명신 Small Steps make a Big Difference NHN 회사 소개(게임, 결제, 커머스, 데이터, 클라우드) GameAnvil, GameTalk 소개 GameAnvil 게임 서버의 템플릿과 웹 운영 도구, 성능 테스트 툴 등을 제공 개발 경험이 적은 게임 개발자여도 게임 서버 개발과 서비스, 서비스 운영까지 한 번에 가능하게 해줌 GameTalk 간편하게 게임 내 채팅을 구현할 수 있는 솔루션 이란? 고객이 체감할 수 있는 고마운 기술을 만드는 것 국내외 데이터 센터 확장 예정 AI 기술 확대 동화책 읽어주기 일반 ai가 읽는 것이 아닌 감정이 들어갈 수 있도록 가상 아나운서 직접 무대에 서서 발표하지 않고 글을 입력만 해도 말하는 것 처럼 카툰 생성 기…

[ INFCON 2022 ] 인프런의 첫 번째 오프라인 콘퍼런스 일자 : 22.08.26 장소 : 강남구 삼성동 코엑스 그랜드볼룸 참여 기업 : MUSINSA, LINE, JETBRAINS, toss, yanolja, 우아한 형제들, 오늘의 집, 당근마켓, 교보문고 [인프랩 로드맵] - 오프닝 발표자 : 인프랩 CEO 이형주, 인프랩 CTO 이동욱, 인프랩 커뮤니티 리드 홍연의 인프런 커뮤니티 질문&답변 글쓰기 에디터 수정 예정(마크 다운 형식) 인프런 내 강의실 모바일 뷰 개선 사용자간 스터디 서비스 개선 랠릿(인프랩 채용 서비스)과 인프런 통합 [실리콘밸리로 떠나는 비전공자 개발자의 지난 4년 회고] 발표자 : Pixelic 한정수 학습 내용 개인 블로그, git 정리 개발자 커리어 세미나 참석(작은 세미나도 추천) 우아한테크 캠프 추천 넥스트 스텝 TTD & 클린 코드 강의 추천(Backend) 해야할 과제도 많고 신경 써야할 부분이 많지만 이수하게 되면 많은 도움이 된…

Swiper swiper는 slick과 같은 슬라이드 라이브러리이지만 jQuery가 아닌 를 사용하며 다양한 옵션을 지원해서 사용하기 편합니다. 그리고 하위 브라우저(IE9)에서도 동작하기 때문에 측면에서도 뛰어납니다. 설치 방법 swiper를 사용하려면 여러가지 방법이 있습니다. 원하는 방식으로 사용하시면 됩니다. 으로 사용하는 방식 을 직접 다운받아 사용하는 방식 으로 설치하여 사용하는 방식   CDN 기본 사용법(구조) 사용법은 매우 간단합니다. 슬라이더를 사용하기위해 만들어 놓은 html문서 안에 swiper의 기본 구조에 맞는 class를 넣어주면 됩니다. 주의할 점은 swiper에서 정해 놓은 을 지정해줘야 합니다. ✔ swiper-container > swiper-wrapper > swiper-slide 구조로 되어 있습니다.   아래 작성된 태그를 보시면 < HTML > - 기본 구조   < JavaScript > swiper 사용시 으로 사용되는 들 입니다. 커스…

slick-slider slick-slider 는 반응형 웹을 지원하는 jQuery 슬라이더 라이브러리입니다. 기본 사용법과 반응형 작업방법을 설명 드리겠습니다. slick 다운로드 및 css,js 파일 로드 slick 메인 홈페이지 오른쪽 상단에 를 클릭한 후 다운로드를 진행하거나 그 아래의 CDN주소를 복사해서 태그안에 넣어서 사용하면 됩니다. 그리고 slick-slider는 jQuery 기반으로 만들어졌기 때문에 jQuery가 필요합니다. 기본 사용법 slick-slider의 기본 구성은 아래 코드 처럼 div형태로 구성되어 있는 html문서를 슬라이더 형태로 변경해줍니다.   < HTML >   < JavaScript > slick-slider 옵션 내의 안에 화면사이즈(breakpoint)를 지정해 놓으면 그 안에서는 으로 슬라이드가 변경됩니다. slick 자주 사용되는 함수 slider에 새로운 컨텐츠 추가하기 이미 slick이 적용된 상태에서 슬라이더를 동적으로 추…