코딩게임

Tailwind CSS # 시작하며 오늘은 현재 프론트엔드 인턴으로서 근무하며 사용하고 있는 Tailwind CSS에 대해 정리해보려 한다. 현재 많은 실무에서 Tailwind CSS를 적극적으로 도입하고 있으며, 다양한 장점들로 인해 개발 속도가 확실히 빨라지는 효과를 경험해 볼 수 있었다. 무엇보다 클래스 이름을 직관적으로 각각 설정하고, 스타일 시트를 옮겨가며 *context switching을 할 필요가 없어서 좋았다. 또한 페이지를 생성한 후, 수정 작업을 진행할 때 코드를 한눈에 파악이 가능할 수 있어 스타일 수정에 시간 단축을 할 수 있었다. *context switching - 현재 진행하고 있는 Task(process, thread)의 상태를 저장하고 다음 진행할 Task의 상태 값을 읽..

JSX # 시작하며 리액트 프로젝트를 생성하여 사용하기 위해서는, 다음과 같이 React를 import하는 것이 필요하다. import React from 'react'; 위 코드는 React를 불러와 사용이 가능하도록 해준다. 리액트 프로젝트를 만들 때 npm install 명령어를 통해 node_modules라는 디렉터리도 함께 생성하는데, 해당 과정에서 node_modules 디렉터리 내부에 react module이 생성된다. 따라서 최종적으로 import 구문을 통해 리액트를 불러와 사용할 수 있는 것이다. 이렇게 모듈을 불러와 사용하는 것은 브라우저에는 없던 기능이다. 브라우저가 아닌 환경에서 JS 실행을 가능하게 하는 환경인 Node.js에서 지원하는 기능이다. 이러한 기능을 브라우저에서 사용..

React # 시작하며 현재 자바스크립트는 많은 개발자들에게 사용되고 있으며, 웹 애플리케이션에서 핵심적인 역할을 차지하고 있다. 또한 서버사이드와 모바일, 데스크톱 애플리케이션(Slack, Atom, VS Code)에서도 활약하고 있다. 이렇게 확장되는 범위 속에서, 규모가 큰 애플리케이션을 프론트엔드 사이드에서 관리하려면, 다양한 프레임워크(Vue.js, Angular, Backbone.js 등)의 사용이 필요하다. 프레임워크들은 주로 MVC, MVVM 아키텍처를 주로 사용한다. 이와 같은 프레임워크는 공통적으로 애플리케이션에서 사용하는 데이터를 관리하는 영역인 Model과 사용자에게 보이는 부분인 View를 가진다. 프로그램이 사용자에게 어떠한 작업을 입력받으면, 컨트롤러는 해당 모델의 데이터를..