레모네이드

RSS

게시글: 16
등록: 2026년부터

All Frontend Backend AI DevOps Architecture Etc

Frontend
React-Native CodePush 적용기
이 글은 React Native 앱 개발 시 배포 과정을 간소화하는 CodePush 적용 경험을 공유합니다. CodePush는 앱 스토어 심사 없이 JavaScript 코드 변경 사항을 즉시 적용할 수 있게 해주는 서비스입니다. 글에서는 CodePush의 작동 원리를 간략히 설명하고, AppCenter CLI 설치부터 앱 등록, 배포 단계 설정, 그리고 React Native 프로젝트에 CodePush를 설치하는 구체적인 과정을 단계별로 안내합니다. 특히, 자잘한 수정사항 발생 시 재배포에 드는 시간과 노력을 절감하기 위해 CodePush를 도입하게 된 배경을 설명하며, 실제 적용 과정을 상세히 기술하여 개발자들에게 유용한 정보를 제공합니다.
React NativeCodePushAppCenter
레모네이드·2022년 3월 24일
Frontend
three.js in Next.js
이 글은 Next.js 환경에서 three.js를 활용하여 3D 그래픽을 구현하는 방법에 대해 다룹니다. 2D, 3D, 4D의 몰입 경험 차이를 영화 티켓 가격에 비유하며 3D의 장점을 설명하고, 브라우저에서 동작하는 three.js 기반의 핀볼 게임 예시를 소개합니다. 핀볼 게임은 p2.js 물리 엔진과 three.js 3D 렌더링 컴포넌트로 구성되며, 글에서는 three.js 라이브러리의 역할과 WebGL과의 관계를 설명합니다. Next.js와 같은 프레임워크에서 3D 웹 경험을 구축하는 데 필요한 기술적 배경과 구현 아이디어를 제공합니다.
three.jsNext.js3D
레모네이드·2022년 3월 23일
Frontend
three.js in Next.js
이 글은 Next.js 환경에서 three.js를 사용하여 3D 그래픽을 구현하는 방법을 다룹니다. 2D보다 3D, 3D보다 4D가 낫다는 철학을 바탕으로, 영화 티켓 가격을 예시로 들며 3D 경험의 가치를 설명합니다. Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링과 정적 사이트 생성을 지원하여 3D 웹 애플리케이션 개발에 유리합니다. three.js는 웹 브라우저에서 3D 그래픽을 쉽게 만들 수 있도록 도와주는 JavaScript 라이브러리입니다. 이 글은 두 기술을 결합하여 사용자에게 몰입감 있는 3D 경험을 제공하는 방법을 탐구하며, 특히 웹 성능과 사용자 인터페이스 측면에서의 이점을 강조할 것으로 예상됩니다.
three.jsNext.js3D
레모네이드·2022년 3월 23일
Etc
[Figma]컴포넌트에 적용된 값들이 사라지지 않게 대체하기
이 글은 Figma에서 컴포넌트를 대체할 때 입력된 텍스트 값을 유지하는 방법에 대한 내용을 다룹니다. Figma에서 컴포넌트를 교체하면 기존에 입력했던 텍스트 값이 사라지는 문제가 발생하는데, 이를 해결하기 위한 방법을 제시합니다. 현재로서는 자동화된 플러그인이나 기능은 없으며, 수동으로 값을 확인하고 유지해야 함을 강조합니다. 디자인 시스템을 구축하고 관리하는 과정에서 UI 컴포넌트의 일관성을 유지하는 것이 중요하며, 이러한 사소한 부분까지 신경 써야 함을 시사합니다. 글쓴이는 눈으로 직접 확인하는 방법을 제안하며, 더 나은 해결책이 있다면 공유해달라고 요청합니다.
Figma컴포넌트디자인 시스템
레모네이드·2022년 2월 14일
Frontend
디자인 시스템을 만들때 마주하는 고민사항 23가지와 32개 팁.
이 글은 디자인 시스템 구축 시 디자이너와 개발자가 겪을 수 있는 실질적인 고민과 해결 방안을 공유합니다. 특히 Figma의 Auto layout, Variant, Property 기능을 활용하여 효율적인 디자인 시스템을 만드는 구체적인 팁을 제공합니다. 필자는 레거시 디자인 파일 정리, 신규 비즈니스 서비스 디자인 시스템 구축 경험을 바탕으로, 다양한 디자인 시스템 사례를 비교 분석하여 얻은 인사이트를 제시합니다. 디자인 시스템 구축의 필요성을 넘어, 실제 현장에서 마주하는 다양한 문제에 대한 실용적인 해결책을 찾는 데 도움을 주는 것을 목표로 합니다.
디자인 시스템FigmaUI 컴포넌트
레모네이드·2021년 6월 29일
Frontend
판주야 Redux는…#1
이 글은 JavaScript를 처음 배우는 친구에게 State와 Redux의 개념을 설명하기 위한 시리즈의 첫 번째 편입니다. 동적인 웹 페이지를 만들기 위한 프로그래밍 언어인 JavaScript의 기본적인 역할과 '정적' 및 '동적' 웹 페이지의 차이점을 설명하며 시작합니다. 필자는 자신의 경험을 바탕으로, 복잡하게 느껴질 수 있는 Redux와 같은 상태 관리 라이브러리의 개념을 JavaScript 기초부터 차근차근 풀어내고자 합니다. 이 글은 웹 개발의 기본기를 다지고 싶은 초심자들에게 유용한 내용을 담고 있습니다.
JavaScriptReactRedux
레모네이드·2021년 4월 9일
Frontend
Yarn Workspace를 이용한 Monorepo 구성
이 글은 Yarn Workspace를 사용하여 Monorepo를 구성하는 방법에 대한 경험을 공유합니다. Fastcampus Language 프로젝트에서 학생, 강사, 관리자 세 가지 프론트엔드를 개발하면서 공통 컴포넌트의 효율적인 관리가 필요해졌습니다. 처음에는 도구 없이 디렉토리 분리와 상대 경로 import를 시도했지만, Next.js 환경에서 외부 경로의 트랜스파일 문제에 직면했습니다. 이 문제를 해결하기 위해 Yarn Workspace를 도입하여 Monorepo를 구성하고, 공통 컴포넌트를 효율적으로 관리하는 방법을 모색합니다. 이를 통해 코드 중복을 줄이고 개발 생산성을 향상시키는 것을 목표로 합니다.
MonorepoYarn WorkspaceFrontend
레모네이드·2021년 4월 7일
Backend
써드파티 API 호출을 위한 암호화 삽질기
본 글은 써드파티 API 호출 시 발생하는 401 Unauthorized 에러 해결 과정을 공유합니다. 기존 SMS 발송 업체를 Ncloud로 변경하면서 API 연동을 시도했으나, 헤더에 포함되는 암호화된 데이터가 잘못되어 인증에 실패했습니다. 이 문제를 해결하기 위해 암호화 알고리즘의 기본 개념(대칭키, 비대칭키, 단방향 암호)을 살펴보고, 특히 HMAC-SHA256 알고리즘의 동작 방식과 Signature 생성 원리를 이해하는 데 집중했습니다. 이를 통해 API 호출에 필요한 올바른 암호화 방식을 적용하여 문제를 성공적으로 해결한 경험을 공유합니다.
API암호화HMAC-SHA256
레모네이드·2021년 3월 23일
Frontend
웹페이지에서 파일 다운로드 링크 제공 시 파일명 설정방법
이 글은 웹페이지에서 파일 다운로드 링크를 제공할 때 사용자가 원하는 파일명으로 다운로드되도록 설정하는 방법을 다룹니다. 주로 HTTP 응답 헤더의 `Content-Disposition` 속성을 활용하는 방식을 설명하며, `attachment`와 `inline` 값의 차이, 그리고 `filename` 파라미터를 통해 다운로드될 파일명을 지정하는 방법을 구체적인 예시와 함께 제시합니다. 특히, 브라우저 호환성을 고려한 헤더 설정의 중요성을 강조하며, 이를 통해 사용자 경험을 향상시킬 수 있는 실용적인 기술 정보를 제공합니다.
파일 다운로드파일명HTTP 헤더
레모네이드·2021년 3월 19일
DevOps
JEST를 이용한 SW Test 활용해보기
본 글은 Jest를 활용한 소프트웨어 테스트 적용 경험을 공유합니다. 개발자에게 테스트 코드 작성은 귀찮고 시간 소모적인 일로 여겨질 수 있지만, 실제 업무에 적용했을 때의 효용성을 강조합니다. 패스트캠퍼스랭귀지(FCL)에서는 Jest를 테스트 툴로 사용하며, 테스트의 병렬성과 속도 향상을 위해 Docker 컨테이너를 활용하고 DB를 Queue 방식으로 관리합니다. 또한, Fixture, Snapshot, Rollback 기능을 통해 테스트의 멱등성을 확보하는 방법을 소개합니다. 멱등성은 연산을 여러 번 적용해도 결과가 동일하게 유지되는 성질로, 테스트 환경의 일관성을 보장하는 데 중요합니다. 이를 통해 테스트 적용 후기 및 실제 업무 활용 방안을 제시하며 테스트의 필요성과 효과를 역설합니다.
JestSW TestDocker
레모네이드·2021년 2월 17일
Etc
디자이너가 프로젝트에 앞서 이해관계자를 인터뷰 해야하는 2가지 이유.
이 글은 디자이너가 프로젝트 시작 전에 이해관계자를 인터뷰해야 하는 두 가지 중요한 이유를 설명합니다. 첫째, 프로젝트의 목표와 요구사항을 명확히 이해하여 디자인 방향을 설정하는 데 도움을 줍니다. 둘째, 이해관계자와의 초기 소통을 통해 잠재적인 문제점을 미리 파악하고 해결함으로써 프로젝트 후반부의 불필요한 수정 작업을 줄일 수 있습니다. 결국, 효과적인 이해관계자 인터뷰는 성공적인 프로젝트 완수를 위한 필수적인 과정임을 강조합니다.
디자이너이해관계자 인터뷰프로젝트 기획
레모네이드·2021년 2월 16일
Frontend
개발자를 위한 구글태그매니저
이 글은 개발자를 위한 구글 태그매니저(GTM) 활용법을 소개합니다. GTM은 HTML, JavaScript 코드를 직접 사이트에 삽입하지 않고도 필요한 태그를 관리하고 실행할 수 있게 해주는 도구입니다. 특히 웹사이트에서 발생하는 사용자 행동 패턴을 추적하고 분석하는 데 필수적입니다. 예를 들어, 이커머스 사이트에서 사용자의 랜딩페이지 뷰, 콜투액션 클릭, 장바구니 담기, 구매 등의 과정을 트래킹하여 각 단계별 이탈률을 파악하는 것이 중요합니다. 이러한 데이터는 마케터가 광고 플랫폼별 캠페인 효율을 측정하고 광고비 집행에 대한 의사결정을 내리는 데 활용됩니다. 글에서는 GTM 적용을 위해 `react-gtm-module` 라이브러리 설치를 예시로 들며, 개발자가 마케터와 협력하여 사용자 행동 데이터를 효과적으로 추적하고 각 광고 플랫폼으로 전송하는 방법을 설명합니다.
구글태그매니저GTMReact
레모네이드·2021년 2월 16일
DevOps
GCP CDN 적용하기
이 글은 워드프레스로 구축된 웹사이트의 정적 리소스(이미지 등) 캐싱을 통해 응답 속도를 개선하는 GCP CDN 적용 방법을 다룹니다. GCP CDN은 콘텐츠 전송 네트워크(CDN)의 일종으로, 사용자와 가까운 엣지 로케이션에 콘텐츠를 분산시켜 지연 시간을 줄이고 사용자 경험을 향상시키는 것을 목표로 합니다. 글에서는 구체적인 적용 과정과 그로 인한 성능 개선 효과를 설명하며, 웹사이트의 로딩 속도 최적화에 관심 있는 개발자들에게 유용한 정보를 제공합니다. GCP CDN을 활용하여 웹사이트의 전반적인 성능을 향상시키는 방법을 배울 수 있습니다.
GCPCDN워드프레스
레모네이드·2021년 2월 15일
Frontend
Next.js 개발 경험기
이 글은 Next.js 프레임워크를 활용한 웹 애플리케이션 개발 경험을 공유합니다. Next.js는 SSR(Server-Side Rendering)과 SEO(Search Engine Optimization)에 강점을 가진 React 기반 프레임워크로, Vercel(구 Zeit)에서 개발 및 지원하고 있습니다. Vercel의 'zero-config'와 'best developer experience' 철학은 생산성과 간편함을 추구하며, 이는 Next.js의 빠른 버전업과 꾸준한 성장으로 이어지고 있습니다. 글쓴이는 Next.js의 페이지 라우트에 기반한 파일 시스템 구조가 개발 초기 파일 시스템 설계에 드는 리소스를 줄여주고 명확한 구조를 잡는 데 도움이 되었다는 장점을 언급합니다. 또한, Vercel을 통해 클라이언트, 서버, 서버리스 배포까지 경험할 수 있다는 점도 장점으로 제시합니다. 전반적으로 Next.js의 개발 편의성과 효율성에 대한 긍정적인 경험을 바탕으로 Next.js의 장점을 소개하고 있습니다.
Next.jsReactSSR
레모네이드·2021년 2월 15일
Backend
Node.js로 설명하는 DI
본 글은 Node.js를 활용하여 DI(Dependency Injection)의 개념을 설명하고 이해를 돕는 것을 목표로 합니다. DI의 기본 개념, 장단점, 그리고 IoC(Inversion of Control)와의 관계를 다룹니다. 객체 간의 관계 중 Dependency(의존성)에 초점을 맞춰, 클래스나 함수가 다른 객체를 참조하는 상황을 설명합니다. cartRepository.js와 cartService.js 예시 코드를 통해 cartService가 cartRepository에 의존하는 관계를 보여주며, DI의 필요성과 이점을 간접적으로 시사합니다. 이를 통해 개발자는 코드의 결합도를 낮추고 유연성을 높이는 DI 패턴을 더 깊이 이해할 수 있습니다.
Node.jsDIDependency Injection
레모네이드·2021년 2월 10일
DevOps
Github action 사용해서 슬랙에 멘션 노티 보내기
이 글은 GitHub Action을 사용하여 Slack으로 멘션 알림을 보내는 방법을 설명합니다. 기존에는 GitHub 앱이나 Zapier를 연동하여 알림을 보냈지만, Pull Request 요청 시 Reviewer에게 멘션하거나, Pull Request에 댓글이 달렸을 때 해당 사용자에게 멘션하는 기능을 구현하는 데 한계가 있었습니다. 저자는 이러한 니즈를 충족시키기 위해 GitHub Action을 직접 개발하거나 활용하는 방법을 모색했습니다. GitHub Action은 GitHub에서 발생하는 이벤트(빌드, 테스트, 배포 등)에 맞춰 특정 작업을 자동화하는 CI/CD 도구입니다. 글에서는 `github-to-slack` 액션을 사용하여 Pull Request 관련 이벤트 발생 시 Slack으로 알림을 보내는 워크플로우 예시를 보여주며, 이를 통해 개발팀의 협업 효율성을 높일 수 있는 방안을 제시합니다.
GitHub ActionsSlackCI/CD
레모네이드·2021년 2월 5일