⭐️ Redux? Recoil? Recoil에 대해 설명하기 전, 나는 Redux를 사용했던 경험이 있다. Redux가 React 상태관리 라이브러리 중 가장 유명하다 생각했고 다른 사람들이 많이 사용하는데 이유가 있겠지! 싶어서 사용했었다. 처음 사용해보니 초기세팅하기 위해 공부가 어려웠다.. 그 후, 사이드 프로젝트를 진행하게 되었는데 Recoil에 대해 알게되었다. 더 간단하고 소규모 프로젝트에는 Recoil이 적합하다는 이야기를 듣고 Recoil을 사용하기로 결심했다! 그리고 페이스북에서 만들어서 리액트와 호환성도 좋다고 한다. ⭐️ Recoil 설치 npm install recoil or yarn add recoil 위의 명령어로 설치하고 루트 컴포넌트를 RecoilRoot로 감싸주면 사용할 준..

반응형 UI를 간단히 구현하기 위해 Tailwind CSS를 설치해보자. https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com ⭐️ 설치 npm install -D tailwindcss 여기서 -D 옵션을 사용하는 이유는 프로덕션 환경에서는 사용하지 않고, 프로젝트의 디자인을 하는 개발 도구로 사용하겠다는 의미이다. 이런걸 개발 의존성으로만 설치한..

⭐ react-hook-form? 로그인, 회원가입 등 form을 사용해서 기능을 구현해 본 경험이 다들 있을 것이다. useState도 계속 사용해야 하고, onChange로 input 값을 확인하는 등 ... 번거롭고 은근 까다로운 작업이다. 이런 작업들을 react-hook-form 라이브러리를 사용하면 간단하고 효율적으로 할 수 있다! 공식문서는 아래 링크 첨부! https://react-hook-form.com/ ⭐ 설치방법 npm install react-hook-form or yarn add react-hook-form 위의 명령어로 설치해주고 import { useForm } from "react-hook-form"; 사용하고 싶은 곳에서 import 해주면 됨! ⭐ useForm 객체 r..

문제링크 https://school.programmers.co.kr/learn/courses/30/lessons/132265 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근방법 배열을 잘라서 두 배열에 있는 원소 종류가 몇 개인지 구한 다음 같으면 answer + 1 해주면 되겠구나. 어쩐지 단순하다 싶었다.. 오답 function solution(topping) { var answer = 0; for (let i = 1; i < topping.length; i++) { let front = topping.slice(0, i); let back = t..

문제링크 https://school.programmers.co.kr/learn/courses/30/lessons/60057 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근방법 문자열 단위를 1부터~ 문자열 길이의 절반까지만 지정해서 압축하면 되겠다라는 생각이 가장 먼저 떠올랐다. slice 함수를 사용해서 문자열 단위로 잘라서 비교하고 (slice() -> 원본에 영향X, splice() -> 원본에 영향O 또 까먹어서 또 구글링해봄ㅋ) 반복되는 것들을 스택에 저장해야겠다! 결론부터 말하자면 스택은 필요없었따... 반복되는 문자열이 무엇인지보다는 몇 ..

문제링크 https://school.programmers.co.kr/learn/courses/30/lessons/131130# 접근방법 문제가 길어서 문제 읽는 것부터 힘들었다.. 테스트 케이스에는 [8, 6, 3, 7, 2, 5, 1, 4]가 입력으로 들어온다. 먼저 첫번째를 선택했을 때, 두번째를 선택했을 때 ... 다 손으로 써봤다. 첫번째를 선택했다 해보자. 그리고 인덱스가 0이 아닌 1부터 시작한다고 가정한다. 인덱스를 기준으로 1 -> 8 -> 4 -> 7 이렇게 4개의 상자를 거치고, 1, 8, 4, 7 중 어떤 것을 먼저 선택하든 똑같이 4개를 거친다. 그리고 처음 선택한 인덱스의 값이 나올 때까지 반복한다! 정답코드 function solution(cards) { let answer = ..