전체 글

Spring WebSocket Server - React

WebSocketChat.java WebSocket의 열고, 닫고, 메세지 받을 때 어떻게 동작할 지 작성 WebSocketConfiguration.java Spring Bean은 싱글톤으로 관리하지만 @ServerEndpoint 어노테이션인 클래스는 WebSocket 생성 시 마다 인스턴스가 생성되고 JWA에 의해 관리되기에 스프링의 @Autowired가 설정된 멤버들이 정상적으로 초기화 되지 않습니다. 이때 이를 연결해주고 초기화해주는 클래스가 필요합니다. Spring Bean은 인스턴스 생성부터 소멸까지 인스턴스 생명주기 관리를 해주는 컨테이너의 자바 객체 싱글톤 패턴은 애플리케이션이 시작 될 때 static을 통해 인스턴스를 메모리에 딱 하나 할당하고, 이후 호출 시 마다 해당 인스턴스를 반환해주..

React Javascript WebSocket - Server 포함

ws 프로토콜 기반으로 클라이언트와 서버 사이에 지속적인 양방향 연결 스트림을 만들어 주는 기술 WebSocket 연결 브라우저에서 WebSocket 제공 시간이 걸리니 useEffect 내에서 연결 WebScoket은 꼭 전역변수로 사용 const ws = useRef(null); useEffect(() => webSocketLogin(), []); const webSocketLogin = useCallback(() => { // 웹소켓 연결 ws.current = new WebSocket('ws://localhost:8080/socket/chat'); // 메세지 받으면 행동 ws.current.onmessage = message => setSocketData(JSON.parse(message.dat..

React native Intellij 프로젝트 생성까지

Chocolatey 설치 Installing Chocolatey Chocolatey is software management automation for Windows that wraps installers, executables, zips, and scripts into compiled packages. Chocolatey integrates w/SCCM, Puppet, Chef, etc. Chocolatey is trusted by businesses to manage software deployments. chocolatey.org NodeJS LTS, JDK 11 설치 choco install -y nodejs-lts microsoft-openjdk11 Android Studio 설치 Downloa..

말줄임 처리 - Text Overflow Ellipsis

HTML 삽입 text-overflow: ellipsis; white-space: nowrap; overflow: hidden;

React 빌드 용량 최적화 - Vite rollupOptions manualChunks

하나로 빌드 되는 큰 파일을 작게 나누어 필요한 파일을 필요한 때 불러와 렌더링 속도 개선 1. manualChunks 모든 코드를 미리 로드하는 대신 필요에 따라 작은 청크로 분할하는 기능으로 초기 로드 지연을 줄이고, 사용자가 다운로드해야 하는 소스의 양을 줄일 수 있습니다. Configuration Options | Rollup rollupjs.org vite.config.ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], build: { rollupOptions:..

Dynamic Import / Lazy Loading - 코드 스플리팅[Code Splitting]

코드 스플리팅 코드를 다양한 번들로 분할하고, 요청에 따라 로드하여 사용자가 필요할 때에 필요한 코드만 사용할 수 있습니다. 더 작은 번들을 만들고 리소스 우선순위를 올바르게 제어하기 위해서 사용하며, 잘 활용하면 SPA의 단점인 로딩 시간을 절약할 수 있습니다. Dynamic Import (동적 불러오기) 모듈 내에서 인라인 함수 호출을 통해 코드를 분할합니다. App.tsx function App() { const test = () => { import('./common/test').then(test => { console.log(test.text()); }); }; return test()}>Dynamic Import Button; } test.ts export const text = () => {..

Git PullRequest

병합 과정에서 다른 사람들의 코드 리뷰 혹은 검토 받고 싶을 때 사용하거나 권한이 없는 저장소에 대해 본인의 코드를 병합하고 싶을 때 마스터가 검토하고 병합할 수 있도록 요청을 보낼 수 있다. 준비 사항 저장소를 만들고 PR 요청할 다른 사용자 추가 우측 Add people 클릭 후 사용자 정보 입력 브랜치 생성 후 코드 수정 $ git checkout -b pr-test >> 코드 수정(직접 수정해도 상관없음) $ nano work.txt $ git commit am "number to english" $ git push -u origin pr-test PR 생성 Pull requests 탭에서 Create pull request 버튼 클릭 PR이 없다면 브랜치가 main ← main 일 수 있으니 대..

Compound Component 패턴

React Bootstrap과 동일한 패턴을 작성하고 싶었다. # 문제점 이전 컴포넌트의 구성은 ModalBody의 children을 제외한 Header[Title], Footer이 파라미터로 들어가 정해진 구성으로 들어가 일관성 있는 UI를 나타낼 수 있지만 다른 구성 및 스타일로 바꾸기 힘들고 하나의 컴포넌트가 많은 파라미터를 받아 해당 파라미터가 어디에 관련이 있는지 알기 어렵다. 모달입니다. 장점 자유롭게 컴포넌트를 구성 및 스타일 변경이 가능하다. 서브 네임으로 구획을 정확히 나눌 수 있다. 서브 컴포넌트의 파라미터 배분으로 정갈한 코드를 작성할 수 있다. 단점 자유도가 높은 만큼 사용자가 컴포넌트 구성의 이해가 필요하고 예상하지 못한 동작이 일어날 가능성이 있다. # Compound Compo..

React createPortal(Modal Component)

# 문제점 모달을 컴포넌트로 만들고 상태 공유를 위해 부모 컴포넌트에 작성 시 문제 야기 상위 컴포넌트의 필요없는 스타일 반영 최상위로 띄우기 위해 무분별한 z-index 사용 //Another.tsx { const contextValue = { open, handleClose }; return ( {open && ( {children} )} ); }; # createPortal(children, domNode, [key]) 컴포넌트를 root가 아닌 DOM의 다른 부분에 렌더링 DOM 노드의 물리적 배치만 변경하므로 상위 컴포넌트의 React 구성 요소의 하위 컴포넌트로 구성 그러기에 자식은 부모가 제공하는 컨텍스트, 상태, 이벤트에 액세스 할 수 있다. const Modal = ({ open, han..

React Route dom v6 하위 경로 이동 시 에도 인덱스 NavLink 활성화

1. 원하는 작동 방식 MemberDetail페이지 진입 시 MyPost컴포넌트가 Index로 렌더링 되고 각각의 NavLink가 URL에 따라 활성화 작성 글 작성 댓글 내 글 반응 내 정보 수정 하지만 위와 같은 코드는 MemberDetail 진입 시에는 작동을 했지만 하위 경로로 이동 시 인덱스와 선택된 하위 경로 모두 활성화되는 결과를 가져왔다. 2. 해결 방법 NavLink end NavLink의 매개변수 중 하나인 “end”를 사용하여 해결하였다. 작성 글 작성 댓글 내 글 반응 내 정보 수정 NavLink to경로의 마지막이 일치하면 active , pending 상태를 활성화 시킨다. 링크 URL 활성 /tasks 진실 /tasks/123 진실 /tasks 진실 /tasks/123 거짓