본문 바로가기

What would life be If we had no courage to attemp anything?

Language/JavaScript28

[JavaScript] 마우스 및 휠 이벤트 (onMouseEnter, onMouseLeave, onWheel) [JavaScript] 마우스 및 휠 이벤트 (onMouseEnter, onMouseLeave, onWheel)회사 서비스를 구현 하면서 회사 자체 컴포넌트 툴팁 스펙때문에,마우스가 텍스트 위에 존재 하지 않음에도 휠 이벤트 발생시 툴팁이 계속 떠있는 현상이 발생하였다. 그래서 tooltip이 떠야 하는 텍스트에 onMouseEnter, onMouseLeave, onWheel 이벤트 핸들러들을 사용하여 이를 해결할 수 있었다. onMouseEnter 이벤트onMouseEnter 이벤트는 마우스 포인터가 특정 요소에 처음으로 들어갔을 때 발생하는 이벤트.이 이벤트는 사용자가 마우스를 요소 위로 이동시킬 때 트리거 된다.onMouseEnter는 해당 요소의 자식 요소에는 이벤트를 전파하지 않기 때문에 부모 .. 2024. 5. 20.

[JavaScript] 팝업 창 구현 - window.open [JavaScript] 팝업 창 구현 - window.open프로젝트에서 기획 명세를 바탕으로 독립된 팝업 창을 구현해야 했다.JavaScript의 window.open 메서드를 사용하여 팝업창을 구현하였다. window.open 메서드새 브라우저 창이나 탭을 열 때 사용하는 메서드window.open(url, windowName, [windowFeatures]);- url : 팝업 창에 로드할 페이지 URL- windowName : 팝업 창의 이름. 같은 이름을 가진 창이 이미 열려있다면 해당 창을 재사용.- windowFeatures : 팝업 창의 특성을 정의하는 문자열. 코드 예시약관 보기 Reference Window: open() method - Web APIs | MDNThe open() m.. 2024. 5. 20.

[JavaScript] javascript 알아둘 것 보호되어 있는 글 입니다. 2023. 1. 31.

[JavaScript] LocalStorage와 SessionStorage Local Storage와 Session Storage 🏰 웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장 페이지를 새로 고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아 있음 쿠키 대신 다른 객체를 사용해 데이터를 저장하는 이유? 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않음 쿠키보다 더 많은 자료 보관 가능 대부분의 브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있음 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정 쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리.. 2023. 1. 29.

[JavaScript] async / await 2 에러 처리 에러는 호출자(caller) 방향으로 전파 콜 스택의 아래 방향(실행 중인 실행 컨텍스트가 푸시되기 직전에 푸시된 실행 컨텍스트 방향)으로 전파 하지만, 비동기 함수의 콜백 함수를 호출한 것은 비동기 함수가 아니기 때문에 try…catch문을 사용해 에러를 캐치할 수 없음 try{ setTimeout(()=>{ throw new Error('Error!') },1000) } catch(e) [ cosole.log('캐치한 에러',e) } async/await에서는 에러 처리에 try...catch 문을 사용할 수 있음. 콜백 함수를 인수로 전달받는 비동기 함수와는 달리 프로미스를 반환하는 비동기 함수는 명시적으로 호출 할 수 있기 때문에 호출자가 명확. const fetch = require(.. 2023. 1. 26.

[JavaScript] async / await 1 async / await 왜 사용할 까? Promise 체이닝은 콜백 지옥을 벗어나게 했지만, Promise 체이닝 또한 길어질 경우 여전히 가독성이 떨어짐 ES2017에 처음에 등장한 async, await는 syntactic sugar로 Promise 사용을 좀 더 편리하고 세련되게 편리하게 할 수 있도록 처리 async 키워드는 함수 앞에 붙임 함수 앞에 async 붙게 되면 promise를 반환한다는 의미 async/ await 프로미스를 기반으로 동작 프로미스의 then/catch/finally 후속 처리 메서드에 콜백 함수를 전달해 비동기 처리 결과를 후속 처리할 필요 없이 동기 처리처럼 프로미스를 사용 async함수 await 키워드는 반드시 async 함수 내부에서 사용 async 함수는 .. 2023. 1. 25.

[JavaScript] Event-onChange onChange? 작성한 JS를 통해 변화가 일어났는지 감지 input 태그의 포커스를 벗어났을때 (즉, 입력이 끝났을때) 발생 cf.onInput() input 태그 안의 값들이 변경 될때마다 이벤트가 발생 React에서 input의 onChange 한 번에 관리하기 로그인, 회원가입 페이지 구현시 여러개의 input을 관리 이를 모두 다른 state로 관리하는 것은 코드가 너무 복잡해짐! //각각의 state로 관리 시 import React,{useState} from'react' export default function App(){ const [id,setId] = useState('') const [pw,setPw] = useState('') const [nickname,setNickname].. 2023. 1. 22.

[JavaScript] Event-onFocus, onBlur focus, blur? //예시 코드 이메일: focus 이벤트는 요소가 포커스를 받을 때, blur 이벤트는 포커스를 잃을 때 발생 blur 핸들러에선 필드에 이메일이 잘 입력되었는지 확인하고, 잘 입력되지 않은 경우에 에러를 보여줌 focus 핸들러에서는 에러 메세지를 숨김 focus와 blur 이벤트는 버블링 되지 않음. 캡처링이나 focusin ,focusout 을 사용하면 이벤트 위임 효과를 볼 수 있음 현재 포커스된 요소는 document.activeElement를 통해 확인할 수 있음 focus 가능한 HTML요소 대화형 요소 a button details input select textarea 이외의 요소는 비대화형 요소로 칭함. 💡 비대화형 요소에도 강제로 tabindex를 사용해 포커싱.. 2023. 1. 20.

[JavaScript] 비동기 동기 처리와 비동기 처리 JavaScript 엔진 싱글 스레드(signle thread) 방식 cf. 브라우저는 멀티 스레드로 동작! 한 번에 하나의 태스크만 실행 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업중단)이 발생 동기 처리 방식 💡 현재 실행중인 태스크가 종료할 때 까지 다음에 실행될 태스크가 대기하는 방식 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장됨 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹 됨 /* 동기 처리 방식 * 현재 실행 중인 태스크가 종료할 때 까지 다음에 실행될 태스크가 대기하는 방식 */ //함수 sleep은 delay가 경과한 후에 콜백함수(func) 호출 function sleep(func, delay){ //Date.now()는 현재 시간을 .. 2023. 1. 17.

[JavaScript] API API 시스템이 만들어 놓은 서비스 창구 REST API REpresentational State Transfer 클라이언트와 서버가 주고 받는 메시지(데이터) 형식 HTTP 메서드(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD를 적용 JSON Server를 이용한 REST API 실습 1. JSON Server 설치 mkdir json-server-exam && cd json-server-exam npm init -y npm install json-server --save-dev 2. db.json 파일 생성 /json-server-exam/db.json { "todos":[ { "id":1, "content":"HTML", "completed":true }, { "id".. 2023. 1. 16.

[JavaScript] AJAX & JSON AJAX Asynchronous JavaScript And XML (비동기식 JavaScript와 XML) 서버와 통신하기 위해 XMLHttpRequest 객체를 활용 JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있음 [참고] AJAX의 X가 XML을 의미하긴 하지만, 요즘은 더 가벼운 용량과 JavaScript의 일부라 는 장점 때문에 JSON을 더 많이 사용함 |특징 페이지 전체를 reload(새로 고침)를 하지 않고서도 수행되는 “비동기성” 서버의 응답에 따라 전체 페이지가 아닌 일부분만을 업데이트 할 수 있음 AJAX의 주요 두가지 특징은 아래의 작업을 할 수 있게 해줌 페이지 새로 고침 없이 서버에 요청 서버로부터 데이터를 받고 작업을 수행 |X.. 2023. 1. 15.

[FE/JavaScript] 구조 분해 할당(디스트럭처링 할당) 구조 분해 할당 💡 구조 분해 할당이 뭔가요? 💡구조 분해 할당은 크게 어떤 종류가 있나요? Q.구조 분해 할당 (디스트럭처링 할당) 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 - MDN 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것 🧐 iterable? 반복 가능한 객체(iterable object) 혹은 줄여서 iterable 내장된 생성자 중 iterable 객체를 만들어내는 생성자 String Array TypedArray Map Set Q.구조 분해 할당 왜 쓰이죠? 배열과 같은 이터러블 또는 객체 이터럴에서 필요한 값만 추출하여 변수에 할당 시 유.. 2022. 7. 6.

[FE/JavaScript] strict mode 💡 strict mode가 뭔가요? 💡strict mode를 통해 무엇을 예방할 수 있죠? 🎈strict mode란? 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시키는 것 ES5(ECMA Script 5)에 추가된 키워드 🎈 strict mode를 통해 무엇을 예방할 수 있나요? use strict는 자바스크립트의 의도치 않은 여러 잠재적인 오류를 막아주는데 많은 도움을 준다. 잘못 사용하면 없던 오류를 새로 만들어내는 경우도 있다. 반대로 공식용어는 아니지만, 가끔 엄격하지 않은 기본 값을 sloppy mode(느슨한 모드) 라고 부르기도 한다. sloppy mode의 예제 실행 결과는 어떨까? function foo(){ x.. 2022. 6. 27.

[FE/JavaScript]this like this yo like this Q.this가 뭔가요? this는 자기참조변수 자신이 속한 객체나 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable) 😲q**.왜 사용하는데?** 동작을 나타내는 메서드는 자신이 속한 객체의 상태(프로퍼티)를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 하기 때문! +)this의 특징 this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조 가능! 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달 this가 가리키는 값, 즉 this binding은 함수 호출 방식.. 2022. 6. 23.

[FE/JavaScript] 생성자 함수에 의한 객체 생성 생성자 함수에 의한 객체 생성 Q.생성자 함수가 뭔가요? A. 생성자(constructor)함수는 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수! 생성자 함수에 의해 생성된 객체를 **인스턴스(instance)**라고 함. Q.객체 리터럴로 만들 때와는 무슨 차이가 있죠? 왜 생성자 함수를 사용하나요? ▶객체 리터럴에 의한 객체 생성 방식의 문제점 객체 리터럴 방식으로 생성된 객체는 같은 형태의 객체를 재생성 불가! 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 할 경우 매번 같은 프로퍼티를 기술 해야함(비효율적) ▶생성자 함수를 사용한 객체 생성 방식 생성자 함수에 의한 객체 생성 방식은 마치 객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼 생성자 함수를 사용해 프로퍼티 구조가 동.. 2022. 6. 13.

JavaScript - Event *️⃣ Event |Event (이벤트) 개념 네트워크 활동이나 사용자와의 상호작용 같은 사건의 발생을 알리기 위한 객체 이벤트 발생 마우스를 클릭하거나 키보드를 누르는 등 사용자 행동으로 발생할 수도 있음 특정 메서드를 호출(Element.click())하여 프로그래밍적으로도 만들어낼 수 있음 |Event 기반 인터페이스 AnimationEvent, ClipboardEvent, DragEvent 등 UIEvent 간단한 사용자 인터페이스 이벤트 Event의 상속을 받음 MouseEvent, KeyboardEvent, InputEvent, FocusEvent 등의 부모 객체 역할을 함 |Event의 역할 “~하면 ~한다.” “클릭하면, 경고창을 띄운다.” “특정 이벤트가 발생하면, 할 일을 등록한다.” .. 2022. 5. 3.

JavaScript - DOM(Document Object Model) |DOM 조작 - 개념 Document는 문서 한장(HTML)에 해당하고 이를 조작 DOM 조작 순서 선택(Select) 변경(Mainpulation) |DOM 관련 객체의 상속 구조 Event Target Event Listner를 가질 수 있는 객체가 구현하는 DOM 인터페이스 Node 여러 가지 DOM 타입들이 상속하는 인터페이스 Element Document 안의 모든 객체가 상속하는 가장 범용적인 인터페이스 부모인 Node와 그 부모인 EventTarget의 속성을 상속 Document 브라우저가 불러온 웹 페이지를 나타냄 DOM 트리의 진입점(entry point) 역할을 수행 HTMLElement 모든 종류의 HTML 요소 부모 element의 속성 상속 |DOM 선택 – 선택 관련 메서드 .. 2022. 5. 3.

JavaScript - Asynchronous JavaScript(콜백함수, Async callbacks,Promise), Axios *️⃣ Callback Function - 인자로 넘기는 함수 다른 함수에 인자로 전달된 함수 외부 함수 내에서 호출되어 일종의 루틴 또는 작업을 완료함 동기식, 비동기식 모두 사용됨 그러나 비동기 작업이 완료된 후 코드 실행을 계속하는 데 주로 사용됨 비동기 작업이 완료된 후 코드 실행을 계속하는 데 사용되는 경우를 비동기 콜백(asynchronous callback)이라고 함 |JavaScript의 함수 === “일급 객체(First Class Object)” 일급 객체 (일급 함수) 다른 객체들에 적용할 수 있는 연산을 모두 지원하는 객체(함수) 일급 객체의 조건 인자로 넘길 수 있어야 함 함수의 반환 값으로 사용할 수 있어야 함 변수에 할당할 수 있어야 함 |Async callbacks 함수 ⇒ .. 2022. 5. 3.

JavaScript - AJAX, Asynchronous (비동기) *️⃣AJAX Asynchronous JavaScript And XML (비동기식 JavaScript와 XML) 서버와 통신하기 위해 XMLHttpRequest 객체를 활용 JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있음 [참고] AJAX의 X가 XML을 의미하긴 하지만, 요즘은 더 가벼운 용량과 JavaScript의 일부라 는 장점 때문에 JSON을 더 많이 사용함 |특징 페이지 전체를 reload(새로 고침)를 하지 않고서도 수행되는 “비동기성” 서버의 응답에 따라 전체 페이지가 아닌 일부분만을 업데이트 할 수 있음 AJAX의 주요 두가지 특징은 아래의 작업을 할 수 있게 해줌 페이지 새로 고침 없이 서버에 요청 서버로부터 데이터를 받고 작업을 수행.. 2022. 5. 3.

JavaScript - 프로토타입(prototype), 클래스(class) 🤍프로토타입(prototype) |JS의 상속과 객체 JS는 객체지향 프로그래밍 언어 JS의 객체는 key-value 구조의 자료구조 Python과 같은 클래스기반의 객체지향 프로그래밍 언어의 객체와 다름 JS는 클래스개념이 존재하지 않고, 프로토타입이라는 개념을 활용해 상속을 구현 ES5 까지는 이러한 방식으로 원하는 객체를 생성하였으나, ES6+ 부터는 class 키워드로 대체 function Rectangle(width, height) { this.width = width this.height = height } Rectangle.prototype.getArea = function () { return this.width * this.height } function Square(length) { R.. 2022. 5. 3.

JavaScript - this this - "자기참조변수" 정의 내가 어떻게 불리느냐에 따라 바인딩 되는 것. 목적 "객체"에서 "내"가 프로퍼티나 메서드를 참조하기 위해 "어디서" "어떻게" 부르느냐에 따라 this는 달라진다! 일반 함수로 호출 되었을 때 -> **전역 객체** 함수() -> window function test(){ console.log(this) } test() Window {0: global, window: Window, self: Window, document: document, name: '', location: Location, …} 메서드로 호출 되었을 때 -> **"그" 메서드를 보유한 객체 ** 객체.메서드() ->객체 const obj = {} const obj = { test : function.. 2022. 5. 2.

JavaScript - 객체(Objects) 🤍객체(Objects) - “다양한 형태의 자료형”을 가진 자료구조 객체 : '키'와 '값'으로 이루어진 '프로퍼티'들의 집합! (키와 값의 집합) 객체의 목적 : 다양한 "데이터 타입"의 자료들을 할당하기 위함 프로퍼티 키 : (문자열) 프로퍼티 값 : (모든값) 프로퍼티 값이 함수인 경우를 "메서드" 메서드 : 객체안의 함수 객체안에 프로퍼티 값이 함수인 : 메서드 함수 안에 메서드가 포함!! |객체의 정의와 특징 객체는 속성(property)의 집합이며, 중괄호 내부에 key와 value의 쌍으로 표현 key는 문자열 타입*만 가능 (참고) key 이름에 띄어쓰기 등의 구분자가 있으면 따옴표로 묶어서 표현 value는 모든 타입(함수포함) 가능 객체 요소 접근은 점 또는 대괄호로 가능 (참고) ke.. 2022. 4. 27.

JavaScript - 배열(Arrays) 🤍배열(Arrays) JavaScript에서의 배열은 “정식 배열”이 아님! “유사 배열 객체”임! →객체 const a = [] typeof a //'object' 배열의 정의와 특징 키와 속성들을 담고 있는 참조 타입의 객체(object) 순서를 보장하는 특징이 있음 주로 대괄호를 이용하여 생성하고, 0을 포함한 양의 정수 인덱스로 특정 값에 접근 가능 배열의 길이는 array.length 형태로 접근 가능 (참고) 배열의 마지막 원소는 array.length – 1로 접근 const numbers = [1,2,3,4,5] console.log(numbers[0]) //1 console.log(numbers[-1]) //undefined console.log(numbers.length)//5 cons.. 2022. 4. 27.

JavaScript - 문자열(String) 🤍문자열 |문자열 관련 주요 메서드 includes split replace trim |includes string.includes(value) 특정 문자열의 존재 여부를 참/거짓으로 반환 const str = 'a santa at nasa’ str.includes('santa') // true str.includes('asan') // false |split string.split(value) 문자열을 토큰 기준으로 나눈 배열 반환 value가 없을 경우, 기존 문자열을 배열에 담아 반환 value가 빈 문자열일 경우 각 문자로 나눈 배열을 반환 value가 기타 문자열일 경우, 해당 문자열로 나눈 배열을 반환 const str = 'a cup’ str.split() // ['a cup’] str.sp.. 2022. 4. 26.

JavaScript - 함수(function) 🤍함수 - 인풋값에 어떠한 조작을 가해 아웃풋 값을 뽑는 것 |함수 in JavaScript 참조 타입 중 하나로써 function 타입에 속함 JavaScript에서 함수를 정의하는 방법은 주로 2가지로 구분 함수 선언식 (function declaration) 함수 표현식 (function expression) |함수 선언식 함수의 이름과 함께 정의하는 방식 3가지 부분으로 구성 함수의 이름(name) 매개변수 (args) 몸통(중괄호 내부) function name(args) { //do something } function add(num1,num2){ return num1+num2 } add(1,2) |함수 표현식 const name = function (args){ //do something }.. 2022. 4. 26.

JavaScript - 조건문 🤍조건문 |조건문의 종류와 특징 ‘If’ statement 조건 표현식의 결과값을 Boolean타입으로 변환 후 참/거짓 판단 조건은 소괄호! 실행할 코드는 중괄호! 블록스코프 생성 if (condition){ //do something }else if (condition){ //do something }else { //do something } const nation = 'korea' if (nation ==== 'korea'){ console.log('안녕하세요!') } else if (nation === 'spain'){ console.log('hola!') } else { cosole.log('hello') } ‘switch’statement 조건 표현식의 결과값이 어느 값(case)에 해당하는지.. 2022. 4. 26.

JavaScript - 데이터 타입, 연산자 🤍데이터 타입 |데이터 타입의 종류 자바스크립트의 모든 값은 특정한 데이터 타입을 가짐 크게 원시타입(Primitive type)과 참조타입(Reference type) 으로 분류 원시 타입(Primitive type) 참조 타입(Reference type) 객체(object)가 아닌 기본 타입 객체(object)타입의 자료형 변수에 해당 타입의 값이 담김 변수에 해당 객체의 참조 값이 담김 다른 변수에 복사할 때 실제 값이 복사됨 다른 변수에 복사할 때 참조 값이 복사됨 |원시타입의 undefined타입과 null타입 비교 undefined null 빈 값을 표현하기 위한 데이터 타입 빈 값을 표현하기 위한 데이터 타입 변수 선언 시 아무 값도 할당하지 않으면, 자바스크립트가 자동으로 할당 개발자가 의.. 2022. 4. 26.

JavaScript - intro, 변수 JavaScript 기초 a=b —> b를 a에 “할당”한다 할당 : “최초”에 무언가를 a에 넣는 행위 재할당 : “같은공간(메모리→변수a)”에 무언가를 넣는 행위 데이터 타입 : 원시값,객체값 🤍Intro |브라우저 (browser === browse;검색하다+er;~하는 것) URL로 웹(WWW)을 탐색하며 서버와 통신하고, HTML 문서나 파일을 출력하는 GUI 기반의 소프트웨어 인터넷의 컨텐츠를 검색 및 열람하도록 함 “웹 브라우저”라고도 함 주요 브라우저 Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, Safari |JavaScript의 필요성 브라우저 화면을 ‘동적’으로 만들기 위함 브라우저를 조작할 수 있는 유일한 언어 🤍Browser |B.. 2022. 4. 26.

이전 1 다음

티스토리툴바