IT 데이터베이스에 오신 것을 환영합니다.

시작으로 이직한 회사에서 사용하는 웹 기술 스택이 Vue3이다. 전 회사에서 Vue2를 사용해봤지만 스터디할 시간이 부족하여 실무하면서 그때그때 찾아보면서 스터디를 했다. 그래도 Vue3가 나온 이유의 대해서 정확하게 알지 못하기 때문에 컨셉, 새로운 기능, 주의해야할 점들을 정리해보려고 한다. 공식문서에 가이드를 보고 리스트업을 시작했다. 모든 기능을 다루기 보다 현업에서 사용하면서 정리하고 싶었던 내용을 중심으로 시작하려고 한다. Vue2의 문제점 개선 기존 Vue2의 문제점이라고 하면 크게 두 가지로 나눌 수 있다. 컴포넌트 코드 재사용성 요즘 프론트엔드 프레임워크들은 모두 컴포넌트 기반의 UI 개발... Read More

문제 발생 회사 PC는 윈도우를 사용하고 있으며 도커 환경(linux)에서 작업을 진행하고 있다. 개인노트북은 M1 맥북으로 재택이나 주말(심심할때)에 작업을 진행하고 있다. 근데, winodws > docker 컨테이너 환경으로 들어가면 변경된게 없는데 모든 소스코드가 변경된것 처럼 발생한다. 그 이유는 OS별로 CR/LF 새줄 문자 처리하는게 다르기 때문이다. 새줄 문자(new line)이란, 텍스트의 한 줄이 끝남을 표시하는 문자 또는 문자열을 말한다. 개행 문자, 줄바꿈 문자(line break), EOL(end-of-line) 모두 같은 말이다. 기종이나 운영체제별로 새줄 문자를 나타내는 코드가 다... Read More

문제 발생 최근 맥북프로를 장만하고 git, github을 개인 계정으로만 사용하고 있었다. 8/8일… 최악의 폭우로 인해 2일간 재택근무를 하게 되었다. 회사 업무는 데스크탑으로 했기 때문에 노트북을 사용할 일이 없었지만 급작스러운 재택 때문에 회사 업무관련 개발환경을 전부 셋팅해야 했다. 여기서 발생한 문제 ssh-key를 회사 github 계정에 등록했는데 Permission Error가 발생했다. 해결 방법은 간단했다. ssh-key 생성 ssh-key 등록 ssh config 파일 작성 github 계정에 ssh-key 등록 로컬 저장소별로 .git config 파일 수정 ... Read More

타입 단언 타입 스크립트는 타입 표기, 가드, 추론 등의 기법으로 값의 타입을 판단한다. 하지만 떄론 컴파일러의 정보를 무시하고 개발자가 원하는 임의의 타입을 할당하고 싶을 수 있다. 이럴 때 사용하는 것이 타입 단언(type assertion)이다. 타입 단언을 사용하는 이유 a에 10이라는 값을 할당하면 타입스크립트는 알아서 number 타입으로 추론하게 된다. 따라서, 변수 b에 a를 할당하면 b역시 number타입을 갖게 되는 것이다. 하지만, a를 최초 선언 당시 아무 값도 할당하지 않았으므로, 타입스크립트는 a를 any 타입으로 추론하게 된다. 따라서, b역시 any 타입으로 추론하는 것이다. ... Read More

화살표 함수(Arrow Function) ES6가 도입되면서 새롭게 나타난 화살표 함수(Arrow Function)는 function 키워드 대신 화살표(=>)를 사용하여 기존의 전통적인 함수표현(function)의 간편한 대안으로 새롭게 등장했다. 화살표 함수의 기본 문법은 아래와 같이 작성한다. // 기존 function logText(text){ console.log(text); } // 화살표 함수 const logText = (text) => console.log(text) // 매개변수 지정 () => { ... } // 매배변수가 없을 때 x => { ..... Read More

유니온 타입(Union Type) 유니온 타입이란, 자바스크립트의 OR 연산자(||)와 같은 의미를 갖는다. function union (name: string | Number) { console.log(typeof name); } union('10') // string union(10) // number 위 함수에 유니온 타입을 적용하면 파라미터 name에는 문자열과 숫자 타입 모두 올 수 있다. 이처럼 | 연산자를 이용하여 타입을 여러 개 연결하는 방식을 유니온 타입 정의 방식이라고 부른다. 유니온 타입(Union Type)을 사용하는 이유 유니온 타입을 사용하는 이유를 코드를 보면 이해하기 ... Read More

타입 추론(Tpye Inference) 타입 추론이란, 타입스크립트가 코드를 해석해 나가는 동작을 의미한다. let x = 3; let y = 'a'; console.log(typeof x); // number console.log(typeof y); // string 위와 같이 x와 y에 타입을 따로 지정하지 않더라도 x는 number로 y는 string 타입으로 간주한다. 변수를 선언하거나 초기화 단계에서 타입이 추론된다. 이외에도 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입 추론이 일어난다. Best Common Type 타입은 보통 몇 개의 표현식을 바탕으로 타입을 추론한다... Read More

자바스크립트에 타입 추가하는 방법 밑의 자바스크립트에서 sum이라는 함수에 들어가는 파라미터 a,b에 타입을 지정해줄 수 있는 방법이 있다. function sum(a,b){ return a+b; } sum(10,'10'); /** */ 주석처리 안에다 @param {type} 파라미터명을 적어주고 리턴되는 값도 @returns {type}으로 지정해 줄 수 있다. 타입스크립트처럼 에러를 에디터에서 확인하려면 @ts-check를 주석에 넣어주면 에러를 발생시켜준다. // @ts-check /** * * @param {number} a * @param {number} b * ... Read More

일렉트론(Electron)이란? 일렉트론은 Javascript, HTML, CSS 만으로도 데스크탑 앱을 만들 수 있는 프레임워크이다. 2013년 아톰 쉘(Atom Shell)이라 불리는 크로스 플랫폼 애플리케이션 쉘로 시작했으며 오픈소스화, 명칭 변경등을 거쳐 현재는 깃허브에서 개발하고 있다. 자바스크립트는 현재 전세계에서 가장 많은 개발자가 사용하는 프래그래밍 언어로 그 인기만큼 활용 범위가 커지고 있다. 그 중 하나가 일렉트론이다. 매년 발표되는 WEB Developer frontend roadmap을 살펴보면 데스크탑 앱에 일렉트론이 있는 것을 확인할 수 있다. 일렉트론 특징 웹기술 백엔드 ... Read More

git-flow 전략 Git-flow는 총 5가지 브랜치를 사용하고 운영한다. master 브랜치 : 기준이 되는 브랜치로 제품을 배포하는 브랜치이다. develop 브랜치 : 개발 브랜치로 개발자들이 이 브랜치를 기준으로 각자 작업한 기능들을 합(Merge)한다. feature 브랜치 : 단위 기능을 개발하는 브랜치로 기능 개발이 완료되면 develop 브랜치에 합(Merge)한다. release 브랜치 : 배포를 위해 master 브랜치로 보내기 전에 먼저 QA(품질검사)를 하기위한 브랜치이다. hotfix 브랜치 : master 브랜치로 배포를 했는데 버그가 생겼을 떄 긴급 수정하는 브... Read More

Xumm 컨셉 리플이 제공하는 XRPL Labs는 사용자가 2019 년 7 월 지갑 계정에 암호 화폐 및 화폐 통화 [예 : 유로 및 미국 달러]로 저장할 수있는 Xumm을 출시했다. XRPL Labs의 수석 개발자 Wietse Wind에 따르면이 배포의 주요 목표는 기존 금융 기관의 개입없이 은행 애플리케이션과 유사한 애플리케이션을 구축하는 것이다. 간단하게 말하면, 리플의 XRP 원장 계정을 생성하고 기존 계정을 가져올 수 있도록 도와주는 지갑이다. Xumm 용어 xumm: xumm은 iOS 또는 Android 기기 전용 xumm 앱 을 의미한다. xumm platform: xu... Read More

유동성 풀이란? 유동성 풀이란 스마트 콘트랙트 내에 통결되어 있는 자금(디지털 자산)들을 말한다. 유동성 풀은 탈중앙화된 트레이딩, 대출 등 앞으로 다양한 기능을 지원하기 위해 사용된다. 유동성 풀 유니스왑과 같은 많은 탈중화 거래소(DEX)의 핵심이다. 유동성 제공자(LP)라 하는 이들은 풀에 동일한 가치를 갖는 두 가지 토큰을 추가하고 시장을 생성한다. 자신의 자금을 제공하는 대가로, 사용자는 자신의 풀에서 발생하는 거래 수수료를 전체 유동성 내 자신의 지분에 따라 분배받는다. LP는 유동성 공급에 필요한 토큰을 보유한 자라면 누구나 될 수 있으며 AMM(자동화된 마켓 메이킹)을 통해 유동성 풀의 변화에 ... Read More

스마트 컨트랙트란? 스마트 컨트랙트(smart contract)란 블록체인 기술을 활용해 제3의 인증기관 없이 개인 간 계약이 이루어질 수 있도록 하는 기술을 말한다. 서면으로 이루어지던 계약을 코드로 구현하고 해당 계약을 이행하는 과정에서 조건 충족 여부에 대한 판단을 인간이 아닌 컴퓨터 등의 기계가 대신 실행함으로써 제3의 인증기관이 필요 없도록 하는 개념을 의미한다. 스마트 컨트랙트를 활용하면 두 당사자가 서로를 모르거나 신뢰하지 않더라도 계약을 체결할 수 있다. 그 이유는 특정 조건이 충족되지 않으면 해당 계약은 실행되지 않기 때문이다. 그렇기 때문에, 제3의 인증기관 없이도 계약을 이행할 수 있는 것이... Read More

DApp 정의 디앱(DApp) 또는 댑이란 Decentralized Application의 약자로서, 이더리움, 큐텀, 이오스 같은 플랫폼 코인 위에서 작동하는 탈중앙화 분산 애플리케이션을 말한다. 간략히 분산앱이라고도 한다. 플랫폼 위에서 작동하는 디앱의 암호화폐는 코인(coin)이라고 하지 않고 토큰(token)이라고 구별하여 부르기도 한다. ‘Daap’가 아니라 ‘DApp’가 올바른 표기법이다. ‘Dapp’ 또는 ‘dApp’이라고도 쓴다. 단수형이 아니라 복수형으로 표현하여, 디앱스(DApps) 또는 댑스(dApps)라고도 한다. 개요 디앱이란 블록체인을 기반으로 돌아가는 애플리케이션을 말한다. 쉽게 말... Read More

인터페이스란? 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 인터페이스는 보통 다음과 같은 범주에 대해서 약속을 정의할 수 있다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 인터페이스 예제 let user = { name: 'seongsik', age: 20 }; function who( obj: { name: string, age: number }) { console.log(obj.name); // seongsik console.log(obj.age); // 20 } who(use... Read More

시작으로 해당 글은 유인동님의 함수형 프로그래밍 강의내용을 정리하였습니다. 아래와 같이 함수가 중첩되어 표현되면 가독성이 떨어지기 때문에 함수형 프로그래밍에서는 코드를 값으로 다뤄 표현력을 높일 수 있다. log( reduce( add, map(p=>p.price, filter(p=>p.price>2000, prod)) ) ) go go함수에는 첫 번째는 값의 시작값을 넣고 그 외는 나머지 연산자로 함수들을 받아 값을 다음 함수로 계속해서 넘기면서 함수를 실행시켜주는 함수이다. 밑의 예제를 통해 쉽게 이해해보자. red... Read More

시작으로 해당 포스터는 리액트 컴포넌트, 엘리먼트, 인스턴스 IT 엘도라도 블로그를 참조하여 정리하였습니다. 엘리먼트(Element) 화면에 렌더링 할 DOM 노드들의 정보를 React에 알려주기 위한 수단으로 React에서 가장 작은 단위이다. 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다. type(문자열 혹은 컴포넌트 함수/클래스)과 props(객체)로 표현된다. 하나 이상의 자식 엘레먼트는 props의 children 필드로 표현... Read More

Gatsby CLI 설치하기 Gatsby CLI는 Gatsby 기반의 사이트를 빠르게 생성하는데 도와주는 명령 도구이다. 설치 npm install -g gatsby-cli 버전확인 gatsby --version Gatsby CLI version: 4.12.1 사용 가능한 명령 참고하기 gatsby --help Usage: gatsby <command> [options] Commands: gatsby develop Start development server. Watches files, rebuilds, and hot rel... Read More

문제발생 Vue 파일명을 첫 글자를 소문자로 되어있던 것을 대문자로 변경했다. 그리고 이것저것 수정하고 commit 했는데 젠킨스에서 오류가 발생하는 것이다… 로그를 확인해보니 라우터에서 바뀐 파일명을 참조하지 못하는 것이다… 이런 결론은 Git은 변경내용을 체크하는데 기본적으로 파일명/폴더명 대소문자를 구분하지 않는다는 것이다. 예를들어 user.vue라는 파일명을 User.vue로 첫 글자만 대문자로 변경해도 git은 알지 못한다. 해결방안 깃 설정을 변경해주면 깔끔하게 해결할 수 있다. $ git config core.ignorecase false 위의 설정을 변경했는데도 해결되지 않는다면 캐... Read More

시작으로 TypeScript는 마이크로소프트가 발표한 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어이다. 요새 자바스크립트보다 타입스크립트를 사용하는 기업들이 많아지고 있다. 실제로 개발자 구인 시 우대사항 및 필수사항에 명시되어 있을 정도로 웹 프론트에서 핫한 언어이다. TypeScript 등장 이전의 초창기 자바스크립트는 웹 페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용했다. 대부분 로직은 주로 웹 서버에서 실행되었고 브라우저는 서버로부터 전달받은 HTML과 CSS를 렌더링하는 수준이었다. HTML5가 등장하기 이전에는 웹 애플리케이션을 플래시, 실버라이트, 액티브엑스와 같... Read More

라이프 사이클 메서드란? LifeCycle Method란 한국말로 “생명주기”라고 한다. React, Vue, angular와 같은 프레임워크들은 MVC패턴에서 View에 해당하는 영역이다. 그렇기 때문에 각 컴포넌트들은 라이프 사이클이 존재한다. 라이프 사이클은 컴포넌트가 브라우저에 생성되고, 업데이트되고, 제거될 때 호출되는 메서드이다. 또한 클래스형 컴포넌트에서만 사용 할 수 있다. 만약, 함수형으로 컴포넌트를 구현한다면 useEffect를 사용하여 라이프사이클을 구현해야한다. 일단, 라이프 사이클의 유형과 어떻게 사용하는지를 익히는 것에 집중해보자. 그리고, 아래의 이미지는 리액트 라이프 사이클을 나... Read More

JSX란? const element = <h1>Hello, world!</h1>; 위의 코드는 문자열도, HTML도 아니다. JSX라고 하며 javascirpt를 확장한 문법이다. JSX라고 하면 템플릿 언어가 떠오를 수 있지만, Javascirpt의 모든 기능이 포함되어 있다. JSK는 리액트에서 UI가 어떻게 생겼는지를 정의하고, 사용하는 문법이다. 브라우저에서 실행하기 전에 babel 이 JSX문법을 JavaScript로 변환한다. 밑의 JSX 문법을 바벨로 변환해보자. function App() { return ( <h1>Hello, sik... Read More

프로그래밍 패러다임 프로그래밍의 패러다임은 시대별로 프로그래밍의 방식이 어떻게 변화되었는가?로 이해하면될 것 같다. 프로그램은 순차, 분기, 반복, 참조로 구성되어지며 프로그램 개발을 위해 전략을 수립해야 한다. 위에서 말한 전략은 어떤 언어를 사용할 것인지, 프로그래밍에서 어떤 것을 지양하고, 지향할 것인지 등등 다양한 방법을 수립하는 것을 말한다. 여기서 말한 전략에 해당되는 내용들이 프로그래밍 패러다임이다. 대표적인 프로그래밍 패러다임은 절차적 -> 객체지향 -> 함수형의 순서로 나왔다. 명령형 프로그래밍 문제를 어떻게(how) 해결해야 하는지 컴퓨터에게 명령을 내... Read More

시작으로 ES6에서 ...로 시작하는 형태의 문법이 새롭게 추가되었습니다. ...로 붙어있는 이 표시는 Spread Opertor(전개구문, 스프레드 연산자 등)라 부른다. 그리고 Rest Parameter는 스프레드 연산자를 사용하여 함수의 파라미터를 작성하는 것을 말한다. Spread Opertor와 Rest Parameter는 무엇이고 가독성을 높여주기 위해 어떻게 사용되는지 알아보도록 하자. Spread Operator 스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 이터러블 객체들을 개별 요소로 분리하여 사용할 수 있다. 기본 문법 // Array const arr1 = [... Read More

ES6에서의 map, filter, reduce 자바스크립트 ES6에서 map, filter, reducer 메소드는 Array 객체에서 제공하는 메서드이다. const prod = [ {name:'과자', price:2500}, {name:'소시지', price:2000}, {name:'맥주', price:5000}, {name:'음료수', price:1500}, {name:'껌', price:1000}, ] const str = ['name', 'old', 'address']; map() map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과... Read More

ES5에서의 리스트 순회 // ES5에서의 리스트 순회 const list = [1,2,3,4,5]; for(var i=0; i<list.length;i++){ console.log(i) } const str = 'abc'; for(var i=0; i<str.length;i++){ console.log(str[i]) } ES5에서의 for문은 시작과 끝을 정의해주고 하나씩 증가하여 리스트를 순회 했었다. 이것은 length 라는 속성에 의존해야 하는 문제점이 있었다. 즉, 순회하려면 __proto__ 또는 constructor 에서 length 를 프로토타입 기반으로 상속을 받... Read More

시작으로 최근 Express.js로 사내 rest-api서버를 구축했었는데, 그 중 사용자 인증을 처리를 JWT로 구현했었다. 그때는 사용방법만 빠르게 익히고 구현했기 때문에 정리할 시간이 없었다. 현재 서비스를 오픈하고 시간이 남아서 지금이라도 정리를 해본다.(기억 < 기록 ) 본 포스트는 JWT 공식문서를 번역 및 테스트하여 정리한 글이다. JSON 웹 토큰이란? JWT(JSON Web Token)는 당사자 간에 정보를 JSON 개체로 안전하게 전송하기 위한 간결하고 자체 포함된 방법을 정의하는 개방형 표준이다. 이 정보는 디지털 서명이 되어 있으므로 신뢰할 수 있다. JWT는 비밀(HMA... Read More

시작하기 최근에 Nuxt.js와 Vuetify로 만든 정적 웹 사이트를 만들었다. 지인들에게 어떤지 보여줬는데 반응이… 왈1: 모바일에선 화면이 깨지는거같네? 왈2: 테블릿에선 좀 다르게 보이네? PC기준으로 만들었기 때문에 다양한 디바이스를 전혀~~고려하지 못했다. 따라서, Vuetify에서 제공하는 그리드 시스템을 활용하여 디바이스별로 어떻게 배치하고 나뉘는지 정리해봤다. 기본적으로 vuetify(2.x)버전에서 제공하는 5가지 유형의 Display Breakpoints로 진행했다. Vuetify 그리드 시스템 Vuetify는 flexbox를 사용하여 12포인트 그리드 시스템과 함께 제공된... Read More

문서 객체 모델(Document Object Model)이란? 문서 객체 모델(Document Object Model)은 HTML, XML 문서에 접근하기 위한 인터페이스이다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들의 문서 구조, 스타일, 내용 등을 변경할 수 있도록 돕는다. DOM은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에게 사용될 수 있게 연결해주는 역할을 한다. 간단히 말해 웹 페이지의 콘텐츠, 구조, 스타일을 읽고 조작할 수 있는 API를 제공한다. 객체 모델을 통해 자... Read More

시작으로 Vanilla JS로 컴포넌트 구현을 공부하다가 이벤트 버블링이라는 것을 접하게 되었다. 한 번도 해본 적 없었기 때문에 공부한 내용을 정리하게 되었다. 이벤트 등록이란 이벤트 등록은 웹 애플리케이션에서 기본적으로 이해하고 있어야하는 내용이다. 이벤트 등록이란 웹 애플리케이션에서 사용자의 입력을 받기 위해 필요한 기능이다. 대표적으로 click 이벤트가 있다. 아래의 간단한 예제를 보자. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv... Read More

시작으로 블로그를 운영한다거나, 기술을 챕터별로 문서화하고싶다거나, 팀내 지식을 문서화하여 공유한다거나, 교육자료를 만들어야 한다거나 등. 문서화 작업은 필수로 다뤄야하는 영역이다. 이제까지 PDF, 워드, 엑셀 등과 같은 프로그램을 사용하여 문서화 작업을 했었는데 파일로 관리하다보니 여러모로 신경쓸 것이 많았다. (수정, 배포, 버전관리 등) 따라서, eBook을 작성할 수 있는 GitBook을 공부하려고 한다. GitBook은 Markdown 언어로 집필이 가능하므로 기술 블로그를 운영한 경험이 있는 개발자라면 어렵지 않게 개발할 수 있다. 또한, Github 저장소와 연동이 가능하여 서버 호스팅... Read More

시작으로 Vue.js 프로젝트 개발을 진행하면서 비동기 처리에 따른 상태관리 및 DOM 처리 때문에 하루종일 애를 먹었다. 해결하고나니 간단한 문제였는데 당시에는 왜? 생각하지 못했는지 생각해봤다. 비동기 처리에 대한 이해 부족 라이프사이클 훅에 대한 이해 부족 디자인 패턴 이해 부족 실무에서 나름 많이 사용했기에 익숙하다고(?) 자신했었지만 응용을 하니 확실히 깨달았다. 조금 안다고 자만하지말자. 그래서, 오늘은 비동기 처리에 대해 정리하려고 한다. 비동기 처리란 무엇인가? [Javascript] 자바스크립트의 동작원리 포스팅을 참고하면 비동기 처리에 대한 이해를 도울 수 있... Read More

시작으로 예전에 FastAPI 서버를 Docker에 배포한 경험이 있다. 하지만 Node.js 서버를 Docker에 다시 배포하려고 하니 기억이 가물가물 했다. 역시 정리하는 것보다 다시 찾는게 더 귀찮은 일이다… 그래서, 핵심만 정리하여 지식으로 남긴다. 사전 필수 준비물 카카오 클라우드 ubuntu 18.04 docker 설치완료 포트 포워딩 (외부->내부로 접속해야 하므로) 배포 할 app 위의 필수 준비는 끝냈다는 가정하에 시작하겠다. Dockerfile이란? Dockerfile은 docker 이미지를 생성하기 위한 설정 파일이다. Dockerfile안에... Read More

시작으로 프론트엔드 개발을 하고있어서 자바스크립트를 매일 다룬다. 개발을 하다보면 호출 순서, 출력 결과 등 예상되는 결과값이 나오지 않아 당황했던 적이 있었다. 앞으로, 고급개발자가 되려면 동작원리에 대해 정확하게 알아야 되겠다고 생각했다. 감사하게도 많은 개발자 선배들이 자바스크립트 동작원리에 대해 정리를 해놨기 때문에 그들의 지식을 습득할 수 있었다. 목차로는 자바스크립트 엔진 V8 자바스크립트 런타임 Call Stack과 Memory Heap 자바스크립트 엔진 자바스크립트 엔진의 대표적인 예는 Google V8 엔진이다. V8은 Chrome과 node.js에서 사용한다.... Read More

시작으로 라이프사이클이란 Vue의 인스턴스나 컴포넌트가 생성되어 소멸되기까지의 과정을 의미한다. 각 컴포넌트는 생성될 때 일련의 초기화 단계를 거치게 된다. 에를들어, 데이터 관찰, 템플릿 컴파일, 인스턴스를 DOM에 마운트, 데이터 변경 시 DOM 업데이트 등 그 과정에서 라이프사이클 훅이라는 함수도 실행되며, 사용자가 특정 단계에서 자신의 코드를 추가할 수 있는 기회를 제공한다. 밑에는 Vue.js 공식문서에서 제공하는 라이프사이클 다이어그램이다. 정리해서 Vue 인스턴스는 크게 4가지의 과정을 거치게 된다. 생성 (create) DOM 부착 (mount) 업데이트 (update) ... Read More

시작으로 라우팅(Routing)이란 애플리케이션 엔드 포인트(URI)의 정의 및 특정한 HTTP 요청 방식(GET, POST 등)에 대한 클라이언트의 요청에 따라 응답하는 방법을 결정하는 것이다. 각 라우트는 하나 이상의 핸들러 함수를 가질 수 있으며, 이러한 함수는 라우트가 일치할 경우 실행된다. 만약 다수의 핸들러 함수를 지정하려면 함수 로직 끝에 next()를 붙여야 한다. 그래야 다음 함수로 넘어가기 때문이다. HTTP 요청 방식 다양한 요청 방식이 존재하지만 보통 REST API를 구현할 때 4가지만 알아도 충분하다. 보통 개발할 때 CRUD기준으로 메소드를 사용한다. GET (RE... Read More

Express 애플리케이션 생성기 Express 구조화된 애플리케이션을 생성하고 싶다면 express-generator를 사용하여 시작하면 된다. 일단 npm 패키지로 설치한다. $ npm install express-generator -g groupware-back-app이라는 Express 앱을 생성해보자. $ express --view=pug groupware-back-app create : groupware-back-app\ create : groupware-back-app\public\ create : groupware-back-app\public\javascripts\ ... Read More

사전준비 Node.js 설치 VSCode 설치하기 작업 디렉토리 생성 $ mkdir myapp $ cd myapp npm package.json 생성 npm init 명령어를 실행하면 애플리케이션의 이름 및 버전과 같은 몇 가지 정보를 구성하게 되는데 대부분 기본값으로 넘긴다. $ npm init entry point는 app.js 혹은 자유롭게 작성해도된다.(package.json에서 자유롭게 수정가능) entry point: (index.js) Express 설치 Express를 임시로 설치하고 package.json에 종속 항목 목록에 추가하지 않으려면, --sav... Read More

.gitignore Git, Github로 버전관리를 하다보면 git add . 으로 한번에 처리하는 경우가 많다. 그런데 npm 기반 프로젝트를 하다보니 node_modules같은 파일들은 추가할 필요가 없다. npm install 로 종속성 설치를 하면 끝이기 때문이다. 이럴 때 사용하는게 .gitignore 파일이다. .gitignore 언제 사용하면 되는가? 보안상 노출되면 안되는 파일이 있는 경우 프로젝트와 관련없는 파일이 있는 경우 용량이 너무 크거나 제외시키고 싶은 경우 결국엔, git add에 포함시키지 않는 경우 .gitignore을 사용한다고 보면된다. .gitign... Read More

시작으로 Javascript에서 함수의 this 키워드는 다른 언어들과 다르게 동작한다. 이는 Java와 같은 익숙한 언어의 개념과 달라 개발자들에게 혼동을 준다. 대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정된다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있다. Java에서의 this는 인스턴스 자신을 가르키는 참조변수이다. this가 객체 자신에 대한 참조 값을 가지고 있다는 뜻이다. 주로 매개변수와 객체 자신이 가지고 있는 멤버변수명이 같은 경우 이를 구분하기 위해 사용된다. 하지만, Javascript의 경우 Java와 같이 this에 바인딩되는 객체는 한가... Read More

시작으로 버전관리를 하기 위해 Git, Github, Gitea, Svn 등 툴을 사용하는 방법에 대해서만 관심이 있었는데 정작 버전관리를 하기 위한 규칙에 대해서는 관심이 없었다. 소프트웨어 할당하는 버전은 기본적으로 유의적 버전 2.0.0-ko2을 따른다고 한다. 나도 이 글을 보면서 지식을 남기기 위해 포스팅을 시작한다. 흔히 애플리케이션 버전정보를 보면 아래와 같이 x.x.x 3자리의 정수로 되어있다. 이런 형태의 버전 할당은 Semantic versioning의 규칙을 따른 방식이라고 한다. Versioning 소프트웨어 개발 생태계는 수많은 사람들이 서로의 기술과 성과를 이어... Read More

시작하기 포트폴리오 사이트용으로 오픈소스 및 템플릿을 사용하려다 맘에 드는게 없어 직접 Nuxt.js + vuetify로 포트폴리오 정적 사이트를 만들었다. 정적 사이트를 빌드 및 배포하는 방법을 빠르게 공유하고자 한다. Nuxt 공식문서를 들어가면 아주 자세히 설명되어 있으니 하나씩 따라해도 금방 이해가 될 것이다. nuxt.config.js 설정 일단, 3가지만 설정하면 된다. target : 배포 대상을 명시하는 프로퍼티이다. 정적 사이트는 static을 추가해야하며 기본값은 server이다. router : base를 추가하지 않고 폴더를 배포한 경우 배포된 사이트를 방문하면 자... Read More

시작으로 먼저, Comparing Workflows의 글에서 자세히 공부할 수 있었다. 협업 뿐만아니라 Git에 대해 자세히 정리되어 있으니 참고하길 바란다. 글에서 정리한 대표적인 Git 워크플로우는 4가지이다. Centralized Workflow Feature Branch Workflow Gitflow Workflow Forking Workflow 이제 시작해보자~ Centralized Workflow 중앙 집중식 워크플로우로 SVN과 똑같이 중앙이 되는 메인 저장소를 중심으로 모든 변경 사항에 대해 main 분기에 커밋된다. 즉, Subversion을 사용하는 것과 똑... Read More

시작하기 Nuxt.js는 Vue.js기반 프레임워크이기 때문에 컴포넌트 구성 및 사용방법은 비슷할 것이라고 생각한다. 아래의 목차대로 빠르게 익혀보자. Nuxt.js의 프로젝트 구조 라우터 방식의 차이 Layout 디렉토리 Nuxt.js 프로젝트 구조 npm으로 생성한 프로젝트 구조를 살펴보면 아래와 같다. Assets 디렉토리 SASS, CSS, IMAGES, Javascript와 같은 컴파일되지 않는 에셋들을 포함하는 디렉토리이다. components 디렉토리 Vue.js 컴포넌트를 포함하는 디렉토리이다. Nuxt.js는 이러한 컴포넌트에 데이터 메소드를 크게 신경쓰... Read More

시작하기 Vue.js로 프로젝트를 진행하면서 SSR 웹 페이지를 만들 수 있도록 도와주는 Nuxt.js를 배워보고 싶다는 생각이 들었다. 설명과 이론을 최대한 배제하고 실무용으로 설치부터 배포까지 빠르게 익히기 위한 포스팅이다. 깃허브 정적 호스팅 서비스에 배포 할 Resume 정적 웹사이트를 만들어 보면서 빠르게 익혀보도록 하자. Nuxt.js 사용하기 위한 전제 조건 node.js 최신 LTS 버전을 설치하는 것을 권장한다. 텍스트 편집기, Vetur 확장 기능이 있는 VSCode 또는 WebStorm 편집기를 사용하는 것을 권장한다. 터미널은 VSCode의 통합 터미널, WebSt... Read More

이번에node.js기반 Vue.js로 웹 프론트엔드 개발을 맡게 되었는데 로그인 기능을 구현하면서 혼동되는 세션, 쿠키, 토큰의 개념을 정확하게 짚고 넘어가고 싶었다. 서버 인증이 필요한 이유 현재 앱/웹 서비스에서 가장 많이 쓰이는 통신 방식은 HTTP이다. 클라이언트는 서버에게 GET, POST, PUT, DELETE 방식 중 하나로 요청을 보내게되고 요청 받은 자원에 대해 응답을 하게 된다. 그런데 여기서 문제는 통신에 대한 기록이 남지 않는다는 것이다. 즉, 서버는 사용자가 누군지 모른다. 그 이유는 HTTP는 무상태 프로토콜(Stateless Protocol)이기 때문이다. 무상태 프로토콜... Read More

컴포넌트가 무엇인가? 컴포넌트는 Vue의 핵심 기능 중 하나이다. 컴포넌트를 어떻게 구성하고 생성하냐에 따라 어플리케이션의 개발속도와 코드 가독성, 그리고 효율성(ex. 재사용성)이 차이가 난다. Vue에서 컴포넌트는 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 모듈화 혹은 캡슐화한 것을 의미한다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트이다. 경우에 따라 특별한 is 속성으로 확장 된 원시 HTML 엘리먼트로 나타날 수도 있다. Vue 컴포넌트는 Vue 인스턴스이기도 하다. 그러므로 모든 옵션 객체를 사용할 수 있다. (루트에만 사용하는 옵션은 제외... Read More

Vue 인스턴스 Vue 인스턴스에서 보면 알듯이 모든 Vue 앱은 Vue 인스턴스를 만드는 것부터 시작한다. 인스턴스 안에 options 객체를 전달해야하는데 전체 옵션 목록을 참고하자. var vm = new Vue({ el: "#app", data: { text: 'hello world' }, //...옵션들 }) 데이터 바인딩 이중 중괄호 이중 중괄호를 사용한 텍스트 보간이다. data 객체의 msg속성 값으로 대체된다. msg의 속성 값이 변경될 때 마다 갱신된다. 보간법은 속성값을 텍스트로 출력한다. <template> ... Read More

Vuex란 무엇인가? Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 이다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다. React의 Flux 패턴에 영감을 받았다고 함. Flux 패턴 Flux 공식문서 Flux는 Facebook에서 사용하는 아키텍쳐이다. 즉 React에서 사용한다고 보면된다. 단반향 데이터 흐름을 활용해 뷰 컴포넌트를 구성하는 React를 보완하는 역할. Dispatcher, Stores, Views(React 컴포넌트)의 세 가지 핵심 부분으로 구성되어 있다. MVC... Read More

Vue-CLI Vue-CLI는 신속하게 Vue.js 개발환경을 설정할 수 있도록 도와주는 도구이다. 기본적으로 초기 프로젝트 세팅을 생성해주기 때문에 프로젝트 구조, Lint, webpack, babel과 같은 도구들의 설정 고민을 덜 수 있다. CLI란 명령 줄 인터페이스(CLI, Command line interface) 또는 명령어 인터페이스는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다. 즉, 작업 명령은 사용자가 컴퓨터 키보드 등을 통해 문자열의 형태로 입력하며, 컴퓨터로부터의 출력 역시 문자열의 형태로 주어진다. 설치 Node 버전 요구 사항 Vue ... Read More

필수 요소 Crome 설치 Vue는 ECMAScript 5 기능을 사용하기 때문에 IE8 이하 버전을 지원하지 않습니다. 하지만 모든 ECMAScript5 호환 브라우저를 지원합니다. Node.js 설치 LTS 버전을 다운로드 합니다. [Node.js] 시작하기를 참고. Vue Devtools(개발자 도구) 설치 일반적으로 프론트엔드 개발시 크롬 개발자 도구로 디버깅을 했다면, Vue는 자체적으로 제공하는 개발자 도구를 사용합니다. 설치가 완료되었다면, 크롬 브라우저 오른쪽 설정에서 도구 더보기 > 확장 프로그램 클릭 vue.js devtools > 세부정보 클릭 &g... Read More

Prettier ESLint는 포맷팅과 코드 품질에 도움을 주는 도구라면 프리티어(Prettier)는 포맷팅에만 특화된 도구이다. ESLint에 없는 기능들을 프리티어(Prettier)가 해결해준다. install npm install -D prettier var x = 'asd';;; console.log('########################################### 80자 넘음 #######################################################'); module.exports = { "env... Read More

style-guide ESLint는 커스터마이징이 쉽고 확장성이 뛰어나 많이 사용되고 있는 추세이다. 또한, ESLint는 개발자들이 커스터마이징한 style-guide 설정들을 외부에 공개하여 공유할 수 있다. 가장 널리 쓰고있는 2가지를 소개하자면 Airbnb Style Guide Google Style Guide 서로 제공하는 Style Guide를 참고하여 사용자의 목적에 맞게 사용하면 된다. init npx eslint --init으로 .eslintrc 파일을 생성한다. $ npx eslint --init √ How would you like to use ES... Read More

ESLint란? ESLint란 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출하는 분석 도구이다. 코드를 분석하여 문법적인 오류나 안티 패턴을 찾고 일관된 코드 스타일로 작성할 수 있도록 도와준다. ESLint는 유용하게 사용할 수 있도록 style-guide를 제공한다. 대표적으로 Airbnb Style Guide, Google Style Guide이 있다. 개발자가 직접 style-guide를 작성할 수도 있다. Install $ npm install eslint --save-dev $ mkdir eslint_sample // 프로젝트 폴더 생성 ... Read More

ES6(2015) 이전에는 자바스크립트에서 변수를 선언할 수 있는 방법은 var뿐이었습니다. 이것은 많은 문제를 발생시켰습니다. 전역 변수로 인한 스코프 충돌 ES6이전에 스코프는 전역 스코프(Global Scope) 와 함수 스코프(Function Scope)만 있었습니다. 자바스크립트는 함수 스코프 외에는 모두 전역 스코프로 적용되기 때문에 전역 변수를 남발하여 스코프 충돌의 문제를 발생시켰습니다. 변수 중복 선언 자바스크립트의 코드양이 많으면 많을 수록 스코프 충돌의 문제를 발생시킵니다. 이미 선언된 변수를 또 재선언을 하거나 다른 값을 넣거나... Read More

자바스크립트 Scope Scope는 변수의 접근성을 결정합니다. ES6(2015) 이전에는 자바스크립트에 Global Scope 와 Function Scope만 있었습니다. ES6(2015)가 생기면서 const와 let 이 도입되었고, 이 두 키워드는 자바스크립트에서 Block Scope를 제공합니다. 자바스크립트의 3가지 Scope 유형 : Block scope Function scope Global scope 자바스크립트의 2가지 변수 유형 : Global variable Local variable Scope 예시 ... Read More

babel-loader 바벨을 직접사용하여 변환하는 것보다는 Webpack과 통합여 사용하는 것이 일반적입니다. 바벨 로더를 사용하면 Babel 및 Webpack을 사용하여 Javascript 파일을 변환할 수 있습니다. install : npm install -D babel-loader ./src/app.js : const a = 30; let b = 20; const alert_func = msg => window.alert(msg); alert_func(a+b); const aa = new Promise(); webpack... Read More

프레셋(Presets)이란? 플러그인으로 코드 변환을 하기 위해서는 필요한 플러그인을 각각 설정해야 했습니다. module.exports = { plugins: [ "@babel/plugin-transform-block-scoping", "@babel/plugin-transform-arrow-functions", "@babel/plugin-transform-strict-mode", ] } 혹은 build : > npx app.js --plugins=@babel/plugin-transf... Read More

Babel의 등장 배경 브라우저마다 사용하는 언어가 다르다. ECMAScript2015+ 이후의 Javascript 언어를 특정 브라우저 및 버전에 따라 사용할 수 없는 문제 예를 들어, 크롬 79버전 기준으로 개발했으나, IE에서는 작동이 안되는 크로스브라우징이 발생한다. Babel은 이러한 크로스브라우징 이슈를 해결해준다. ECMAScript2015+ 로 작성한 코드를 모든 브라우저에 호환할 수 있도록 코드를 변환해준다. Babel의 동작원리 교육자료 : 프론트엔드 개발환경의 이해: Babel 참고자료 : Babel 공식사이트 참고자료 : Babel Plugin Handbook ... Read More

요즘 기업이 SSR을 선택하는 이유가 있을까? 우리가 많이 알고 있는 네이버 블로그 모바일 서비스도 2019년 5월 29일 “내 동영상 페이지”를 시작으로 Node.js 기반의 SSR 아키텍처가 네이버 모바일 블로그에 적용되었다고 합니다. 또한, 월마트도 SEO 최적화와 좋은 퍼포먼스를 위해 SSR 아키텍처를 선택했다고 합니다. 왜!? Why!? 밑의 자료를 통해 저의 궁굼증을 해결했습니다. 참고자료 :어서 와, SSR은 처음이지? - 도입 편 SSR(server-side rendering)이란 무엇인가? 서버 사이드 렌더링은 서버에서 클라이언트(브라우저)에게 보여줄 페이지를 모두 구성하여 클라... Read More

plugin란? 파일단위로 처리하는 loader와 다르게 플러그인은 번들링된 결과를 처리합니다. 번들링된 자바스크립트를 난독화하거나 텍스트를 추출하는 등의 용도로 사용합니다. 플러그인을 빌드하는 것은 로더를 빌드하는 것보다 조금 더 고급입니다. 플러그인을 이해하려면 webpack 저수준 내부의 이해가 필요합니다. 이해를 위해 플러그인을 직접 만들어보고 내부적으로 어떻게 작동하는지 알아보겠습니다! plugin 만들기 plugin은 apply 메소드가 있는 javascript 객체입니다. apply 메서드는 웹팩 컴파일러에 의해 한 번 호출되어 전체 컴파일에 대한 엑서스를 제공합니다. ... Read More

자주 사용하는 로더 css-loader css-loader를 사용하면 스타일시트도 import 구문으로 불러와 모듈로 변환할 수 있습니다. ./src/app.css 를 생성하여 밑의 코드를 저장합니다. ./src/app.js에서 app.css를 import 구문을 추가합니다. html에 css 태그를 넣지 않아도 적용되는지 확인해보겠습니다. install : npm install --save-dev css-loader ./package.json -> devDependencies에 css-loader가 추가된 것을 확인할 수 있습니다. { ... Read More

loader란 로더는 파일을 다른언어(예:TypeScript)에서 javascript로 변환하거나 인라인 이미지를 데이터 URL로 로드할 수 있습니다. 로더를 사용하면 import javascript 모듈에서 직접 CSS, HTML 파일과 같은 작업을 수행할 수 있습니다. loader의 기능 로더는 Node.js에서 실행되며, 가능한 모든 작업을 수행할 수 있습니다. 로더를 연결할 수 있으며, 체인의 각 로더는 처리된 리소스에 변환을 적용합니다. 체인은 역순으로 실행됩니다. 첫 번째 로더의 결과를 다음 로더에 전달하는 식으로 진행합니다. webpack은 마지막 로더가 Javascript로 ... Read More

webpack의 번들링 작업을 실행하는 방법은 2가지가 있습니다. 콘솔 실행 ./webpack.config.js 파일로 실행 2가지 실행 방법과 결과에 대해 알아보겠습니다. 프로젝트 구조 확인 webpack-demo |- /moda_modules |- package.json |- package-lock.json |- index.html |- /src |- app.js |- math.js 번들링 결과의 예상 경로로 script 태그를 수정합니다. &... Read More

webpack을 다루기전에 모듈 시스템에 대한 이해가 수반되어야 합니다. Node.js과 npm을 알아야 합니다. 모듈 시스템을 모르신다면, 아래의 포스트를 먼저 보고 오시는 것을 추천드립니다. [Javascript] ES2015(ES6) 표준 모듈 시스템 (export, import) webpack이란 Webpack은 오픈 소스 자바스크립트 모듈 번들러이다. 웹 어플리케이션 개발에 필요한 다양한 요소(HTML, CSS, Javascript, Images, Font 등 …)들을 하나의 파일로(혹은 여러개의 파일로) 병합 및 압축을 해주는 역할을 한다. 주요한 요소로는 Entry, Ou... Read More

개발을 하다보면 이전으로 되돌려야 하는 상황이 오기 마련입니다. Git에서도 undo의 기능을 제공합니다. commit 재작성 방금 commit하고 나서, 너무 일찍 commit 했거나 파일을 뺴먹었거나 commit 메시지를 잘못 입력했을 경우 사용합니다. --amend 옵션을 사용하여 커밋을 재작성 할 수 있습니다. 다시 commit을 하고 싶으면, [파일을 수정후] -> [Staging Area에 추가] -> [git commit --amend] -> [재작성 후 저장하면 끝] --amend 옵션으로 커밋을 고치는 작업은, 추가로 작업한 일이 작다고 하더라도 이전의 ... Read More

표준 모듈 시스템의 등장 배경 모듈 시스템이 없었던 자바스크립트 환경은 html 헤더에 script 태그를 명시하여 js를 순서대로 불러오는 방법을 사용했습니다. 이러한 방식은 여러가지 문제점을 발생시켰습니다. 그 중 가장 문제점은 전역 스코프가 충돌 된다는 것입니다. 그 이유는, script로 태그된 js파일들을 로드할 때 함수와 변수가 전역 공간에 노출되기 때문입니다. math.js에 sum이라는 함수를 만들고, app.js에서 console.log로 찍어보겠습니다. html에서는 math.js -> app.js 순서대로 불러오겠습니다. 웹서버를 하나 띄어서 개발자 도구로 log가 ... Read More

npm이란? npm은 Node Package Manager의 약자로 자바스크립트 프로그래밍 언어를 위한 패키지 관리자입니다. 즉, npm은 node.js에서 사용하는 모듈들을 패키지로 관리 및 배포하는 역할을 합니다. Node.js 설치 사용자의 운영체제에 맞게 다운로드 합니다. [Node.js 홈페이지]](https://nodejs.org/ko/) 짝수버전(왼쪽), 홀수버전(오른쪽)이 있는데 짝수버전은 안정성과 신뢰성을 지원하는 버전으로 실제 서버에 배포용으로 사용할 때 사용하고 홀수버전은 최신 기능을 지원하므로 개발용으로 사용한다. 개발용으로 사용할 것이므로 오른쪽 버전을 다운... Read More

Javascript란? JavaScript는 1995년 넷스케이프(Netscape) 웹 브라우져에서 웹페이지에 동적인 요소를 구현하기 위해서 발명 되었다. 그 후 많은 다른 웹 브라우져들 또한 이 언어를 탑재하기 시작했고, 그 결과로 현대의 웹 어플리케이션의 구현을 가능하게 만든 언어이다. 이 언어로 인해 웹 어플리케이션에서 더 이상 사용자가 페이지 새로고침 또는 페이지를 새로 불러오지 않고도 웹과 직접적인 연결이 가능하게 되었다. 예를들어 웹페이지에서 click 이벤트와 같은 동적 요소들이 javascript이며, html css를 정적인 요소라 할 수 있다. ESMAScript란? Ja... Read More

Node.js란 Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임입니다. Node.js는 이벤트 기반, 논 블로킹 I/O 모델을 사용해 가볍고 효율적입니다. Node.js의 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리 생태계이기도 합니다. Node.js는 백엔드 vs 프론트엔드 ? JavaScript 런타임(runtime)을 이해 할 필요가 있다. 런타임(runtime)이란 특정 언어로 만든 프로그램을 실행시킬 수 있는 환경을 뜻한다. 즉, Node.js는 javaScript 한 가지 언어로 Server와 C... Read More

TDD란 TDD란 Test Driven Development 약자로 ‘테스트 주도 개발’ 이라고 합니다. 즉, TEST CASE를 먼저 작성한 뒤 실제 코드를 작성하는 방법입니다. 의문점 2년동안 SI 프로젝트를 3건을 진행하고, 내부 프로젝트, REST API 개발 등 여러 가지를 개발 업무를 하면서 왜? 많은 기업에서 특히 중소기업에서는 TDD 방식을 선호하지 않을까? 라는 의문점과 그 이유를 경험을 기반으로 포스팅하려 합니다. 기존 개발 방식의 문제점 기존 개발방식은 설계 -> 코드개발 -> 테스트 -> 설계(수정)) 순서로 진행되며, 테스트를 하다가 설계 및 개발코... Read More

브랜치(branch)란? 프로젝트를 진행할 때 개발자들은 동일한 소스코드를 같이 공유하고 작업하게 된다. 같이 작업을 하다보면 어떤 개발자는 새로운 기능을 추가하고 또 다른 개발자는 버그를 잡아내거나 합니다. 이와 같이 동일한 소스코드를 공유하더라도 하는 업무는 다르기 때문에 각기 다른 버전의 코드가 만들어 질 수 밖에 없다. 이럴 때 사용하는게 바로 브랜치(branch) 기능이다. 브랜치(branch)는 여러 개발자가 협업할 때 각기 다른 버전관리를 할 수 있도록 해준다. 각자 독립적인 작업 영역(저장소) 안에서 마음대로 소스코드를 생성 및 변경한다. 이렇게 분리된 여러 작업 내용들을 원래의 버전과 비교... Read More

깃허브 원격저장소와 로컬저장소 연동을 머리속에서만 알고있었고, git 관련 명령어도 필요할 때마다 구글링으로 찾아서 처리했었는데… 날잡고 정리해서 내것으로 만들어야지 생각만하다가 오늘 정리하기로 맘먹었다. 오늘은! 로컬 저장소(workspace)를 깃허브 원격저장소에 연동하는 방법에 대해 포스팅 해보겠습니다. 참고로, git이 설치가 안되신분들은 git을 설치하고 오시기 바랍니다. 로컬 저장소 생성 Git Bash 실행 본인이 작업할 로컬 workspace(폴더)를 생성합니다. 생성할 위치 이동 + git_test라는 이름의 폴더 생성합니다. seong@DESKTOP-O5CI... Read More

Git과 Github를 활용하여 버전관리를 하는거에 익숙하지만, Git의 원리에 대해 묻는다면 정확하게 답변할 수 없습니다. 이번 포스팅은 Git의 배경과 원리를 이해하여 정리해보는 시간을 갖게 되었습니다. 목차는 아래와 같이 진행합니다. 버전 관리란? Git의 배경 Git의 원리 버전 관리란? 버전 관리 시스템이란? 파일 변화를 시간에 따라 기록했다가 나중에 특정 시점의 버전을 다시 꺼내올 수 있는 시스템입니다. 버전 관리 방법은 크게 3가지로 나뉩니다. 로컬 버전 관리 디렉토리로 파일을 복사하는 방법 이 방법은 가장 간단하므로, 많은 사람들이 사용한다. 하지만, 작업... Read More

오늘은 Python 스크립트를 windows 작업 스케줄러에 등록하는 방법에 대해 포스팅 해보겠습니다~ 이전에 Linux cron과 python apscheduler에 대해 포스팅을 하고나서 windows 에서 제공하는 작업 스케줄러에 대해 포스팅 해야겠다고 생각했습니다. Linux cron과 apscheduler에 대해 궁굼하신 분들은 밑의 링크를 눌러세요! [python] Apscheduler vs Cron Job 1. 윈도우 작업 스케줄러 실행 2. 윈도우 작업 등록 오른쪽 상단에 [작업 만들기]를 클릭 이름에는 작업 등록에 사용될 이름을... Read More

python 개발일을 하다보면 스케줄러 프로그램을 만들일이 생기는데, python에서 스케줄러 라이브러리와 linux에서 제공하는 스케줄링 기능에 대해 알아보고 어떤 상황에 무엇을 사용해야 좋을지 포스팅 해보겠습니다. APScheduler Advanced Python Schedule의 약자로 python code가 한 번 또는 주기적으로 실행되도록 예약할 수 있는 python libary cron Daemon 이나 windows 작업 스케줄러와 같은 플랫폼별 스케줄러에 대체품으로 사용 scheduling 방식 Cron 스타일 스케줄링 Interval(간격) 기간 실행 일회성 지연 실행 ... Read More

현재 플랫폼 서비스를 제공하기 위해 고객사에 WAS Server, DB Server를 납품하여 APP과 DB를 관리 및 운영하고있습니다. 이런 방식은 온프레미스 인프라가 증가함에 따라 관리 포인트도 증가하게 됩니다. 계속해서, 서비스 환경의 패러다임이 Cloud로 변화되면서 IT산업은 클라우드 기술이 필수 불가결하게 됐다고 생각합니다. 따라서, 최근 회사에서도 클라우드 기술에 관심을 갖고 있으며, 이번에 클라우드 기반 docker 컨테이너로 FastAPI기반 REST-API 서버를 구축하게 되었습니다. 이번 POST에서는 전반적인 흐름으로 cloud + docker 컨테이너 환경에서 python app을 배포... Read More

프론트엔드 개발자라면 JS의 async/await를 들어봤거나, 구현해본 경험이 있을 겁니다. python 3.5에서도 async/await 문법이 생기면서, 별도의 라이브러리 사용없이 비동기 프로그래밍이 가능해졌습니다. 최근에 FastAPI로 REST-API 서버를 구축하는 업무를 맡게되면서 서비스로직을 비동기로 처리해야 할 상황이 생겼습니다. 먼저 동기/비동기가 무엇인지, python에서 어떻게 사용하는지 알아보며 더 나아가 고수준의 API를 제공하는 concurrent.futures 모듈에 대해서 다뤄보도록 하겠습니다. 동기(synchronous) 프로그래밍 동시에 일어난다는 뜻으로, 요청과 ... Read More

Three.js란 무엇인가? Three.js는 웹페이지에서 3차원 그래픽을 표현할 수 있도록 도와주는 자바스크립트 라이브러리, API Three.js는 특정 웹 브라우저나 플러그인에 의존하지 않고 자바스크립트 언어를 사용하여 웹 컨텐츠의 한 공간을 GPU에서 가속되는 3차원 컨텐츠를 만들 수 있도록 도와준다. 이를 가능하게 된 배경에는 WebGl 의 출현으로 가능하게 되었다. Three.js에서 WebGL의 이해가 중요한 것 같다. 밑에서 WebGL에 대해서 알아보자. WebGL이란 무엇인가? WebGL은 Web Graphics Library의 약자로 웹상에서 2D 및 3D 그래픽을 렌더링하기... Read More

FastAPI로 REST API를 개발하던 도중 CORS라는 것을 접하게 되었다. 회사에서 ‘프론트엔드’를 많이 다루다 보니 백엔드 관련 경험이 부족했다. 이번 FastAPI를 개발하면서 여러가지 이슈와 개념들을 접하게 되었다. 그중 하나가 CORS라는 개념이다. CORS란 무엇인가? 교차 출처 리소스 공유(Cross-origin resource sharing, CORS), 교차 출처 자원 공유는 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다. 사전정의 그대로 가져온 것이다. 교차 출처 리소스 공유?, 그리고 최초 자원이 서비스... Read More

You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated. To add new posts, simply add a file in the _posts dire... Read More