뚝딱뚝딱 코딩 기록_

[Recoil] ❓ Recoil : 리액트 상태 관리 라이브러리 1. recoil 설치하기 npm install recoil or yarn add recoil 2. RecoilRoot로 컴포넌트 감싸기 - : 상태를 관리하고 사용할 상위 컴포넌트 3. Atom 생성하기 - src 디렉토리에 recoil을 생성한 뒤 state를 정의할 파일(ts / js 모두 가능)을 만든다. - 파일 이름은 임의로 정하면 된다. - key : state를 식별할 id (유일해야 함) - default : 초기 값 ❗ 각 컴포넌트에서 state를 읽고 업데이트 하는 것이 가능하다. ❗ 상태 값을 읽는 컴포넌트들은 해당 atom에 subscribe(구독) 되기 때문에 업데이트 될때마다 리렌더링이 발생한다. 3. 컴포넌트에서..

[Javascript_ 구명보트] 📢 문제 📢 무인도에 갇힌 사람들을 구명보트를 이용하여 구출하려고 합니다. 구명보트는 작아서 한 번에 최대 2명씩 밖에 탈 수 없고, 무게 제한도 있습니다. 구명보트를 최대한 적게 사용하여 모든 사람을 구출하려고 합니다. 사람들의 몸무게를 담은 배열 people과 구명보트의 무게 제한 limit가 매개변수로 주어질 때, 모든 사람을 구출하기 위해 필요한 구명보트 개수의 최솟값을 return 하도록 solution 함수를 작성해주세요. 제한사항 무인도에 갇힌 사람은 1명 이상 50,000명 이하입니다. 각 사람의 몸무게는 40kg 이상 240kg 이하입니다. 구명보트의 무게 제한은 40kg 이상 240kg 이하입니다. 구명보트의 무게 제한은 항상 사람들의 몸무게 중 최댓값..

[React_ axios] 유튜브 클론 프로젝트에서 axios로 통신을 하던 중 baseURL과 api_key가 반복적으로 사용되고 있었다. 반복되는 코드를 줄이기 위해서 axios.create를 통해 instance를 생성하여 사용하기로 했다. 1. 인스턴스 생성 후 export (내보내기) - 폴더 / 파일 이름을 임의로 정하고 axios를 import한다. - axios.create({}) 안에 기본 세팅 값들을 넣어준다. ❕ baseURL : request url (요청 보낼 url) ❕ params : 기본 query params → {key: value} 형태로 넣어준다. 2. 외부에서 import 하여 사용하기 - 기존 axios를 사용하는 것과 동일하게 사용 가능하다. axios.creat..

[Javascript_ 신규 아이디 추천] 📢 문제 📢 "네오"에게 주어진 첫 업무는 새로 가입하는 유저들이 카카오 아이디 규칙에 맞지 않는 아이디를 입력했을 때, 입력된 아이디와 유사하면서 규칙에 맞는 아이디를 추천해주는 프로그램을 개발하는 것입니다. 다음은 카카오 아이디의 규칙입니다. 아이디의 길이는 3자 이상 15자 이하여야 합니다. 아이디는 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.) 문자만 사용할 수 있습니다. 단, 마침표(.)는 처음과 끝에 사용할 수 없으며 또한 연속으로 사용할 수 없습니다. "네오"는 다음과 같이 7단계의 순차적인 처리 과정을 통해 신규 유저가 입력한 아이디가 카카오 아이디 규칙에 맞는 지 검사하고 규칙에 맞지 않은 경우 규칙에 맞는 새로운 아이디를 추천해 ..

[Javascript_ 비밀지도] 📢 문제 📢 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다. 지도는 한 변의 길이가 n인 정사각형 배열 형태로, 각 칸은 "공백"(" ") 또는 "벽"("#") 두 종류로 이루어져 있다. 전체 지도는 두 장의 지도를 겹쳐서 얻을 수 있다. 각각 "지도 1"과 "지도 2"라고 하자. 지도 1 또는 지도 2 중 어느 하나라도 벽인 부분은 전체 지도에서도 벽이다. 지도 1과 지도 2에서 모두 공백인 부분은 전체 지도에서도 공백이다. "지도 1"과 "지도 2"는 각각 정수 배열로 암호화되어 ..

[Javascript_ 튜플] 📢 문제 📢 셀수있는 수량의 순서있는 열거 또는 어떤 순서를 따르는 요소들의 모음을 튜플(tuple)이라고 합니다. n개의 요소를 가진 튜플을 n-튜플(n-tuple)이라고 하며, 다음과 같이 표현할 수 있습니다. (a1, a2, a3, ..., an) 튜플은 다음과 같은 성질을 가지고 있습니다. 중복된 원소가 있을 수 있습니다. ex : (2, 3, 1, 2) 원소에 정해진 순서가 있으며, 원소의 순서가 다르면 서로 다른 튜플입니다. ex : (1, 2, 3) ≠ (1, 3, 2) 튜플의 원소 개수는 유한합니다. 원소의 개수가 n개이고, 중복되는 원소가 없는 튜플 (a1, a2, a3, ..., an)이 주어질 때(단, a1, a2, ..., an은 자연수), 이는 다음과..

[Javascript_ 타겟 넘버] 📢 문제 📢 n개의 음이 아닌 정수들이 있습니다. 이 정수들을 순서를 바꾸지 않고 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 사용할 수 있는 숫자가 담긴 배열 numbers, 타겟 넘버 target이 매개변수로 주어질 때 숫자를 적절히 더하고 빼서 타겟 넘버를 만드는 방법의 수를 return 하도록 solution 함수를 작성해주세요. 제한사항 주어지는 숫자의 개수는 2개 이상 20개 이하입니다. 각 숫자는 1 이상 50 이하인 자연수입니다. 타겟 넘버는 1 이상 1000 이하인 자연수입니다. 입출력 예 numbers target return [1,1,1,1,1] 3 5 [4,1,2,1] 4 2 ❗아이디어 - 깊이 우선 탐색을 이용하여 모든 경우의 수를 확인한..

[Python_ 성격 유형 검사하기] 📢 문제 📢 성격 유형 검사는 다음과 같은 4개의 지표로 구분한다. 지표 번호 성격 유형 1번 지표 라이언형(R), 튜브형(T) 2번 지표 콘형(C), 프로도형(F) 3번 지표 제이지형(J), 무지형(M) 4번 지표 어피치형(A), 네오형(N) 검사진에는 총 n개의 질문이 있고, 각 질문에는 7개의 선택지가 있다. 선택지 성격 유형 검사 매우 비동의 3점 비동의 2점 약간 비동의 1점 모르겠음 0점 약간 동의 1점 동의 2점 매우 동의 3점 검사 결과는 모든 질문의 성격 유형 점수를 더하여 각 지표에서 더 높은 점수를 받은 성격 유형이 검사자의 성격 유형이라고 판단한다. 단, 하나의 지표에서 각 성격 유형 점수가 같으면, 두 성격 유형 중 사전 순으로 빠른 성격 유형..

[Javascript_ 최댓값과 최솟값] 📢 문제 📢 문자열 s에는 공백으로 구분된 숫자들이 저장되어 있습니다. str에 나타나는 숫자 중 최소값과 최대값을 찾아 이를 "(최소값) (최대값)"형태의 문자열을 반환하는 함수, solution을 완성하세요. 제한 조건 s에는 둘 이상의 정수가 공백으로 구분되어 있습니다. 예시) s return "1 2 3 4" "1 4" "-1 -2 -3 -4" "-4 -1" "-1 -1" "-1 -1" ❗아이디어 - 문자열을 배열로 바꾼 후 max와 min 값을 찾는다. function solution(s) { let answer = ''; const list = s.split(" "); let numbers = []; for (let i = 0; i < list.leng..

[Toy Project_ To Do List] 📜 토이 프로젝트 소개 📃 목적 : Typescript 연습 + React 기본 기술 복습 📃 기능 할일 추가, 삭제 완료 목록 체크 다크 모드 / 라이트 모드 항목 상태 별로 보여주기 (All, Active, Completed) 📃 사용 기술 : Typescript, React, PostCSS 📃 결과물 Typescript를 연습하면서 React도 기초부터 복습할 겸 To Do List를 만들어 보았다. Event Type을 지정하는 것과, ContextAPI를 이용하여 다크모드를 구현하는 과정에서 타입을 지정하는 부분에서 조금 시간이 걸렸다. Typescript를 조금 더 능숙하게 사용할 수 있도록 공부해야겠다. 👉To Do List 코드 전체보기👈 Gi..