티스토리

Yuniverse

검색하기

블로그 홈

Yuniverse

yuniverse-b.tistory.com/m

yunieyunie 님의 블로그입니다.

구독자: 3

방명록 방문하기

주요 글 목록

Javascript 기술 면접 예상 질문 📑 1-1. 자료형이 필요한 이유 자료형은 데이터의 종류를 나타낸다. 데이터의 종류를 명시해주면 가독성이 좋아지고 유지보수가 편리해진다. 또한 자료형에 따라 컴퓨터 메모리를 다르게 사용하기 때문에 필요에 따라 메모리 사용을 최적화할 수 있다. 1-2. var, let, const 차이 var, let, const는 모두 자바스크립트에서 변수를 선언하는 키워드이다. 하지만 스코프(scope), 재선언(redeclaration), 재할당(reassignment) 측면에서 차이가 있다. var : var는 함수 스코프(function scope)를 가지며 내에서 어디서든 접근할 수 있다. 또한 동일한 스코프 내에서 재선언과 재할당이 가능하다. let : let은 블록 스코프(block scope)를 가지며 선언된.. 공감수 0 댓글수 0 2023. 12. 7.
4.17.20버전과 4.17.21버전은 무슨 차이..? 유의적 버전 (SemVer)에 대해 알아보자 👀 👀 유의적 버전 (SemVer) 라이브러리나 패키지, 또는 다양한 툴들을 설치할 때 가끔 뒤에 숫자가 붙는 것을 볼 수 있다. 이는 유의적 버전 (Semantic Versioning) 으로 버전에 의미를 부여하여 구분하는 것이며 숫자와 마침표로 구분한다. (ex. 4.17.20) 숫자는 순서대로 Major.Minor.Patch 를 나타내며 다음과 같은 의미를 가지고 있다. Major는 기존 버전과 호환되지 않는 새로운 버전을 뜻한다. Minor는 기존 버전과 호환되는 새로운 기능이 추가된 버전을 말한다. Patch는 기존 버전과 호환되는 버그 및 오타 등이 수정된 버전을 말한다. 캐럿기호 ^는 Major 앞에 붙는데 Major 버전 안에서 가장 최신 버전으로 업데이트 가능하다는 의미이다. 예를 들어, 1.. 공감수 0 댓글수 0 2022. 11. 4.
npm run dev로 개발 서버 실행하기 🎯 🎯 parcel vscode에서 짠 html을 웹에 실행시키는 방법은 대표적으로 vscode의 plugin중 하나인 Open with Live server가 있다. 하지만 parcel을 이용해서 개발 서버를 실행시키는 방법이 최신 웹 프론트엔드 개발에 더 유용하다고 볼 수 있다. parcel 설치는 터미널에서 npm install parcel-bundler -D 를 입력하면된다. 여기서 parcel이란, 쉽고 빠른 웹/앱 번들러로 번들은 프로젝트 개발에 필요한 여러 모듈(패키지)를 하나로 묶어내는 것이다. 이제 parcel을 이용한 개발 서버를 실행해보기 전에 먼저 프로젝트 폴더에 기본적으로 index.html 파일과 main.js 파일을 만들어 놓자. 1. "dev": "parcel index.html.. 공감수 0 댓글수 0 2022. 11. 4.
npm의 기초 ⭐ 🎁 npm이란? 노드 패키지 매니저는 전 세계의 개발자들이 만든 다양한 기능(패키지)를 설치하고 관리하는 매니저다. 전 세계의 개발자들이 혼자, 팀 단위, 회사 차원에서 작업한 패키지를 npm 생태계에 업로드하는 구조로 원하는 패키지를 검색하여 npm install로 설치하는 것이다. npm은 Node.js를 설치할 때 자동으로 같이 설치되므로 따로 설치할 필요는 없다. 이제 vscode에서 프로젝트 파일을 열고 터미널에서 다음을 순서대로 입력해보자. 1. npm init -y 터미널에서 npm init -y를 입력하면 package.json 파일이 생성된다. package.json의 내용은 다음과 같다. name은 프로젝트의 이름을 명시하는 옵션이다. version은 프로젝트의 버전을 적는 옵션이다. .. 공감수 0 댓글수 0 2022. 11. 3.
Node.js와 nvm 💡 🔎 Node.js란? Node.js는 chrome v8 javascript 엔진으로 빌드된 javascript 런타임으로 쉽게 말하면 javascript가 동작하는 컴퓨터 환경이라고 할 수 있다. 브라우저에서 동작하는 웹페이지를 제작할 때 컴퓨터에서 다양한 역할을 수행하기 위해서는 Node.js의 도움이 필요하다. Node.js가 동작할 수 있는 환경은 다음과 같다. Node.js가 설치된 컴퓨터 chorme같은 웹 브라우저 순수하게 html, css, js로 만든 웹은 다소 비효율적일 수 있으므로 여러 모듈(sass, babel등)을 설치해 도움을 받는데, 이런 모듈들은 브라우저에서 직접 동작할 수 없기 때문에 Node.js 환경에서 도움을 받아 js로 변환하는 것이다. 📑 Node.js 설치 방법 1.. 공감수 0 댓글수 0 2022. 11. 2.
예외처리 ⛔ 🔎 예외 처리의 필요성 프로그램의 외부 요인 또는 구현 상의 문제로 예상치 못하게 프로그램의 특정 파트가 정상적으로 동작하지 않을 수 있습니다. 이런 경우 프로그램은 발생한 에러를 정상적으로 처리하고 다음 코드를 실행해야 합니다. 에러처리를 잘 하지 않으면 프로그램 전체가 동작하지 않게 되지만 에러처리를 이용하면 프로그램이 정상적으로 실행될 수 있습니다. 자바스크립트에서는 throw 명령으로 에러를 발생시키고 try, catch 구문을 이용해 해당 에러를 핸들링합니다. 📑 Try, Catch, Finally 구문 에러처리 블럭은 Try, Catch, Finally로 구성됩니다. try{ // 정상적으로 실행되는 경우 실행될 프로그램 작성 // try 블록안에서 에러가 발생한 경우 catch 블록으로 이동.. 공감수 0 댓글수 0 2022. 10. 4.
AJAX / JSON 📑 AJAX AJAX : 브라우저에서 페이지를 이동하지 않고 자바스크립트를 통해 HTTP Request를 보내고 받아 JS에서 처리할 수 있습니다. 사용자에게 더 나은 사용 경험 제공할 수 있으며 대부분의 웹사이트에서 사용되고 있는 기술입니다. 📝 AJAX 실습 AJAX를 위한 객체 생성 var req = new XMLHttpRequest(); // HTTP 요청을 만들 수 있는 새로운 객체를 생성하는 명령 요청의 방식과 URL 설정 req.open("GET", "./data.txt"); // http request method와 URL 설정 요청 전송위까지 작성 및 저장하면 console창에 에러가 뜨는데 이는 웹 서버를 구동하는 것이 아닌 직접 html에서 data.txt파일을 읽어오려고 하기 때문입.. 공감수 0 댓글수 0 2022. 9. 22.
Callback Function / EventHandler ✨ Callback Function callback function은 조건을 등록해 두고 그 조건을 만족한 경우, 나중에 호출되는 함수를 의미합니다. 그래서 말그대로 나중에 호출해준다는 의미로 callback 함수라는 이름을 붙여서 사용합니다. 🕐 시간을 기반으로 콜백함수를 호출하는 명령 setTimeout( function, time ) : time 시간이 지난 경우 function 함수를 콜백하는 함수, time 은 millisecond (1/1000초) 단위, timerId를 반환합니다. setInterval( function, time ) : time 시간이 경과할 때마다 function 함수를 콜백하는 함수, timerId를 반환합니다. 위의 두 명령을 실행했을 때 반환되는 정수값은 Timeou.. 공감수 0 댓글수 0 2022. 9. 22.
DOM (Document Object Model) ⚡ ⚡ DOM (Document Object Model) DOM(Document Object Model)은 컴퓨터가 문서를 잘 처리할 수 있도록 문서에 대한 구조를 약속한 것입니다. js를 통해 html 문서에 접근이 가능한 것은 html 문서가 dom 모델에 따라 기술되고 dom interface를 통해 기술된 html element가 객체로서 js와 연결되기 때문입니다. dom은 tree형태로 문서를 표현합니다. document는 최상위 element. 부모와 자식 관계를 통해 원하는 object에 접근 가능합니다. children에는 문서의 최상위 엘리먼트인 html이 존재합니다. 👪 자식, 부모 엘리먼트에 접근하는 방법 .children : 해당 object의 자식 노드에 대한 배열 .parentNo.. 공감수 0 댓글수 0 2022. 9. 21.
📕 JavaScript 기초 3 변수 - es6 이후에 생긴건 let과 const, 그 전에 사용한 것이 var - var는 한 번 선언된 변수를 다시 선언할 수 있다 let은 에러가 난다 - var는 선언하기 전에 사용할 수 있다. (호이스팅 : 어디서든 변수 선언은 최상위에 선언된 것처럼 행동) - 하지만 선언은 호이스팅 되지만 할당은 되지 않는다 - 같은 상황에서 let은 에러가 난다. let과 const는 호이스팅이 가능하지만 에러나는 이유?? Temporal Dead Zone 때문 - TDZ 영역에 있는 변수는 사용이 불가, let과 const는 TDZ의 영향을 받으므로 할당 전에는 사용 불가 - 이는 코드를 예측 가능하게 하고 잠재적 버그를 줄일 수 있다 - var의 생성과정 1. 선언 및 초기화 단계 2. 할당 단계 - l.. 공감수 0 댓글수 0 2022. 3. 31.
📕 JavaScript 기초 2 함수의 기초 - 중복되는 코드를 줄이고 유지보수를 용이하게 하기 위해 함수가 필요 - console, alert, confirm 도 함수 - 매개변수가 여러개면 쉼표로 구분하여 작성 function 함수명(매개변수){ 실행코드 } //매개변수 없음 function showerror(){ alert('에러 발생'); } showerror(); //매개변수 있음 function sayhello(name){ const msg = `hello, ${name}`; console.log(msg); } sayhello('tom'); //사용자 이름을 모를땐? function sayhello(name){ let msg = `hello`; if(name){ msg = `hello, ${name}`; } console.l.. 공감수 0 댓글수 0 2022. 3. 28.
📕 JavaScript 기초 1 codepen에서 연습 https://codepen.io 변수 - 변수는 문자와 숫자, $와_만 사용, 첫 글자는 숫자 사용 불가 - 문자는 항상 따옴표(", ', `) - 예약어는 변수명으로 불가 - alert() : 경고창 띄우기 - console.log() : console창에 띄움 - 최초로 선언하는 모든 변수 앞에 let을 붙이면 해당 변수에 새로운 값을 부여할 때 에러로 알 수 있음! (팀 단위로 동료와 함께 개발할 때) - 해당 변수의 값을 수정하고 싶을 땐 let 빼고 변수 재선언 - const는 절대로 바뀌지 않는 상수값을 입력할때 사용, 가급적 대문자로 선언해서 다른 개발자들에게 상수임을 알림 ex) 파이값, 생일 ... - 즉, 변하지 않는 값은 const, 변할 수 있는 값은 let.. 공감수 0 댓글수 0 2022. 3. 14.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.