본문 바로가기

분류 전체보기

 (341)
Javascript) undefined vs null undefined vs null 공통점 원시자료형 undefined 아무 값도 할당 받지 않은 상태 var로 선언한 변수는 자바스크립트 엔진에 의해 암묵적으로 undefined로 초기화됨 즉, 초기화되지 않은 var 변수 null null != NULL != Null 값이 비어있는 상태 개발시에 의도적으로 해당 변수에 값을 주지 않는 경우 사용 null을 할당하면 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미 즉 값에 대한 참조를 명시적으로 제거하여 가비지 콜렉션의 수집 대상이 되게 하는 것 (메모리 반납) References https://hanamon.kr/javascript-undefined-null-%ec%b0%a8%ec%9d%b4%ec%a0%90/
Javascript) 클로저(Closure)란? 이 글은 아래 링크의 글을 공부하면서 정리한 글입니다. JavaScript 클로저(Closure) 클로저란?MDN에서는 클로저를 다음과 같이 정의하고 있다. 클로저는 독립적인 (자유) 변수를 가리키는 함수이다. 또는, 클로저 안에 정의된 함수는 만들어진 환경을 ‘기억한다’. 흔히 함수 내 hyunseob.github.io 클로저(Closure)란? 독립적인 자유 변수 함수 내에서 함수를 정의하고 사용하는 것 내부 함수가 상위 스코프의 식별자를 참고하고, 그 상위 스코프를 외부에서 사용했을 때 내부 함수에 의해 참조되고 있는 상위 스코프의 식별자를 수정할 수 없는 형태 외부 함수는 내부 함수의 지역 변수에 접근할 수 없지만 내부 함수는 외부 함수의 변수에 접근할 수 있다 클로저는 각자의 환경을 가지고 있고..
Javascript) 호이스팅(Hoisting) 이란? 이 글을 아래 링크를 공부하며 정리한 글입니다. [JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog Step by step goes a long way. gmlwjd9405.github.io 호이스팅(Hoisting) 이란? Hoist : 게양하다 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것 자바스크립트 parser가 함수 실행전 해당 함수를 한 번 쭉 훑은 다음, 함수 내 필요한 변수 값들을 모두 모아서 유효 범위(함수 블럭 { .. } 내)의 최상단에 선언 즉, 현재 실행되는 라인에 필요한 변수가 해당 라인 아래쪽에 위치해있다면 자바스크립트 파서가 내부적으로 끌어올려 사용할 수 있게 처리하는 것인데 실제 코드 위..
TypeScript) 타입스크립트 기초 이 글을 아래 링크를 참고하여 공부하며 정리한 자료입니다. https://www.samsungsds.com/kr/insights/TypeScript.html 활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트(TypeScript) 활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트(TypeScript) www.samsungsds.com 타입스크립트란? 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 타입스크립트의 특징 타입스크립트 : 정적 타입 컴파일 언어 -> 컴파일러 또는 바벨로 자바스크립트 코드로 변환되어 코드 작성 단계에서 오류 확인 가능하여 버그를 사전에 제거할 수 있고, 실행 속도가 매우 빠르다 (자바스크립트 : 동적 타입 인터프리터 언어 -> 런타임에 오류 발견 가능) 자바스..
React) React에서 Bootstrap 사용하기 리액프 프로젝트에서 index.html에 일반적으로 cdn 스크립트를 추가하는 것만으로는 bootstrap을 사용할 수 없다. 리액트 프로젝트에서 아래 명령어로 bootstrap 를 설치한다. -save 옵션을 주면 package.json을 자동으로 업데이트해준다. $ npm install bootstrap -save 그 다음 가장 루트가 되는 index.js 파일에 가서 아래 임포트 구문을 추가해준다. import 'bootstrap/dist/css/bootstrap.min.css'; index.js 예시 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import 'bootstrap/dist/cs..
Javascript) 서버와 통신 없이 file 타입의 input에 업로드한 이미지 파일 바로 화면에 보여주기 (input onchange event) 파일 타입의 input에 사용자가 파일을 넣고, 별도의 서버 통신 없이도 이 파일을 화면에 보여주는 방법이다. 그냥 input에 value를 읽으면 fake path로 보여주기 때문에 file reader 객체를 통해서 읽어야 한다. $("#file-input").on("change", (e) => { var file = e.target.files[0] var fr = new FileReader(); fr.readAsDataURL(file) fr.onloadend = (e) => { $("#uploaded-file-img").append(` `) } })
CSS) active인 tab 또는 button 아이템 마우스 이벤트 제거 여러개의 nav item들 중 active 상태가 된 아이템은 hover 등의 마우스 이벤트가 안 먹어야 될 때 사용하는 방법! .class-name.active{ pointer-events: none; }
[React 프로젝트] JSON 작성을 돕는 UI / JSON Builder 프로젝트 개요 React 프로젝트 2021.06.14-2021.06.18 프론트엔드 UI/UX 디자인 및 코딩 JSON 작성을 직접 텍스트로 입력하지 않고 간편한 입력과 클릭만으로 JSON을 생성해주는 React 기반의 JSON Builder 입니다. React JSON Builder GitHub - Seungyoonkim66/json-builder Contribute to Seungyoonkim66/json-builder development by creating an account on GitHub. github.com How to use clone the project file. $ git clone https://github.com/Seungyoonkim66/json-builder.git $ cd..

티스토리툴바