javascript
-
[프로그래머스 JS] 완주하지 못한 선수자료구조와 알고리즘 2022. 6. 13. 21:15
문제 설명 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. const participant = ["leo", "kiki", "eden"]; con..
-
new 연산자와 생성자 함수JavaScript 2022. 6. 3. 17:16
객체 리터럴을 사용하면 객체를 만들 수 있다. /* 객체 리터럴 */ const user = { name : "janggu", age : 25, }; 하지만 비슷한 객체를 여러 개 만들어야 할 경우가 있을 때, 객체 리터럴을 사용하기엔 너무 많은 중복이 일어난다. 그럴 때, new연산자와 생성자 함수를 사용하여 객체의 중복을 줄여보자. 생성자 함수 constructor function 생성자 함수는 함수의 첫 글자를 대문자로 시작해야 하고, 함수 앞에 new 연산자를 붙여 실행하는 컨벤션이 있다. function User(name, age) { this.name = name; this.age = age; } const user = new User("짱구", 7); console.log(user.name)..
-
DOM 요소 선택 / 변경JavaScript 2022. 5. 16. 16:29
DOM 요소 선택 자바스크립트에서 HTML의 요소를 선택해보자. 6가지의 방법을 통해서 요소를 선택할 수 있다. 1) HTML 태그 이름으로 선택하기 getElementsByTagName() HTML 태그 이름을 이용하여 HTML 요소를 선택합니다. 위의 메서드를 사용하여 HTML요소에 접근, 생성, 변경할 수 있다. let selectTagName = document.getElementByTagName("p"); //모든 요소를 선택한다. for (let i = 0; i < selectTagName.length; i++) { //태그의 수만큼 selectTagName.item(i).style.color = "red"; } // 선택된 모든 의 텍스트 색상을 변경함. item()메서드는 해당 HTML 객..
-
[Deep Dive] 1장 프로그래밍이란?카테고리 없음 2022. 5. 16. 13:17
01. 프로그래밍이란? 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션 실행을 요구하기 위해서는 무엇을 실행하고 싶은지 정의할 필요가 있다. →해결해야 할 문제를 명확히 이해하고 해결방안을 정의할 필요가 있다. 문제 해결 능력 중요도 문제 해결 능력 > 알고리즘 학습 문제(요구사항)는 복잡하고 명확하지 않을 수 있다. 문제를 명확히 이해하는 것이 우선! 그에 따라 복잡함을 단순하게 분해 자료 정리하고 구분 순서에 맞게 배열 즉, 컴퓨터가 실행할 수 있도록 정확하고 상세하게 요구사항을 설명 → 코드 컴퓨팅 사고(Computational thinking) 컴퓨터의 입장에서 문제를 바라보고 해결 방안을 고려하는 것 사람의 사고 방식 매우 포괄적 실생활에서 경험하는 익숙한 사항에 대해 당연시하는 인식이 있다. 컴..
-
[모던 자바스크립트 Deep Dive]JavaScript 2022. 5. 13. 16:11
들어가며... 출판 의도 자바스크립트가 웹페이지에서의 동작을 처리하기 위한 언어가 아니라 프론트, 백엔드에서 프로그래밍 언어로 사용할 수 있게 되면서 자바스크립트를 학습하는 방식도 변화해야한다고 생각함. → 자바스크립트의 기본 개념과 동작 원리를 깊이 있게 학습하고자 하는 독자를 위한 책 프로그래머의 역할 요구사항을 기반으로 문제 해결 방안 제시 → 코드로 구현 자신의 코드가 컴퓨터 내부에서 어떤 원리로 동작하는지 설명할 수 있어야 함. 기본 개념 문맥에 맞는 정확한 용어를 구사할 수 있는 원동력 정확한 용어를 사용해야 오해를 불러일으키지 않는 명확한 의사소통 가능해짐. → 협업의 기본이며 필수 요소 언어의 국한되지 않아 다른 언어 학습 시, 도움이됨. 동작 원리 이해 코드의 동작을 예측 가능하게 하며 ..
-
Event 알아보기JavaScript 2022. 5. 6. 15:10
Event란? 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 뜻한다. 그리고 자바스크립트를 이용하여 특정 요소에 상호작용적인 반응하는 동작을 실행시킬 수 있다. Event Type / 이벤트 타입 발생한 이벤트의 종류를 나타내는 문자열로, 이벤트 명(event name)이라고도 한다. = 이벤트 종류(마우스, 키보드, HTML DOM 등을 처리하는 이벤트가 있다.) Event specification / 이벤트 명세 이벤트들의 종류가 늘어남에 따라 3가지 기준으로 나누어져 정의되고 있다. DOM Level 3 이벤트 명세 HTML5 관련 이벤트 명세 모바일 장치를 위한 명세 Event listener / 이벤트 리스너 이벤트가 발생했을 때, 그 처리를 담당하는 함수이다. 인자로 받은 값을 실..
-
클로저, 넌 누구냐?JavaScript 2022. 4. 27. 18:14
클로저란? 클로저(closure)는 중첩 함수에서 내부 함수가 소멸된 외부 함수의 맥락(context)에 접근할 수 있는 것을 가리킨다. 내부 함수가 외부 함수의 변수에 접근할 수 있는 이유 외부 함수가 종료되면 외부함수가 가지고 있던 변수도 같이 소멸된다. 그렇기 때문에 내부 함수 안에서 함수 밖의 변수를 사용할 수 없다고 생각할 수 있다. 하지만 렉시컬 환경에 의해서 내부 함수에서 외부 함수의 변수에 접근할 수 있다. 렉시컬 환경이란? 호출된 함수가 어디서 사용되었고, 주변에 어떠한 함수가 있는지 기록한 환경. -> 포함하는 식별자, 식별자에 바인딩된 값, 상위 렉시컬 환경에 대한 참조 ex) 민수는 성북구에 2년 동안 살았지만, 지금은 이사를 갔다. => 민수는 현재 성북구에 없지만 성북구에 살았던..
-
상수 데이터JavaScript 2022. 4. 24. 15:50
개발을 할 때, UI 구성에 필요한 데이터가 정적이라면 데이터를 서버에서 가져오지 않고 프론트 단에서 직접 구성합니다. 서버에서 받아야 하는 값이고, 아직 백엔드에서 넘겨줄 데이터를 완성하지 않았다면 서버에서 받을 값을 예상해서 개발을 진행할 수 있어야 한다. 이 때, UI를 표시하기 위한 상수 데이터 와 백엔드의 데이터를 모방하기 위한 mock data 를 사용해보자. 상수 데이터 UI 구성에 필요하지만 동적으로 변하지 않아 백엔드 API 등을 통해 가져올 필요가 없는 정적인 데이터 => 상수 데이터로! 상수 데이터를 사용하는 이유? 반복되는 UI를 유지보수하기 쉽고, 가독성을 높이기 위해. 반복되는 UI = 상수 데이터 + Array.map() 를 이용해서 간결하게 표현 수정 필요시, 상수 데이터의 ..