Yepchani's place

들어가며 웹/앱 관련 분야에 계시다면 react에 대해서 많이들 들어보셨을 텐데요. react는 'UI를 위한 자바스크립트 라이브러리'입니다. SPA(Single Page Application)를 구축하는 데 사용이 됩니다. 이번 시간에는 react에 대해서 알아보려고 합니다. 주요 개념부터 알아보자 react를 이해하기 위해서 아래 개념들을 알아둘 필요가 있습니다. 컴포넌트(Component) react의 핵심은 바로 '컴포넌트'라는 개념입니다. 컴포넌트는 UI에서 독립적이고, 재사용 가능한 부분을 나타냅니다. 각 컴포넌트는 자신의 상태와 로직을 관리합니다. 컴포넌트가 클래스로 구성되면 클래스 컴포넌트, 함수로 구성되면 함수 컴포넌트라고 부릅니다. 상태(State)와 속성(Props) state는 컴포..

문제 5582번: 공통 부분 문자열 두 문자열이 주어졌을 때, 두 문자열에 모두 포함된 가장 긴 공통 부분 문자열을 찾는 프로그램을 작성하시오. 어떤 문자열 s의 부분 문자열 t란, s에 t가 연속으로 나타나는 것을 말한다. 예를 들 www.acmicpc.net 예시 코드 function solution() { const str1 = input(); const str2 = input(); const len1 = str1.length; const len2 = str2.length; const dp = Array.from(Array(len1 + 1), () => Array(len2 + 1).fill(0)); let maxLen = 0; for (let i = 1; i

들어가며 이번에는 검색어 자동 완성 기능을 구현해 보겠습니다. 기능 기능은 크게 세 가지로 나눌 수 있습니다. 1. 검색어를 입력하면 해당 글자를 포함한 상품이 있는 경우 리스트로 표시해 줍니다. 2. Tab키, 위 방향키, 또는 아래 방향키를 눌러 리스트 내에서 움직일 수 있습니다. 현재 선택한 아이템을 표시해 주며,검색창에 이름이 입력됩니다. 3. 엔터키를 누르거나, 리스트 아이템을 클릭하면 해당 검색 결과로 이동합니다. 동작 과정 전체적인 동작 과정은 다음과 같은 모습입니다. 구현 예시 코드 아래는 구현 예시 코드입니다. import { useRouter } from 'next/router'; import { ChangeEvent, KeyboardEvent, MouseEvent, useEffect,..

들어가며 이번에 사이드 프로젝트를 진행하며 겪은 문제에 대해 얘기해 보고자 합니다. 폼을 구현하기 위해 react hook form을 사용했는데요. input에는 onBlur, onChange, onClick, onKeyDown 이벤트를 사용했습니다. 다음과 같은 형태였죠. ; 문제 문제는 폼 제출이 안 된다는 겁니다. 응?? 이벤트에 무슨 문제가 있나 싶어 하나씩 지워보며 확인한 결과 onChange를 지웠더니 정상 작동이 되는 걸 확인했습니다. 이상한 점은 onChange 이벤트 핸들러 내부 로직을 지우고 등록만 해도 문제가 발생했다는 거죠. 솔루션 이곳저곳 찾아보니 다음과 같은 내용을 발견할 수 있었습니다. react hook form Ver 7.16부터는 onBlur와 onChange 핸들러를 r..

들어가며 이번에 사이드 프로젝트를 진행하며 겪은 문제에 대해 얘기해 보고자 합니다. 검색어 자동 완성 기능을 구현하는 게 목표였는데요. 검색어를 입력하면 해당 글자를 포함한 상품이 있는 경우 리스트로 표시해 줍니다. 리스트 아이템을 클릭하면 해당 검색 결과로 이동합니다. 검색창 외부를 클릭하면 onBlur 이벤트가 발생해 리스트가 사라지도록 했는데요. (onBlur 이벤트는 요소가 포커스를 잃었을 때 발생합니다.) 문제 문제는 리스트 아이템을 클릭할 때도 onBlur 이벤트가 발생해 리스트가 사라지고 검색 결과로 이동하지 않았습니다. 왜 이런 일이 발생한 걸까요? 마우스 클릭 이벤트에 대해 살펴보겠습니다. 마우스 클릭 이벤트는 크게 세 단계로 발생합니다. onMouseDown -> onMouseUp ->..

들어가며 position은 문서에서 요소의 위치를 지정하는데 사용됩니다. top, bottom, left, right 속성을 더해서 최종 위치를 결정할 수 있습니다. 이번 시간에는 CSS의 position 속성에 대해 알아보겠습니다. static 요소의 default 값입니다. 따로 position을 지정하지 않으면 static으로 간주됩니다. top, bottom, left, right 속성과 z-index 속성을 적용할 수 없습니다. relative 요소의 처음 위치에서 상대적으로 위치를 이동시킵니다. 예를 들어, 'top: 10px'을 적용하면 요소는 원래 위치에서 10px만큼 위로 이동합니다. 이때 요소가 처음 있던 공간은 유지됩니다. 즉, 그 요소는 다른 곳으로 이동했지만, 요소가 원래 있던 자..

문제 1700번: 멀티탭 스케줄링 기숙사에서 살고 있는 준규는 한 개의 멀티탭을 이용하고 있다. 준규는 키보드, 헤어드라이기, 핸드폰 충전기, 디지털 카메라 충전기 등 여러 개의 전기용품을 사용하면서 어쩔 수 없이 각종 전 www.acmicpc.net 예시 코드 function solution() { const [N, K] = input().split(" ").map(Number); const order = input().split(" ").map(Number); const plugs = new Map(); let cnt = 0; for (let i = 0; i < K; i++) { if (plugs.has(order[i])) continue; if (plugs.size < N) { plugs.set(o..

들어가며 사이드 프로젝트를 진행하며 겪었던 문제에 대해 얘기해 보고자 합니다. Next.js를 이용한 프로젝트였는데요. 계정 등록을 할 때 해당 유저에 대한 인증이 필요했고, Nodemailor를 이용해 이메일 인증을 진행하기로 했습니다. 문제 순조롭게 진행이 되는 거 같았느니 예상치 못한 곳에서 문제가 발생했습니다. 분명 개발 모드에서는 정상적으로 작동했는데 프로덕션 모드에서는 이메일 전송이 안 되는 겁니다. 솔루션 구글링을 한 결과 다음과 같은 내용을 발견할 수 있었습니다. This problem is really confusing indeed. I've managed to fix this by simply adding async/await. This is because streaming respon..

들어가며 오늘은 nodemailer를 사용해 이메일 인증을 구현해 보겠습니다. nodemailer는 Node.js 애플리케이션에서 이메일을 쉽게 보낼 수 있도록 해주는 모듈입니다. Next.js를 사용한 프로젝트에서 진행했습니다. Nodemailer :: Nodemailer Nodemailer Nodemailer is a module for Node.js applications to allow easy as cake email sending. The project got started back in 2010 when there was no sane option to send email messages, today it is the solution most Node.js users turn to by de..

들어가며 혹시 '서버리스(Serverless)' 아키텍처에 대해 알고 계신가요? 저는 Next.js를 사용한 프로젝트를 진행하면서 처음 접하게 되었는데요. 오늘은 서버리스가 뭔지, 정말 서버가 없는 것인지 가볍게 알아보려고 합니다. We build on Serverless (AWS Lambda) because we don’t think managing servers is a core part of our business. Instead, we focus on building business logic and data transformation. We start small, only pay for what we need, and the service automatically scales for us Vad..