[Programmers]등굣길/JS

⭐️ 문제링크 https://school.programmers.co.kr/learn/courses/30/lessons/42898 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr ⭐️ 접근방법 문제를 읽자마자 고등학교 확통이 생각났다. 제일 윗줄과 왼쪽줄을 1로 채우고, 아래로 내려가면서 위의 값과 왼쪽 값을 더해주는 방식으로 풀었다. 물에 잠긴 지역(puddles)가 있는 곳은 0으로 채워줬다. ⭐️ 첫번째 시도 function solution(m, n, puddles) { var answer = 0; const NUM = 1000000007; let dp..

• format_list_bulleted Algorithm
• · 2024. 4. 4.
• textsms

[React]React 프로젝트 폰트 변경하기(눈누)

프로젝트를 진행하는데 폰트를 바꾸면 더 예쁘겠다!라는 생각이 들어서 팀원들과 상의 후에 폰트를 바꾸기로 결정했다. 적용할 폰트는 이사만루 !! https://noonnu.cc/font_page/463 눈누 이사만루 - 공게임즈 X 폰트릭스 noonnu.cc 깔끔하고 글씨 변형이 없는 폰트를 원해서 이걸로 채택했다. 적용 방법 위의 링크를 타고 들어가서 폰트를 다운 받아준다. src/font 폴더를 하나 만들어서 그 안에 저장해준다. 폰트 두께에 따라 light, medium, bold가 존재하는데 나는 하나만 저장해서 사용했다. 코드 수정 그리고 전체 적용을 해주기 위해서 index.css에서 적용해주었다. @tailwind base; @tailwind components; @tailwind utilit..

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

[Programmers]다트 게임/JS

문제링크 https://school.programmers.co.kr/learn/courses/30/lessons/17682 접근방법 문제에 적힌 조건들만 잘 지켜주면 딱히 어려울게 없는 문제였다! 입력된 문자열인 dartResult를 숫자(0 ~ 9) / (S, D, T) / (*, #)로 구분해준다. 숫자를 따로 저장해뒀다가 S이면 1제곱, D이면 2제곱, T이면 3제곱을 해준다. (필수) *이면 현재 점수와 이전 점수에 두배를 해주고, #이면 현재 점수에 -1을 곱해준다. (옵션) 정답코드 function solution(dartResult) { var answer = 0; let score = []; // 점수를 저장해 둘 배열 let index = 0; // 점수를 저장해 둔 배열의 인덱스 let..

• format_list_bulleted Algorithm
• · 2024. 3. 29.
• textsms

[React] 상태관리 라이브러리 Recoil

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

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

[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