[React]Tailwind CSS 설치하기

반응형 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 옵션을 사용하는 이유는 프로덕션 환경에서는 사용하지 않고, 프로젝트의 디자인을 하는 개발 도구로 사용하겠다는 의미이다. 이런걸 개발 의존성으로만 설치한..

• format_list_bulleted React
• · 2024. 3. 27.
• textsms

[React]react-hook-form로 회원가입 구현

⭐ 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..

• format_list_bulleted React
• · 2024. 3. 7.
• textsms

[Programmers]롤케이크 자르기/JS

문제링크 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..

• format_list_bulleted Programmers
• · 2024. 2. 24.
• textsms

[Programmers]문자열 압축/JS

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

• format_list_bulleted Programmers
• · 2024. 2. 23.
• textsms

[Programmers]혼자 놀기의 달인/JS

문제링크 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 = ..

• format_list_bulleted Programmers
• · 2024. 2. 19.
• textsms

[React]Redux-Logger

⭐ Redux-Logger란? Redux를 통해 개발할 때, reducer 실행 전후 값을 로그로 확인할 수 있게 해주는 미들웨어 ⭐ 설치방법 npm i redux-logger ⭐ 사용방법 간단하게 스토어에 logger를 추가해주기만 하면 된다. import { createStore } from "redux"; import { combineReducers } from "redux"; const rootReducer = combineReducers({}); const store = createStore(rootReducer); export default store; 위의 코드에서 아래처럼 수정만 해주면 된다. import { createStore, applyMiddleware } from "redux";/..

• format_list_bulleted React
• · 2024. 2. 8.
• textsms