📚 노마드코더의 '바닐라 JS로 크롬 앱 만들기'를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. HTML in JavaScript 1. document.getElementById() document JavaScript가 HTML과의 상호작용을 가능하게 한다. 브라우저에서 그냥 사용이 가능하다. (콘솔 창에서 document를 바로 출력해 볼 수 있음) document.getElementById() document의 함수 중 하나이다. HTML에서 id를 통해 element를 찾아낸다. 예시 // string을 전달받는 함수이므로 괄호 안에 ''를 쓴다. document.getElementById('title'); // Olivia! // log보다 더 자세히 출력되는 console.di..
한 주 돌아보기 이번주에 해낸 것 이번주에 하지 못한 것 😎 웹개발 종합반 완강하기 🤔 공부한 내용 정리해서 블로그에 작성하기 😎 강의 코드 jQuery → 바닐라JS로 바꿔보기 😎 알고리즘 2문제씩 풀기 ✅ 웹개발 종합반 완강하기, 강의 코드 jQuery → 바닐라JS로 바꿔보기 부트캠프 사전 예습 강의인 웹개발종합반 강의가 입학시험에도 반영되는터라 1회독을 수강했다. 웹개발종합반 강의는 HTML, CSS, 간단한 JS로 화면을 만들고 파이썬과 몽고DB로 서버단이 진행된다. 본 과정(프론트엔드)에서는 파이썬과 몽고DB를 사용하지 않기 때문에 처음엔 이걸 어느 정도 깊이까지 공부해야 하는지 고민이 많았다. 강의를 수강해 보니 프로그래밍 언어를 자세히 알려주기보단 웹 페이지를 어떻게 만드는지에 대한 흐름을..
문제 약수의 개수가 세 개 이상인 수를 합성수라고 합니다. 자연수 n이 매개변수로 주어질 때 n이하의 합성수의 개수를 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ n ≤ 100 입출력 예 n result 10 5 15 8 입출력 예 #1 10 이하 합성수는 4, 6, 8, 9, 10 로 5개입니다. 따라서 5를 return합니다. 입출력 예 #2 15 이하 합성수는 4, 6, 8, 9, 10, 12, 14, 15 로 8개입니다. 따라서 8을 return합니다. 내가 작성한 답안 function solution(n) { // 1부터 n까지의 수를 배열에 담는다. let arr = []; for(let i = 1; i i+1) for(let i = 2; i el%i != 0 || ..
문제 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해 주세요. 제한사항 numbers의 길이는 2 이상 100 이하입니다. numbers의 모든 수는 0 이상 100 이하입니다. 입출력 예 numbers result [2,1,3,4,1] [2,3,4,5,6,7] [5,0,2,7] [2,5,7,9,12] 입출력 예 #1 2 = 1 + 1 입니다. (1이 numbers에 두 개 있습니다.) 3 = 2 + 1 입니다. 4 = 1 + 3 입니다. 5 = 1 + 4 = 2 + 3 입니다. 6 = 2 + 4 입니다. 7 = 3 + 4 입니다. 따라서 [2,..
문제어떤 자연수를 제곱했을 때 나오는 정수를 제곱수라고 합니다. 정수 n이 매개변수로 주어질 때, n이 제곱수라면 1을 아니라면 2를 return 하도록 solution 함수를 완성해 주세요. 제한사항1 ≤ n ≤ 1,000,000 입출력 예nresult14419762입출력 예 #1144는 12의 제곱이므로 제곱수입니다. 따라서 1을 return 합니다.입출력 예 #2976은 제곱수가 아닙니다. 따라서 2를 return 합니다. 내가 작성한 답안function solution(n) { let arr = []; for(let i = 1; i 정수 n이 제곱된 수임을 어떻게 판별하지? 가 관건이었는데, 도무지 떠오르지 않아 제곱수 판별 방법에 대해 찾아보았다. 제곱수의 성질은 다음과 같다...
설명 Array.prototype.sort()는 배열의 요소를 적절한 위치에 정렬한 후, 그 배열을 반환한다. 이때 배열 안 모든 요소는 문자형으로 변환된 후, 유니코드 단위의 값을 비교한 뒤 재정렬된다. 배열 안의 요소가 숫자일 경우도 숫자끼리의 크기 비교를 하지 않고 숫자를 문자열로 변환한 뒤 해당 문자열의 유니코드 값을 비교하여 정렬을 하게 된다. 9와 80이라는 두 수를 sort()로 비교할 경우 숫자로는 9가 80보다 우선하지만, 유니코드 순서 상으로는 80이 9보다 앞에 위치하고 있어 80을 9보다 앞쪽에 정렬하게 된다. 구문 // 기본 구문 값 arr.sort([compareFunction]) // 화살표함수를 이용한 표현법 arr.sort((a, b) => { /* ... */ } comp..
문제 문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다. 제한사항 strings는 길이 1 이상, 50이하인 배열입니다. strings의 원소는 소문자 알파벳으로 이루어져 있습니다. strings의 원소는 길이 1 이상, 100이하인 문자열입니다. 모든 strings의 원소의 길이는 n보다 큽니다. 인덱스 1의 문자가 같은 문자열이 여럿 일 경우, 사전순으로 앞선 문자열이 앞쪽에 위치합니다. 입출력 예 strings n result ["sun", "bed",..
문제 명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로길이와 세로 길이를 조사했습니다. 아래 표는 4가지 명함의 가로 길이와 세로 길이를 나타냅니다. 명함 번호 가로 길이 세로 길이 1 60 50 2 30 70 3 60 30 4 80 40 가장 긴 가로 길이와 세로 길이가 각각 80, 70이기 때문에 80(가로) x 70(세로) 크기의 지갑을 만들면 모든 명함들을 수납할 수 있습니다. 하지만 2번 명함을 가로로 눕혀 수납한다면 80(가로) x 50(세로) 크기의 지갑으로 모든 명함들을 수납할 수 있습니다. 이때의 지갑..
git 공부를 하던 중 CLI, GUI라는 단어를 보게 되었다. 어디서 한 번쯤은 본 것 같은 단어. 두 단어는 무슨 뜻일까? CLI 사진과 같이 CLI로 git commit을 실행하려면, 'git commit' 와 같은 텍스트를 입력해야 한다. 이처럼 CLI(Command Line Interface)는 사용자가 터미널에 직접 명령어를 입력하는 방법을 말한다. [참고] 터미널이란 컴퓨터와 사용자 간 텍스트 입/출력을 통해 상호작용하는 컴퓨터 인터페이스로, 윈도우의 cmd, 맥과 리눅스의 terminal을 말한다. CLI의 특징은 다음과 같다. 사용자가 컴퓨터를 탐색하는데 필요한 작업은 다양한 텍스트 명령을 통해 OS와 직접 상호작용한다. 따라서 CLI를 사용하려면 사용자가 이러한 명령어를 알아야 한다. ..
[출처] https://roadmap.sh/frontend Frontend Developer Roadmap Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development. roadmap.sh
