SLASH 기술 블로그

TL;DR Compose에서 참조로 인한 골치아픈 문제를 피하려면 가급적 method reference 보다 lambda를 사용하자. Jetpack Compose를 활용해서 UI를 만들다가, remember()와 method reference을 사용하면서 생긴 문제에 대해 정리해보았다. Glossaries remember() remember()는 Compose 런타임에서 활용할 수 있는 저장 및 캐시 매커니즘으로, 기본적으로는 저장된 값을 사용하되 키로 넘겨진 값이 변경되었을 경우 calculation block 내의 코드가 다시 실행된다. // Always use the same instance (guaranteed to be retained across recomposition) val manager..

시작하기 최근에 브라우저상에서 실시간 통신이 필요한 웹 사이트를 만든 적이 있다. 관련해서 Socket.IO라는 라이브러리를 활용하게 되었는데, 이 과정에서 Socket.IO가 무엇인지 어떤 이유로 사용하게 되었는지 이 글을 통해 실시간 통신을 하기 위해 알아야 하는 것들을 정리해보려고 한다. HTTP 통신의 특징 보통 우리가 웹 사이트를 접속할 때, URL을 통해 "http://domain.com", "https://domain.com"이러한 도메인 주소를 입력해서 접속한다. 이때 도메인 맨 앞에 HTTP라는 텍스트를 붙이는데, 이것이 바로 웹브라우저상에서 데이터를 주고받는 프로토콜이다. 프로토콜은 간단하게 말해서 하나의 규칙인데, 웹브라우저 상에서는 HTTP라는 규칙을 통해 통신한다고 생각하면 된다...

1. How to containerize your app - 앱을 컨테이너화하는 방법에 대해 알아보자. 2. Running on Kubernetes Cluster - 쿠버네티스 클러스터에서 이미지 실행하기 3. Exposing the service - 서비스를 외부에 공개하기 4. Simplifying deployment process - 배포 과정 단순화하기 이전의 글들이 앱을 성공적으로 배포하는 것에 초점을 맞췄다면, 앞으로는 이러한 전반적인 프로세스를 효율적으로 개선하는 것에 초점을 둘 것이다. 첫 번째로 배포하는 과정을 단순하게 만드는 것부터 시작해보자. 문제 인식 쿠버네티스 클러스터에 앱을 배포하기 위해서는 개발한 코드를 도커 이미지로 만든 다음 ECR과 같은 이미지 레지스트리에 업로드해야 한다..

시리즈 글 치고는 꽤 오랜만에 2번째 이야기로 돌아온 것 같다. 첫번째 글은 왜 이 시리즈를 시작하게 되었는지에 대해서 썼고 이번 글부터 어떤식으로 Next JS 프로젝트를 시작하는지 이야기 해보려고한다! 프로젝트 시작하기 일단 어디에 next 프로젝트를 만들지 정해보자. 나는 Desktop에 start-next 폴더를 만들어서 시작할 예정이다. cd Desktop mkdir start-next 그 다음 아래와 같이 npm init을 통해 기초 package.json 파일을 생성 한 후, 필요한 모듈을 다음과 같이 설치해주자. npm init -y npm install --save react react-dom next 그 다음, 아래와 같이 package.json 파일을 수정해주면 세팅 완료이다! { "..

기존에 yarn v1을 사용해서 개발을 했는데, 새로운 버전인 v2(코드 네임 berry)가 있다는 소식에 지금 프로젝트에도 적용해보려고 한다. node_modules를 사용하는 npm과 yarn classic의 문제점과 yarn berry가 제시하는 해결책, 그로 인한 다양한 이점들에 대해서는 토스 기술 블로그에 기고된 글을 참고하자. 짜임새 있는 구성으로 설명이 아주 잘 되어있다. 원래 타입스크립트를 쓰고 있었고, 여기에 VSCode가 제공하는 워크스페이스 기능을 사용하고 있었는데, 문서에 소개되어 있는대로 설정을 하면 몇 가지 문제가 발생한다. yarn berry에 대한 소개보다는 실제로 적용했을 때 발생하는 이 문제들에 대해 이야기해보려고 한다. ZipFS node_modules를 사용할 때는 n..