티스토리

Howdy

검색하기

블로그 홈

Howdy

kim-mj.tistory.com/m

hi_mj 님의 블로그입니다.

구독자: 5

방명록 방문하기

주요 글 목록

글또 6기를 시작하며 필자는 예전부터 글로 생각을 정리해 온 편이다. 개발 공부를 시작하면서 전보다 더 자주 작성하게 되었다. 그런데 막상 예전에 썼던 글을 보면 '이게 무슨 말이지?', '코드를 왜 이렇게 짰지?'라는 생각이 든다. 아마 누군가에게 보여주기 보다는 단순히 그때 나의 상황을 기록하는데 바빴기 때문인 것 같다. (특히 티스토리는 개발 공부 막 시작했을 때 작성했던 거라 부족한 점이 더 많이 보인다. 지금은 기술블로그에 작성하고 있다.) 그 후로 내가 정확하게 모르거나, 설명이 좀 부족한 곳에는 '추후 수정', '궁금한 것' 등의 표시를 남겨놓았다. 정말 너무나 감사하게도 댓글로 피드백을 주시는 분들이 계셔서, 수정한 글도 있다. 하지만 여전히 아직 많이 부족하다. 새 글을 작성할 때면 예전보다 조금이라도 더 쉽.. 공감수 7 댓글수 0 2021. 7. 24.
JS 100제 - 1권 (Q1~) JS 100제 문제 1: 배열의 삭제 다음 배열에서 400, 500를 삭제하는 code를 입력하세요. var nums = [100, 200, 300, 400, 500]; 풀이 1 const result = nums.filter((num) => num !== 400 && num !== 500) console.log(result) // output: [100, 200, 300] // 혹은 nums.pop() nums.pop() console.log(nums) // output: [100, 200, 300] 공감수 0 댓글수 0 2020. 12. 11.
[JS] Format a string of names like 'Bart, Lisa & Maggie'. www.codewars.com/kata/53368a47e38700bd8300030d/train/javascript [ 문제 ] Given: an array containing hashes of names Return: a string formatted as a list of names separated by commas except for the last two names, which should be separated by an ampersand. Example: list([ {name: 'Bart'}, {name: 'Lisa'}, {name: 'Maggie'} ]) // returns 'Bart, Lisa & Maggie' list([ {name: 'Bart'}, {name: 'Lisa'} ]) //.. 공감수 0 댓글수 0 2020. 11. 21.
[JS] Human Readable Time www.codewars.com/kata/52685f7382004e774f0001f7/train/javascript [ 문제 ] Write a function, which takes a non-negative integer (seconds) as input and returns the time in a human-readable format (HH:MM:SS) HH = hours, padded to 2 digits, range: 00 - 99 MM = minutes, padded to 2 digits, range: 00 - 59 SS = seconds, padded to 2 digits, range: 00 - 59 The maximum time never exceeds 359999 (99:59:59) Yo.. 공감수 0 댓글수 0 2020. 11. 15.
[JS] Vowel Count www.codewars.com/kata/54ff3102c1bad923760001f3/train/javascript [ 문제 ] Return the number (count) of vowels in the given string. We will consider a, e, i, o, u as vowels for this Kata (but not y). The input string will only consist of lower case letters and/or spaces. [ 풀이 ] 2020.11.14 (5min) function getCount(str) { var vowelsCount = 0; for (n in str) { if (str[n].includes('a') || str[n].include.. 공감수 0 댓글수 0 2020. 11. 14.
[JS] Stop gninnipS My sdroW! 문제 Write a function that takes in a string of one or more words, and returns the same string, but with all five or more letter words reversed (Just like the name of this Kata). Strings passed in will consist of only letters and spaces. Spaces will be included only when more than one word is present. Examples: spinWords( "Hey fellow warriors" ) => returns "Hey wollef sroirraw" spinWords( "This is.. 공감수 0 댓글수 0 2020. 11. 13.
[JS] Regex validate PIN code www.codewars.com/kata/55f8a9c06c018a0d6e000132/train/javascript [ 문제 ] ATM machines allow 4 or 6 digit PIN codes and PIN codes cannot contain anything but exactly 4 digits or exactly 6 digits. If the function is passed a valid PIN string, return true, else return false. Examples: "1234" --> true "12345" --> false "a234" --> false [ 풀이 ] 2020.11.12 (1hour) function validatePIN (pin) { const num =.. 공감수 0 댓글수 0 2020. 11. 12.
[JS] Who likes it? www.codewars.com/kata/5266876b8f4bf2da9b000362/train/javascript [ 문제 ] You probably know the "like" system from Facebook and other pages. People can "like" blog posts, pictures or other items. We want to create the text that should be displayed next to such an item. Implement a function likes :: [String] -> String, which must take in input array, containing the names of people who like an item. .. 공감수 0 댓글수 0 2020. 11. 11.
[JS] Mumbling 문제 This time no story, no theory. The examples below show you how to write function accum: Examples: accum("abcd") -> "A-Bb-Ccc-Dddd" accum("RqaEzty") -> "R-Qq-Aaa-Eeee-Zzzzz-Tttttt-Yyyyyyy" accum("cwAt") -> "C-Ww-Aaa-Tttt" The parameter of accum is a string which includes only letters from a..z and A..Z. 내 풀이 2020.11.10 (20m) function accum(s) { let result = '' for (i in s) { for (let j = 0; j 공감수 0 댓글수 0 2020. 11. 10.
[JS] Is this a triangle? [ 문제 ] Implement a method that accepts 3 integer values a, b, c. The method should return true if a triangle can be built with the sides of given length and false in any other case. (In this case, all triangles must have surface greater than 0 to be accepted). [ 내 풀이 ] 2020.10.30 (10m) function isTriangle(a, b, c) { const sortArr = [a, b, c].sort() if (sortArr[2] < sortArr[0] + sortArr[1]) retur.. 공감수 0 댓글수 0 2020. 11. 7.
[JS] Isograms 문제 An isogram is a word that has no repeating letters, consecutive or non-consecutive. Implement a function that determines whether a string that contains only letters is an isogram. Assume the empty string is an isogram. Ignore letter case. isIsogram('Dermatoglyphics') == true isIsogram('aba') == false isIsogram('moOse') == false // -- ignore letter case 내가 푼 방식 2020.10.30 (15m) function isIsog.. 공감수 0 댓글수 0 2020. 11. 6.
[자바스크립트/Lv1] 제일 작은 수 제거하기 https://programmers.co.kr/learn/courses/30/lessons/12935 [ 문제 ] 더보기 문제 설명 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다. 제한 조건 arr은 길이 1 이상인 배열입니다. 인덱스 i, j에 대해 i ≠ j이면 arr[i] ≠ arr[j] 입니다. 입출력 예 arr return [4,3,2,1] [4,3,2] [10] [-1] [ 풀이 ] 2020.06.21 function solution(arr) { va.. 공감수 0 댓글수 0 2020. 6. 21.
styled component, emotion 소개 SASS(or CSS)로 스타일링을 할 경우, 나중에 많은 컴포넌트를 유지보수하기에는 시간이 너무 오래 걸린다. 또한 다른 개발자가 해야할 경우 어느게 어떤 것인지 바로 찾기가 쉽지 않다. 때문에 개발자들은 더 효율적으로 코딩을 하기 위해 최근 css-in-js 스타일링 방식인 styled component와 emotion을 사용하고 있다. 두 가지 모두 자바스크립트 파일 안에 CSS를 작성하는 형태로 차이점이 엄청 크지 않다. Styled Component 홈페이지: https://styled-components.com/ 설치 npm install --save styled-components 사용법 emotion 홈페이지: https://emotion.sh/docs/introduction 설치 npm .. 공감수 0 댓글수 0 2020. 6. 3.
Styled Component로 반응형 구축하기 반응형을 하려면 매번 @media (min-width: 770px) {}을 써줘야 한다. 하지만 만약 이걸 써야하는 컴포넌트가 엄청 많고, 한 컴포넌트 안에서도 내용이 많다면 이를 하나하나 치기에 번거롭고, 치다가 오타가 나서 이를 찾는데 오래 걸릴 수 있다. 따라서 전역에서 사용가능한 theme.js를 만들어 주는 것이 편하다. src > style > theme.js 어느 width에서 바뀔 것인지에 대한 break-point가 될 size에 정의해두고, theme안에 해당 사이즈로 @media안에 들어갈 내용을 정의해준다. 그 다음, 만들어진 theme.js를 전역에서 사용가능하게 index.js(혹은 메인)에 감싸준다. import { ThemeProvider } from "styled-compo.. 공감수 17 댓글수 2 2020. 5. 21.
같은 배열 요소 찾기 (forEach) 배열은 참조타입으로 안의 요소가 같더라도 참조하는 메모리가 다르기 때문에, 아무리 우리 눈에 똑같아 보일지라도 바로 비교할 경우, 무조건 false가 뜬다. var arr1 = [1, 2, 3]; var arr2 = [1, 2, 3]; console.log(arr1 === arr2); // output: false 반면 원시타입은 바로 값의 비교가 가능하다. var arr1 = "1"; var arr2 = "1"; console.log(arr1 === arr2); // output: true (다른 글: 2020/02/07 - 원시타입, 참조타입 차이점) 따라서 배열의 각 요소(element)가 같은 값인지 직접적으로 비교해줘야 한다. 우선 배열 안의 값을 비교하는 코드를 먼저 보자. var arr1 =.. 공감수 0 댓글수 0 2020. 5. 18.
웹 동작 원리 (SPA, CSR, SSR) SPA는 웹 개발을 하다보면 한 번쯤 보는 단어이다. SPA란 Single Page Application의 약자로, 단 하나의 HTML 문서로만 돌아가는 웹페이지로 사용자의 요청(request)에 따라 내용이 동적(dynamic)으로 바뀐다. 더 정확한 이해를 위해 정적인 사이트와 동적인 사이트에 대해 알아보자. 정적인 사이트 (Static Website) 동적인 사이트 (Dynamic Website) 서버에 미리 저장된 파일(HTML, CSS, JavaScript 등)이 그대로 전달되는 사이트 서버에 있는 데이터를 가공처리 후 전달되는 사이트 항상 같은 내용을 보여줌 실시간으로 데이터가 변경됨 ex. 회사 홈페이지 ex. Youtube 추천 영상 예전에는 대부분 정적인 사이트였지만, 요새 데이터가 점점.. 공감수 3 댓글수 0 2020. 5. 14.
Git & GitHub (4) - rebase 같이 협업하는 사람이 몇 없다면 굳이 rebase를 쓰지 않아도 되지만, 팀 단위가 몇 백명 이상이 됐을 때 각자 commit을 2-3개만 날려도 검토해야 할 것이 수백개로 늘어나도 merge 할 때마다 commit이 새로 쌓인다. 따라서 git의 history를 깨끗하게 사용하기 위해 rebase가 필요하다. rebase ㅁ base: 기초, 기본 ㅁ re-base: 기초를 다시 세우다 => 현재 내 branch를 master와 동일시 하고(같은 base 사용), commit을 하나로 합치는 작업이다. 단점이 있다면 conflict가 엄청 많이 난다. 각 commit 마다 생기는 conflict를 단계적으로 해결해야 하고, 잘 못하다간 내가 썼던 코드가 통째로 없어져 버릴 수 있으니 충분히 숙련 후 사.. 공감수 0 댓글수 0 2020. 5. 12.
배열에서 중복 제거하기(Set) 가끔 중복을 제거해야 하는 상황이나 알고리즘 문제가 있다. 예전이라면 for문 돌려서 찾은 다음에 제거했을 텐데 Set이라는 것을 알게 되었다. 사용법은 무척 간단하다. let num = [2, 1, 3, 21, 3, 4, 5, 1, 2]; let uniqueNum = [...new Set(num)] console.log(uniqueNum) // output: [2, 1, 3, 21, 4, 5] let str = ['a', 'b', 'c', 'a', 'd'] let uniqueStr = [...new Set(str)] console.log(uniqueStr) // output: ["a", "b", "c", "d"] 위처럼 Set은 숫자, 문자 배열에서 모두 가능하다. 우선 아래의 코드를 살펴보자. let.. 공감수 0 댓글수 0 2020. 5. 11.
Redux 소개 (1) - 필요성 리덕스(Redux)는 Flux archiecture를 만드는 '상태관리' 라이브러리이다. 컴포넌트끼리 데이터 및 스테이트 관리를 쉽고 효율적으로 해줄 수 있게 만들어준다. 우선 간략하게 MVC에 대해 알아보자. MVC는 Model View Controller의 약자로 애플리케이션을 세 가지의 역할로 구분한 개발 방법론이다. 사용자가 Controller를 조작하면, Controller는 Model을 통해서 데이터를 가져오고 그 정보를 바탕으로 View가 시각적 표현을 담당해서 사용자에게 전달해 준다. React는 MVC를 모두 담당하는 Angular와 Vue와 달리 오직 View를 담당하고 있다. 프로젝트의 규모가 작을 때에는 부모 컴포넌트(ex. APP.js)가 중간자 역할을 해주는 것에 아무런 지장이 .. 공감수 0 댓글수 0 2020. 5. 6.
Object (3) - 접근법 예전 글(2020/03/25 - Object (1) - 접근, 할당)에서 Object 접근 방법에 대해 쓴 적이 있다. 해당 글에서는 객체의 키 이름으로 직접적인 접근을 했다. 하지만 만약 어떠한 이유로 객체의 모든 key나 value에 한번씩 접근해야 한다면 어떻게 해야 할까? 객체 값 모두를 하나하나 찍어보기엔 시간이 너무 오래 걸린다. 정말 다행히 객체는 배열처럼 반복할 수 있다. 우선 객체의 key와 value에 어떻게 접근하는지 살펴보자. const obj = { name: 'kmj', age: 17, gender: 'female', likeMovies: true } console.log(Object.keys(obj)); // output: ["name", "age", "gender", "lik.. 공감수 0 댓글수 0 2020. 5. 5.
[자바스크립트/Lv1] 나누어 떨어지는 숫자 배열 https://programmers.co.kr/learn/courses/30/lessons/12910 [ 문제 ] 더보기 문제 설명 array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요. 제한사항 arr은 자연수를 담은 배열입니다. 정수 i, j에 대해 i ≠ j 이면 arr[i] ≠ arr[j] 입니다. divisor는 자연수입니다. array는 길이 1 이상인 배열입니다. 입출력 예 arr divisor return [5, 9, 7, 10] 5 [5, 10] [2, 36, 1, 3] 1 [1, 2, 3, 36] [3,.. 공감수 0 댓글수 0 2020. 5. 3.
[React/에러] 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 리액트를 시작하거나 git clone을 받은 후, npm install을 하고 npm start를 했음에도 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라는 에러가 뜰 때가 있다. 그럴 땐 npm을 업데이트를 해준 후, 다시 실행시킨다. npm update npm start 이때도 실행이 되지 않는다면, npm install -g react-scripts 를 실행하면 된다. 공감수 29 댓글수 0 2020. 5. 1.
Git & GitHub (3) - branch git remote add origin https://github.com/계정/repo 브랜치 관리는 git에서 필수이다. 만들 것이 있다면 해당 브랜치를 새로 만들고, push 후 merge가 끝났다면 해당 브랜치는 삭제하고 다시 새로 브랜치를 생성하여 사용하는 것이 좋다. Git에서는 local 브랜치와 remote 브랜치로 나뉠 수 있다. 사용이 완료된 브랜치는 삭제 할 때 두 가지 브랜치 모두 삭제하는 것이 혼선을 방지할 수 있다. 브랜치 생성 git checkout feature/브랜치명 브랜치 삭제 git branch --delete feature/브랜치명 local 브랜치를 삭제하고, remote 브랜치를 삭제하기 위해 한번 push해 준다. git push origin :feature/브랜.. 공감수 0 댓글수 0 2020. 5. 1.
CRA에 ESLint와 Prettier 적용하기 React의 코드는 최신 자바스크립트 코드로 작성하는 것이 일반적이지만, 아직 모든 브라우저에서 이를 지원해 주고 있지 않다. 따라서 웹팩이나 바벨을 설치하고 설정해야 하는데 페이스북에서 웹팩 없이 CRA를 제공해 주고 있다. CRA(Create-React-App)는 ES6 자바스크립트를 브라우저가 이해할 수 있는 ES5 코드로 변경해주는 툴이다. 리액트 초기 세팅 하기(2020/04/14 - React 초기 설치 명령어) 그럼 다시 ESLint와 Prettier가 무엇인지 알아보자. ESLint는 syntax나 code를 검사하는 도구(linting utiliy)이다. 특히 자바스크립트는 정적 컴파일을 하지 않는 인터프리터 언어이기에, 사소한 타이핑 실수로 잘못된 프로그램을 배포할 수 있다. 따라서 수.. 공감수 0 댓글수 0 2020. 4. 30.
React에서 구글맵 API 사용하기 구글맵 API를 사용하려면 우선 개인이 API KEY를 발급 받아야 한다. https://developers.google.com/maps/documentation?hl=ko 해당 사이트에서 'Maps JavaScript API'를 선택해 계정을 만들고, API 키를 발급받을 수 있다. 구글 정책이 바뀌면서 무료로 API를 사용하는 사람들도 결제 수단을 등록해야 지도가 정상적으로 띄워진다. API키를 발급 받았다면, 리액트에서 어떻게 쓰는지 알아보자. 먼저 구글맵 컴포넌트를 다운받아야 한다. npm install google-maps-react --save 그 후, 구글맵을 담을 컴포넌트에 아래 값을 주면 된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2.. 공감수 1 댓글수 0 2020. 4. 27.
재귀(Recursion) 재귀(Recursion) 재귀란 함수가 자기 자신을 호출하는 것이다. const countdown = n => { console.log(n); if (n === 0) return; // n이 0이라면 함수 종료 countdown(n-1); // n-1을 계속 실행 } countdown(10); // output: // 10 // 9 // 8 // 7 // 6 // 5 // 4 // 3 // 2 // 1 함수 안에 또 자기 자신을 호출해서 n값에서 -1된 값을 계속 return하고 있다. 여기서 가장 중요한 것은 종료 조건이 있다는 것이다. if ( 조건 ) { return } 만약 종료 조건이 없다면, 재귀는 계속 해당 함수를 호출하여 컴퓨터가 과부하게 걸리거나 원치않은 값까지 return 할 수 있다... 공감수 0 댓글수 0 2020. 4. 25.
image vh, vw 속성 최근 대부분이 다 반응형 웹이다. 브라우저 창을 어떻게 움직이든 웹의 모든 내용이 그에 맞게 보여줘야 한다. 하지만 reset.css에 border-box, margin, padding 값을 다 초기화하더라도 100% 차지 않는 경우가 있다. 이럴 때 사용하는 속성이 image의 vh, vw 값이다. vh는 vertical height, vw는 vertical width의 의미로 브라우저 높이와 너비값에 맞춰진 단위이다. 예를 들어 브라우저 창의 높이가 800px이라면 1vh는 8px이고, 너비가 600이라면 1vw는 6px이다. See the Pen VwvPZbv by howdy-mj (@howdy-mj) on CodePen. 코드를 쳐서 본인의 브라우저 창에서 확인하면 더 빠르게 이해가 갈거라 생각한다. 공감수 0 댓글수 0 2020. 4. 22.
데이터 자료 구조 (5) - Stack & Queue Stack과 Queue는 비슷한 구조이지만, 자료를 읽는 순서가 다르다. Stack Queue 구조 LIFO(Last In First Out) FIFO(First In First Out) 설명 마지막으로 저장한 데이터가 처음으로 읽힘 처음으로 저장한 데이터가 처음으로 읽힘 메소드 push, pop enqueue, dequeue 유즈케이스 함수 호출 기록을 stack으로 저장, 웹브라우저 방문기록(뒤로가기) 및 실행취소 미로찾기 알고리즘 맛집 예약, 티케팅 등의 예약 시스템 OS 프로세스 스케쥴링 시스템(priority queue) 프린터 인쇄 대기목록 공감수 0 댓글수 0 2020. 4. 20.
[JS] 가장 넓은 면적 구하기 [ 문제 ] 가장 넓은 면적 구하기 더보기 인자인 height는 숫자로 이루어진 배열입니다. 그래프로 생각한다면 y축의 값이고, 높이 값을 갖고 있습니다. 아래의 그래프라면 height 배열은 [1, 8, 6, 2, 5, 4, 8, 3, 7] 입니다. 저 그래프에 물을 담는다고 생각하고, 물을 담을 수 있는 가장 넓은 면적의 값을 반환해주세요. * 가정: 배열의 길이는 2이상입니다. [ 풀이 ] 2020.04.17 처음에는 제일 높은 수가 다른 것을 대체하는 식으로 접근했는데, 그러면 인덱스의 값에 따라 면적이 뒤집힐 수 있기 때문에 다른 방법을 생각했다. 0번째에서 1번째, 0번째에서 2번째 height와 인덱스 차이값을 구해 면적 구하는 식을 짜봤더니 다른 것은 두개의 인덱스 값이다. 따라서 for문.. 공감수 0 댓글수 0 2020. 4. 17.
Temporal Dead Zone Temporal Dead Zone(TDZ)란 '일시적 사각지대'란 의미로 변수의 스코프와 관련있다. 자바스크립트는 ES6에서 도입된 let, const를 포함한 모든 선언을 호이스팅한다. 호이스팅은 var선언문이나 function선언문 등을 유효 범위의 최상단으로 끌어올리는 것을 말한다. (2020/02/29 - 호이스팅 - 변수, 함수) 하지만 var로 선언된 변수와 달리 let으로 선언된 변수는 선언문 이전에 참조하면 에러가 발생한다. console.log(name); // output: undefined var name = "KMJ"; console.log(today); // output: Uncaught ReferenceError: today is not defined let today = "4월.. 공감수 0 댓글수 0 2020. 4. 16.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.