TO

전역 사이드 이펙트 만들기

필요성| 실시간 모니터링 어플리케이션을 개발하다 보니 화면과 무관한 로직이 빠르게 늘어났다. 시작 시 공통 코드 조회, 로그인 상태 검증, 사용자 정보 동기화, 서버 알림(SSE) 구독, 서버 시간 조회, timeline 재생 중 매 프레임 시간 진행 시키는 루프 등. 이런 로직은 화면에 속하지 않는 비지니스 로직이다. 대부분 App.tsx에 훅 호출이 쌓이거나 레이아웃 컴포넌트 안에 숨어 들어간다. 보기 힘들고 유지보수하기가 까다로워 UI를 렌더링 하지 않는 컴포넌트로 모아 구현하기로 생각했다. const App = () => { useCmmnInit(); useSSE(); useMyInfoSync(); useAuthGuard(); useInitTimelineServerNow(); retur..

transform: scale로 4k 대응하기 (반응형 안 쓴 이유)

개발 배경| 1920*1080 의 상황만 고려하여 개발을 지금까지 진행했었다. 그런데 아뿔싸 운영에서 확인하는 모니터가 3840*2160의 4k 모니터라 하였다. 일반적인 이미지, 글씨, 동영상 등만 있는 사이트였다면 문제가 없었을거 같은데 안타깝게도 여러 SVG를 픽셀 단위로 고정시켜 코딩하는 바람에 4k 모니터에서 레이아웃이 깨지는 문제가 발생하였다. 퍼센트, vw, clamp() 사용 역시 svg 요소마다 늘어나는 비율이 달라 레이아웃이 깨졌다. 이를 해결하기 위해 레이아웃이 깨지는 화면 전체를 고정 도면으로 두고, 도면 째로 확대/축소하는 식으로 개발 방향을 잡았다. 고정 도면 + 배율1) 기본 작업은 1920x1080 으로.stage { position: absolute; left: 0; ..

프로젝트를 진행하면서 webRTC를 만져볼 기회가 생겼다. 선임분께서 만들어주셨으나 다대다 통신이 불안정하고 disconnect가 제대로 전달되지 않아 재접속시 연결이 되지 않는 문제, 서브 연결이 불안정한 문제가 있었다. 최종 목표는 불안정한 통신 상태를 잡고, 재접속이 연결 되게, 서브 연결까지 안정화하는 것이 목표다.webRTC는 처음 만져보는거라 공부하면서 진행해야 할 것 같다. 해야할 일을 정리하고 리스트화 한 다음에 하나하나 해치워나가면 목표에 도달할 수 있겠지! - 현재 구조 파악- 단순 connect / disconnect 구현- 페이지 이동시 disconnect + 재 connection 기능 구현- 서브 connect 구현- 새 창에 동일한 connection 복제 (서브)

“AWS 구조 다이어그램 그릴 때, 굳이 파워포인트 열 필요 없어요.”낑낑 대며 다이어그램 그릴 때 상사분이 소개시켜준 Cloudcraft 툴을 소개해보려 한다.https://www.cloudcraft.coCloudcraft?Cloudcraft는 클라우드 인프라 설계를 시각적으로 표현해주는 툴이다.특히 AWS 환경을 위한 다이어그램에 특화돼 있고,복잡한 인프라 구성을 드래그 앤 드롭으로 깔끔하게 그릴 수 있다.간단히 말하면,“코드나 설정 파일을 몰라도 클라우드 구조를 한눈에 설계할 수 있는 도화지”같은 거라고 볼 수 있겠다.인터페이스 Cloudcraft의 가장 큰 매력은 시각화 퀄리티다. AWS 콘솔에 있는 서비스 아이콘을 그대로 3D 형태로 지원해서,마치 건축 설계도처럼 인프라 구조를 구성할 수 있다...

“CSR은 깜빡이고, SSR은 느리고, SSG는 귀찮고… 그럼 뭘 써야 하지?”요즘 프로젝트를 하면서 데이터 패칭 전략을 고민하고 있다.특히 CSR(Client Side Rendering)에서 새로고침 시 폴백(Fallback) 화면이 뜰 때 신경이 안 쓰일 수가 없었는데 왠지 0.5초 정도의 "로딩 중…” 화면을 보고 있으면 괜히 완성도 떨어져 보이는 느낌.🧩 현재 상황: CSR 방식 + 폴백 문제내 프로젝트는 현재 CSR 기반 구조로 돌아간다.즉, 클라이언트에서 React가 뜨고 → useEffect로 API를 호출 → 데이터를 렌더링하는 구조.이게 로컬 개발 환경에서는 빠릿빠릿한데,실제 배포된 환경에선 새로고침하면 “로딩 화면 → 본문 등장”이 너무 눈에 띈다.특히 데이터가 1초 단위로 업데이트 ..

“이미지 업로드 시 미리보기 띄우기 + 파일 객체 다루기”React에서 프로필 이미지를 업로드하고, 미리보기 이미지를 띄워주는 기본적인 패턴을 정리했다.한 번 만들어두면 재사용성도 높고, 대부분의 이미지 업로드 기능에 그대로 적용 가능하다.핵심 포인트useRef로 input DOM을 직접 접근한다.파일을 선택하면 FileReader로 미리보기 URL을 읽어온다.파일 객체(File)와 이미지 데이터(dataURL)를 함께 관리하면 좋다.1️⃣ 파일 input 접근:useRef 파일 선택 input은 일반적인 onChange 외에도DOM에 직접 접근해야 할 때가 있다.이럴 때 useRef를 사용하면 된다.const imgRef = useRef(null);ref는 input 태그에 달아줘야 한다.이 ref를 ..

1️⃣ 목표앞서 react-ace로 코드 에디터를 웹에서 쉽게 만들 수 있었다. 다음 목표는 코드 에디터로 사용자가 코드를 수정하면 삭제된 부분은 빨간색 마커, 추가된 부분은 초록색, 수정된 부분은 주황색 등 한 눈에 알아볼 수 있게 수정 내역을 렌더링 하는 것이었다.직접 style을 지정해도 되었겠지만 기존에 존재하는 react-diff-viewer와 react-ace를 어떻게 잘 조합해보면 쉽게 작업이 가능하지 않을까 싶었다.Github의 코드 수정 내역을 알아볼 수 있는 UI에 유저가 실시간으로 확인할 수 있는 기능을 더해보자2️⃣ react-diff-viewer 라이브러리라이브러리 핵심 기능react-diff-viewer는 텍스트 비교 뷰어다. 분할, 인라인, 단어 비교, 줄 강조 표시 등 다양한..

React로 코드를 작업하면서 가장 고민되는 부분은 바로 컴포넌트를 어떻게 분리할까이다. 최대한 적은 요소의 리렌더링을 중점적으로, 가독성과 유지보수성을 챙기기란 아직 1년차 신입인 나에게는 너무 어려운 얘기였다. 약 6개월 간 회사에서 프로젝트를 하며 이것저것 생각난 부분을 적어보려고 한다. - 관심사 분리기본적으로 컴포넌트에는 렌더링 요소들만 있는 것이 가장 깔끔했다. 비지니스 로직, 유틸 함수를 각각 hooks, utils 폴더로 따로 뺀 후 import 하는 방식을 추천하는 듯 하다.

* EXPO로 앱을 제작하면서 발생한 오류들을 모아보았다. 어이없는 경우 위주로 정리해보았고, AI한테 물어봐도 제대로 된 대답을 못 찾은 부분이 있다면 특히 정리해둘것. - Runtime Error 서버를 두개 이상 켜두면 Amulator에서 잘 못 읽는 경우가 있었다. web에서는 잘 읽는게 특징. 포트가 중복되는 것도 아닌데 왜 그런지는 도통 모르겠다. Node.js, Java SDK 둘 중 뭐가 문제인지는 정확힌 모르겠지만 EXPO Test할때는 EXPO 하나만 실행시키고 하는 걸 추천한다. - /index.tsx (index.js, index.jsx 등) 못 읽어오는 경우에러가 발생한다거나 오류가 떨어진다거나 하진 않지만 app내에 있는 진입점을 못 찾고 계속 index를 만드세용~~ 하는 화면..

* react-ace는 react 라이브러리 중 하나로 웹페이지에 코드 에디터를 쉽게 만들 수 있다. 프로젝트 중 python 코드를 인터넷에 업로드하고, 업로드 된 코드를 확인 및 수정 등을 할 수 있는 CRUD를 만들어야 했다. 코드 에디터 중 가장 쉽게 접할 수 있는것이 react-ace였다. 설치npm install react-ace ace-buildsyarn add react-ace ace-buildsace-builds 까지 설치 해줘야 한다. ace-build로 언어(python, c, java 등)을 바꿀 수 있고 테마도 바꿀 수 있다. 사용import AceEditor from "react-ace";import "ace-builds/src-noconflict/mode-python"; imp..