문자열38 [React/Next.js] 여러 줄의 타이핑(multi line typing effect) 효과 개인 포트폴리오 프로젝트 중 구현한 문자열 배열의 여러 줄 타이핑 효과이다. 한 줄만 타이핑 하는 효과의 구현은 검색으로 매우 쉽게 찾아 볼 수 있었지만, 항상 뭔가 더 추가로 더 해보고 싶은 마음에 여러 줄을 한번에 이어서 타이핑 하도록 구현해보았다. 거기에 추가로 여러개의 문자열을 번갈아가며 타이핑하도록 구현하였다. 핵심 원리를 요약하자면, useEffect내에서 상태로 관리 중인 문자열의 인덱스를 확인하고 settimeout을 사용해서 지연 시간 후에 다음 문자를 추가해준다. 근데 의존성 배열에 갱신되는 문자를 넣어서 지연시간 후에 문자가 갱신되면 다시 랜더링 되면서 useEffect로 같은 로직이 반복되는 원리이다. 코드의 각 줄마다 상세 설명을 주석으로 남겨두었다. 위의 코드는 문자열 배열을 타.. 2023. 12. 31. [백준 5555/javascript] 반지 이전 c++ 과 비교할겸 가볍게 풀어보았다 전에 c++ 로 풀이할때는 find 로 찾았지만 정규표현식을 사용하니 훨씬 간단하였다 https://www.acmicpc.net/problem/5555 5555번: 반지 당신은 N개의 반지를 가지고 있다. 각각의 반지는 대문자 10 문자로 이루어진 문자열이 새겨져 있다. 반지는 문자열의 시작과 끝이 연결된 형태로 문자가 새겨져 있다. 반지에 각인된 문자열을 www.acmicpc.net let input = []; const readline = require("readline").createInterface({ input: process.stdin, output: process.stdout, }); readline.on("line", (line) => { inpu.. 2022. 11. 2. [백준 1343/javascript] 폴리오미노 카카오 데이터 센터 화재로 인해 뒤늦게 올리는 중... 문자열 구현 문제이다 https://www.acmicpc.net/problem/1343 1343번: 폴리오미노 첫째 줄에 사전순으로 가장 앞서는 답을 출력한다. 만약 덮을 수 없으면 -1을 출력한다. www.acmicpc.net let input = []; const readline = require("readline").createInterface({ input: process.stdin, output: process.stdout, }); readline.on("line", (line) => { input.push(line); }); readline.on("close", () => { solution(input); process.exit(); }).. 2022. 10. 19. [백준 13417/javascript] 카드 문자열 문자열을 하나씩 순회하며 deque 를 구현하여 쌓아주면 되는 문제이다 자바스크립트에서는 deque 가 없으므로, 문자열을 이용해서 구현하여 풀었다 https://www.acmicpc.net/problem/13417 13417번: 카드 문자열 입력 데이터는 표준 입력을 사용한다. 입력은 T개의 테스트 데이터로 구성된다. 입력의 첫째 줄에 테스트 케이스의 개수를 나타내는 자연수 T가 주어진다. 각각의 테스트 케이스의 첫째 줄에 처 www.acmicpc.net let input = []; const readline = require("readline").createInterface({ input: process.stdin, output: process.stdout, }); readline.on("line",.. 2022. 10. 14. 이전 1 2 3 4 ··· 10 다음
