ABBO 기술 블로그

이번에는 React를 사용하여 간단한 시계를 만들어보려고 합니다. 가장 먼저 설치를 안하신 분은 여기 글로 가셔서 설치를 해주시면 되겠습니다! 앞에서 언급한대로, index.js는 React에서 사용하는 가상DOM을 렌더링 시켜주는 소스뿐이 없습니다. 이 소스를 통하여 React는 같은 경로에 있는 App.js 파일을 호출해오고 그 부분에 document.getElementById라는 DOM 선택자를 통하여 렌더링을 진행하는 간단한 소스입니다. import는 상단에 기본적으로 제공하는 React / ReactDOM / App.js와 css 파일을 진행하고 있고, serviceWorker는 해당 서비스가 정상적으로 작동하도록 도와주는 역할을 합니다. 지금은 스킵하도록 하겠습니다! 기본적으로 App.js에는..

Author: 주니용 웹 프로젝트에서 /resource/static에 들어가는 파일의 대부분은 캐시의 영향을 받습니다. 배포를 하더라도 기존의 캐시가 적용되면 캐시 삭제를 하지 않는 이상 변경되지 않습니다. 대개 *.js 파일이나 *.css 파일이 많이 수정이 되는 경우 이슈가 생겨 배포를 하더라도 클라이언트가 캐시 삭제를 하지 않는 이상 보통은 기존의 파일을 가지고 있게 됩니다. 따라서, 이를 해결하기 위한 Thymeleaf만의 꿀팁이 있습니다. 먼저 Controller의 Model에서 아무 키값에 System.currentTimemillis()를 넣어줍니다. @Controller @RequestMapping("/test") public class TestController { @RequestMappi..

이번 글에서 다루어볼 내용은 TypeScript입니다. TypeScript는 JavaScript의 확장 버전으로 한국에서는 통상 자바스크립트의 후손이라고 일컫는 용어입니다. 하지만 후손치고는 표현할 수 있는 영역이 상당하고, 기존보다 더 간편해진 문법과 어렵지 않은 코딩 방식으로 현재 JavaScript의 대를 이어 각광받는 언어로 자리매김하고 있는 언어입니다. 위에 있는 이미지에서 설명하고 있는 것과 같이 TypeScript는 어떤 환경에 관계없이 JavaScript의 슈퍼셋 타입언어이고, 순 JavaScript 파일로 컴파일이 가능하다고 하고 있습니다. 그 전에 먼저 컴파일이라는 것에 대해 알아보아야 하는데요, Compile은 쉽게 말해 사용자가 알파벳이나 숫자등으로 적어놓은 코드를 컴퓨터가 알아볼 ..

Author: 주니용 요새 IT직군에서 알아주는 회사들은 대부분 입사 전 코딩 테스트를 필수로 치루게 된다. 나도 많은 코딩 테스트를 치뤄봤지만, 서버를 주로 개발한 사람의 입장으로서 자바를 코딩 테스트 언어로 많이 선택했었다. 내가 아는 한도에서 적어도 자바스크립트를 코딩 테스트 언어로 사용하는 이유는 다음과 같을 것이다. 편해서 또는 눈에 익어서 오토캐스팅이 되서 소스코드를 빠르게 작성하기 위해서 컴파일러 설치를 안해도 되서 현재도 그렇지만, 아직까지도 웹 생태계는 지속적으로 변하고 있다. 지금의 추세는 자바스크립트를 기본으로 한 프레임워크인 리-뷰-앵(React, Vue, Angular)의 시대라고 해도 과언이 아니다. 그래서 그런지 웹 개발을 할 수 있다는 사람이 주변에 너무나도 많고, 그 때문에..

Author: 주니용 자바스크립트를 사용하다 보면 3가지의 변수 선언 타입이 존재한다. 이들의 차이점을 알기 위해서는 Hoisting & Scope 의 개념이 필요한데, Hoisting 모든 자바스크립트 변수 선언은 호이스트된다. 호이스트: 변수의 정의가 그 범위에 따라 선언 / 초기화 / 할당 분리되는 것을 의미 위 소스는 문제가 없다. 근데 아래 소스는 문제가 생긴다. let으로 선언된 변수는 에러가 발생된다. 이유는 생성 순서의 문제가 있다. 가장 먼저 실행되는 컨텍스트의 어휘적 환경(Lexical Environment)으로 범위가 지정된 변수를 정의하는데, 이 때 변수 let/const가 생성이 된다. 환경이 생성이 된 후, TDZ가 생성이 되는데 설명은 아래에 있다. * TDZ(Temporal ..