치춘짱베리굿나이스

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

입실 관리 문제 JOI회사에서는 방에 들어가기 위해 입실 기록을 입력할 때 알파벳으로 이름을 입력한다. 그런데, 컴퓨터에 오류가 나서 대문자 소문자가 섞여버려 입실 기록이 읽기 힘들어졌다. JOI회사의 입실 기록을 읽기 쉽게 하기 위해서 기록된 이름을 모두 소문자로 변환하는 프로그램을 작성하라. 단, 입실 기록에는 같은 이름의 사람이 생기기도 한다. 입력 첫째 줄에는 정수 N(1 ≤ N ≤ 100)이 주어진다. 둘째 줄부터는 1글자 이상 20문자 이하의 영어 대문자, 소문자로만 이루어지는 문자열 Si가 주어진다. 출력 i번째 줄에, i번째 입실자의 이름을 소문자로 출력한다. 풀이 const manage = () => { const [n, ...arr] = require("fs") .readFileSync..