홍장군의 기록

문제 상황 팝업창을 열고 닫을 수 있는 커스텀 훅을 만들고, boolean형 isOpen과 함수 handleOpen, 함수 handleClose 를 배열에 담아 리턴하게끔 했다. 그리고 배열 리턴값을 받아서 쓰려 했더니... 아래와 같은 에러가 났다! 예를 들어 설명하자면, // 이 코드를 실행하면, myString 에는 string형만 들어가야 하는데 string | number | null 형이 들어간다고 에러가 뜬다..ㅠㅠ const arr = ["a", 1, null]; const [myString, myNum, myNull] = arr; 문제 원인 위의 문제는 타입스크립트는 객체나 배열은 내부 값들이 변할 수 있다고 가정하여 타입을 추론하기 때문에 발생한다. 즉, 배열 구조분해를 할 땐 배열 속..

책 정보: 개발자를 위한 챗 GPT 활용법 / 오현석 지음 / 2023년 신간 / 200p 정도의 얇은 책. 개인적인 평가: ⭐⭐⭐ 3 / 5 짤막 후기: 개발자를 위한 책이라기엔 내용이 적어 아쉽고, 일반인을 위한 책이라기엔 내용이 어려워 아쉽고... 책을 읽게 된 이유... 도서관 뒤적이다가 우연히 발견해서 집어왔다. 이때껏 한 번도 챗 GPT는 써본 적 없었는데... 명색이 개발자인데 한 번쯤은 건드려봐야지 싶어 책을 빌렸다. (본인은 궁금한 게 생기면 인터넷보단 책을 먼저 찾아보는 스타일이다. 참 개발자와 동떨어진 스타일;) 책 읽고 배운 점... 책은 챗 GPT가 무엇인지, 어떤 원리로 작동하는지 짧게 소개해준 후 개발자가 어떻게 gpt를 활용하면 좋을지 예시를 들어주었다. chat gpt란? ..

명색이 개발자인데, 그래도 깃허브 하나 간지나게 가지고 있어야겠다 싶어 글을 써본다. 1. 나를 위한 readme 만들기. 깃허브에선 내 닉네임 레포지토리를 만들면, you found a secret! 이라는 메세지가 나오며 특별한 레포지토리가 생성되는 이스터에그가 있다. 바로 이렇게... 깜찍한 놈들 add readme.md 버튼을 누르고 생성하면... 이제 내 프로필에 나의 readme 파일이 보이게 된다. 본격적으로 readme를 꾸며보자. A. 이쁜 header을 넣어보자. 여러 자료가 있겠지만, 여기서는 https://github.com/kyechan99/capsule-render 이 레포지토리를 참고했다. 흠... 내 눈에는 Rect가 제일 이뻐보인다!! Rect 선택. 그럼 이제 이 레포지토..

ref 객체는 자식에게 내려줄 수 없다. 그래서 가끔 자식에게 ref 객체를 넘겨주려 할 때 다음과 같은 에러가 나타난다. 문제 상황... // A component export default A(){ const ref = useRef( ... ); return } // B component export default B(){ return ( // 에러 발생!! ); } 이렇게 다른 컴포넌트로 ref를 넘겨주려면 해당 컴포넌트를 forwardRef 메소드로 만들어야 한다. 문제 해결방법... // B component를 다음과 같이 선언하자. const B = React.forwardRef( ref) => { return ( ); }); 그런데 가끔 이렇게 쓰면 eslint에 걸려서 Component d..

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