스페이스 루미

스코프(scope)는 식별자의 유효범위다. 스코프가 계층되어 연결되어있는걸 scope chain 이라고 하는데, JS엔진은 변수를 참조할때 상위스코프로 이동하며 가장 가까운 변수를 검색한다. 렉시컬스코프 lexical scope lexical은 어휘의, 사전의 라는 뜻을 가지는데, 사전(辭典)은 어휘를 정의해놓은 책이다. 함수를 어디에 정의했는지에 따라 스코프를 결정한다. 정적(static) 스코프라고도 한다. JS는 렉시컬 스코프를 따른다. 함수의 상위스코프는 자신이 정의된 스코프다. (함수 선언문으로 정의하면 런타임 이전에 함수객체가 먼저 생성된다.) 변수의 생명주기 지역변수는 함수가 생성한 스코프에 등록된다. 지역변수는 이 스코프가 소멸될때까지 유효하다. 따라서 지역변수의 생명주기는 함수의 생명 주..

프로그래머스 LV1 > 연습문제 > 소수 찾기 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/12921 [문제해결] 1. 매개변수 n의 제곱근을 이용해 접근 (시간복잡도 O(N)이라 가장 빠름) 2. 반복문 돌려서 소수 판단하여 갯수를 리턴한다. function solution(n) { let primeList = [] const isPrime = (num) => { // 제곱근을 이용해 소수인지 판단하는 if(num < 2) return false; if(num == 2) return true; for(let i=2; i

프로그래머스 LV1 > 연습문제 > 숫자 짝꿍 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/131128 [문제해결] 1. 들어올수있는 X, Y의 자연수값이 매우 크니까 이중포문 돌려서 비교하면 시간초과 뜬다. 2. X와 Y의 들어있는 값이 몇개고 몇개 중복인지 x와 y 배열에 담는다. 3. x와 y의 값을 비교하면서 최소값을 추출한다. (만들수있는 짝꿍수 = 작은값) 4. 상황에 따라 리턴값 예외처리 해준다. 이중포문 돌리다가 시간초과 떠서 다른방법을 생각했다. function solution(X, Y) { let answer = '' let double = [] let x = Array(10).fill(0) // 0~9까지니까 let ..

함수 函數 지닐 함에 셈수를 쓴다. 함이 상자같은걸로 생각하면 편한데, 암튼 상자에 x y 를 넣으면 아웃풋이 뭔가 나오지않는가? 수학적으로 말하자면 Input을 받아 Output을 내보내는 과정이다. 값의 성질을 가진 객체를 일급객체라하는데, JS에서 함수는 일급객체다. 함수를 값처럼 쓸수있다는 뜻이다. 함수는 객체 타입의 값이라서, 변수에 함수리터럴을 할당할수있다. 함수 표현식 함수는 함수이름으로 호출하는것이 아닌, 객체를 가리키는 식별자로 호출한다. let multi = function multipulate(x,y){ // 기명 함수 표현식 return x * y; } multi(3,5) // 15 multipulate(3,5) // Uncaught ReferenceError: multipulate..

프로그래머스 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..

객체 客體 객체란 무엇이냐.. (손 객에 몸체 자를 쓴다) 사전적 정의로는 '실제 존재하는 것' 인데 나는 이걸, 다양한 속성을 가지고있는 '무언가' 같은거라고 이해했다. 추상적인 개념도 객체로 표현될수 있으니깐. 컴퓨팅 정의로는 '실제 메모리에 할당되어 존재하는 것' 이라고 한다. 객체는 property의 집합이다. 객체 리터럴의 프로퍼티는, key, value로 구성된다. let myPhone = { model: 'Zplip3', // key: value uniqueness: '이 폰은 반으로 접힌다' // key: value } 자바스크립트에서 원시값을 제외한 모든것은 객체다. 배열도 객체라 볼수있고, 함수도 객체라 볼수있다. let empty = {}; // 중괄호는 코드블럭이 아니다. 따라서 뒤..

string으로 암묵적 변환 0 + '' // '0' [10, 20] + '' // '10, 20' number로 암묵적 변환 '1' * 10 // 10 정말 이상한것은 '0'은 false인데 truthy한 값으로 평가된다니 이게 무슨말인가..? '0' == false // true. ('0'은 false다) !'0' // false (..?) !!'0' // true (..???) 아래 참조 표를 보면, "0"은 비어있는 문자열이 아니기때문에 truthy한 값으로 평가된다. 이런게 js의 괴랄한 점... 빈 문자열에 아무튼 0이 있다.. js equality 확인 사이트 https://dorey.github.io/JavaScript-Equality-Table/ js의 falsy 값은 기억하도록 하자. ..

프로그래머스 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 ..

switch case 언제 if else 쓰고 언제 switch를 써야되지? switch의 case에는 상수만 올수있다. 변수와의 비교가 불가능하다는 얘기.. 비교대상이 '상수'면 switch를 쓰고, 일반적으로는 if문을 쓴다. 구현했을때 가독성이 더 좋을것으로 판단되는걸로 쓴다. 틀린코드 let score = 50; switch (score){ case score >= 0 && score =50 && score = 90: console.log('수석'); break; default: console...

단항산술연산자 증가/감소(++/--) 피연산자의 값을 변경하는 부수효과가 있다. x++; // x = x + 1; 와 같다 1 + true // 2 숫자와 다른값을 산술할때는 암묵적 타입 변환 또는 타입 강제 변환 이 일어날 수 있다. 할당 연산자 x+=5 //x = x+5 x *= 5 //x = x*5 let str = 'i am...' str += 'rumi' //str = str + 'rumi' //i am...rumi 동등/일치 비교 연산자 == 동등 비교 (값이 같음) === 일치 비교 (값과 타입이 같음) != 부동등비교 (값이 다름) !== 불일치 비교 (값과 타입이 다름) 5 == '5' // true NaN === NaN // false 가급적 === 를 쓰자!! 0 == -0 //tru..

프로그래머스 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..

자바스크립트에서 var을 쓰지말아야 하는 이유는? var은 함수 레벨 스코프를 지원하므로 의도치않게 전역적으로 선언 될 수 있으므로 let이나 const를 사용한다. let과 const는 ECMA2015(ES6)부터 추가된 스펙으로 블록스코프를 지원한다. let score; // 변수 선언. let score = undefiend;와 같다 score = 100; // 값의 할당 const test; // Err Missing initializer in const declaration const test = 'test'; // 상수 선언은 값의 할당과 같이써야한다. 1. score을 가리키는 메모리 공간에 undefiend가 할당되고 2. 값을 할당하면 다른 메모리 공간에 100이 할당되고 이 주소를 가리..

프로그래머스 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를 고..

[우선순위] 1. 개발능력 상승. CS, JS, React 공부. 코딩테스트 연습. 2. PinkSpider 팀 프로젝트. (RPM 앱개발 프로젝트) 3. COLD FLOWER 프로젝트. 창작, 글쓰기 확신의 말 & 마음가짐 오늘 아주 좋은 일이 생길것 같다. 나는 뭐든지 할수있다. 나는 무엇이든 가능하다. 나의 정체성은 창작자이다. 나는 내가 만들고자 하는 모든 것을 만들 수 있다. 나는 내 존재의 이유를 안다. 그것은 세상에 좋은 영향력을 주는것을 창조하는것이다. 일을 사랑하라. 일을 사랑한다는것은 인생을 사랑한다는 것과 같다. 자기 일을 스스로 어떻게 받아들이는지가 가장 중요하다. 피치못하게 해야하는 일을 마지못해서 할 것인지, 즐거운 마음으로 할 것인지 결정하라. 내가 원하는 결과를 얻을 때까지 ..

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..