Hot Potato NyamyList
1.[개요]
HTML과 Vanilla javascript를 이용한 웹 프로젝트 제작 과정 1주를 단위로 멘토와의 피드백 과정을 거침 제작 과정과 개발 중 어려웠던 점, 해결 과정, 부수적인 CS 개념에 대한 글이 올라올 예정
2.관심사의 분리란?
01.28 1차 피드백을 받고 정리한 내용입니다.완성된 Rest API를 기반으로 간단하게 프론트를 작성했습니다.index.html에 1\. 데이터를 가져와 화면에 뿌리기 -> <tbody>가 마운트될 때 get 함수 호출2\. 체크한 데이터의 상태 값 변경 ->
3.for와 foreach의 차이
01.28 1차 피드백을 받고 정리한 내용입니다.api 호출 시 받아온 데이터를 화면에 출력할 때 for문을, 그리고 체크박스 input이 checked되었을 때 일괄 처리를 위해 foreach문을 적용하여 코드를 작성했습니다.for와 foreach의 차이를 제대로 모
4.CDN 서버란?
01.28 1차 피드백을 받고 정리한 내용입니다.bootstrap 라이브러리를 불러올 때 위와 같이 CDN 서버에 접속하여 받아왔습니다. 외부 라이브러리를 사용할 때 (1) 라이브러리를 파일로 저장해두고 불러오는 방식과 (2) CDN 서버에서 가져오는 방식에 있어 퍼포
5.드림코딩 - JS의 역사
웹 사이트 안에서 DOM 요소들을 조작하면서 동적인 웹 사이트를 만들기 위해 JavaScript가 등장브라우저 안에 script를 이해할 수 있는 인터프리터가 포함되어 출시된다 → 언어가 실행하는 것에 알맞게 DOM 요소들을 조작할 수 있게 됨ECMAScript는 서로
6.드림코딩 - script async와 defer의 차이점
console API는 웹 API 중 하나, 언어에 포함된 것이 아님API는 브라우저가 이해할 수 있는 함수브라우저가 코드를 한 줄,한 줄 분석한다(parsing HTML) → 분석 결과를 CSS와 결합해서 DOM 요소로 변환 한 줄,한 줄 parsing하다가 <
7.JavaScript 파일을 작성할 때 use strict를 써주어야 하는 이유
01.28 1차 피드백을 받고 정리한 내용입니다.1차 피드백 때 다음과 같은 조언을 들었습니다앞으로 모든 JS 접두에 'use strict'; 를 넣을 것그 이유에 대해선 직접 찾아보라고 하셨는데, 이번에 드림코딩 강의를 들으면서 궁금증이 해소되었습니다순수 바닐라 자바
8.<meta>와 SEO 정리
01.28 1차 피드백을 받고 정리한 내용입니다.<head>태그 내 <meta charset="UTF-8"> 태그는 자동 완성으로 항상 들어가있고, 재학 당시에도 그냥 넘어가라고 해서 그렇게 크게 눈여겨보지 않았었다. 하지만 이번 프로젝트에선 "코드 한 줄을
9.JavaScript에서의 callback이란?
지금 바로 시행되진 않지만, 다른 함수의 입력값으로 전달되어서 다른 함수에 의해서 나중에 호출되는 것함수를 만들어 쓰는 경우도 있지만 한 번만 쓰고 안 쓰는 경우가 많아 익명함수, arrow function의 형태로 작성하는 것이 많다네트워크 통신, 사용자의 동작을 이
10.JavaScript promise란?
콜백지옥에서 탈출할 수 있게 도움< promise pattern >실행에 필요한 옵션을 파라미터로 넘기고, .then해서 결과를 받을 callback을 넘긴다then을 가지고 있는 것이 promise의 인스턴스callback 함수에서 Promise 인스턴스를 리턴
11.JavaScript async/await이란?
promise처럼 비동기를 다룬다함수를 Promise를 return 하는 함수로 만든다명시적으로 Promise를 return 안 해도(return new Promise(); 없이) Promise returnresolve로 넘기는 값을 최종적으로 returnreject해
12.비구조화 할당(destructuring assignment)이란?
배열이나 객체 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식만약 값의 갯수보다 할당하려는 변수의 갯수가 더 많다면 undefined가 할당된다undefined가 할당되는 것이 싫다면 const \[a=3,b=4] = \[1]; 처럼 기본 값을 설정해 줄 수
13.AWS EC2에 mongoDB 환경 셋팅
install mongoDB 참고: https://velog.io/@seungsang00/Ubuntu-MongoDB-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0-Ubuntu-20.04wget -qO - https://www.mo
14.파일 수정기
package.json에 "type":"module"을 추가한 이후 발생한 에러require는 NodeJS에서 사용되고 있는 CommonJS 키워드이고, import는 ES2015에서 새롭게 도입된 키워드입니다. 둘다 다른 파일의 코드를 불러온다는 같은 목적을 가지고
15.Private vs Public vs Elastic IP
IP는 IPv4와 IPv6 두 가지 종류가 존재한다IPv4의 주소는 1.160.10.240 처럼 . 3개로 나누어진다\-> IPv4의 형태: 0-255.0-255.0-255.0-255IPv6의 주소는 1900:4545:3:200:f8ff:fe21:67cf 처럼 문자가
16.import
다른 모듈에서 내보낸 바인딩을 가져올 때 사용가져오는 모듈은 "use strict"의 존재 유무와 상관없이 무조건 엄격 모드import 문은 HTML 안에 작성한 스크립트에선 사용 불가type="module"을 필요로 하지 않는다<구문>(1) 모듈에서 멤버를 가져
17.export, named와 default
export란? >javascript 모듈에서 함수, 객체, 원시값을 내보낼 때 사용한다. 내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할 수 있다. 내보내는 모듈은 "use strict"의 존재 유무와 상관없이 무조건 엄격 모드 export 문은 H