728x90 반응형 javascript4 Callback에 대한 의문과 Promise 와 Async/Await 를 쓰는 이유 (feat.비동기vs동기) 콜백이 무엇이고, 콜백을 사용해야하는 이유가 무엇인가? 콜백함수는 한마디로 비동기 작업을 처리할 때 순서를 보장해주는 함수이다. 자바스크립트에서 비동기 작업을 해야할 때가 생긴다. 그럴 때 제일 중요한 것은 순서이다. 예를 들어 토스트에 잼을 발라서 먹으려고 하는데 집에 잼은 있는데 빵이 없다. 그래서 이상적인 순서가 아래와 같다면 마트에서 빵을 사고 -> 빵을 굽고 -> 빵에 잼을 바르기 위 순서가 지켜져야지만 원하는 결과를 얻을 수 있을 것이다. 컴파일러는 기본적으로 위에서 아래로 코드를 읽고 컴파일하지만 비동기 작업은 순서가 보장되지 않기 때문이다. 그러면 그 순서를 보장해줘야 하는데 그때 쓰는게 콜백이다. 위 내용을 콜백함수를 쓰는 코드로 바꾸면 아래와 같을 것이다. function getBrea.. 2024. 1. 30. 자바스크립트를 HTML과 분리했는데 작동하지 않는 경우 보통 HTML과 자바스크립트를 따로 분리하는 게 보기 편하고 보기 편하기 때문에 유지보수가 더 용이한데 그 분리작업이 쉬울 것 같은데? 생각보다는 쉽지 않다. 오늘은 외부로 분리한 나의 자바스크립트 파일이 왜 작동하지 않는지 그 원인을 알아보고 해결책에 대해 소개해보려고 한다. 원인 & 해결책 1. VIEW 단에서 경로를 제대로 설정하지 않아서 컴파일러가 찾지 못하는 경우 ->본인이 사용하는 템플릿 엔진에 맞게 외부 자바스크립트 파일을 놓아야 하고 그 경로를 본인이 사용하는 템플릿 엔진에 맞게 설정해주어야 합니다. EX: 타임리프라는 템플릿 엔진을 사용중이라면 다음과 같은 폴더에 저장하면 됩니다. resources->static->js->html이름->js이름 호출할 때는 2. jQuery 를 사용중이라.. 2022. 10. 14. [Spring Boot] 세상 쉬운 검색창(검색 로직) 만들기 1-1 (View) 웹페이지하면 검색창 없는 곳이 드물정도로 검색창이 많은데 이 검색창 구현이 생각보다 엄청 쉽다는 것을 개발을 처음 접한 사람들은 모를 수 있다. 바로 구현해보자. 1. View단에서 텍스트를 입력할 수 있는 INPUT 태그를 만든다. 1-1. 위 INPUT 태그에 사용자가 입력한 값을 컨트롤러에 보낼 수 있도록 Form으로 감싸준다. ... 1-2. Submit 역할을 하는 버튼을 만들고 응용하고 싶다면 이를 검색이라는 텍스트 대신 아이콘으로 대신한다. 검색 1-3. [ 응용 ] 아이콘을 누르지 않고 그냥 엔터를 쳐도 값이 전달되도록 한다. function enterkey() { if (window.event.keyCode == 13) { document.getElementById("폼 ID").subm.. 2022. 9. 24. [JavaScript] 코드 인터프리터 작동 원리 및 순서 ( 비동기 vs 동기) 기본적으로 컴퓨터는, 그리고 인터프리터는 작성된 코드를 위에서부터 읽고 순차적으로 코드를 실행시킨다. 즉 위에서 아래로 코드 실행 순서가 정해진다는 뜻이다. 하지만! 특정 코드에서 결과를 얻기까지 오랜 시간이 걸리면 어떻게 될까? 예를 들어 1분이 걸린다고 가정해보자. 그러면 아래 줄의 코드는 전혀 실행되지 않는 병목 현상이 생기게 되는 것! 언제 그럴까? 1. 네트워크 통신 2. 복잡한 계산을 실행하는 코드 3. 타이머를 정해두고 그 시간이 만료되면 코드를 실행하는 함수를 쓴 경우 (예: setTimeout(), setInterval() ) 가 대표적인 케이스이다. 위와 같은 상황을 방지하고 빨리빨리 실행할 수 있는 것부터 실행하기 위해서 자바스크립트는 비.동.기 방식을 지원한다. 비동기 방식이란? 어.. 2022. 2. 18. 이전 1 다음 728x90 반응형
