m1ndy5's coding blog

자바스크립트의 특징 자바스크립트는 자바스크립트 엔진에서 실행이 되는데, 이 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 이를 동기적으로 작동한다 라고 얘기하는데 const one = () => console.log("1"); const two = () => console.log("2"); const three = () => console.log("3"); one(); two(); three(); 위와 같은 예제를 실행하게 되면 1 2 3이 차례로 찍히게 된다. (one 함수 실행 끝 -> two 함수 실행 끝 -> three 함수 실행 끝) 동기 실행의 단점 하지만 이처럼 동기적으로만 실행하게 된다면 굉장히 많은 문제를 겪게된다. 예를 들어 유튜브 영상의 ..

브라우저가 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킴 ex) 클릭, 키보드 입력, 마우스 이동 등 이때 이벤트가 발생하여 호출될 함수를 이벤트 핸들러라고 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤터 핸들러 등록이라고 함 이벤트 핸들러 등록 방식 이벤트 핸들러 어트리뷰트 방식 Click 이벤트 핸들러 프로퍼티 방식 const button = document.querySelector('button') button.onclick = () => console.log('clicked')addEventListener 메서드 방식 const button = document.querySelector('button&#39..

createElement() javascript를 통해 동적으로 특정한 이름의 HTML element를 생성하는데 사용됨 element의 이름을 매개변수로 받아서 해당 노드를 생성 // 요소 노드 생성 const newDiv = document.createElement('div')createTextNode() // 텍스트 노드 생성 const textNode = document.createTextNode('환영합니다!")apendChild() 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막으로 붙임 // newDiv(div)에 textNode가 들어감 newDiv.appendChild(textNode);insertBefore() 부모노드의 특정 자식 노드의 앞에 새로운 노드..

Set 객체 중복되지 않은 유일한 값들의 집합(Set) const set = new Set([1, 2, 3, 3); console.log(set); // Set(3) {1, 2, 3} // Set을 사용한 배열의 중복 요소 제거 const uniq = array => [...new Set(array)]; console.log(uniq([1, 1, 2, 3, 4])); // [1, 2, 3, 4] // 요소 추가 Set.add() set.add(4); set.add(5).add(6); //도 가능 // 요소 존재 여부 확인 Set.has() console.log(set.has(1)) // true // 요소 삭제 Set.delete(), 일괄 삭제는 Set.clear() set.delete(1); set...

Spread ... ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만들 때 사용한다. Array, String, Map, Set, DOM Collection과 같이 for ... of 문으로 순회할 수 있는 이터러블에 사용할 수 있다. console.log(...[1, 2, 3]); // 1 2 3 console.log(..."Mindyo"); // M i n d y o함수의 인자값으로 많은 값을 넣을 때도 유용하게 사용된다. const max = Math.max(...[1, 2, 3]);2개의 배열을 1개의 배열로 결합하고 싶은 경우에도 사용된다. const arr = [...[1, 2], ...[3, 4]]; console.log(arr) // [1, 2, 3, 4]배..

map() 기존 요소를 바탕으로 새로운 값을 만들어내고 싶을 때 사용 const arr = ["월", "화", "수"] const newArr = arr.map(item => item + "요일") // 기존 요소인 월, 화, 수에 요일이 붙은 월요일, 화요일, 수요일이 Array형식으로 출력됨 console.log(newArr) filter() 기존 요소를 순회하여 조건에 맞는 요소들만 빼내어 반환 const arr = ["안녕하세요", "저는", "JavaScript를", "공부하고", "있습니다."] const newArr = arr.filter(item => item.includes("JavaScript")) // 기존요소에서 JavaScript를 포함한 JavaScript를 만 Array형식으로..

프로그래밍이란? 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션 요구사항을 파악한 후 문제 해결방안을 정의해야 함 컴퓨팅 사고 컴퓨터의 입장에서 문제를 바라보는 것 명확히 수치화해서 정의를 해야함 프로그래밍 언어 사람이 이해할 수 있는 약속된 문법으로 구성된 언어 프로그래밍 언어를 컴퓨터가 이해할 수 있는 기계어로 변환하는 번역기를 컴파일러 또는 인터프리터라고 함 즉 프로그래밍은 요구사항를 분석하고 적절한 코드로 변환한 후 그 흐름을 제어하는 것 JavaScript란? 초창기 JavaScript는 웹페이지의 보조적인 기능을 수행하기 위한 용도로 사용됨 웹 브라우저에서 동작하는 유일한 프로그래밍 언어 프로토타입 기반의 객체지향 언어 프로토타입 기반 객체지향 언어? -> 프로토타입 기반 언어는 클래스 기반 언..

Github 주소 : https://github.com/minsungChung/2th-FISAgenda HTML, CSS, JavaScript를 배운뒤 3명의 팀원과 함께했던 미니프로젝트 입니다. 이 프로젝트는 아래와 같은 순서로 진행하였습니다. 프로젝트 아이디어 생각하기 서로 구현할 파트 분배하기 github의 issue와 pr을 사용하여 리포지토리 및 코드 관리 merge했을 때 나타나는 에러 해결하기 다시 2번으로 돌아가서 반복 1. 프로젝트 아이디어 생각하기 2.5일만에 구현해야하는 미니 프로젝트였기 때문에 너무 복잡한 프로젝트는 배제하였고 그 결과 교육일정을 보여주는 우리FISA Agenda를 만들기로 하였습니다. 가장 중점으로 뒀던 부분은 기본적인 기능 (Calendar, Agenda 보여주기..

https://papago.naver.com/ 파파고를 만들기 위한 준비 파파고 html파일 만들기 node.js 다운로드 파파고 open api를 사용하기 위한 네이버 계정 1. 파파고 html 파일 파파고 html 파일은 Papago폴더 > public 폴더 안에 넣어주었다. Tailwind를 사용해 CSS 파일 없이 스타일을 넣어주었다. (내가 하진 않았다.) tailwind.config.js 파일을 만들어 설정을 해주고, Tailwind의 자동 완성 기능을 사용하고 싶다면 extensions에서 Tailwind CSS IntelliSense를 설치해보자 2. node.js 다운로드 파파고의 번역 api를 사용하려면 html과 js파일만 있어서는 안된다. 파파고 번역 api에 요청하고 이에 관한 응..

What is Browser? 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램 브라우저는 랜더링 과정을 통해 받아온 자원들을 유저에게 보여줌 Browser Rendering 브라우저가 서버에 필요한 리소스를 요청 받아온 HTML, CSS를 파싱해 DOM, CSSOM을 생성, 렌더 트리를 생성 렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기) 계산 화면에 HTML요소를 페이팅 js파일을 연결해 주었는데 실행이 안돼요!!ㅜㅜ js파일의 위치를 확인해보자 html body에 있는 태그를 js에서 읽어올 때 script 태그가 위에 있다면 브라우저가 html파일을 렌더링 하기도 전에 js파일을 실행하여 엥??? html에 그런 태그 없는데 뭔 ..