본문 바로가기

스터디 발표자료3

React 렌더링 최적화 안녕하세요! 이번 시간에는 React 렌더링 최적화 방법에 대해 공유하고자 합니다.  먼저 React 리랜더링 되는 이유는 다음과 같습니다.컴포넌트의 state가 변경되었을 때컴포넌트가 상속받은 props가 변경되었을 때부모 컴포넌트가 리렌더링이 된 경우 자식 컴포넌트는 모두 리렌더링 이 과정에서 불필요한 렌더링이 발생되게 됩니다. 만약 비싼 계산 로직이 있는 자식 컴포넌트가 100개가 있다면, 각 자식 컴포넌트가 리렌더링될 때마다 계산이 반복되므로 성능에 큰 부담을 주게 됩니다. 특히, 부모 컴포넌트의 상태나 props 변경으로 인해 자식 컴포넌트가 모두 리렌더링될 경우, 전체 애플리케이션의 성능이 현저히 저하될 수 있습니다.     코드로 살펴봅시다.import React, { useState, us.. 2025. 2. 10.
코딩 테스트 서버 만들기 안녕하세요! 이번에는 개발자라면 한 번쯤 해봤을 법한 백준, 리트코드, 프로그래머스의 동작 과정을 분석해보았습니다. 코딩 테스트 채점 서버 관련 로직을 찾기 어려워, 제가 생각한 코딩 테스트 채점 서버의 동작 과정을 공유해보려고 합니다. 글을 쓰기 앞서, 제가 제시하는 아이디어는 정답이 아니라 공유를 위한 것이며, 다양한 의견을 나누는 것이 목적입니다. 동작 플로우제가 생각한 코딩 테스트 채점 서버 수도 코드를 텍스트로 작성해보았습니다. 1. 사용자가 코딩 테스트 문제를 푼다.2. 사용자가 제출 버튼을 누르면 사용자가 입력한 코드, 작성 언어가 전송된다.3. 채점 서버에서 사용자 코드를 해당 언어 파일로 변환한다.4. 채점 서버에 저장된 입력 테스트케이스 읽어온다.5. 사용자 코드 실행 파일에 입력 테스.. 2025. 2. 10.
OSI 7계층 Wireshark로 분석하기 안녕하세요!  네트워크 수업에서 이론으로만 접했던 OSI 7계층을,  이번 기회에 Wireshark를 활용하여 직접 체험해 보았습니다.https://www.notion.so/17c52822bc46809892e1d8e9d518d683?v=64ee01100d544c988fb2500a3824e140 먼저, OSI가 실질적으로 사용되는 데이터 전송부터 알아봅시다.  만약 내가 카카오톡으로 문자를 보낸다고 했을 때, 정해놓은 과정을 토대로 데이터를 캡슐화, 복호화 후 전송하게 됩니다. 여기서 정해놓은 과정이 네트워크 강의에서 배웠던 OSI 7계층입니다.    어플리케이션Application Layer는 사용자들이 웹, 이메일, 파일 공유와 같은 어플리케이션으로 네트워크에 접속할 수 있게 해주는 계층입니다. 여기서.. 2025. 2. 10.