스페이스 루미

프로그래머스 LV0 > 코딩테스트 입문 > 숨어있는 숫자의 덧셈(2) 문제: https://school.programmers.co.kr/learn/courses/30/lessons/120864#qna [문제해결] 1. 빈 array에 자연수만 넣어주면 되겠구나. 2. 인덱스 하나씩 비교했을떄, 다음에 오는 값이 숫자라면 묶어서 push한다. slice(start, end) 3. 빈 array일때 0을 리턴한다. (문제를 잘읽자) 4. array의 합을 구한다. function solution(my_string) { let array = [] for(let x=0; x acc += res) } array가 빈값이면 0을 리턴한다. 원본이 string임에 주의하여 숫자처리를 잘해준다. 코테를 풀면서 느끼는건..

프로그래머스 LV1 > 탐욕법(Greedy) > 체육복 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/42862# [문제해결] 1. 여벌의 체육복을 가져온사람꺼를 훔쳐갔을수도 있다. 두 배열을 비교해 중복을 제거해준다. splice()를 써주되, 원본이 바뀐다는 사실에 유념한다. 2. 두 배열을 정렬해준다. 3. 체육복을 빌려주면 각 array에서 제거한다(filter) 4. 최종적으로 총 인원에서 잃어버린 체육복의 갯수 lost.length를 빼준다. 실패한코드 function solution(n, lost, reserve) { reserve.forEach((el,i) => { if(lost.indexOf(el)!==-1){ lost.s..

프로그래머스 LV1 > 연습문제 > 문자열 내 마음대로 정렬하기 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/12915 [문제해결] 1. sort() 메서드로 정렬하면 되겠구나. 2. 비교할 대상이 같을때는 따로 반복돌아서 확인하면 되겠구나. ** 비교할 대상이 같을때는 반복 돌 필요 없이, 그냥 단어 통째로 비교하는게 좋다. 의식의 흐름대로 작성한 코드 function solution(strings, n) { strings.sort((a,b) =>{ if(a[n] b[n]){ return 1 }else{ for(let i=0; i b[i]){ // console.log(a[..

아웃룩이 string으로 통 html을 넘겨줘서 이걸 잘 그려야 했는데, 어떻게 파싱해야되지?? iframe으로 해야하나 고민하고 있었다. 그러던 와중 멘토님이 html-react-parser 라는게 있으니 참고하라고 알려주셨다. How to render HTML string in react? how to pick body contents html-react-parser? 등 어떻게 html 안에 또 html을 뿌려주냐 고민하다가 아 어차피 string인데.. 안쪽만 추출해서 파싱해주면 되겠다 싶어서 string을 자르는방법을 선택했다. 좋은방법인지는 모르겠으나 react의 dangerouslySetInnerHTML 보다는 낫다는 판단이다. import parse from 'html-react-parse..

프로그래머스 LV1 > 연습문제 > 기사단원의 무기 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/136798 [문제해결] 1. 약수는 n으로 나눈 나머지가 0인것으로 판단한다. 2. 약수의 갯수는 약수들을 배열에 넣고 배열의 길이로 계산했다. 3. 리밋에 걸리면 power을 더해주고, 안걸리면 그대로 더해준다. ** 타임아웃에 주의하며 약수구하는 시간을 어떻게든 줄여본다. 일단 의식의 흐름대로 작성했고. function solution(number, limit, power) { const divisors = []; // 약수의 갯수 순서 for(let i=1; i limit ? acc+=power : acc+=res return acc ..

프로그래머스 LV1 > 연습문제 > 옹알이2 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/133499 [문제해결] 1. 말할수있는것의 반복이 존재하면 제외시킨다. 2. 말할수있는것을 다른값으로 치환하면서 반복수행한다. (검증하기 편하게 빈값(' ')으로 치환했다) 3. 루프를 빠져나온 최종값이 빈값이면 카운트. ** 중간값부터 제거되어 말할수있는 단어가 만들어지는 상황을 주의한다. while(여기에 들어가는값을 자꾸 false로 넣어서) 무한루프에 빠졌는데, true이면 수행이다. while에서 참조하는값은 계속 바뀌는 값이여야한다. 단순 인덱스를 참조하는것이 아니라면, while문 내에서 원본(참조값)을 수정하는 작업이 필요하다. 다시..

프로그래머스 LV1 > 연습문제 > 콜라 문제 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/132267 [문제해결] 1. 루프 돌아 나오는 n의 합을 구하는 문제다. n의 값을 찾자. n = Math.floor(n/a)*b; 2. 나머지값을 찾아서 n에 추가해주는 작업을 반복. remain = n % a 처음에 몫이되는값을 일차방정식으로 풀다가 x값이 필요가 없겠네를 뒤늦게 깨달았다.....(n이 곧 x니까..) 항상 문제해결을 천천히 생각하고 풀자. 무작정 let부터 적지말자.. function solution(a, b, n) { // a 갖다주면,b병 줌, n개를 가져다줄때 몇병? // a가 n보다 크면 루프 중단. let answe..

프로그래머스 LV1 > 연습문제 > 삼총사 [문제해결] 1. 3중으로 순회돌면서합이 0이 되면 카운트를 올려준다. 연습문제 다운 문제였다. function solution(number) { let count = 0; for(let i =0; i

프로그래머스 LV1 > 연습문제 > 햄버거 만들기 [문제해결] 1. 순회하며 n, n+1, n+2, n+3 값이 1,2,3,4 가 되는지 확인한다. 2. 조건을 만족하면 splice(i, i+4) 해주면서 원본배열에서 1,2,3,4 를 날린다. 3. 햄버거 count를 1 추가한다. ** 메모리 낭비를 주의하며, 배열의 처음부터 다시 카운팅하지 않도록 한다. 루프 혹은 포문 돌려서 체크하면 되겠구나. 별로 안어렵네.... 라고 생각했으나... ingredients의 최대 갯수가 1,000,000개다. 일단 문제 흐름을 파악하고 코드를 짰다. function solution(ingredient) { const hamburger = '1231' let ingredientStr = ingredient.join..

프로그래머스 LV1 > 연습문제 > 푸드 파이트 대회 [문제 해결 흐름] 1. array + 0 + array.reverse() 형태로 만들고, 문자열로 바꾼다. 2. 첫번째 배열은 무조건 물 1개이므로 순회를 돌때 1번째 인덱스부터 돈다. 0번째 인덱스가 무조건 1인것을 가장 나중에 인지해서, 문제를 여러번 읽었다.. 문제를 잘 읽자. function solution(food) { let halfArray = [] for(let i=1; i

react-query 리액트 쿼리의 useQuery를 공부해보자. what is query? 쿼리란 무엇이냐.. 쿼리는 데이터베이스 테이블 or 테이블 조합의 데이터 or 정보에 대한 요청이다. 설치 및 세팅 리액트쿼리와 devtools를 설치해준다 yarn add @tanstack/react-query yarn add @tanstack/react-query-devtools QueryClientProvider로 라우터를 감싸주고, 안에 ReactQueryDevtools를 넣어준다. import { BrowserRouter } from "react-router-dom"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; im..

리액트 라우터 설정법을 알아보자 일단 react-router-dom v6를 설치해준다 yarn add react-router-dom v6 App.tsx의 BrowserRouter에 basename을 정해준다.(optional) basename은 url의 prefix를 설정한다. (/rumi-space로 지정하면 모든 router list의 url 앞에 /rumi-space가 붙는다.) import { BrowserRouter } from 'react-router-dom'; import Layout from 'pages/Layout'; import './App.css'; function App() { return ( ); } export default App; 네비게이션이나 header, footer를 고..

concatenates 는 연결하다라는 뜻이다. 사슬처럼 잇는 것을 의미한다. concat 메서드는, 호출한 배열뒤에 배열을 이어붙여 만들어진 새로운 배열을 리턴한다. (원본 배열을 수정하지 않는다) 인자를 생략하면 얕은 복사본을 반환한다. array.concat([arr1],[arr2],...[,arrN]); const array1 = ['a']; const array2 = ['b']; const array3 = [1, true] const obj = {key1:'123', key2:'test obj'} const result = array1.concat(array2,array3,'test string', obj); console.log(result); // Array ["a", "b", 1, true..

오름/내림 차순으로 배열을 정렬 해보자. sort 메서드를 사용하면 된다. sort는 구분하다 / 정리하다라는 뜻을가진 동사다. arr.sort((비교대상1, 비교대상2) => {} ) 파라미터가 없으면 문자열로 인식하여 유니코드 순으로 내뱉는다. sort 메서드는 원본을 수정하기때문에 복사를 해서 사용하도록 한다. const arr = [1,22,13,32,19] arr.sort(); console.log(arr); // [1,13,19,22,32] 정렬 기준은 리턴값이 양수냐 음수냐 0이냐에 따라 바뀐다. 음수값이 나오면 a가 b보다 앞에 위치하도록 정렬한다. 양수값이 나오면 b가 a보다 앞에 위치하도록 정렬한다. 결과값이 0이면 위치를 바꾸지 않는다. const arr = [1,22,13,32,19..

include 말그대로 포함한다. 배열에 특정 값을 가지고 있는지 확인할때 사용한다. 그럼 객체에 키값이 있는지 확인해보도록 하자. Array.includes(찾는값, 시작 인덱스) 시작 인덱스는 옵션이고 default가 0이다 const data = { company: { id: 1, name: "rumi space", type: "private", no: "001-25-103-12", ceo: "ray", condition: "R & D", address: "pangyo 12", lastModifyDate: "2022-08-09T04:00:34.356761Z", }, }); console.log("company에 type 존재하니?", Object.keys(data.company).includes("..

그간 디자인을 해오면서 사용했던(방문했던) 유용한 것들을 기록차원에서 아카이빙. 계속 추가하거나 삭제 예정. 모음 디자인 레퍼런스 - 모바일 UXUI 디자인 레퍼런스 (https://screenlane.com/) Screenlane Only the best mobile and web UI design inspiration, right in your inbox screenlane.com - 모바일 UXUI 디자인 레퍼런스 (https://mobbin.com/browse/ios/apps) Browse iOS Apps | Mobbin - The world’s largest mobile app design reference library Browse and search across hundreds of iOS ..

컴포넌트에 width값을 받아 min, max width를 지정해주는 컴포넌트를 만들수도 있다. 굳이 컴포넌트까지 만들지 않으려면 mixin을사용하여 클래스를 만들어주자. @mixin minmax-classes { @for $i from 50 through $minmax-width { $value: $i * 1px; .minmax#{$i} { min-width: $value; max-width: $value; width: $value; } } } @include minmax-classes; width, min-width, max-width 값이 200으로 들어간다. 생각보다 많이 사용하게되므로 만들어두면좋다. 사용 인덱스 영역

@font-face src에 여러개의 폰트포맷을 작성할 수 있다. 영문, 한글, 숫자 별로 폰트를 다르게 지정하고싶을때는 unicode-range를 추가해준다. 여러개를 추가할때는 , 로 추가한다. 폰트포맷은 웹 최적화 경량폰트인 woff2 or woff 를 사용한다. @font-face { font-family: "Apple SD Gothic Neo"; src: url("../fonts/AppleSDGothicNeoR.woff2") format("woff2"), url("../fonts/AppleSDGothicNeoR.woff") format("woff"); font-weight: 400; font-style: normal; } @font-face { font-family: "Apple SD Gothi..

타입설정과 useState list들의 타입을 정해주고, map 돌릴 list state와 새로 추가할 newTodo state를 만들어준다. type Lists = { id:number, title:string, checked:boolean, } ... const [list, setList] = useState([]); const [newTodo, setNewTodo] = useState({ id: new Date().getTime(), title: "", checked: false, }); Mark up 볼만하게 커스터마이징을 해준다. 추가 {list.map((item, index) => { return ( onCheckboxClick(index)} /> {item.title} removeList(i..

[2022.01.05] 훅 정리 다시 하면서 한번더 정리해보는 useEffect useEffect(()=>{ 함수() }) // 렌더링 될 때마다 함수 실행 useEffect(()=>{ 함수() },[]) // 처음 렌더링 될때만 함수 실행 useEffect(()=>{ 함수() },[함수]) // 디펜던시 값이 변경될 때마다 실행 useEffect(()=>{ return()=>{ // clean up(정리) // 해당 컴포넌트가 unMount 될때, 다음 렌더링 될 useEffect가 실행되기 전에 실행 } },[]) clean up 예제 function App(){ ... return ( {state && } ) } ... function Interver(props){ useEffect(()=>{ co..

리스트를 추가하고 클릭시 제거하는 UI를 만들어보자. (TODO LIST를 만들어보자~~!) useState 현재 책 리스트를 담을 books Array와, 새로운 book Object를 초기값으로 넣어준다. id는 유니크한 값으로 넣어준다. Book은 id, title, author을 가지고있다. const [books, setBooks] = useState([ { id: 1, title: "1984", author: "George Orwell" }, { id: 2, title: "Lord of the Flies", author: "William Golding" }, { id: 3, title: "Catcher in the Rye", author: "J.D Salinger" }, ]); const [b..

useState 안에는 초기값을 적어준다. (객체, 원시타입 등이 올 수 있다.) setter함수를 사용하여 객체를 변경할때는 임시의 복사본을 만들어 새로운 객체를 넣어준다. Hook const [form, setForm] = useState({ nickname: "", description: "", }); const onChangeInputForm = (e: React.ChangeEvent) => { const { name } = e.target; const formTemp = { ...form, [name]: e.target.value }; setForm(formTemp); }; 두개의 인풋을 하나의 함수로 변경하기위해 각각의 input에 name attribute를 지정해준 뒤, e.target에서..

some 하나라도 만족하는지 알아보자. 하나라도 true면 true 98보다 큰게 있냐? 네! const newArray = [1,2,3,4,5,6,7,8,9,99]; const isCorrect = newArray.some(item => item > 98); console.log(isCorrect); // true every 모든 조건이 만족하는지 알아보자. 하나라도 false면 false 모두 100보다 작냐? 네! const originArray = [1,2,3,4,5,6,7,8,9,99]; const isCorrect = originArray.every(item => item < 100); console.log(isCorrect); // true

컬러 변수화를 어떻게 할 것인지를 정하기 전에 먼저 프로젝트 디자인에 사용된 컬러종류가 얼마나 되는지를 파악한다. 컬러 종류를 파악한다음 opacity값을 사용했는지, 각 컬러의 분류가 단계별로 증감되는 형식인지(그라데이션 팔레트를 사용했는지)에 따라 나누는 편이다. 그라데이션 팔레트를 사용했다면 scss의 map-get을 사용하고, 그렇지 않고 종류가 많지 않다면 일반변수로 정의한다. --root를 사용하는 방식도 있지만 개인적으로는 선호하지 않으므로 생략 변수화하기 (컬러값의 종류가 많지 않을때) $black:#000000; $white:#FFFFFF; $primary-black-1: #121212; $primary-black-2: #999999; $primary-black-3: #E0E0E0; $p..

!! 느낌표 두개는 JS에서 어떻게 사용될까? !!undefined //false !!"" // false !!null // false !!0 // false // 그 외 true !는 부정이고, !!부정의 부정은 긍정이다. 확실한 boolean 결과를 얻기위해 사용한다.

HTTP 프로토콜은 통신(Request, Response)이 끝나면 연결 상태를 유지하지 않는다. 따라서 서버는 누가 요청을 보냈는지, 유효한 사용자인지 매번 확인해야한다. 쿠키와 세션 쿠키는 로컬브라우저에 저장되는 key, value 쌍의 작은 기록 정보 파일이다. 세션ID를 담아 전달하는 도구라 생각하자. 유효시간을 명시 할 수 있고, 브라우저를 닫아도 로컬 브라우저에 저장된 클라이언트의 정보를 참조하기 때문에 인증이 유지된다. Response Header에 Set-Cookie 속성을 사용하면 클라이언트에서 쿠키를 만들 수 있다. 사용자 인증정보를 클라이언트가 가지고 있으므로 보안에 취약하다. 쿠키와 세션을 이용하면 현재 몇명, 누가 로그인했는지를 판단할 수 있다. 1. 클라이언트가 웹사이트에 접속하..

인라인 클래스로 많이 사용하는 기본적인 클래스들을 정의해두자 나머지는 자주쓰는 클래스들은 mixin에서 생성해준다. .w-100 { width: 100%; } .w-fit { width: fit-content; } /* display 속성과 flex */ .d-none { display: none; } .d-block { display: block; } .d-flex { display: flex; } .flex-row { display: flex; flex-direction: row; } .flex-start { display: flex; align-items: flex-start; } .flex-center { display: flex; align-items: center; } .flex-end { d..

find callback함수가 참을 반환할때까지 실행하고, 참을 만나면 첫번째 요소를 반환한다. 조건에 만족하는 요소를 찾지 못하면 undefined를 반환한다. 원본 배열을 변경시키지 않는다. array.find((item, index, array) => 조건) const originArray = [{ name:'rumi', phone:'android', state:true },{ name:'ray', phone:'ios', },{ name:'pink', phone:'LG', state:true }] const result = originArray.find(item => item.state); // 요소에 state값이 있는 것 찾기 console.table(originArray) // 원본 배열을 m..

css를 초기화 해주자. 초기화 코드는 정답이 없고, 가장 많이쓰고 유명한 에릭마이어의 reset code를 사용해도 된다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter meyerwe..

적재적소에 필요한 메서드를 떠올리고 응용법을 생각해내기 위해 Javascript 메서드를 한번씩 정리하면서 몰랐던 부분까지 한번씩 체크해보도록 하자. 쉽게 기억할수있도록 어원과 뜻을 정확히 알고 넘어가자. ( 메서드명이 너무 명확해서 어원이랄게 있나?싶긴하다.) 한번씩 정리하고 링크걸기. Array [Javascript] for, forEach, for in, for of, map으로 반복 수행하기 for 단순 반복실행 요소와 index 값을 사용하여, 증가 혹은 감소하면서 순차적 실행한다. 원하는 결과가 나오면 break; 로 중단할수 있다. const forArray = [1, 3, 5, 7]; const forNewArray = []; for (let i =.. space-rumi.tistory.c..