목록분류 전체보기 (887)
치춘짱베리굿나이스
useMemo, useCallback 리액트를 쓰면서 이름만 몇번 들어본 훅이지만 내가 잘 사용할 엄두가 안나서 (…) 사용해 본 적도 정리도 못하고 있었다 (핑계임) 캐싱 비슷한 기능으로 불필요한 연산 수를 줄이는 것이라고만 알고 있었는데 한번 정리하면서 익혀보려고 한다 사실 필수적인 훅이 아니라 성능 최적화를 위한 훅이라 크게 필요성을 못 느낀 것도 있는데 그렇게 배움을 미루는 건 너무나도 게으르다 useMemo 기본 예시 import { useState } from "react"; function multiply10(n: number) { console.log("곱하기 10 계산 중..."); return n * 10; } export const MemoTestPage = () => { const ..
마운트, 언마운트, 렌더링, 리렌더링 맨날 헷갈려서… 마운트 DOM 객체가 (렌더링을 통해) 생성되어 브라우저에 나타나는 시점 클래스 컴포넌트 기준으로, 생성자가 호출된 후 render() 메서드가 호출되면 마운트가 발생한다 컴포넌트의 생명주기 동안 단 한 번, 처음으로 DOM에 컴포넌트가 추가될 때 수행된다 componentDidMount 클래스 컴포넌트에서의 componentDidMount 메서드는 컴포넌트가 마운트된 직후에 호출되며, API 콜이나 이벤트 리스너 설정 등의 작업을 수행할 수 있다 useEffect useEffect(() => { ... }, []); 함수 컴포넌트에서의 useEffect() 는 컴포넌트가 마운트됐을 때 최초로 한 번 콜백을 수행한다 의존성 배열에 값을 아무것도 넣지 ..
Hello Judge 문제 당신은 N개의 테스트케이스들에게 반드시 인사를 해야 이 문제를 풀 수 있다. N개의 줄에 걸쳐 "Hello World, Judge i!" 를 출력하는 프로그램을 만들라. 여기서 i는 줄의 번호이다. 입력 N이 주어진다. (1 ≤ N ≤ 200) 출력 한 줄에 하나의 Hello World, Judge i! 를 출력한다. 풀이 const judge = () => { const n = Number(require("fs").readFileSync("/dev/stdin").toString().trim()); for (let i = 0; i < n; i++) { console.log(`Hello World, Judge ${i + 1}!`); } }; judge();
Socket.io https://socket.io/ 사이트와 라이브러리명이 같다 (ㅋㅋ) 트랜센던스 하면서 가장 많이 신세진 라이브러리인데, 미루고 미루다가 이제야 글을 적게 되었다… 설치 $> npm i socket.io // 서버 측 $> npm i socket.io-client // 클라이언트 측 $> yarn add socket.io // 서버 측 $> yarn add socket.io-client // 클라이언트 측 npm 링크 https://www.npmjs.com/package/socket.io yarn 링크 https://classic.yarnpkg.com/en/package/socket.io 설명 WebSocket 프로토콜 위에서 동작하며, 소켓 통신을 손쉽게 설정 및 수행할 수 있는 라..
특별한 학교 이름 문제 GEC에는 여러 학교가 있다. 각 학교의 약칭과 정식 명칭은 다음과 같다. NLCS: North London Collegiate School BHA: Branksome Hall Asia KIS: Korea International School SJA: St. Johnsbury Academy 학교 이름을 좋아하는 규빈이는, 학교 이름을 짧게 부르는 것을 싫어하기 때문에, 각 학교의 약칭이 주어졌을 때 정식 명칭을 출력하는 프로그램을 만들기로 하였다. 각 학교의 약칭이 주어졌을 때, 정식 명칭을 출력하는 프로그램을 작성하시오. 입력 첫 번째 줄에 학교의 약칭 중 하나가 주어진다. 출력 첫 번째 줄에 입력된 학교의 정식 명칭을 출력한다. 풀이 const school = () => { c..
웹소켓 (WebSocket) Socket.io 설명이랑 묶을까 하다가 웹소켓 부분이 너무 길어져서 분리했다 설명 우리가 아는 HTTP 프로토콜은 클라이언트와 서버가 한 번 데이터를 주고받으면 대부분 연결을 끊어버리는 (비연결성) 특징을 가지고 있었다 따라서 한번 데이터를 주고받았다? 연결 유지가 끊겨버리는 것이다 하지만 채팅, 실시간 게임, 주…식과 같은 몇몇 서비스에서는 실시간으로 데이터가 이동하는 것을 보장하기 위해 서버 - 클라이언트 간 끊기지 않는 연결을 필요로 하고, 이때 사용할 수 있는 것이 WebSocket 프로토콜이다 웹소켓은 RFC6455 명세에 처음으로 정의되었으며, 서버와 브라우저 간 연결이 끊어지지 않고 유지되므로 지속적으로 데이터를 전달할 수 있다 다르게 말하면 연결 이후 별도로 ..