🗝️소프트웨어/📗JavaScript

[f/e] 캡쳐링과 버블링

1. 캡쳐링과 버블링 캡쳐링(capturing)은 이벤트가 가장 상위의 부모 요소에서부터 시작하여 실제 이벤트가 발생한 요소까지 내려오는 과정을 의미합니다. 따라서 이벤트가 발생한 요소에서 이벤트 리스너를 등록했더라도, 상위 요소에 등록된 이벤트 리스너가 먼저 호출됩니다. 반면에 버블링(bubbling)은 이벤트가 발생한 요소에서 시작하여 상위 요소로 전파되는 과정을 의미합니다. 이 경우에는 이벤트가 발생한 요소에서 등록한 이벤트 리스너가 먼저 호출되고, 그 후에 상위 요소에 등록된 이벤트 리스너가 호출됩니다. 이벤트 리스너를 등록할 때, 세 번째 인자로 이벤트 전파 방식을 설정할 수 있습니다. 예를 들어, 아래와 같은 코드에서 캡쳐링을 사용하도록 설정할 수 있습니다. document.getElement..

비동기 API 처리

비동기 처리를 위해서 axios 를 사용했다. 그렇다면 비동기 처리는 무엇인가? - 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고, 다음 코드를 먼저 실행하는 자바스크립트의 처리 방법 대표적인 예로, 물건을 여러건 배송보내는 것을 생각하면 쉽다. 순서에 상관없이 여러 목적지에 보내도 알아서 배송 프로세스 따라서 물품 배송이 멈추지 않고 진행된다. axios는 무엇인가? - axios 라이브러르에서 사용하는 Promose 객체에 대해서 먼저 살펴보도록 하자. - 비동기 작업이 하게 되면 결과가 어쨋든 성공이거나 실패 아니면 둘도 아닌 진행중인 상태가 있을 것이다. - 그래서 다음 3가지 결과에 대해서, 성공 했을때는 어떤 행동을 하고, - 실패를 했을때에는 어떤 행동을 해야하는지를 정해놓은게 ..

[webpack-dev-server] 코드 변경사항 바로 반영(js)

드디어 webpack.config.js 파일에 코드를 추가해서, 매번 빌드하지 않고도 빠르게 개발하는 방법을 터득했다. 새로고침해도 변경이 안되었는데, 하루 고민하고 방법 터득했다!! [webpack-dev-server] Hot Module Replacement enabled. log.js:1 [webpack-dev-server] Live Reloading enabled. log.js:1 [webpack-dev-server] App hot update... 참고로 이렇게 뜨면 성공한건데, 맨처음에 콘솔창에, 이렇게만 뜨고 핫리로딩이 안되는 경우가 존재하는데, 설정 값을 변경해주면 된다. [webpack-dev-server] Hot Module Replacement enabled. log.js:1 [web..

[Node.js] express 와 cors 사용해서 API 만들기

npm 에 cors 와 express 를 설치해서, 간단한 API를 만들어봤습니다. cors 는 프론트에서 서버에서 제공한 API로 요청을 보낼 때, 발생하는 에러에 대해서 해결하는 방법이다. Cross Origin Resource Sharing 이와 관련된 자세한 설명은, 아래 링크에 첨부되어 있으니 해당 블로그에 접속해서 읽어보면 큰 도움이 될 것이다. https://bohyeon-n.github.io/deploy/web/cors.html CORS란? CORS를 해결해보자 | 구보현 블로그 CORS란? CORS를 해결해보자 20200522 프로젝트를 하면서 프론트에서 서버에서 제공한 API로 요청하자, CORS 에러가 발생했다. 지금까지 CORS에러를 해결하기만 하고 정확히 CORS가 무엇이고 어떻게..

자바스크립트에서 화살표를 사용하는 이유

데이터의 수가 길어지는 경우, find 를 통해서 특정 key 값에서의 value 를 찾아봐야할 때가 존재한다. 그때, function 을 사용한 경우와 화살표 함수만 사용한 경우가 있다. 사용하는 방법을 잘 보면, 왜 화살표 함수가 편하지 알 것이다. const settingState = [ { "engname": "template_name", "korname": "탬플릿 이름", "value": "테스트 템플릿 1" }, { "engname": "toffice_id", "korname": "Toffice 아이디", "value": "22019" }, { "engname": "toffice_password", "korname": "Toffice 비밀번호", "value": "22019" }, { "en..

[자바스크립트] Math 함수 이용하여 로또 번호 생성하기

랜덤 숫자를 이용하여, 가볍게 로또 번호를 만드려고 한다. 조건은 1. Math.random() 이용하기 2. 반올림, 올림, 내림을 최소 1번 이상 사용하기 3. switch 문 1번 이상 사용하기 4. 최대, 최소값을 입력값으로 받는 함수 사용하기 5. 함수값은 객체 타입으로 반환하기 6. 결과값은 배열로 보이기 7. 자바스크립트 console 로 보이고, html 에서 h1 태그로 해당 값들을 보이기 등이다. 알아야할 개념으로는 1. 자바스크립트 객체를 배열로 전환하는 방법 2. html 에 js 데이터 값 보이는 방법 로또 번호의 경우 1부터 45까지 있으며, 중복을 허락하지 않는 조건이 있다는 전제하에 코드를 작성하도록 한다. 코드가 긴데, 생각나는데로 하다보니, 리팩토링이 필요한 부분이 보이긴..

[Vuetify] 동기,비동기,

동기 방식과 비동기 방식 동기 방식 순차적으로 진행이 되어야 하는 것으로 서버에 요청을 보낼시 응답이 돌아와야 다음 작업이 수행 가능함 비동기 방식 요청을 보낼때 응답 상태와 무관하게 다음 동작을 수행할 수 있으며 결과값이 나오는 것과 별개로 아래의 코드들이 실행된다 예를들어, setTimeout() 메소드를 생각해보면, 비동기 APi 이며, 첫번째 인자는 콜백 함수를 사용하며, 두번째 인자는 지연시간이다 두번째 인자가 0 이기에 1 -> 2 -> 3 으로 출력될거라 생각할 수도 있다 console.log("1"); setTimeout( () => { console.log("2"); }, 0); console.log("3"); 하지만, 비동기 메소드는 이를 처리하는 다른 프로그램이 담당하기에, 1 -> ..

node 이용한 json 콜백 함수

node.js 는 자바스크립트 자바스크립트코드를 읽어서 처리해 주는 런타임 런타임을 쉽게 말하면 실행기이며 기존 HTML에 종속되어 HTML 없이는 읽을 수 없었던 javascript가 강해질 수 있던 계기도 javascript를 실행해주는 Node가 생긴 이후로 생각할 수 있음(중요) express 설치는 npm install express json 형태의 api를 만들어주는 코드 node b.js 로 서버 실행시켜주기 /aaaa 로 api를 만들어준 것 위와 같은 내용으로, callback 함수를 정의해줄 수 있다 127.0.0.1은 루프백 ip 이다 ㅇ

json 데이터 vscode로 깔끔하게 보는 방법(feat.정렬)

확장자 : beautify 설치 후 json 파일을 생성해서, f1 키 + beautify file 클릭하면 정렬되지 않았던 텍스트가 다음과 같이 깔끔하게 정렬되는 것을 확인할 수 있음 before after

[AWS + Filezila] 웹서비스 배포 시현 영상

다른 것보다 시현 영상(사진)과 코드이다 코드 1. app.py 2. index.html app.py from flask import Flask, render_template, request, jsonify app = Flask(__name__) # DB from pymongo import MongoClient client = MongoClient('mongodb+srv://test:test@cluster0.wpvuwzi.mongodb.net/Cluster0?retryWrites=true&w=majority') db = client.dbsparta @app.route('/') def home(): return render_template('index.html') @app.route("/homework",..