Front-End20 [HTML 코딩 테크닉] Input Autocomplete(Auto-fill)를 제어하는 방법 회사 플랫폼 개발 중 사용자가 로그인 되어있는 상태에서 페이지 1에 진입하여 특정한 Action을 실행할 때, 비밀번호를 한번 더 사용자로부터 입력을 받아 Confirm후 해당 작업을 진행할 수 있는 기능이 있었다. 사용자의 비밀번호 입력을 위해 Input 요소를 추가해주었고, type도 당연히 "password"로 설정해 주었다. 패스워드를 확인한 후 다른 페이지로 redirect 되어지게 되는데(Client side), 이 때 브라우저(Chrome)는 ID, PW를 보냈다고 판단하여 "방금 보낸 ID와 PW 정보를 저장할거야?"라고 물어보았는데 무의식적으로 "저장하겠다" 버튼을 한 번 클릭했었다. 그 후 페이지 1에 다시 들어왔는데, 아까 비밀번호 재Confirm을 위해 사용하던 Input eleme.. 2021. 4. 11. [회고] 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. 이전 1 2 다음
