전체 글

[ JS ] LocalStorage, SessionStorage, Cookie 다루기

🔴 LocalStorage & SessionStorage [JS] 📚 LocalStorage / SessionStorage 정리 (vs 쿠키) LocalStorage / SessionStorage API 소개 html5에서는 좀 더 쉽고 간단한 저장소 제공을 위해 새로운 localStorage와 sessionStorage API를 제공한다. 둘 다 저장 공간으로 사용할 수 있는데 이 둘의 가장 큰 차.. inpa.tistory.com 🟠 Cookie [JS] 📚 쿠키(Cookie) 🍪 다루기 선행 학습 [WEB] 🌐 쿠키 / 세션 정리 비연결성(Connectionless)과 비상태성(Stateless) HTTP 프로토콜에는 비연결성(Connectionless)과 비상태성(Stateless)이라는 특징이 ..

[ JS ] Base64 / Blob / ArrayBuffer / File 다루기

[JS] 📚 Base64 / Blob / ArrayBuffer / File 다루기 - 이해하기 쉽게 설명 웹 개발을 진행하다 보면 이진 데이터를 다루어야 할 때를 간혹 마주칠 수 있다. 브라우저에선 주로 파일 생성, 업로드, 다운로드 또는 이미지 처리와 관련이 깊고, 서버 사이드인 node.js 에선 파 inpa.tistory.com

[ 1단계 ] 두 개 뽑아서 더하기

🔴 문제 설명 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요. 🟠 제한 사항 numbers의 길이는 2 이상 100 이하입니다. numbers의 모든 수는 0 이상 100 이하입니다. 🟡 입출력 예 number result [2,1,3,4,1] [2,3,4,5,6,7] [5,0,2,7] [2,5,7,9,12] 🟢 입출력 예 설명 입출력 예 #1 2 = 1 + 1 입니다. (1이 numbers에 두 개 있습니다.) 3 = 2 + 1 입니다. 4 = 1 + 3 입니다. 5 = 1 + 4 = 2 + 3 입니다. 6 = 2 + 4 입니다. 7 =..

[ 1단계 ] 로또의 최고 순위와 최저 순위

🔴 문제 설명 로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다. 순위당첨 내용 1 6개 번호가 모두 일치 2 5개 번호가 일치 3 4개 번호가 일치 4 3개 번호가 일치 5 2개 번호가 일치 6 (낙첨) 그 외 로또를 구매한 민우는 당첨 번호 발표일을 학수고대하고 있었습니다. 하지만, 민우의 동생이 로또에 낙서를 하여, 일부 번호를 알아볼 수 없게 되었습니다. 당첨 번호 발표 후, 민우는 자신이 구매했던 로또로 당첨이 가능했던 최고 순위와 최저 순위를 알아보고 싶어 졌습니다. 알아볼 수 없는 번호를 0으로 표기하기로 하고, 민우가 구매한 로또 번호 6개가 44, 1, 0, 0, 31 25라고 가정해보겠습니..

[ 1단계 ] 체육복

🔴 문제 설명 점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번호의 학생이나 바로 뒷번호의 학생에게만 체육복을 빌려줄 수 있습니다. 예를 들어, 4번 학생은 3번 학생이나 5번 학생에게만 체육복을 빌려줄 수 있습니다. 체육복이 없으면 수업을 들을 수 없기 때문에 체육복을 적절히 빌려 최대한 많은 학생이 체육수업을 들어야 합니다. 전체 학생의 수 n, 체육복을 도난당한 학생들의 번호가 담긴 배열 lost, 여벌의 체육복을 가져온 학생들의 번호가 담긴 배열 reserve가 매개변수로 주어질 때, 체육수업을 들을 수 있는 학생의 최댓값을 return 하도록 solution 함..

[ 1단계 ] 크레인 인형뽑기 게임

🔴 문제 설명 게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. "죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 "1 x 1" 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게 되는 ..

[ 1단계 ] 모의고사

🔴 문제 설명 수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다. 1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ... 2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ... 3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, ... 1번 문제부터 마지막 문제까지의 정답이 순서대로 들은 배열 answers가 주어졌을 때, 가장 많은 문제를 맞힌 사람이 누구인지 배열에 담아 return 하도록 solution 함수를..

[ Git ] Information

🔴 branch [GIT] ⚡️ Branch 정리 (git branch / checkout / switch / merge / rebase) Git Branch(브랜치) 란? SW를 개발할 때, 깃의 브랜치기능을 활용한다면 같은 팀끼리 작업 프로젝트를 공유하고 같이 작업할 수 있도록 해준다. 또 혼자서 작업하더라도 여러 버전을 만들어 놓을 때, inpa.tistory.com branch는 특정 commit에 대한 참조이기 때문에 branch를 많이 만들어도 메모리나 디스크 공간에 부담이 되지 않는다. 따라서, 작업을 커다란 branch로 만들기보다는 작은 단위로 잘게 나누는 것이 좋다. branch는 "하나의 commit과 그 부모 commit들을 포함하는 작업 내역"이라고 기억하자. option // 현..

[ React ] react-hook-form

🔴 Introduction ⚪ form의 validation을 도와주는 라이브러리 🟠 Official 시작하기 Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com 🟡 Install npm i react-hook-form 🟢 Usage import "./styles.css"; import { useForm } from "react-hook-form"; export default function App() { const { register, // input에 react-hook-form 등록 handleSubmit, // register에 등록된 input 데이터를 form에서 처리할 함수 form..