홍장군의 기록

0. 오늘의 배울 것 리액트로 프론트 개발을 하다보면 input 을 다룰 일이 정말 많은데, 최근에 이 인풋을 짱 편하게 다룰 수 있게 하는 api를 알아냈다. 바로 react hook form!!!!! 라는 폼 관리 라이브러리다. 각 input 마다 useState로 값을 맞춰야 하고, 정규식을 각각 둬서 validation도 체크해야 하고, 값이 있는지 없는지도 체크해야 하는 등 여러 경우의 수가 많은데, 이걸 단번에 체크해주는 게 바로 react hook form이었다. 이번 포스팅에서는 로그인, 회원가입 폼을 만들면서 react hook form을 공부했던 내용에 대해 적어보고자 한다. 기능에 집중하기 위해 css 적인 부분은 빼고, js 코드만 보겠다. 1. 왜 react hook form을 쓸..

내 풀이) 단순히 생각하자면, 그냥 xy 좌표에 따라 for문을 돌려서 가려진 횟수를 카운트하고, M보다 더 많이 가려진 배열 위치를 세어 리턴하면 된다. 그런데 이 때 그림 100x100 배열을 1차원 배열로 만들지, 2차원 배열로 만들지에 따라 코드가 달라진다. (크게는 안달라짐 ㅎㅎ) 내 코드) 평범하게 2차원 배열로 그림 배열을 선언하는 경우. 3중 for문까지 돌게 된다. // fs로 입력받는 경우 function solution(N, M, location) { // 하나도 가려지지 않은 그림 배열. const ARR = []; let answer = 0; for (let i = 0; i < 100; i++) { const line = []; for (let j = 0; j < 100; j++)..

0. 오늘의 배울 것 프로젝트를 짜다보면 폴더 구조를 어떻게 나눠야 할지 자꾸 고민이 된다. 물론 리액트 공식문서 측에서는 폴더 구조에 대해 너무 신경을 쓰지 말라고는 하지만, (폴더 구조에 너무 시간 들이느라 다른 일을 미루는 멍청한 짓 - 배보다 배꼽이 커지는 일 - 을 하지 말라는 뜻인듯.) 그래도 난 여전히 신경이 쓰인다. 그러다 알게 된 개념이 바로 관심사 분리, seperation of concerns 이다. 이번엔 이 관심사 분리가 무엇인지 알아보고 이를 폴더 구조에 적용하는 방법에 대해 알아볼 것이다! 그런데 양이 많으니 쪼개서 1편은 관심사 분리의 개념, 2편은 수직 분리를 폴더 구조에 적용하기, 3편은 수평 분리를 볼더 구조에 적용하기 내용으로 써보겠다. 1. 관심사 분리? 관심사 분리..

solved.ac 기준 브론즈 1단계. 내 풀이) 어려운 문제는 아니다. k번 횟수만큼 for문을 돌면서, 새로운 배열을 만들면 된다. 만약 배열의 길이가 1 이하가 된다면 그대로 for 문을 끝낸다. 만약 처음부터 입력 받은 k가 0이라면, 입력받은 배열을 그대로 다시 리턴한다. 내 코드) // fs로 입력받는 경우 function solution(numArr, N, K) { if (K === 0) { return numArr.join(","); } for (let i = 0; i < K; i++) { let answer = []; if (numArr.length

> solved.ac 기준 브론즈 1단계, 정답률 56.736% 문제 해석) 1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5 ... 로 진행되는 수열이 있다. 예를 들어 인풋으로 3 7 을 받는다면, 수열의 3행 + 4행 + 5행 + 6행 + 7행 = 2 + 3 + 3 + 3 + 4 = 15 를 리턴하도록 함수를 짜야 한다. 이렇게 어느 구간 사이의 합을 구할 때엔, 동적 프로그래밍, DP를 이용해야 한다. 새로운 배열 Arr을 하나 만들고, Arr배열의 1행에는 수열 0행 + 1행 Arr배열의 2행에는 수열 0행 + 1행 + 2행 Arr배열의 1행에는 수열 0행 + 1행 + 2행 + 3행 Arr배열의 2행에는 수열 0행 + 1행 + 2행 + 3행 + 4행 ... 식으로 진..

solved.ac 기준 브론즈 2단계 내 풀이) 어려운 문제도 아녔는데 조건 하나를 놓쳐서 30분을 고민했다. 최저 심박수 m, 최대 심박수 M 운동 1분당 오르는 심박수 T 휴식 1분당 내려가는 심박수 R 운동 N분을 하기 위해 필요한 운동 + 휴식 총 시간은? 단, 최대 심박수가 M을 초과하면 -1을 리턴한다. 즉, m + T > M 일 경우 return -1 단, 최소 심박수가 m 미만이 되면 최소 심박수를 m으로 간주한다. 즉, M - R < m 일 경우 현재 심박수는 m. 최소 심박수가 m 미만이 될 경우에도 운동을 못 하는걸로 착각해서 한참을 헤맸다. 백준 질문 게시판에서 나 같은 질문글을 보고서야 내가 무슨 조건을 놓쳤는지 깨달았다. (고마워요 스피드웨건!) 내 코드) // fs로 입력받는 ..

0. 발생 오류 1. 문제 상황 백준 문제를 풀기 위해 코드를 작성하고 node.js 환경으로 run 시켰더니 다음과 같은 에러가 발생했다. fs 모듈이 input.txt 의 위치를 찾을 수 없다는 것이다. 그러나 분명 나는 경로도 제대로 썼고, 폴더 위치도 제대로 체크했었다. 2. 풀이 과정 알고보니 fs 모듈은 현재 파일 기준으로 경로를 잡는것이 아닌 실행하는 node 콘솔 기준으로 경로를 바라본다는 특징이 있었다. 즉, 내가 Post/알고리즘 연습/Solution_fs.js 파일을 실행했지만 경로가 Post/알고리즘 연습/ 에서 출발하는 게 아니라 node 콘솔이 깔려있는 위치에서부터(보통은 최상위 폴더) 실행된다는 것. 따라서 어디에 node 콘솔이 실행된 건지 파악하기 위해 fs.writeFil..

브론즈 5단계 > 10869번 사칙 연산 1. 내 풀이) 간단한 문제이지만 js로 입력 받는 것을 연습하기 위해 풀어보았다. 1. readline으로 입력받을 때 // readline으로 푸는 경우 function solution(num1, num2) { console.log(num1 + num2); console.log(num1 - num2); console.log(num1 * num2); console.log(Math.floor(num1 / num2)); console.log(num1 % num2); } const readline = require("readline").createInterface({ input: process.stdin, output: process.stdout, }); let in..