끄적끄적 코딩
[React] 배열 값 동적 출력
React 2021. 1. 8. 05:45

// useTabs import { useState } from "react"; const useTabs = (initialTab, allTabs) => { const [currentIndex, setCurrentIndex] = useState(initialTab); if (!allTabs || !Array.isArray(allTabs)) {// 값이 없거나 배열이 아닌 경우 리턴 return; } return { currentItem: allTabs[currentIndex],// 두번째 파라미터의 배열 n번 인덱스 값 반환 changeItem: setCurrentIndex, // 해당 함수를 통해 n번 인덱스 수정 }; }; export default useTabs; // index.js import ..

article thumbnail
[React] Input
React 2021. 1. 8. 04:51

// useInput.js import { useState } from "react"; const useInput = (initialValue, validator) => { const [value, setValue] = useState(initialValue);// 첫번째 파라미터로 받은 값을 value에 입력 const onChange = (event) => {// 값이 변경된 경우 const {// 이벤트 객체에 담겨있는 현재의 텍스트 값을 value에 저장 target: { value }, } = event; let willUpdate = true; if (typeof validator === "function") {// 두번째 파라미터로 받은 값이 함수인 경우 willUpdate = validat..

[React] useState
React 2021. 1. 8. 04:00

useState란? 함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 Hooks의 기능 import React, { useState } from "react"; const [item, setItem] = useState("Hi"); console.log(item); setItem("Hello"); console.log(item); // Hi // Hello 다음과 같은 형식으로 useState를 사용합니다. const [ a, b ] = useState(c); a - 해당 변수 b - 해당 변수를 수정할 때 사용 c - default값

article thumbnail
[C++] 프로그래머스 - 문자열 압축
알고리즘 2021. 1. 1. 16:23

2020 KAKAO BLIND RECRUITMENT (2020 카카오 블라인드 채용 문제) 문자열 처리하는 문제입니다. 문자열이 주어지고 문자를 n단위로 자를 수 있을 때 최소길이를 구하여야 합니다. 문자열의 최대길이가 1000이므로 완전탐색으로 문제를 풀었습니다. 1개 단위로 자르기 2개 단위로 자르기 3개 단위로 자르기 ... n개 단위로 자르기 다음과 같은 순서로 문제를 해결하였습니다. 1. 연속 같은 문자의 처리, 연속하지 않은 문자 처리 2. 자르는 중 자를 수 없는 단위가 남은 경우 count에 추가 3. 연속해서 같은 문자가 나오는 경우 10의자리 100의자리 1000의 자리 처리해주기 4. 문자가 한글자인 경우 #include #include #include using namespace s..

article thumbnail
[JavaScript] 위치, 날씨 정보 가져오기
JavaScript 2020. 12. 23. 20:37

날씨 정보를 가져오기 위해 API를 사용. openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on global and local weather models, satellites, radars and vast network of weather stations. how to obtain APIs (subscriptions with di openweathermap.org 회원가입 - API keys 클릭 (아래 Key는 유효하지..

article thumbnail
[JavaScript] 배경이미지 설정
JavaScript 2020. 12. 23. 19:50

페이지를 들어갈 때마다 랜덤하게 배경이 바뀌는 것을 구현 //bg.js const body = document.querySelector("body"); const IMG_NUMBER = 5; function paintImage(imgNumber) { const image = new Image(); image.src = `images/${imgNumber + 1}.jpg`; // 가져올 image경로 지정 image.classList.add("bgImage"); // image에 bgImage 클래스 추가 body.appendChild(image); // body의 자식에 image추가 } function genRandom() { const number = Math.floor(Math.random() * ..

article thumbnail
[JavaScript] to do list 만들기 (localStorage)
JavaScript 2020. 12. 23. 18:15

toDoList를 작성해보려 합니다. 창을 새로고침해도 list가 남아있을 수 있게 localStorage를 사용합니다 js-toDoForm안의 input에서 입력된 값을 ul태그 안에 li태그로 한줄 씩 넣을 예정입니다. // todo.js const toDoForm = document.querySelector(".js-toDoForm"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.querySelector(".js-toDoList"); const TODOS_Ls = "toDos"; // TODOS_Ls는 로컬스토리지에 toDoList 변수명을 저장한 상수 let toDos = []; // toDos는 할일을..

article thumbnail
[JavaScript] localStorage 사용
JavaScript 2020. 12. 22. 23:16

웹 스토리지 - 로컬 스토리지 => 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않음 - 세션 스토리지 => 웹페이지의 세션이 끝날 때 저장된 데이터가 지워짐 input태그에 입력한 이름을 localStorage에 저장해보려 합니다 greeting.js에서 작업을 하려고 합니다. 호출해줍니다. // greeting.js const form = document.querySelector(".js-form"); const input = form.querySelector("input"); const greeting = document.querySelector(".js-greetings"); const USER_LS = "currentUser"; const SHOWING_CN = "showing"; functi..

검색 태그