치춘짱베리굿나이스

카드1 문제 N장의 카드가 있다. 각각의 카드는 차례로 1부터 N까지의 번호가 붙어 있으며, 1번 카드가 제일 위에, N번 카드가 제일 아래인 상태로 순서대로 카드가 놓여 있다. 이제 다음과 같은 동작을 카드가 한 장 남을 때까지 반복하게 된다. 우선, 제일 위에 있는 카드를 바닥에 버린다. 그 다음, 제일 위에 있는 카드를 제일 아래에 있는 카드 밑으로 옮긴다. 예를 들어 N=4인 경우를 생각해 보자. 카드는 제일 위에서부터 1234 의 순서로 놓여있다. 1을 버리면 234가 남는다. 여기서 2를 제일 아래로 옮기면 342가 된다. 3을 버리면 42가 되고, 4를 밑으로 옮기면 24가 된다. 마지막으로 2를 버리고 나면, 버린 카드들은 순서대로 1 3 2가 되고, 남는 카드는 4가 된다. N이 주어졌을..

OAuth 우리의 42 마지막 과제인 ft_transcendence 로그인 페이지의 일부분이다 42 네트워크의 OAuth를 통해 로그인이 가능하도록 만들어진 것을 볼 수 있다 그렇긴 한데,, OAuth는 어떻게 동작하는 것일까? 나는 그걸 알고 만든거긴 할까? 라는 의문이 들어서 이제와서 (…) 정리해보려고 한다 ft_transcendence (42 과제) 기준으로 작성된 포스팅이라 42 향이 진하게 묻어있을 수 있다 정의 OAuth 2.0 웹사이트에서의 설명 https://oauth.net 웹, 모바일, 데스크톱 애플리케이션에서 사용되는, 간단하고 표준적인 방법으로 안전하게 인가를 받을 수 있는 개방형 프로토콜 OAuth 2.0 is the industry-standard protocol for aut..

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 명세에 처음으로 정의되었으며, 서버와 브라우저 간 연결이 끊어지지 않고 유지되므로 지속적으로 데이터를 전달할 수 있다 다르게 말하면 연결 이후 별도로 ..