본문 바로가기

전체 글207

[공식문서 번역] Composition Pattern 컴포지트 패턴? 컴포지트 패턴은 객체들의 관계를 트리 구조로 구성하여 부분-전체 계층을 표현하는 패턴으로, 사용자가 단일 객체와 복합 객체 모두 동일하게 다루도록 한다 원래는 객체지향에서 사용되던 패턴인듯하다 이걸 어떻게 NextJS에서 사용하게 될지, 공식문서를 정리해보았다 Server and Client Composition Patterns 서버와 클라이언트의 컴포지트 패턴 리액트 애플리케이션을 만들 때, 애플리케이션에서 어떤 부분이 서버에서 렌더되어야 하는지 또는 클라이언트에서 렌더되어야 하는지를 고려할 필요가 있다. 이 페이지는 서버 컴포넌트와 클라이언트 컴포넌트를 사용할 때 추천되는 컴포지션 패턴을 다룬다. When to use Server and Client Components? 언제 서버 컴.. 2024. 3. 22.

[공식문서 번역] NextJS 클라이언트 컴포넌트 Client Components클라이언트 컴포넌트클라이언트 컴포넌트는 서버에서 미리 렌더링된 상호작용이 가능한 UI를 작성할 수 있게 하고, 브라우저에서 동작하는 JavaScript를 사용할 수 있게 해준다.이 페이지는 어떻게 클라이언트 컴포넌트가 동작하는지, 어떻게 그들이 렌더되는지, 그리고 언제 그것을 사용해야 하는지에 대해 알아볼 것이다. Benefits of Client Rendering클라이언트 렌더링의 이점클라이언트측에서 렌더링 작업을 하는 것은 다음과 같은 2가지 이점을 가진다.Interactivity (상호작용): 클라이언트 컴포넌트는 상태(state), 효과(effects), 이벤트 리스너(event listeners)를 사용할 수 있게 해준다. 그것은 유저에게 즉각적인 피드백을 제공하고.. 2024. 3. 21.

[공식문서 번역] NextJS 서버 컴포넌트 Server Components Next13이 등장하면서 가장 중요한 변화는 서버 컴포넌트라고 생각된다 리액트 서버 컴포넌트(RSC)는 서버에서 렌더링되고 선택적으로 캐시될 수 있는 UI를 작성할 수 있도록 해준다. NextJS에서 렌더링 작업은 Route Segment 별로 분할되기 때문에 스트리밍(Streaming)과 부분 렌더링이 가능하다. 서버 렌더링 방식에는 3가지가 있다. Static Rendering (정적 렌더링) Dynamic Rendering (동적 렌더링) Streaming (스트리밍) Benefits of Server Rendering 서버에서 렌더링을 했을 때의 이점 Data Fetching (데이터 불러오기) 서버 컴포넌트는 데이터를 불러오는 로직을 데이터 소스와 가까이에 있는 .. 2024. 3. 20.

7. 웹 서버 구상 이번 활동 요약 이번주에는 백엔드 서버를 어떤 식으로 구성할지에 대해서 구상을 해보았다 프론트엔드 개발은 일단 잠시 미뤄두고, 이번주에는 백엔드 서버 개발을 진행했다 일반적인 상황이었다면 로컬에서 개발을 하고, AWS에 배포하는 식으로 진행을 했을 것이다. 그런데 연구실에 상시 가동할 수 있는 서버 컴퓨터가 있다고 하셔서, 이것을 활용하는 방향으로 진행을 결정했었다. 백엔드 개발 경험도 별로 없지만, 서버 컴퓨터로 서버를 운영하는 것은 처음이라 이것저것 알아보아야 했다. 원격 접속 계속 연구실에 방문해서 작업을 할 수는 없어서, 원격으로 서버 컴퓨터에 접속할 수 있도록 세팅을 했다 기본적인 세팅은 조교님이 해주시고, 나는 연구실에 방문해서 내 계정을 등록하기만 했다. 크롬에서 제공하는 원격 데스크톱을 사.. 2024. 3. 20.

6. 노드 삭제 및 간선 추가 기능 개선 이전 미팅 피드백 이전 미팅에서 받은 피드백을 바탕으로 기능 개선 노드 삭제시 이웃 노드도 함께 삭제할 것인지 여부 선택 가능 서로 다른 클러스터간 간선 추가시 색상 변경 Union-Find 알고리즘 성능 개선 피드백 반영 1. 이웃 노드 삭제 여부 결정 특정 노드 삭제시 해당 노드와 이웃한 노드를 함께 삭제할지 선택 가능하도록 개선 const handleSubmit = useCallback(() => { if (filter === "") { return; } setRerender(false); setGraphData((prev) => { let filteredNodes = prev.nodes; let filteredEdges = prev.edges; if (deleteNeighbor) { filtere.. 2024. 3. 17.

무상태 프로토콜 네트워크에 대한 지식이 필요하다고 생각되어, 김영한님의 "모든 개발자를 위한 HTTP 웹 기본 지식" 강의를 들었다. 그 중에 무상태 프로토콜에 대한 개념은 처음이라 정리하게 되었다. 모든 개발자를 위한 HTTP 웹 기본 지식 강의 - 인프런 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., [사진] 📣 확인해주세요!본 강의는 자바 스프링 완전 정복 시리즈의 세 번째 강의입니다. 우아한형제들 최연소 기술 www.inflearn.com (PPL아님...) 무상태 프로토콜 Stateless Protocol HTTP 프로토콜은 무상태 프로토콜을 지향한다 서버가 클라이언트의 상태를 보존하지 않는다 장점: 서버의 확장성이 높다(Scale Out) 단점: 클라이언트가 전송하는.. 2024. 3. 8.

5. 정점, 간선 추가 및 삭제 이번 활동 요약 이번주에는 Cytoscape.js에서 Measure에 대한 기능을 제공하는지 알아보고, 정점과 간선을 추가하고 삭제할 수 있는 기능을 일부 구현했다. Community Detection은 어느정도 되었으니, 이제 노드의 Degree, Path의 길이 등 Network에 대한 정보를 사용자에게 제공하기 위해서 Network를 측정할 수 있는 기능들을 제공하는지 찾아보았다. 기존에는 파이썬에서 해당 기능들을 제공하기 때문에 파이썬에 이미 구현이 되어 있지만, 프론트단에서 계산을 해서 바로 보여주게 되면 아무래도 더 빠르게 전달할 수 있기 때문에 Cytoscape.js에서 그런 기능들을 제공하는지 찾아보았다. Network Analyzer Cytoscape에서는 Network에 대한 통계 정보.. 2024. 3. 4.

삼성 SDS 2024(상반기) 알고리즘 특강 후기 + 시험 지난 2월 13일에 시작해서 23일까지해서 이번 알고리즘 특강을 마쳤다. 혹시 이 글을 보실지 모르겠지만, 다음번 특강을 고민하고 계실 분들을 위해 뒤늦게 후기를 작성하게 되었다. 지원서 지원은 어떻게 ? 대학생들을 대상으로 하기 때문에, 매 방학마다 특강이 이루어진다. 겨울엔 보통 1월쯤에 올라오는 것 같은데, 정확히 언제일지는 모르기에 찾아보아야 한다. 이전까지는 입과 테스트가 있었다고 하는데, 이번에는 입과 테스트는 없고 지원서만 작성하면 됐다. 그렇기 때문에 지원 합격과 불합격이 어디서 갈리는지는 정확히 모르겠지만,, 백준 아이디를 제출하는 것을 보아 평소에도 알고리즘에 관심을 가지고 있는지를 보는 게 아닐까 ?? (정확한 건 아니고 뇌피셜입니다,, ㅎㅎ) 활동 활동은 매번 다를 수 있지만 2주 .. 2024. 3. 2.

GraphQL과 N + 1 문제 찾아보게 된 계기 현재 진행하고 있는 프로젝트에서, 백엔드와 프론트엔드간의 의존도를 떨어트리고자 GraphQL을 도입하게 되었다 GraphQL을 사용하면 프론트측에서 원하는 데이터를 꺼내가는 형식이기 때문에, RestAPI처럼 여러 개의 엔드포인트를 만들지 않아도 되기 떄문이다. 그런데 GraphQL을 사용하면 Resolver가 연쇄적으로 동작하는 N + 1 문제가 발생하는 경우가 빈번하다고 해서 해결 방법을 찾기위해 알아보게 되었다. N + 1 문제란? 1번의 쿼리로 가져올 수 있는 데이터에 대해서 참조하는 데이터 N개 각각에 대해 쿼리를 날려 N + 1 번의 쿼리 가 발생하는 문제 예를 들어, 하나의 블로그에 3개의 댓글이 작성되어 있다고 해보자. 이때, 블로그와 댓글에 대한 데이터를 가져오기 위해서.. 2024. 2. 27.

이전 1 2 3 4 5 6 ··· 23 다음

티스토리툴바