JudithHopps JudithHopps

https://school.programmers.co.kr/learn/courses/30/lessons/120829 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1. 각도기 각에서 0도 초과 90도 미만은 예각, 90도는 직각, 90도 초과 180도 미만은 둔각 180도는 평각으로 분류합니다. 각 angle이 매개변수로 주어질 때 예각일 때 1, 직각일 때 2, 둔각일 때 3, 평각일 때 4를 return하도록 solution 함수를 완성해주세요. 예각 : 0 x { var arr = [0,0] num_list.forEach(x => arr[x%2] +..

라이브러리 프레임워크 공통점 공통으로 사용될 수 있는 특정한 기능들을 모듈화 한 것 폴더명, 파일명 등 규칙 없음 있음 자유도 free sticky 디자인 패턴이란? 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 "규약" 형태로 만들어 놓은 것을 의미 종류는 아래와 같다. 싱글톤 패턴 팩토리 패턴 전략 패턴 옵저버 패턴 프록시 패턴과 프록시 서버 이터레이터 패턴 노출모듈 패턴 MVC 패턴 MVP 패턴 MVVM 패턴 싱글톤 패턴 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴 보통 DB 연결 모듈에 많이 사용한다. 장점 : 1. 사용하기 쉽고 실용적이다. 2. 인스턴스를 사용할 때 드는 비용이 줄어든다. 단점 : 1. 의존성이 높아진다. 2. TD..

⭐ addEventListener - EventTarget의 기능 첫 번째 인자로 주어진 이름의 이벤트 발생시 두 번째 인자로 주어진 콜백함수 실행 👉 MDN 문서 보기 👉 이벤트 목록 MDN 문서 보기 click 이벤트 요소가 클릭되었을 때 document.querySelector('#button1') .addEventListener('click', () => { alert('ㅇㅇ 어서오고'); }); alert - 주어진 메시지로 알림 팝업 띄움 이벤트 객체 // ♻️ 새로고침 후 실행 document.querySelector('#button1') .addEventListener('click', (e) => { console.log(e); }); 프로토타입을 따라 올라가 볼 것 💡 이벤트 리스너에서의..

⭐ DOM의 모든 기능을 배우지는 않음 핵심 기능들을, 학습해 온 자바스크립트 지식과 접목하여 이해 add_to_queue 새 창에서 열기 I. 요소 선택 🔗 Document 또는 🔗 Element의 인스턴스 메서드들. 자식 클래스들로 상속됨 1. getElementsByTagName - 태그명으로 선택 👉 MDN 문서 보기 ( Document ) 👉 MDN 문서 보기 ( Element ) document에서 사용시 문서 전체에서 선택 const $sections = document.getElementsByTagName('section'); const $listItems = document.getElementsByTagName('li'); ​ console.log($sections); console.lo..

예제의 웹페이지 👇 소스 보기로 HTML 코드 확인 add_to_queue 새 창에서 열기 document 요소 확인해 볼 것 // DOM 구조도로 출력됨 document; Object.getPrototypeOf(document); 💡 아래의 프로퍼티로 들어가면 인스턴스 형태로 확인 가능 globalThis; chilren 프로퍼티로 타고들어가 볼 것 - DOM 구조도 반영 확인 HTML 이하 노드들 재귀적으로 출력 // document 내에 html 태그 요소를 선택하는 코드 const html = document.querySelector('html'); ​ console.log(html); // DOM 형태로 출력 console.log(html.children); function getNameAndC..

디버깅은 모든 소프트웨어에서 소스 코드의 오류 또는 버그를 찾아서 수정하는 과정입니다. VS Code의 디버깅 툴 타 에디터/IDE에서도 유사 기능들 제공 index.js let x = 1; const y = Math.ceil(Math.random() * 10); ​ const rollDice = () => { const result = Math.ceil(Math.random() * 6); return result; } ​ x += y; // 🔴 x *= y; x -= y; x ** (y % 3 + 1); // 🔴 ​ for (let i = 0; i 0.5) dice *= -1; // 🟡 x += dice; // 위에 조건부 넣을 시 브레이크포인트 추가 return x; } ​ x **= 2; // 🔴 ..

⭐ JSDoc 자바스크립트 코드에 주석을 달기 위한 🔗 마크업 언어 에디터, IDE에서는 작성된 내용에 따라 코드 힌팅 등의 기능 제공 👉 마치 타입스크립트 등의 언어처럼 인자 등의 자료형 제안 - 강제되지는 않음 도구를 통해 웹 문서 등으로 출력될 수 있음 📔 공식 문서 사이트 보기 사용해보기 실습할 폴더를 열고 임의의 .js 파일을 생성 /** 입력해보고 엔터 여러 번 입력해보기 기본 주석 const TITLE = 'JSDoc 사용하기'; /** 코드의 제목으로 사용될 문자열 */ 이후 라인에서 TITLE 상수 입력해보기 @type - 자료형 명시, @const - 상수임 명시 const PI = '3.14'; /** * 원주율 * @type {number} * @const */ 또는 아래와 같이 /..

I. 웹팩 Webpack 번들러 bundler - 프로젝트에 사용되는 파일들을 하나 또는 소수의 파일들로 압축 어플리케이션이 로딩 및 실행 속도 향상 각종 플러그인과 옵션을 사용하여 코드를 다양한 방법으로 변환/압축 가능 🧊 공식 사이트 보기 동종/유사 제품: RollUp, Parcel, Gulp, Vite... ⭐ 프로젝트에 사용해보기 0. 소스 저장소 분리하기 src 폴더를 만들고 .js파일들 모두 이동 1. 프로젝트에 웹팩 설치 npm install webpack webpack-cli --save-dev 2. 웹팩 설정 파일 webpack.config.js const path = require('path'); ​ module.exports = { entry: './src/main.js', outpu..