본문 바로가기

전체 글57

[회고] WPF 프로젝트 첫 회사에 입사하고, 반년쯤 지나 첫 프로젝트가 주어졌는데 1:n의 구조를 가진 간단한 정보 n개를 넣어야 하는 프로젝트가 있었다. 나는 그 프로젝트를 담당하여 개발을 진행했고, 무엇으로 개발을 진행할지 여러 가지를 알아보던 도중 .Net의 WPF라는 윈도우 UI 개발 도구를 알게 되었고 프로젝트 보고에서 이러한 도구들이 있다고 상사에게 조금 해보고 싶다는 어투로 어필을 했다. 그러하여 WPF를 사용한 프로그램을 개발하기 시작했는데, 초반에는 빠른 속도로 진행되기 시작했다. 그러나 C#을 기반으로 WPF가 작동하기 때문에 C#에 대한 기술 숙련도가 얇은 나는 개발 후반으로 가면 갈수록 자잘한 오류들이 발생하고, 트러블슈팅을 하는데에 시간을 많이 소비하게 되었다. 어찌어찌하여 웬만한 오류들을 전부 체킹하고.. 2021. 4. 7.
[JS 코딩 테크닉] AND, OR 연산자를 사용한 코딩 테크닉 JS 코드를 작성하다 보면, 조건부로 스크립트를 실행할 때가 정말 많습니다. 보통 간단한 로깅이나 함수 하나를 호출하는 경우가 많은데, 이런 경우에 모두 조건문(if)를 사용하여 코드를 작성하면 배보다 배꼽이 더 큰 경우가 있을 수 있습니다. 예를 들어 아래와 같은 경우가 있습니다. if (isMobile) { // 모바일 환경일 때, runMobileProcess() // 모바일 관련 로직을 실행합니다. } 총 3줄의 코드를 AND 연산자를 사용하여 1줄로 바꾸어줄 수 있습니다. isMobile && runMobileProcess() 위와 같이 간단히 바꾸어 사양을 만족하면서, 코드를 작성할 수 있습니다. AND 연산자는 당연히 연산 값들이 Boolean으로 변환되었을 때 모두 true가 되어야 연산 .. 2021. 3. 30.
Webpack 개발 환경과 배포 환경의 환경변수 분리 | Dotenv | DefinePlugin | Environment Variable Dotenv와 Webpack DefinePlugin을 활용하여 개발/배포 환경의 환경 변수 설정을 분리하였습니다. 들어가며 웹 개발 환경에서는 여러 가지 환경 변수(상수)를 선언하여 개발을 진행할 환경이 종종 생깁니다. Dotenv를 사용하여 환경 변수를 선언할 수 있는 환경을 구성합니다. 보통 웹 페이지 개발을 할 때 개발 서버에서 개발과 테스트를 마친 뒤 개발 서버 배포 후 라이브 서버에 배포하는 프로세스로 일을 진행하게 되는데 개발 서버의 상수 변수와 배포 서버의 상수 변수가 따로 설정되어야 하는 상황이 있습니다. (예로 API 서버 호스트를 들 수 있겠습니다.) 이러한 상황을 환경 변수로 관리하기 위해서 설정한 환경 변수를 Webpack에 넘겨주어 JS context에서 사용할 수 있습니다. We.. 2021. 3. 21.
Webpack 개발환경 기초 셋업 Webpack을 사용하여 개발환경을 구축하는 과정을 서술합니다. 우선 필요한 패키지는 다음과 같습니다. - webpack - webpack-cli - webpack-dev-server - html-webpack-plugin webpack: 웹팩의 코어입니다. webpack-cli: 간단히는, 웹팩 커맨드를 터미널에서 실행할 수 있게 해 줍니다. webpack-dev-server: 개발서버를 열 수 있습니다. 이로써 개발을 더 쉽게 해 줍니다. html-webpack-plugin: 간단히는, Webpack으로 번들링 한 JS 파일을 내 Html파일에 자동으로 삽입해 줍니다. 1 npm 프로젝트를 생성합니다. npm init -y 명령어로 간단히 생성합니다. -y 옵션은 프로젝트 생성 시 모든 항목을 기본 .. 2021. 3. 14.
Polyfill 이란? 폴리필은 브라우저가 지원하지 않는 기능들을 사전에 채워 넣어(PolyFill), 개발자가 해당 기능을 사용할 수 있게 하는 역할입니다. 예를 들어 크롬 브라우저에서는 지원하는 기능이지만, IE11 버전의 브라우저에서 지원하지 않는 DOM API나 Object의 Method들을 꼽을 수 있고, 그중 Element.append() method 나 Element.classList.add() method의 multiple parameter 가 있습니다. 이 외에도 커버할 수 있는 많은 기능이 있습니다. (본문 하단 링크의 웹사이트 참조) 간단하게 살펴보자면 아래와 같이 기본적으로 IE에선 Element.append() method를 지원하지 않습니다. (IE11 에선 appendChild() 함수를 사용합니다... 2021. 3. 9.
JS NodeSelector 살펴보기 평소에 사용하던 NodeSelector 들을 명확하게 정의하고자 합니다. NodeSelector 는 JavaScript 코드에서 DOM에 존재하는 하나이거나 여러개의 Node(Element)를 선택하기 위해 사용하는 method 입니다. NodeSelector 의 종류로는 - getElementsByClassName() - getElementById() - getElementsByName() - getElementsByTagName() - querySelector() - querySelectorAll() 등이 있습니다. getElementsByClassName() 파라미터로 넘긴 String을 전체 Elements의 class를 대상으로 탐색을 실행합니다. 반환값은 HTMLCollection 입니다. -.. 2021. 3. 7.
Handlebars, DOMParser, NodeSelector를 사용한 랜더링 함수 만들기 React를 사용하지 않고(웹팩도) 단순하게 파일을 Link 하여 개발할 일이 생겼다. (유지보수 관련) 나는 Vanilla JS로 개발할 때에는 템플릿 엔진이 필수적이라고 생각한다. SSR로 구성된 페이지들은 필요가 없을 수 있겠지만, CSR로 구성된 페이지들은 사용자와의 인터렉션을 통해 유기적으로 UI가 추가, 삭제, 변경 되야하기 때문에 라고 생각한다. 템플릿 엔진은 대중적 이라고 생각되는 Handlebars 템플릿 라이브러리를 사용하였다. 템플릿을 랜더링하여 실제 DOM에 반영하는 프로세스는 다음과 같습니다. - Id로 참조하여 String template 가져옴 - 템플릿 컴파일(Handlebars.compile) 실행 - 컴파일된 템플릿에 후처리 대상인 Element 참조 - 후처리 대상 El.. 2021. 3. 3.
Vscode로 일반 웹 프로젝트에 hot-module-replace격의 기능을 사용하기 평소 간단한 테스트를 할 때 굳이 Webpack 프로젝트를 구성하지 않고 기본적인 HTML, JS, CSS 파일들을 단순 Link 하여 진행할 때가 많습니다. 하지만 CRA 프로젝트나, webpack-dev-server의 hot-module-replace 기능을 사용해본 개발자로써 해당 기능은 개발 소요 시간을 많이 줄여주고, 귀찮음을 해결해줄 수 있는 기능이란 것을 알기 때문에 webpack으로 만들지 않은 프로젝트에서도 HMR격의 기능을 사용할 수 있는지 알아보던 중 Vscode의 Extension(부가기능)중 Live Server라는 패키지를 찾았습니다. 설치부터 활용까지 방법은 아주 단순합니다. 과정은 아래와 같습니다. 1) Vscode의 `Extensions`(Ctrl+Shift+X)탭으로 이동.. 2021. 2. 28.
React 프로젝트 구성하기 without CRA 주요 디펜던시 요소 - react, react-dom - webpack, webpack-cli, webpack-dev-server - @babel/core, @babel/preset-env, @babel/preset-react - babel-loader, css-loader, style-loader, file-loader - html-webpack-plugin, clean-webpack-plugin, mini-css-extract-plugin react, react-dom react: 리액트 코어 입니다. (!) react-dom: 리액트가 DOM을 컨트롤 할 수 있는 Methods를 제공합니다. webpack: 모듈 번들러인 웹팩의 코어입니다. webpack-cli: webpack을 커맨드 라인에서 사.. 2020. 11. 13.

티스토리툴바