배경 인턴 업무 중, 웹프로젝트를 AWS ECS(Elastic Container Service)에 배포할 일이 있었다. Next.js 프로젝트를 Docke 이미지로 말아서 ECR(Elastic Container Registry)에 올린 후, ECS에 배포하였다. 클러스터, 태스트 설정, 보안 그룹 설정 등의 사소한 문제는 있었지만 어떻게 해결했는데.. 이번에는 배포한 Next.js 프로젝트에서 로그인 토큰이 발급되지 않는 버그가 발생했다. 혼자서 해결해보려고 3시간 가량 코드를 쳐다보고 도커 이미지를 새로 빌드하면서 테스트해봤는데.. 도통 알 수가 없었다. 알게 된건, 로그인 api 요청 시, Next.js 서버에서는 로그인 인증 정보가 담긴 쿠키를 응답으로 제대로 보내고 있었다는 것과 Next.js 클..
배경 여태까지 나는 useEffect를 사용할 때, 익명 함수, arrow function을 사용했다. 타이핑하기도 간편하고 굳이 함수에 이름을 적을 필요성을 느끼지 못했기 때문이다. 그러나 강의를 들으면서 useEffect의 함수에 이름을 적는 것의 장점을 알게 되었다. 확실히 인턴을 하면서 하나의 파일인데도 코드량이 너무 길어서 이해하기 힘들었던 경험이 있다. 사수가 남긴 주석 덕분에 어떻게든 이해했지만, 이런 방법으로도 가독성을 향상시킬 수 있다는 것은 처음 알았다. 복잡한 로직을 다루게 될 때 한 번 적용해볼 생각이다. 포스팅하면서 머리에 새기고, 다시 되뇌어볼 생각이다. 1. 가독성 향상 함수에 이름을 적으면 당연하게도 코드의 가독성이 향상되면서 코드의 의도를 명확하게 전달할 수 있다. 함수의 ..
배경 센디에서 3번째 파일럿 프로젝트에서 웹소켓 통신을 구현해야 했는데, 그 과정에서 Kotlin Spring 서버와 규격을 맞추기 위해 여러 시도를 해보다가 stomp.js와 sock.js를 사용해서 웹소켓 통신을 구현해보았다. socket.io와 순수 WebSocket API, STOMP 등의 다양한 라이브러리를 사용한 구현 사항을 기록하고자 한다. 로직을 분리하기 위해 커스텀 훅으로 구현하였다. socket.io socket.io 라이브러리는 node.js 기반 라이브러리이고, 표준 WebSocket 위에 추가적인 기능(자동 재연결, Room 등)을 덧붙였기에 서버와 클라이언트 모두 socket.io를 써야만 통신이 가능하다. 그러나 Spring 서버는 socket.io를 지원하지 않기 때문에 통신..
React Native에서의 스타일링은 React에서 웹 애플리케이션을 스타일링하는 방법과 몇 가지 중요한 차이점이 있다. React Native는 CSS와 유사한 문법을 사용하지만, 정확히 같은 CSS가 아니며, 스타일은 JavaScript 객체로 작성된다. React Native 스타일링의 특징: 인라인 스타일: React Native에서는 스타일을 직접 컴포넌트에 인라인으로 적용할 수 있다. 하지만 이 방법은 재사용성이 떨어지고 관리하기 어렵다는 단점이 있다. StyleSheet 생성: StyleSheet.create를 사용하여 스타일 객체를 만들고, 이를 컴포넌트에 적용한다. 이 방법은 성능을 최적화하고, 스타일을 모듈화하여 재사용할 수 있다. 캐멀 케이스 스타일 속성: CSS와 달리, React..
useEffect useEffect는 React의 Hook 중 하나로, 컴포넌트가 렌더링된 후에 어떤 코드를 실행할지 정의할 수 있다. 이 Hook은 부수 효과(side effects)를 수행하기 위해 사용된다. 예를 들어, 데이터를 가져오거나 DOM을 직접 조작하는 작업이 이에 해당한다. 클린업(Cleanup)이란? useEffect에서 반환하는 함수를 클린업 함수라고 한다. 이 함수는 컴포넌트가 언마운트되거나, useEffect가 다시 실행되기 전에 호출된다. 클린업 함수는 주로 리소스를 해제하거나, 이벤트 리스너를 제거하는 등의 작업에 사용된다. 예시 import React, { useEffect } from 'react'; function ExampleComponent() { useEffect((..
