JavaScript 4

[JavaScript] setTimeout(), setInterval()

오늘은 Javascript에서 제공하는 Timer 함수인 setTimeout(), setInterval() 함수에 대해 알아보도록 하겠습니다. setTimeout()어떠한 코드를 실행하지 않고, 일정 시간 기다린 후에 실행하는 경우에 사용하는 함수첫 번째 인자로는 실행할 코드를 담고 있는 함수를 받고, 두 번째 인자로는 지연 시간을 ms 단위로 받습니다.ex) setTimeout(() → console.log(”2초 후에 실행됨”), 2000)세 번째 인자부터는 가변 인자를 받게 됩니다. 첫번째 인자로 넘어온 함수가 인자를 받는 경우, 이 함수에 넘길 인자를 명시해 주기 위해서 사용합니다.function add(x, y) { console.log(x + y);}setTimeout(add, 2000, 3..

JavaScript 2024.07.31

[Frontend] localStroage vs SessionStorage

오늘은 웹 브라우저에서 클라이언트 측 데이터를 저장하는데 사용되는 메커니즘인 localStorage, SessionStorage에 대해 알아보겠습니다.   HTML5를 사용하기 시작한 이래로 클라이언트 브라우저에 정보를 캐시하거나 저장하는 다양한 옵션이 제공되었습니다. 이전에는 브라우저에 데이터를 저장할 때 쿠키만 사용했지만, 제한적인 용량과 보안적인 문제로 인한 한계가 존재했습니다. 이에 대한 개선안으로 localStorage, SessionStorage가 도입되었는데, 이 두 개의 특징과 차이점에 대해 간단하게 설명드리겠습니다. localStorage저장방식: 웹 브라우저에서 키/값 쌍형태로 저장합니다. (로컬 컴퓨터에 저장)유지기간: 영구적으로 데이터 저장(도메인별로 지속), 브라우저를 닫아도 데이..

JavaScript 2024.07.11

[Frontend] JavaScript 디버깅을 위한 크롬 개발자 도구에 대해 알아보자

JavaScript 디버깅뿐만 아니라 많은 기능을 제공해 주는 크롬 개발자 도구가 무엇이고 왜 필요한지에 대해 설명드리도록 하겠습니다. 중점은 디버깅("Console", "Source" 탭에서 활용)이지만, 디버깅뿐만 아니라 크롬 브라우저에서 제공해 주는 다양한 기능에 대해서도 설명드리겠습니다.   html, css, javascript는 서버의 어떤 요청을 받았을 때 내려받게 되는 자원들입니다. 이 언어들은 컴파일이 된 상태에서 불러오지 않고, 런타임 시점에 언어가 브라우저에서 해석됩니다. 이들이 잘 동작하지 않을 때 크롬 개발자 도구를 띄워놓고 쉽게 찾을 수 있게 됩니다.  또한 HTTP 통신과정, HTML 구조, CSS 스타일, Javascript 디버깅, 프로파일링, 성능 진단 등을 할 수 있습니..

JavaScript 2024.06.01

[AngularJS] AngularJS Framework에 대해 알아보자

AngularJS는 JavaScript 기반의 오픈소스 프론트엔드 웹 애플리케이션 프레임워크의 하나로, 싱글 페이지 애플리케이션 개발 중에 마주치는 여러 문제들을 해결하기 위해 개발되었으며, 주로 구글과 개별 커뮤니티, 여러 회사에 의해 유지보수 되고 있습니다. 추가적으로, 리치 인터넷 애플리케이션에 공통적으로 사용되는 구성 요소들과 더불어 클라이언트 사이드의 MVC(Model-View-Controller), MVVM(Model-View-View-Model) 구조를 위한 프레임워크를 제공함으로써 이러한 애플리케이션들의 개발 및 테스트를 단순화할 수 있습니다. (https://ko.wikipedia.org/wiki/AngularJS) BootStrap AngularJS BootStraper가 수행하는 작업..