프로젝트/마이에디터 : 나만의 에디터
프론트엔드 개발환경 구축 - VScode + React
설치 작업 | VScode 먼저 VScode를 설치하고 몇 가지 Extension을 설치했습니다. 코드 뒤에 남는 불필요한 공백을 삭제해주거나, 괄호가 제대로 짝지어져 있는지 색상을 표시해주는 기능 등 편의성을 위한 것부터, 디버깅 기능까지 추가할 수 있습니다. | node.js, npm, yarn node.js, npm, yarn을 설치했습니다. 각각의 역할은 다음과 같습니다. node.js : Jabascript 런타임. Babel, Webpack 등의 모듈을 가지고 있음 npm : Node Package Manager. Node.js의 패키지를 관리 yarn : npm에 비해 속도가 향상된 패키지 매니저 React 개발환경 구축 | create-react-app (CRA)로 개발환경 구축하기 아래와..
프론트엔드 개발환경 구축 - React vs Vue
컴포넌트 단위의 개발 방식과 Virtual Dom이라는 이점 때문에 React나 Vue.js를 사용하는 것이 좋겠다는 결론을 내렸습니다. 두 가지 모두 비슷한 장점을 가지고 있고, 성능 면에서도 큰 차이는 없기 때문에, 이후에는 직접 간단한 Todo List를 작성해보며 차이점을 비교해보았습니다. Todo List 작성하기 | 구성 참고 : 벨로퍼트와 함께하는 모던 리액트 위 자료를 참고하여 작성했던 React의 Todo List와 거의 동일한 것을 Vue에서도 만들어보았습니다. 왼쪽이 Vue.js, 오른쪽이 React로 만든 Todo List입니다. 몇 가지 CSS적용을 누락한 것을 제외하면 완전히 똑같이 작동하고 있습니다. 리액트는 create-react-app으로, 뷰는 vue-cli로 간단하게 프..
프론트엔드 개발환경 구축 - 프레임워크란? 바닐라 JS vs 프레임워크
지난 시간에 이어, 이번에는 프레임워크를 조사해보았습니다. 평소에 저는 팀 프로젝트 외에는 주로 바닐라 JS로 개발을 진행하기 때문에, 프레임워크를 썼을 때의 장점은 무엇인지, 쓴다면 무엇을 선택하는 것이 좋을지를 중점적으로 살펴보았습니다. 프레임워크(Framework) 또는 라이브러리 프론트엔드 프레임워크는 컴포넌트별 개발을 용이하게 도와주며, 유저 인터랙션에 따라 반응하는 웹을 구현해야 할 때 DOM과 state의 처리를 도와줍니다. 주로 많이 사용되고 있는 것으로는 라이브러리인 React와 프레임워크인 Vue.js, Angular가 있습니다. 우선 Angular는 러닝 커브가 크고, 장기 프로젝트 또는 대형 프로젝트에 좀 더 알맞기 때문에 제외하였고, Vue.js와 React를 비교해보았습니다. V..
프론트엔드 개발환경 구축 - IDE/편집기 조사 및 장단점 비교
개발환경 구축이란? 개발에 필요한 컴파일러, IDE, 라이브러리, 프레임워크 등을 컴퓨터에 세팅하는 것을 의미합니다. 저는 크게 다음 3가지로 나누어서 조사한 뒤 직접 비교해보고, 최종적으로 환경 구축을 진행할 계획입니다. IDE(통합개발환경) 또는 편집기 WebStorm, VScode, Sublime Text, Atom 등 프레임워크 React, Angular, Vue.js 등 그 외 Babel, Webpack 등 IDE(통합개발환경) 또는 편집기 먼저, 조사를 시작하면서 IDE와 편집기가 서로 구분된다는 것을 알게 되었습니다. IDE 대규모에 적합 / 디버깅 가능 VScode, Atom, IntelliJ, WebStorm 편집기 소규모에 적합 / 가볍지만 다양한 확장기능 보유 VScode, Atom,..