m1ndy5's coding blog

기본 템플릿 쉽게 작성하는 법 extension에서 Vue VSCode Snippets를 install 해주고 파일을 만들고 vbase-3-setup 입력하면 기본 템플릿을 만들어줌 template : HTML코드 script : JS 코드 style : CSS 코드

Vue.js란? 프론트엔드 개발을 쉽게 하기 위한 프레임워크 SPA(Single Page Application)를 구축하는데 이용 SPA란? 단일 페이지 애플리케이션이라는 뜻으로 페이지가 바뀔 때마다 서버에서 HTML을 보내주어 새로고침되는 SSR(Server Side Rendering)과 다르게 새롭게 바뀌는 부분의 특정 데이터만 요청하여 새로고침 없이 한 페이지에서 특정 부분만 변경되는 것을 의미 Vue.js의 장점 배우기 쉬움 다른 프레임워크 React, Angular에 비해 가볍고 빠름 컴포넌트 기발 프레임워크로 뷰 구성, 코드 재사용이 용이 사용방법 Vue.js를 사용하려면 일단 Node.js가 설치 되어있어야 한다. 이후 npm init vue@latest 라는 명령어를 통해서 vue의 최신 ..

자바스크립트의 특징 자바스크립트는 자바스크립트 엔진에서 실행이 되는데, 이 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 이를 동기적으로 작동한다 라고 얘기하는데 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 보여주기..