프로그래밍/웹 (51) 썸네일형 리스트형 자바스크립트 Promise Promise 자바스크립트에서 사용하는 비동기 코드 처리를 위한 객체 어떤 기능이 실행되어 정상적으로 동작하면, 성공 메시지와 처리 결과를 전달 기능 수행 시 예상치 못한 문제가 발생하면 에러를 전달 State: pending(보류) → fulfilled(성공) or rejected(실패) or settled(완료) 비동기 처리 성공 시 resolve, 실패 시 reject 함수 호출 Promise 객체의 후속 처리 메소드(then, catch)를 통해 실행된 결과 전달 Producer(생산자) 새 프로미스가 생성되면 executor라는 콜백함수가 자동 실행됨 프로미스 내의 resolve 함수가 존재하지 않으면 무한 pending 상태 아래 예제는 2초간 기능 수행 후 resolve라는 함수를 호출하면서.. 자바스크립트 callback(콜백) 함수 콜백(callback) Javascript는 synchronous(동기적) 실행 hoisting 된 이후부터, 코드가 작성한 순서대로 실행 callback - 콜백 함수는 나중에 실행하는 함수 - 동기식 콜백, 비동기식 콜백이 존재 - 동기식은 코드를 순차적으로 실행, 다음 줄 실행전에 현재 줄 코드가 완료될 때까지 대기 - 비동기식은 코드가 실행될 때까지 대기하는 동안 나머지 작업을 실행 - setTimeout은 비동기 함수 중 하나로 callback 함수를 주어진 시간 뒤에 실행 - 동작 과정은 함수를 매개변수로 전달, 특정 작업 실행 후 매개변수로 전달된 함수가 호출 (A라는 메서드 호출 시, B라는 메서드를 매개변수로 넘겨주고 A메서드에서 B메서드를 호출) - 콜백 함수 안에 또 다른 함수를 호출.. 자바스크립트 문법 정리 타입 JS는 런타임에서 타입이 정해지기 때문에 error 발생 가능성이 존재, 그에 따라 TypeScript가 개발됐다. Jquery 동적 생성 태그 이벤트 부여 동적으로 생성된 코드는 다음과 같이 이벤트를 부여하여야 한다. 만약 11번 째 소스코드가 실행될 경우 페이지가 로딩될 때 btn 아이디를 가진 태그를 찾는다. 하지만 make 버튼을 클릭해야 btn 아이디를 가진 태그가 생성되므로 해당 태그는 아직 존재하지 않는 상태이며 btn 아이디를 가진 태그는 자바스크립트 클릭 이벤트에 연결되지 않는다. 12번 째 소스코드처럼 on 메소드를 이용하면 특정 이벤트 실행 시 클릭 이벤트에 연결되어 문제가 해결된다. Python Flask 요청 처리 예제 # pip install Flask request.py from flask import Flask, request, render_template app = Flask(__name__) @app.route('/') def home(): if request.method == 'GET': name = request.args.get('name', "anonymous") return f"{name} main page" @app.route('/login', methods=['GET', 'POST'] ) def login(): if request.method == 'GET': return render_template("login.html") else: uid = request.form['uid'] upw = requ.. 자바스크립트 async와 defer 속성 자바스크립트 처리 과정 출처 : https://www.html5rocks.com 렌더링 엔진 : 웹 서버로부터 응답 받은 내용을 UI에 표현한다. 자바스크립트 해석기 : 자바스크립트 코드를 파싱하고 실행한다. 렌더링 엔진 클라이언트는 웹 서버가 응답한 HTML 문서를 HTML과 CSS로 파싱하여 화면을 구성한다. HTML 파싱 후 DOM 트리(Document Object Model)를 생성한다. DOM 트리란 HTML 문법을 브라우저에서 사용할 수 있는 객체 데이터로 생성한 것이다. 렌더링 엔진은 아래와 같이 HTML 각 태그들로 DOM 트리를 구성하여 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환한다. 브라우저마다 다른 렌더링 엔진을 사용한다. (IE-Trident, chrome-Webkit .. Content-TYPE 헤더와 MIME-TYPE ி Content-TYPE 전송하는 데이터의 형식을 지정한다. HTTP 헤더 중 하나이며 MIME 형식으로 표현한다. 전송하는 데이터는 문자열 스트림 또는 바이트 스트림으로 전송한다. 문자열 스트림은 2바이트를 입출력하여 모든 나라 언어로 구성된 파일을 입출력 할 수 있다. 바이트 스트림은 1바이트 입출력, 바이너리를 있는 그대로 송수신하기 때문에 영문자로 구성된 이미지나 동영상 같은 파일 입출력 등에 적합하다. 브라우저는 데이터를 표시할 MIME-TYPE을 확인하여 때 어떤 종류의 스트림인지 확인한다. Content-type과 반대되는 Accept 헤더는 수신할 데이터 형식을 지정한다. ி MIME-TYPE Multipurpose Internet Mail Extensions(다목적 인터넷 메일 확장자).. 스프링 실행 과정 및 요청 처리 순서 스프링 실행 과정 web.xml • web.xml 파일은 WAS 구동 시 맨 처음 로딩되는 웹 어플리케이션 환경 설정 파일이다. • web.xml은 filter > root-context.xml > servlet-context.xml 순으로 실행된다. • ContextLoaderListener • ServletContextListener • 웹 어플리케이션 실행 시 필요한 초기화 작업, 사용 후 자원 반환 작업을 수행한다. • ApplicationContext를 생성하여 오브젝트 생성, 관계 설정, 사용/제거 등의 작업을 한다. root-context.xml • Service, Repository(DAO), DB등 비즈니스 로직과 관련된 설정을 처리한다. servlet-context.xml • 서블릿(c.. 1 2 3 4 5 ··· 7
