post-thumbnail

GraphQL을 알아보자

기존 REST API 한계점을 극복하기 위해 Meta(전 facebok)가 고안한 쿼리 언어REST API일부 속성만 필요한 경우에도 전체 데이터를 불러온다.서비스 크기가 커질수록 다루는 양의 크기가 커질 경우 서버 부하, 데이터 전송 속도 및 크기 등 Overfetc

2024년 4월 24일
·
0개의 댓글
·

React 최적화

함수 컴포넌트의 결과를 Memoization하는 메소드Memoization비용이 많이 드는 함수 호출의 결과를 저장동일한 입력 발생 시, 재사용 → 성능 향상에 사용됨.props가 변경되지 않은 경우에만 재사용하는 고차 컴포넌트버튼을 계속 누를 경우, state 값이

2023년 12월 15일
·
4개의 댓글
·
post-thumbnail

react-query & asynchronous recoil로 데이터 관리하기

데이터 fetching, 캐싱, 동기화 , 데이터 업데이트를 보다 쉽게 다룰 수 있도록 하는 상태관리 라이브러리Redux나 MobX와 같은 라이브러이에 비해 러닝커브가 상당히 낮고 보일러플레이트가 적어 편하게 사용 가능함.react-query를 사용함으로써 클라이언트와

2023년 11월 21일
·
12개의 댓글
·
post-thumbnail

로드 밸런싱(Load Balancing): 서버 부하 분산 기술

애플리케이션을 지원하는 리소스 풀 전체에 네트워크 트래픽을 균등하게 배포하는 방식.컴퓨터공학에서의 로드 밸런싱부하분산 또는 로드 밸런싱(Load balancing)은 컴퓨터 네트워크 기술의 일종으로 둘 혹은 셋 이상의 중앙처리장치 혹은 저장장치와 같은 컴퓨터 자원들에게

2023년 11월 3일
·
0개의 댓글
·

HTTP & HTTPS: 웹 통신의 기초와 보안 버전의 차이

Hyper Text Transfer Protocol서버/ 클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜인터넷에서 하이퍼텍스트를 교환하기 위한 통신규약, 80번 포트 사용하이퍼텍스트(Hypertext): 참조(하이퍼링크)를 통해 독자가 한 문서에서 다른 문서로

2023년 11월 3일
·
0개의 댓글
·

TLS/SSL 프로토콜의 역할과 handshake: 암호화된 통신 설정 과정

전송 계층 보안으로, 인터넷 상의 커뮤니케이션을 위한 개인 정보와 데이터 보안을 용이하게 하기 위해 설계된 보안 프로토콜네트워크 상에서 보안을 제공하는 암호화 프로토콜을 사용해 네트워크에 보안을 제공함으로써, 개인정보 보호를 보장하는 클라이언트/ 서버 프로토콜전송 중인

2023년 11월 3일
·
0개의 댓글
·
post-thumbnail

대칭키 & 공개키 암호화: 데이터 보호를 위한 키 관리 방법

암호화와 복호화에 같은 암호 키(대칭 키)를 사용하는 알고리즘해당 키를 아는 사람만 문서를 복호화할 수 있음.Session Key, Secret Key, Shared Key, 대칭키, 단용키라고도 함대표적인 알고리즘: DES, 3DES, AES, SEED, ARIA,

2023년 10월 29일
·
0개의 댓글
·
post-thumbnail

useEffect, useMemo, useLayoutEffect 알아보기

들어가며, 리액트의 생명 주기에 대해 아주 간단히 알아보도록 하자 !Mount: 컴포넌트가 최초 실행될 때Render컴포넌트 내의 엘리먼트 요소들(HTML, React 사용자 정의 태그 등)을 화면 상에 그리는 동작컴포넌트가 마운트된 후, 컴포넌트가 호출될 때re-Re

2023년 10월 26일
·
6개의 댓글
·
post-thumbnail

TCP/IP 흐름제어와 혼잡제어: 데이터 전송 관리

컴퓨터와 컴퓨터 간의 LAN 또는 WAN에서 원활한 통신을 가능하게 하기 위한 통신 규약이다.TCP 통신은 클라이언트와 서버가 연결된 상태에서 데이터를 주고 받는 연결 지향적 프로토콜로, 가장 큰 특징은 신뢰성이다.신뢰성이란, 통신 중간에 데이터가 유실되지 않는 것을

2023년 10월 19일
·
0개의 댓글
·
post-thumbnail

TCP 3-way handshake와 4-way handshake: 연결 설정과 해제 과정

인터넷 상에서 데이터를 메시지 형태로 보내기 위해 IP와 함께 사용하는 프로토콜을 말한다.즉, 클라이언트와 서버가 연결된 상태에서 데이터를 주고 받는 연결 지향적 프로토콜이라고 할 수 있다.일반적으로 TCP는 IP와 함께 사용되며 IP는 배달을, TCP는 패킷의 추적

2023년 10월 19일
·
0개의 댓글
·
post-thumbnail

[프로그래머스/ JavaScript] 게임 맵 최단거리

ROR 게임은 두 팀으로 나누어서 진행하며, 상대 팀 진영을 먼저 파괴하면 이기는 게임입니다. 따라서, 각 팀은 상대 팀 진영에 최대한 빨리 도착하는 것이 유리합니다.지금부터 당신은 한 팀의 팀원이 되어 게임을 진행하려고 합니다. 다음은 5 x 5 크기의 맵에, 당신의

2023년 10월 4일
·
0개의 댓글
·
post-thumbnail

[프로그래머스/ JavaScript] H-Index

📍 문제설명 H-Index는 과학자의 생산성과 영향력을 나타내는 지표입니다. 어느 과학자의 H-Index를 나타내는 값인 h를 구하려고 합니다. 위키백과1에 따르면, H-Index는 다음과 같이 구합니다. 어떤 과학자가 발표한 논문 n편 중, h번 이상 인용된 논

2023년 10월 3일
·
0개의 댓글
·
post-thumbnail

[프로그래머스/ JavaScript] 피로도

XX게임에는 피로도 시스템(0 이상의 정수로 표현합니다)이 있으며, 일정 피로도를 사용해서 던전을 탐험할 수 있습니다. 이때, 각 던전마다 탐험을 시작하기 위해 필요한 "최소 필요 피로도"와 던전 탐험을 마쳤을 때 소모되는 "소모 피로도"가 있습니다. "최소 필요 피로

2023년 10월 2일
·
0개의 댓글
·
post-thumbnail

[프로그래머스/ JavaScript] 카펫

https://school.programmers.co.kr/learn/courses/30/lessons/42842Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다.Leo

2023년 9월 28일
·
0개의 댓글
·
post-thumbnail

[프로그래머스/ JavaScript] 구명보트

📍 문제설명 무인도에 갇힌 사람들을 구명보트를 이용하여 구출하려고 합니다. 구명보트는 작아서 한 번에 최대 2명씩 밖에 탈 수 없고, 무게 제한도 있습니다. 예를 들어, 사람들의 몸무게가 [70kg, 50kg, 80kg, 50kg]이고 구명보트의 무게 제한이 100

2023년 9월 27일
·
0개의 댓글
·
post-thumbnail

SWR과 ReactQuery 비교하기

데이터 가져오기를 위한 react hook캐시(stale)로부터 데이터 반환 → fetch 요청 → 최신화된 데이터 가져오기즉, 다른 컴포넌트에서 동일한 상태를 사용하고자 하는 경우 이전에 캐시했던 상태를 그대로 사용서버로 재요청 하는 방식 ❌❌서로 다른 컴포넌트에서

2023년 8월 20일
·
0개의 댓글
·
post-thumbnail

카카오 로그인 구현하기 (REST API)

🪄 카카오 로그인 구현 방식 카카오 로그인 구현 방식은 크게 2가지로 나뉜다. JavaScript SDK 활용 REST API 활용 Kakao Developers 문서에 들어가보면, REST API를 활용한 카카오 로그인은 PC 및 모바일 웹에서 구현시 적합한 방식

2023년 8월 3일
·
1개의 댓글
·
post-thumbnail

React query

fetching, caching, 서버 데이터와의 동기화를 지원해주는 라이브러리비동기 처리를 쉽게 관리할 수 있는 라이브러리Client state에 적합한 라이브러리react component 내부에서 간단하고 직관적으로 api 사용 가능api 요청 관련 번잡한 작업

2023년 7월 21일
·
0개의 댓글
·
post-thumbnail

📍Redux, Recoil 개념잡기

JS 기반 상태 관리 라이브러리사용량이 압도적으로 높은 만큼, 안전성 보장보일러 플레이트 코드 양이 너무 많음.작은 기능 하나를 추가하더라도 여러 줄의 코드 필요러닝 커브 높음.하나의 파일(store)에서 상태를 관리하기 때문에, 버그 발생 시 추적이 쉽고 관리가 용이

2023년 6월 27일
·
0개의 댓글
·
post-thumbnail

Next.js, 개념에 대해 자세히 알아보자!

웹 어플리케이션을 구축하기 위한 React 프레임워크👇 그래서.. React랑 뭐가 다른건데!! 👇 React와의 차이를 알아보기 위해 CSR과 SSR에 대해 짚고 넘어가보자! 클라이언트 쪽에서 렌더링을 진행하는 방식이다.서버는 요청을 받으면 클라이언트에 HTML과

2023년 5월 14일
·
5개의 댓글
·