JavaScript

자바 스크립트는 모바일이 나오고 각광을 받은 언어이다.자바 스크립트는 자동완성, 페이지의 동작, 움직이는 상태창 등 여러 곳에 쓰인다.자바 스크립트가 할 수 있는 일스크립트 기반의 프레임워크, 라이브러리자바 스크립트는 html 문서내에 <script>로 정의하며

함수레벨 스코프(✨✨✨)function 안에서 정의한 변수와 바깥쪽에서 정의한 변수를 다르게 인식블럭레벨 스코프(✨✨✨){}안에서 정의한 변수와 바깥쪽에서 정의한 변수를 다르게 인식자바와 동일 단, String 형태로 나오기 때문에 형변환을 필수이다.자바와 동일한 S

script는 객체 기반보단 객체 그 자체이다.객체 : 속성 + 메소드Key/Value로 구성이 되어있으며 value는 기본 자료형, 객체, 매소드를 담을 수 있다.원래 키값은 문자열로 작성해야하지만 자동 형변환이 되니까 ok입니다!객체 내 특정 정보를 출력 -> ke

1. updown 게임 만들기 예시 Document 숫자 맞추기 게임 결과값이 여기 나옵니다! 남은 찬스 : 5번 Go!reset

list 태그를 눌렀을 때 해당 이벤트를 열기 위해 id값을 모두 부여하였다.더이상 지원하지 않는 함수는 다음과 같이 선이 그어진다.코드를 쓰다보면 다음과 같이 따옴표가 많이 들어가기 때문에 큰건 백틱 \` 을 안은 큰, 작은 따옴표로 나눠서 처리하는 것이 좋을 것이다

key 객체에서 자체적으로 code값을 가지고있기 때문에 숫자로 넣어도 인식된다.브라우저 객체의 최상위 객체이다.(브라우저 창)사용자의 모니터 정보(속성)을 제공하는 객체이다.사용자 브라우저 주소창 url에 대한 정보(속성, 새로고침, 등 여러메소드)를 제공한는 객체이

request가 있으면 해당 reponse가 전달될 때까지 다른 request를 요청할 수 없는 통신방법이다.request를 보내더라도 response를 언제 받아도 상관없이 다른 request를 요청할 수 있는 통신방법이다.예시로 검색창에 검색 시 바로바로 추천 검색

변수 변경은 굳이 다시 선언할 필요 없다.변수명은 숫자로 시작할 수 없다.변수명은 최대한 자세하게 작성해야한다.의미가 불명확한 단어들의 조합은 피해야한다.str.length; : 문자열의 길이를 출력document.write(); : 내용을 출력document.writ

JS 연산자 문자열도 산술 연산자 사용 가능하다 이때 +연산자만 사용가능 증감 연산자 ++num, --num, num++, num-- 이 있다. DOM 문서 객체 모델 (Document Object Model) 객체 지향 모델로써 구조화된 문서를 표현하는 형식 js

JS 각종 web 기술 소개

2. 실습 1. 내비게이션 기능 클릭하면 해당 부분으로 천천히 이동하도록 하는 기능 HTML 본문 Script 2. 이미지 슬라이드(1) HTML 본문 Script 3. 탭 버튼 기능 HTML 본문 Script CSS 4. 이미지 슬라이드(2) HTML

자바스크립트 실행 JS 흔히 인터프리터 언어(위에서부터 순서대로 실행시키는 언어 ex. python, matlab)라고 말하지만 컴파일언어의 면모가 있습니다. JS 컴파일은 여러단계로 구성되며, 각 단계별로 코드를 철리하는 목적이 다릅니다. JS의 컴파일 과정을 이해하

실행 컨텍스트 실행 컨텍스트는 JS의 여러 개념을 깊게 이해하기 위해 중요한 개념이다. JS 스펙에도 명시되어있어, 실행 컨텍스트(Execution Context)를 이해하면 자바 스크립트의 동작을 스펙 레벨에서 이해하고 활용할 수 있습니다. JS code의 실행 1

실행 컨텍스트 혹은 실행 맥락은, 자바스크립트 코드가 실행되는 환경코드에서 참조하는 변수, 객체, this등에 대한 레퍼런스가 있다.실행 컨텍스트는 전역에서 시작해, 함수가 호출될 때 스택에 쌓이게 된다. 그래서 콜 스택은 실행 컨텍스트 스택이라고도 불린다.우선 다음과

일급 객체란, 다른 변수처럼 대상을 다룰 수 있는 것을 말한다.자바스크립트에서 함수는 일급 객체이다.즉, 자바스크립트에서 함수는 변수처럼 다룰 수 있다.JS에는 전역으로 존재하는 Function이라는 객체가 있는데 그래서 우리가 만든 모든 함수들은 바로 이 functi

this가 가리키는 것 함수가 상황에 따라 4가지로 다르게 호출된다. 함수호출 : 함수를 직접 호출 메서드호출 : 객체의 메서드를 호출 생성자 호출 : 생성자 함수를 호출 간접 호출 : function 객체를 상속받는 call, apply, bind 등으로 함수를

Rest Operator 함수의 인자, 배열, 객체 중 나머지 값을 묶어 사용하도록 한다. 함수의 인자 중 나머지를 가리킨다. 배열의 나머지 인자를 가리킨다. 객체의 나머지 필드를 가리킨다. 함수인자 Rest Operator 함수 인자 rest operator는,

JS engine은 JS 코드를 읽고 parsing 후 실행하는 프로그램이다.작성한 JS code는 JS engine을 통해 AST로 parsing 되고 실행된다.Chrome 브라우저의 경우 V8 engine을 사용한다.node.js는 브라우저 외의 환경에서 JS코드를

JS 내장객체 1 JS 내장객체 2 JS 내장객체 3

문제영어 문장을 입력받아, 알파벳의 개수를 세어 결과를 출력하는 앱을 만들어봅니다.문제RelativeTime.diff(date) 는 또 다른 과거 시간 date를 인자로 받아, date와의 시간 차를 상대 시간으로 표시합니다.문제초기 예금액(principal), 이자율

JS 제어흐름 JS는 다른 멀티 스레드 프로그래밍 언어(JAVA, C++)와 다른 방식으로 비동기 동작을 처리한다. 즉, 만약 setTimeOut같은 함수를 만났다면 밑에 코드를 쭉쭉 실행하고 나중에 시간에 맞춰 다시 돌아온다는 뜻이다. 그래서 JS는 비동기 제어흐름을

Promise API는 비동기 API중 하나이다.Task Queue가 아닌 Job Queue 혹은 microtask queue를 사용한다.Job Queue는 Task Queue보다 우선 순위가 높다.즉, Promise의 처리가 setTimeout의 처리보다 먼저다.비동

HTTP, REST API HTTP Web에서 서버와 클라이언트 간의 통신하는 방법을 정한 것. 클라이언트는 웹 브라우저 등 서버로 요청을 보내는 대상. 서버는 클라이언트가 요청을 보내기 전까지 대응하지 않음. 서버와 클라이언트 사이에 무수히 많은 요소가 존재. HTT

반에 손석희를 좋아하는 동생이 callback 함수에 대해 물어봤다.앞에 매우 많은 포스트에 콜백 이라는 단어를 썼지만 그저 매개변수처럼 작동하는 추상적인 개념으로만 알고 있을 뿐 설명하기엔 내 지식이 부족했다.그래서 하나하나 매우매우 쉽게 짚어보자const deter

DOMContentLoaded load beforeunload unload

HTTP는 헤더와 본문으로 구성되어 있다. HTTP 본문에는 실제로 통신과정에서 주고 받을 컨텐츠가 담겨져 있다. HTTP 헤더는 HTTP메시지(요청/응답)와 본문에 대한 정보를 말해주고 있다. 이에 대해서 이해하는 것이 실제로 중요하다. 해당 메시지가 제공하는 기능에

JS코드를 이해하고, 실행하는 프로그램으로 인터프리터라고 이해하면 된다.V8 : chrome와 Electron, Node.js, Microsoft에서도 사용중이다.SpringMonkey : firefox에서 사용중이다.JsvaScriptCore : 오픈 소스로 appl

JS의 객체는 property와 method로 이루어져 있다.python의 객체는 attribute와 method로 이루어져있다.CSS는 property로 이루어져 있다.HTML은 attribute와 attribute value를 가질 수 있다고 함.이름 : 값 쌍들이

python과 가장 유사한 반복문객체의 property들과 method들을 확인할 때 사용하는 반복문Object.entries(객체명) : \[키, 값, 키, 값...]Object.keys(객체명) : 키, 키, 키...Object.values(객체명) : 값, 값,

Hoisting hoisting : "끌어올린다"를 뜻하며 python과 다르게 선언된 var변수와 함수가 밑에있어서 위로 끌어올려서 사용하는 것. 편리하긴 하지만 일반적인 논리순서( 선언-> 초기화-> 사용 )가 아니기에 되도록 피하는 것이 좋다! 따라서 이것만 기억

document : 구조화된 데이터dom : 구조화된 문서를 객체로 표현하는 형식HTML 파일 가져오기가져온 HTML 파일을 parsing하여 DOM tree 생성,CSS 파일을 parsing 하여 CSSOM tree 생성DOM/CSSOM tree 기반으로 Render

ES6 문법의 JS는 모듈방식의 코드를 작성할 수 있는 기능이 있다. 따라서 여러 파일로 코드를 분리할 수 있다. 그리고 이를 Html 파일에서 "올바른" 순서로 불러오면 된다.예를 들어import는 이렇게가장 자주사용하는 것은 마치 python에서 다양한 librar

우선 iterator의 사전적 뜻은 반복자 이다. 그러다면 우선 반복문에 대하여 알아보자.ES5 : array.forEach 사용. break가 불가하다.ES6 : for (const item of array) 사용. 배열에서만 사용 가능하다(for - of 구문).E

우선 이벤트 버블링과 캡쳐링에 대해 간략히 설명하자면 사용자가 어떠한 요소를 클릭했을 때 DOM 트리의 상위요소까지 모두 눌리는 것이 Bubbling 하위소요까지 모두 눌리는 것이 Capturing이다.그러다면 예제로 밑에 코드를 살펴보자

micro task que, task que

var를 사용하지 말자. 다음과 같은 이유로 var 대신 let과 const를 사용해야 한다.범위가 분명해진다. (지역변수)전역 객체를 생성하지 않는다.동일 변수명을 다시 선언할 때 오류를 표시한다.주석은 소프트웨어를 작성할 때 기본적인 부분이다. 이는 우리가 읽고 있

//gi 는 JavaScript에서 사용되는 정규표현식(Regular Expression)입니다. 이 정규표현식은 입력된 문자열에서 영문 대/소문자(a-z, A-Z)와 숫자(0-9) 이외의 모든 문자를 찾아서 삭제하는 역할을 합니다. 자세히 설명하면, /로 시작하고

우선 FE Developer가 back-end에서 넘어온 사용자의 민감 정보들을 안전하게 저장하기위해 고려할 수 있는 방법들에 대해 소개하겠다.프론트엔드 애플리케이션의 메모리에 데이터를 저장할 수 있다. 그러나 이 방법은 브라우저가 닫히면 데이터가 소멸되므로 장기적인

위 코드에서는 requestAnimationFrame 메서드를 사용하여 애니메이션을 구현합니다. 클릭 이벤트가 발생하면 animate 함수가 호출되며, 각 프레임마다 진행 상태에 따라 요소의 너비를 변경합니다. 전체 전환 시간인 duration 동안 요소의 너비가 시작

비트 연산자(bitwise operator)비트 연산자는 비트(bit) 단위로 논리 연산을 할 때 사용하는 연산자이다.또한, 비트 단위로 전체 비트를 왼쪽이나 오른쪽으로 이동시킬 때도 사용한다.(<<,>>)&,|는 너무 잘 아니 패스하고^는 두 인자(비트)값

default 값을 설정할 때는 항상 뒤에 변수부터 채워줘야한다.이떄 pointer가 아닌 copy 복사본임을 숙지해야한다.원래 배열을 변경하지 않는다. => 복사본을 만든다.alias는 : 오른편이다.원래 객체를 변경하지 않는다. => 복사본을 만든다.

앞으로 설명은 vue.js를 기준으로 설명된다. 물론 ui를 업뎃하기위해 react의 state나 vue의 ref로 관리하는 것은 같은 개념이니 크게 다르지 않을 것이라 생각된다.우선 가장 애를 먹은 설치 부분이다. 우선 v-world에서 제공하는 WebGL의 3d 지

클러스터링 우선 클러스터링을 구현하는 방법부터 알아보자. 자주 사용되는 클러스터링 알고리즘은 DBSCAN, K-Means, 그리고 Grid-based 클러스터링 등이 있다. 위 그림을 보면 쉽게 알아낼 수 있는데 쉽게 말하면 K-Means는 거리 기반이고 DBSCAN

openlayer + vanilla JS를 사용하는 이유 우선 앞서 포스팅한 vue3-openlayers 라이브러리를 사용하지 않는이유는 첫번째. 개구리다. 뭐가 많이 없고(제공하는 메서드들이 시원치 않다.) 이번에 완료한 드론 프로젝트에서 복잡한 요구사항들을 완성시키

우선 v-world 좌표 1개 가지고 polygon 그리기 https://www.vworld.kr/dev/v4dv2ddataguide2s002.do?svcIde=cadastral cors 문제 https://www.vworld.kr/v4pobrdqnas002.d

문제점 타사와 협업을 진행하였다. 진행하는 과정에서 아래와같은 cctv url을 받았다. "뭐 같이 협업하는 곳에서 굳이 이렇게...?" 라고 생각했다. 왜냐하면 우선 cctv는 rtsp라는 real time stream protocol을 사용한다. 그리고 이는

뭐 정확히 말하자면 자동 생성보단 브라우저 기능 중 http req path에 앞에 주소값을 명시하지 않으면 자동으로 현재 연결된 ip 주소를 자동으로 넣어준다.그래서 api 작성시 경로를 /api/api2/create 으로 잡아주면 프로젝트에서는 자동으로 앞에 자기

자바 스크립트로 flutter의 모달 창을 구현해보자.

아니 gif 왜 깨지는건데~ 개억울하잖슴~대충 아래 사진과 같다 사실 저 체크박스를(모양은 토글이지만 넘어가자) 정확히 aim하여 클릭하기란 정말 어려운 일이다.그래서 대충 id나 이름이나 여타 다른 컬럼을 클릭해도 체크박스가 활성화되도록 만들고싶었다.방법은 매우 간단

토이 프로젝트를 개발하다보면 가끔 import, export 모듈을 인식하지 못 하는 경우가 발생한다. 그래서 이를 원래는 html 에서 모듈 타입을 지정하면 해결되는데 이렇게 타입을 명시해 ES6 모듈로서 스크립트를 로드할 수 있다. 그런데 이를 적용해도 해결이 안

Canvas 알아보기 캔버스 동작원리 참고로 이제 webgl 등 다른 context 를 사용하려면 브라우저 설정에서 webgl이 활성화되어 있는지 확인해야한다고 한다. 그리고 또 사용자의 브라우저 설정이나 설치된 확장 프로그램(예: 광고 차단기)에 의해 webgl이

gooey effect 란 겹치는 영역에 선을 이어 마치 끈적끈적하게 보이도록 하는 이펙트이다.https://css-tricks.com/위 배열에서 주대각선의 점들을 보면 블러가 처리됨에도 불구하고 대비가 높으면 아무것도 적용되지 않은 점과 크게 다른 점이 없

우선 앞서 배운 코드를 기반으로 대충 퍼지는 코드를 작성해보면 우선 <canvas> 의 전반적인 설정값을 갖고있을 CanvasOption 클래스그리고 각각의 점이 될 Particle 클래스그리고 마지막으로 실제 그려주는 로직이 들어가는 Canvas 클래스를 생성해