항해 후31 Promise, Callback 차이점 Callback 특정 함수에 매개변수로 전달된 함수를 의미합니다. Callback 함수는 함수를 전달 받은 함수 안에서 호출됩니다. Callback 함수에서 Callback을 받지 않는다면 함수의 과정이 끝나기도 전에 다음 프로세스를 진행하는 경우가 있습니다. 이럴 경우 Callback 함수는 가독성이 좋지 않습니다. function Callback(callback){ function Callback2(callback){ function Callback3(callback){ console.log('무한콜백'); } } } 위와 같이 무한 콜백이 일어날 수도 있습니다. 가독성이 떨어지고 실수 위험도 커지게 됩니다. 그래서 ES7에서는 Promise를, ES8에서는 async/await을 지원합니다. Pro.. 2022. 2. 10. Closure “함수”란 반환된 내부함수를 의미하고, “그 함수가 선언될 때의 렉시컬 환경(Lexical environment)” 이란 내부 함수가 선언됐을 때의 스코프를 의미한다. 즉, 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출 되어도 그 환경(스코프)에 접근할 수 있는 함수를 말한다. 이를 조금 더 간단히 말하면 클로저는 자신이 생성 될 때의 환경(Lexical environment)을 기억하는 함수라고 할 수 있다. Closure | PoiemaWeb 클로저(closure)는 자바스크립트에서 중요한 개념 중 하나로 자바스크립트에 관심을 가지고 있다면 한번쯤은 들어보았을 내용이다. execution .. 2022. 2. 10. AJAX Ajax란? Asynchronous Javascript And XML의 약자로, JavaScript의 라이브러리 중 하나입니다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 전체 페이지를 새로고침 하지 않아도 페이지의 일부분만을 위한 데이터를 로드하는 기법을 말하며 JavaScript를 사용하여 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고 받는 기술입니다. 즉, 서버와 비동기적으로 데이터를 주고 받는 자바스크립트 기술입니다. Ajax를 사용하는 이유 페이지 전체를 새로고침 하지 않고 데이터를 불러오고 싶은 화면만 바꾸고 싶을 때 사용합니다. 기본적으로 HTTP 프로토콜은 클라이언트 쪽에서 Request를 보내고, 서버 쪽에서 Response를 받으면 이어졌던 연결이 끊.. 2022. 2. 9. MVC 패턴 MVC 패턴이란? 모델-뷰-컨트롤러(model–view–controller, MVC)는 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다. velog.io MVC 패턴이란? 모델-뷰-컨트롤러(model–view–controller, MVC)는 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴입니다. 이 패턴을 성공적으로 사용하면, 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나 그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있습니다. MVC에서 모델(Model)은 애플리케이션의 정보(데이터)를 나타내며, 뷰(View)는 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타내고, 컨트롤러(Controller)는.. 2022. 2. 8. CSR vs SSR SSR이란? Server Side Rendering의 약자로, 말 그대로 서버 쪽에서 렌더링 준비를 끝마친 상태로 클라이언에게 데이터를 전달하는 방식이다. 사용자가 웹사이트에 요청을 보낸다. 서버는 'Ready to Render', 즉시 렌더링 가능한 HTML 파일을 만든다. (리소스 체크, 컴파일 후 완성된 HTML 컨텐츠로 만든다.) 클라이언트에 전달되는 순간, 이미 렌더링 준비가 끝난 상태이기 때문에 HTML은 즉시 렌더링 되어서 사용자의 화면에 출력된다. 그러나 사이트 자체는 조작이 불가능하다. (JavaScript가 읽히기 전이기 때문에) 클라이언트가 자바스크립트를 다운 받는다. 자바스크립트를 다운 받는 사이에 유저는 컨텐츠를 볼 수는 있지만 사이트를 조작 할 수는 없다. 브라우저는 이때 사용자.. 2022. 2. 8. DOM(Document Object Model) DOM이란? Document Object Model의 약자로, 문서 객체 모델로 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. 자바스크립트는 이러한 객체 모델을 이용하여 요소나 속성을 추가, 변경, 제거 하거나 이벤트를 조작 할 수 있습니다. + 인터페이스란? 서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고 받는 경우의 접점이나 경계면을 말한다. 즉, 사용자가 기기를 쉽게 동작 시키는 데 도움을 주는 시스템을 의미한다. 컴퓨터 시스템끼리 정보를 교환하는 공유 경계를 뜻하기도 한다. DOM 종류 Core DOM : 모든 문서 타입을 위한 DOM 모델 HTML DOM : HTML 문.. 2022. 2. 8. webPack webPack이란? 웹을 개발하다보면 다양한 확장자의 파일을 만들게 됩니다. 이렇게 다양한 소스는 웹 어플리케이션을 무겁게 만듭니다. 통신이 있을 때마다 이 소스들을 로딩하는 작업은 고비용입니다. 많은 JS 패키지를 사용하다보면 예상하지 못한 충돌로 인해 어플리케이션이 깨지게 될 수도 있습니다.(같은 이름을 변수를 사용하는 등). 이를 해결하기 위해 등장한 도구가 Bundler입니다. bundle은 묶는다는 뜻으로 여러개의 파일을 묶어주는 어떠한 정리 방법입니다. 구체적인 기술에는 WebPack, Broserify, Parcel이 있습니다. WebPack은 가장 인기있는 도구입니다. 하나의 JS 파일에 .js뿐만 아니라 .css나 image 파일 등을 모듈에 모두 몰아넣을 수 있습니다. 동시에 성능을 향.. 2022. 2. 8. 웹 스토리지 웹스토리지란? 쿠키와 비슷하게 해당 도메인과 관련된 특정 데이터를 서버가 아닌 클라이언트에 저장 할 수 있도록 하는 기능입니다. 쿠키(Cookies) 본연의 역할이 있기 때문에 스토리지로 사용하지 않는 것이 좋습니다. 그리고 쿠키는 HTTP 요청이 있을 때마다 외부로 함께 전달되기 때문에 데이터를 조금만 저장해도 소모하는 전체 데이터 양이 급격하게 늘어날 수 있습니다. 쿠키는 비동기로 동작하지만 웹 워커에서는 접근할 수 없으며, 로컬 스토리지나 세션 스토리지와 마찬가지로 문자열만 저장할 수 있습니다. 세션 스토리지(Session Storage) 세션, 쿠키와 달리, 탭/윈도우 단위로 세션 스토리지가 생성 됩니다. 즉, window 객체와 동일한 유효 범위 및 생존 기간을 가지며, 탭/윈도우를 닫을 시 데.. 2022. 2. 8. TDD TDD란? Test-Driven Development의 약자로써, 테스트 주도 개발이라고 합니다. 개발을 하는 데 있어서 테스트가 주가 되어 개발 한다는 의미를 지니고 있습니다. 그 말은 곧 “테스트를 염두에 둔 프로그램 개발 방법”이라고 이해하면 됩니다. 이와 같이 그림을 통해 한눈에 차이점을 볼 수 있습니다. 테스트 코드를 작성하면 결과를 예상 해볼 수 있기 때문에 설계의 문제로 인한 오류 개선 속도가 한층 빨라질 것임을 직관적으로 알 수 있습니다. TDD의 장점은? 객체지향적인 코드 개발 설계 수정 시간의 단축 디버깅 시간의 단축 (디버깅이란? 컴퓨터 프로그램 개발 단계 중에 발생하는 시스템의 논리적인 오류나 비정상적 연산(버그)을 찾아내고 그 원인을 밝히고 수정하는 작업 과정을 뜻합니다.) 유지 .. 2022. 2. 7. 이전 1 2 3 4 다음 728x90
