자바스크립트 모듈 시스템의 역사현재 메인으로 진행하고 있는 프로젝트에서 사용하고 있는 패키지매니저를 두고 이런 질문을 받았다,왜 yarn을 사용하시나요? 다른 패키지 매니저와 차이점은 알고 있나요? 패키지매니저를 비교하면서 자바스크립트의 모듈이라는 개념에 대해 자세하게 다뤄보았다.You Don't Know JS Yet(YDKJSY) 책이 도움이 되었다. 처음 자바스크립트를 배울 땐 import, export가 자연스럽게 느껴졌지만 이는 자바스크립트가 발전되어 온 역사의 결과물이었고..수년간 발전을 거듭해온 결과 지금 이렇게 편리하게 사용할 수 있던 거였다! 자바스크립트(JS)라는 언어는 태생부터 모듈이라는 개념이 없었다.원래 웹페이지에 작은 기능을 붙이는 정도로만 쓰였기 때문에, 여러 파일로 나눠서 개발..

나는 지금 React, TypeScript로 웹 페이지를 개발하고 있어.프론트앤드 개발자라면 이 기술을 정말 많이 사용하고 있을거야. 그러다 문득 내가 지금 사용하는 기술을 '왜' 사용하는건지 그 이유가 궁금해졌어.이를 이해하려면 (살짝 진부하지만) 웹 개발의 역사를 알아야 돼. 내가 사용자(User)의 입장이 되어볼게.크롬 브라우저를 열었다, 주소창에 URL을 입력했어. (www.naver.com)네이버 홈 화면이 열렸어! 마치 해당 페이지로 이동한 것처럼 말이야. 사실은 실제로 해당 페이지로 이동한 게 아니라 내가 요청한 주소에 대한 응답을 받은거야.이러한 일련의 과정을 브라우저가 렌더링(Rendering) 한다고 표현해. 브라우저는 사용자가 요청한 URL에 대한 HTTP 요청을 서버에 보내고, 서버..

프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션인데, 이때 요구되는 게 문제 해결 능력이다.문제 해결 방안을 고민할 때 컴퓨팅 사고, 즉 컴퓨터 관점에서 문제를 바라보는 시각이 필요하다.핵심은 해결 과제를 작은 단위로 분해, 패턴화해서 추출하고, 평가 가능하도록 프로그래밍 내 모든 개념을 정의해야 한다. 내가 자바스크립트라는 언어를 사용해 명령하면, 컴파일러(인터프리터)가 해당 코드를 기계어로 번역하여 컴퓨터에 전달한다.작성된 코드는 해결 방안의 구체적 구현물이므로 문제가 해결(요구사항이 실현)되어야 의미가 있다. 자바스크립트는 본래 브라우저에서 동작하는 언어였다.점차 기술의 발전과 함께 여러 개의 브라우저가 생겨났고, 이로 인해 크로스 브라우징(브라우저에 따라 웹페이지가 정상적으로 동작하지..

없는 숫자 더하기문제 설명0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 `numbers`가 매개변수로 주어진다.`numbers`에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 해라.제한 조건1 ≤ numbers의 길이 ≤ 9numbers의 모든 원소는 서로 다릅니다.0 ≤ numbers의 모든 원소 ≤ 9내 문제 풀이`numbers` 원소에서 0부터 9까지의 숫자를 어떻게 찾지?=> 0부터 9까지 원소를 가진 배열을 만들고, 배열과 배열을 비교해보자.(참고1)에서 배열과 배열 간 교집합, 차집합을 구하는 방법을 알 수 있었다.나는 0~9를 원소로 갖는 배열(arr2)에서 함수의 매개변수로 주어지는 배열(arr1)을 빼서 더해주었다.다른 문제 풀이배열을 새로 만들어 줄 ..

제일 작은 수 제거문제 설명배열 arr에서 가장 작은 수를 제거한 배열을 리턴하는 함수 solution단, 리턴하려는 배열이 빈 배열인 경우에 -1을 채워 리턴하세요.예를 들어 [10]이면 [-1]을 리턴합니다. (=>배열 원소가 한 개만 있어서 최솟값을 구하지 못하기 때문?)제한 조건arr은 길이 1 이상인 배열중복되는 값은 없음내 문제 풀이함수의 최솟값을 filter 함수로 확인한다. `Math.min(...arr)`'...' 이렇게 점 3개를 붙이는 이유는, 객체나 배열의 원소들을 하나씩 꺼내어서 펼쳐서 리턴하기 위함이다.arr = [1,2,3,4,5] 라면 Math.min(1,2,3,4,5)와 같이 실행되게 한다.(참고)배열에서 최댓값, 최솟값 구하기function solution(arr) { ..

#음양더하기내가 작성한 코드function solution(absolutes, signs) { // var answer = 123456789; var newArr = []; // while (i (a+b)) return sum;}"absolutes" 절댓값 배열 원소들을 i번째씩 반복하여 확인(for문)"sign" 배열의 true/false 에 따라 "absolutes" 배열 원소에 부호를 부여하고빈 배열(newArr)에 넣어줬다.. 참고한 코드는 빈 배열에 넣어주지 않고for문을 통해 "absolute" 배열에서 찾은 값을새로 할당한 정수(answer)에 더하거나(sign[i] === true) 빼주었다(sign[i] === false).function solution(abs..

#휴대폰번호가리기 휴대폰 번호가 010-2222-3333 인 것도 있고, 02-222-3333 인 것도 있어서 헷갈렸다. 문제에서 phone_number는 길이 4 이상 20 이하라고 주어졌는데, 문자열의 길이를 알 때는 `slice()`로 잘라서 쓰자! String.slice() - MDN => slice() 메소드는 문자열의 일부를 추출하면서 새로운 문자열을 반환한다. 내가 작성해서 런타임 에러가 난 코드 - `substr()`, `replace()` function solution(phone_number) { var answer = ''; if (phone_number.length === 11) { changed = phone_number.substr(0, 7).replace(/[0-9]/g, "*..

`arr.reverse()` : 배열 순서 거꾸로 `arr.sort()` : 배열 순서를 유니코드 순서에 따라 정렬 const arr = [2, 1, 5, 10]; arr.sort(); // [1, 10, 2, 5] 유니코드 순서가 아닌 숫자 크기 순서대로 정렬하고 싶다! -> `arr.sort(fn)` function solution(arr, divisor) { const result = arr.filter((item) => { return item % divisor == 0; }); const answer = result.sort((a,b) => a-b) return answer; } `filter` 메서드 콜백 함수의 리턴은 `boolean`을 가진다. 리턴이 `true`인 요소만 모아서 새로운 배..

arr.find(fn) arr.findIndex(fn) arr.filter(fn) #arr.find(fn) function solution(arr, divisor) { const result = arr.find((item) => { return item % divisor == 0; }); console.log(result) } // 입력값 : arr = [5, 9, 7, 10], divisor = 5 // 출력값 : 5 // 입력값 : arr = [2, 36, 1, 3], divisor = 1 // 출력값 : 2 // 입력값 : arr = [3, 2, 6], divisor = 10 // 출력값 : undefined find 함수를 사용할 경우 배열 요소 중 조건을 만족하는 가장 첫번째 요소만 출력되는 것..

#김서방찾기 Q. String형 배열 seoul의 element 중 "Kim"의 위치 찾기 function solution(seoul) { const answer = `김서방은 ${seoul.indexOf("Kim")}에 있다` return answer; }