티스토리

복습공간

검색하기

블로그 홈

복습공간

heecheolman.tistory.com/m

프로그래밍 복습하는 노트입니다

구독자: 2

방명록 방문하기

주요 글 목록

[angular] 앵귤러 들어서며 angular01 Angular Introduction 앵귤러는 SPA 개발을 위한 구글의 오픈소스 자바스크립트 프레임워크입니다. 앵귤러의 철학중 하나는 "One framework. Mobile & Desktop" 으로 하나의 프레임워크로 모바일과 데스크탑을 개발할 수 있다는 것입니다. Angular 의 특징 앵귤러의 특징들과 함께 Vue.js 와 React 와의 차이점과 공통점도 알아보며 왜 앵귤러를 사용하는지 살펴보겠습니다. 컴포넌트 기반 개발 컴포넌트 기반 개발은 vue.js 나 React 도 마찬가지라고 생각합니다. React, Vue.js, Angular 모두 컴포넌트기반 개발(CBD: Component Based Development)에 중심이 있습니다. 타입스크립트 사용 타입스크립트를 사용한.. 공감수 1 댓글수 0 2019. 1. 8.
[typescript] 타입스크립트 제네릭 typescript06 타입스크립트 제네릭 자바스크립트에는 없지만 타입스크립트에 있는 제네릭(Generics)을 알아보겠습니다. 클래스나 함수의 목적중 하나는 '재사용성'에 있습니다. 이 제네릭을 이용하게되면 재사용성이 한층 더 증가합니다. 일종의 '틀' 이라고 생각하시면 됩니다. 타입스크립트에서 제네릭을 어떻게 쓰는지에대해 알아보도록 하겠습니다. 📝 목차 기존의 문제점 클래스에서의 제네릭 함수에서의 제네릭 제약조건 마무리 기존의 문제점 예를들어 number, text, operator(연산자) 각 종류별로 버튼들이 존재할 때 이 버튼들을 담으려 할 때 담는 일종의 '그릇'을 각각 만들어줘야 할 것 입니다. // TSclass NumberButton {}class TextButton {}class Opr.. 공감수 0 댓글수 0 2019. 1. 6.
[typescript] 타입스크립트 함수 typescript05 타입스크립트 함수 타입스크립트의 함수(Functions) 에 대해 알아봅니다. ES6와 작성하는 방법은 크게 다르지 않습니다. 좀 더 타입에 대해 명확해졌을 뿐입니다. 📝 목차 함수작성 Default Parameter Optional Parameter Rest Parameter Union Type Overloading this 함수작성 타입스크립트에서 함수작성하는 방법을 살펴보면 ES6와 크게 다르지않습니다. 매개변수의 타입과 return 타입에 대해 정해줄 뿐입니다. // ES6function add(num1, num2) { return num1 + num2;}// TSfunction add(num1: number, num2: number): number { return num1.. 공감수 0 댓글수 0 2019. 1. 3.
[typescript] 타입스크립트 클래스 typescript04 타입스크립트 클래스 자바스크립트는 애초에 프로토타입기반을 이용해 상속을 구현합니다. 하지만 이는 클래스기반 프로그래머들에게 익숙하지 않을 수 있습니다. ES6 에 존재하는 class 키워드를 이용해 구현할 수 있습니다. 타입스크립트도 이와 동일하게 class 키워드를 이용합니다. 📝 목차 클래스 키워드 생성자 상속 오버라이드 접근제어자 public protected private readonly 매개변수 프로퍼티 static 추상 클래스 Deep dive into Class 클래스 키워드 ES6 를 다루어보셨다면 기존에 생각했던 것과 동일합니다. class 키워드 뒤에 클래스 이름을 적어줍니다. // TSclass Button { constructor() { // ... }} 생성.. 공감수 3 댓글수 1 2019. 1. 2.
[typescript] 타입스크립트 인터페이스 typescript03 타입스크립트 인터페이스 기존에 자바스크립트에는 인터페이스라는 개념이 없었습니다. 하지만 타입스크립트를 이용해 인터페이스를 사용할 수 있게 됐습니다. 인터페이스라는 용어에 대해서 한번 짚고 넘어갈 필요가 있습니다. 인터페이스란 간단하게 어떠한 두개의 시스템 사이에 상호작용할 수 있게 해주는 조건, 규약 같은 것입니다.실생활에서 예를들어 '타이핑' 이라는 인터페이스가 있다고 친다면, 키보드의 K 를 누르면 알파벳 'K' 가 모니터에 출력된다. 는 눌렀을 때 어떠한 문자가 출력된다는 '타이핑' 인터페이스를 지키고 있는 것입니다. 역으로 타이핑 인터페이스(규약)를 지키고 있다면 특정 문자가 모니터에 출력이 될 것입니다. 어원을 살펴보자면, inter + face = 상호작용 + 표면 즉,.. 공감수 1 댓글수 0 2018. 12. 28.
[Webpack] 웹팩 튜토리얼 README 📖 웹팩 튜토리얼 웹팩 튜토리얼을 작성합니다. 처음에 웹팩을 처음 접했을 때 어려웠던 부분들을 하나씩 체크해보며 개념들을 짚고 넘어갑니다. 이 저장소는 보일러플레이트로 이용할 수 있습니다. :) 🚀 목표 가볍게 웹팩설정을 하며 웹팩의 주요 개념을 알아보고 빌드와 개발서버까지 설정하는 방법을 익히는것을 목표로 합니다. 추가적으로 ES6 이상의 문법들을 ES5로 변환하여 작동이 정상적으로 되는지 확인해봅니다. 📝 목차 웹팩에 관하여 웹팩이란? 웹팩의 4가지 주요개념 웹팩 설정하기 1단계 : 프로젝트 초기화 2단계 : 필요한 모듈들 설치하기 3단계 : 웹팩 설정파일 작성하기 빌드해보기 개발서버 열어보기 웹팩에 관하여 웹팩이란 무엇인지 알아보고 웹팩의 4가지 주요개념들을 알아봅니다. 웹팩이란? 웹팩.. 공감수 2 댓글수 0 2018. 12. 24.
[typescript] 타입스크립트 기본타입들 typescript02 Typescript - basic types 타입스크립트의 기본타입들을 살펴봅니다. 📝 목차 Boolean Number String Array Tuple Enum Any Void Null과 Undefined Never 참고문헌 Boolean true 또는 false 를 값으로 갖습니다. // TSlet isMe: boolean = true;// TS to ES5var is = true; Number Javascript 와 동일하게 타입스크립트도 부동소수점을 갖습니다. // TSlet num: number = 10;// TS to ES5var num = 10; String 작은따옴표('') 또는 큰따옴표("") 로 감싸 표현할 수 있습니다. Template Literal 을 이용하려.. 공감수 1 댓글수 0 2018. 12. 21.
[typescript] 타입스크립트를 들어가며 Typescript 동적타입언어인 자바스크립트에서는 타입에러를 만나는경우가 많은데 타입스크립트를 이용하여 컴파일단계에서 미리 타입체크를 하여 타입오류를 최소화 할 수 있고, 클래스기반 언어에 익숙한 개발자들에게 좀 더 친숙하게 다가갈 수 있기에 공부를 시작한다. Typescript 란? "Typescript is a typed superset of Javascript that compiles to plain Javascript" - 타입스크립트 공식 홈페이지 소개란 해석해보면 타입스크립트는 순수 자바스크립트로 컴파일되는 자바스크립트의 슈퍼셋이다. 슈퍼셋이란 상위확장을 말한다. Typescript 탄생배경 HTML5 가 등장하기 전까지 웹은 플래시, 실버라이트, 엑티브엑스와 같은 플러그인에 의존해 인터랙티.. 공감수 0 댓글수 0 2018. 12. 21.
[blah blah] 2018년 회고 2018-review 🚶‍ 2018년 회고 한 해가 마무리 되어가고 있기에 내 자신을 되돌아보는 차원에서 회고를 하려고한다. 개발자에 대한 꿈을 갖고 1월부터 달려온 '나' 이기에 얼마나 성장했는지 무얼 했는지 학업 잘 마무리했는지 꿈은 변함이 없는지 주로 네가지 관점으로 회고하려고 한다.내가 존경하는 빈지노의 Always Awake 를 들으면서 써야겠다 ㅎㅎ 📝목차 1월 2월 3월 4월 5월 6월 7월 8월 9월 10월 11월 12월 굿바이 2018 1월 전과 개발자 되겠다고 마음을 굳건히 먹고 멀티미디어학과에서 컴퓨터소프트웨어학과 로 전과를 하였고 전과 확정이 났다. 친구들이 전과자라고 놀리기도 했고 배신자라고 놀리기도 했지만 후회하지 않는다.하여튼 인생에서 가장 중요한 결정을 내렸고 또 잘한 결정이.. 공감수 1 댓글수 0 2018. 12. 19.
[2018 DevFest] DevFest Seoul 2018 을 다녀오며 DevFest-intro DevFest Seoul 2018 을 다녀오며 과거의 나 처음에 인터넷을 하다가 DevFest 가 개최한다는것을 보았다.컨퍼런스에 참여하기 앞서 드는 생각은 대학생인 나로써 과연 저 세션들을 이해할 수 있을까? 라는 것이다. 물론 대학생이라는것은 핑계인것 같고 내가 듣고 이해할 수 있는 능력이 되는가? 가 관건이었다. 2018년 1월에 처음 웹개발에 발을 들어서면서 친구의 권유로 vuetiful korea4 를 가게되었는데 이때는 경험삼아 가본것이었고, 되게 신기했다. 나와는 다른세상 같았다. 지금의 나 DevFest Seoul 2018 은 약 10개월이 지난 후의 내가 갔다. 내가 알아들을 수 있을까? 라는 의문보다는 이젠 세션에 대해서 어느정도 알아들을 수 있을 것같다! 라는.. 공감수 0 댓글수 0 2018. 11. 11.
[2018 DevFest] 모던 브라우저는 어떻게 동작하는가 ? - 방진호님 DevFest03 모던 브라우저는 어떻게 동작하는가 ? - 방진호님 Chromium 이란? 크롬 브라우저의 오픈소스 소스코드만 13GB 이고 iMAC 5K 기준 빌드시간만 3시간이라고 하심 ㄷ ㄷ 내부 동작을 알아서 뭐하나? 브라우저 및 웹 플랫폼 개발에 참여할 수 있다. 웹 표준 개발에 참여 프론트엔드 개발시 성능 향상에 도움이 됨 다양한 소프트웨어 개발 분야에 활용될 수 있음. Chromium은 Multi-Process Architecture 이다. Process 와 Thread 의 차이 Process 메모리 공간이 독립적 Thread 메모리 공간을 공유 크롬의 장점 Crash 가 발생해도 죽지 않는다. Site Isolation (OOPIF) Site Isolation 의 경우에는 예를들어 피싱 사.. 공감수 0 댓글수 0 2018. 11. 11.
[2018 DevFest] 실전 SPA상태관리 톺아보기 - 김동우님 DevFest02 실전 SPA상태관리 톺아보기 - 김동우님 SPA란 싱글 페이지 어플리케이션(Single Page Application) 의 약자로 전체 페이지를 새로 로드하는 대신 동적으로 현재 페이지를 다시 작성하여 사용자와 상호작용하는 웹 응용 프로그램 또는 웹 사이트 SPA 는 View Library 가 필요하다 Angular : google React : Facebook Vue : Evan You 다음은 라이브러리 및 프레임워크의 공통점 이다. 선언적 렌더링 virtual DOM 컴포넌트 기반 김동우 님은 React 를 더 좋아하시어 React 의 상태관리툴들을 살펴봅니다. State Management 가 필요하다. SPA 는 상태저장소가 없으면 컴포넌트 기반이기에 props 로 필요한 값들을.. 공감수 0 댓글수 0 2018. 11. 11.
[2018 DevFest] Chrome Devtools를 활용한 성능측정과 개선 - 한재엽님 DevFest01 Chrome Devtools를 활용한 성능측정과 개선 - 한재엽님 성능이란 UX다 무조건 빠른게 아니라 사용자에게 끊기는 느낌이 없도록 부드럽게 보여져야한다. 측정할 수 없다면 개선할 수 없다. 한재엽님이 생각하는 주관적인 성능에대한 짤막한 글이었습니다. 어떻게 측정할것인가? 어떻게 측정할 것인가에대해 RAIL 모델을 기반한다고 말씀하셨습니다. RAIL 모델이란? 사용자 중심 성능 모델로 요약할 수 있는데 RAIL 은 다음을 축약한 단어이다. 응답 : 100ms 이내에 응답 애니메이션 : 10ms 이내에 프레임 생성 유휴 : 유휴시간 극대화 로드 : 콘텐츠를 1000ms 이내에 전달 위와 같은 조건을 만족해야하지만 아쉬운점이 있다. 아쉬운점 귀찮다. 이슈를 발견해도 파악이 어렵다. 해결.. 공감수 0 댓글수 0 2018. 11. 11.
[Git] Git 기초 첫번째 git01 Git 기초 첫번째 목차 Git의 특징 Git 기본 사용법 수정하고 저장소에 저장하기 수정하고 저장소에 저장하기 파일의 상태 확인하기 파일을 새로 추적하기 Modified 상태의 파일을 Stage 하기 파일 무시하기 Staged 와 Unstaged 상태의 변경내용을 보기 변경사항 커밋하기 Staging Area 생략하기 파일을 삭제하기 파일 이름 변경하기 마치며 Git 의 특징 1. 스냅샷 Git의 데이터는 파일시스템의 스냅이며 크기가 아주 작다. Git은 커밋하거나 프로젝트의 상태를 저장할 때마다 파일이 존재하는 그 순간을 중요하게 여긴다. Git은 성능을 위해서 파일을 저장하지 않는다. 단지, 이전 상태의 파일에 대한 링크만 저장한다. 2. 로컬실행 Git은 네트워크의 속도에 영향을 받지않.. 공감수 0 댓글수 0 2018. 11. 8.
[Web] Twitter 개발기 README Twitter Twitter 프로젝트는 Web Front-end 의 기술을 익히기 위해 진행한 프로젝트입니다. Twitter(트위터) 와의 저작권 문제가 생길 시 삭제 하도록 하겠습니다.각 폴더별로 README.md 파일이 존재합니다. Pages 로그인 페이지 가입 페이지 콘텐츠 페이지 프로필 페이지 반응형 폴더 구조 Twitter__source├── client/│ ├── build/│ ├── config/│ ├── src/│ ├── static/│ └── index.html│└── server/ ├── route/ ├── secret/ ├── service/ └── app.js기능 회원가입 로그인 팔로우, 언팔로우 이미지 업로드 트윗 수정 및 삭제 자기소개 작성 및 수정 회원 검색 반응형.. 공감수 0 댓글수 0 2018. 10. 2.
[etc] REST API 를 알아보자 REST_API REST API 알아보기 이 글에서는 REST API 가 무엇인지 알아보겠습니다. 목차 API 란? REST API 역사 REST 구성 REST 특징 REST API 디자인 가이드 HTTP Method의 알맞은 역할 HTTP 응답 상태 코드 API 란? API 는 Application Programming Interface 의 약자입니다. Interface 란? Interface 의 용어도 많이 접해볼 수 있는데 (예를들면 GUI, CLI) 간단히, 어떤 두개의 시스템 사이에 상호 작용할 수 있도록 접목시켜주는 하드웨어, 소프트웨어, 조건, 규약 등을 인터페이스라고 합니다. 컴퓨터와 상호작용을 하기위한 키보드, 마우스 등등의 장치는 사람을 위한 인터페이스입니다. 반대로 API 는 프로그램.. 공감수 0 댓글수 0 2018. 7. 21.
[DesignPattern] 추상팩토리 (Abstract Factory) README 추상 팩토리 (Abstract Factory) - 객체 생성 의도 상세화된 서브클래스를 정의하지 않고도 서로 관련성이 있거나 독립적인 여러 객체의 군을 생성하기 위한 인터페이스를 제공 합니다. 다른이름 키트(Kit) 동기 포르쉐 자동차 공장에서 자동차를 모델별로 찍어내고있을 때, 모델별로 찍어내는 부품(문, 후드 등)들이 다를 것이다. 이렇게 다르게 되니, 제품군을 생성하기 위한 공통적인 인터페이스 를 생성한 후 해당 인터페이스를 별도로 작성해 사용할 수 있게끔 해주는것이 좋을것 같다. 활용 객체가 생성되거나 구성, 표현되는 방식과 무관하게 시스템을 독립적으로 만들고자 할 때 여러 제품군 중 하나를 선택해서 시스템을 설정해야 하고 한번 구성한 제품을 다른 것으로 대체할 수 있을 때 관련된 제.. 공감수 0 댓글수 0 2018. 7. 17.
[Javascript] 자바스크립트와 이벤트루프 JS_EventLoop 자바스크립트와 이벤트 루프 자바스크립트는 단일쓰레드 기반 언어이다. 이 뜻은, 동시에 하나만 처리할 수 있다는 말이다.하지만 웹 브라우저는 애니메이션기능이 실행되면서 이벤트 효과도 받고, Node.js 기반의 웹서버는 동시에 여러개의 HTTP 요청을 처리하기도하는데 이것을 가능하게 해주는것이 이벤트 루프 이다. ECMAscript 에는 이벤트 루프가 없다 ECMAscript 의 스펙을 자세히 보면 이벤트 루프에 관한 내용이 없다. 사실 이벤트루프를 지원해주는 것은 브라우저나, Node.js 와 같은 자바스크립트 엔진을 구동하는 환경이다. 출처 : 자바스크립트와 이벤트 루프 - 김동우 단일 호출 스택과 Run-to-Completion function A() { console.log(.. 공감수 0 댓글수 0 2018. 7. 10.
[vuejs] 기초연습을 위한 계산기 실습 README vuejs 기초연습을 위한 계산기 왜 만들었나? 기존에 계산기를 만든적이 있는데 소스코드가 너무 지저분했던것도 있고, vuejs 를 공부하는 김에 다시 다듬어볼까 하고 만들어봤습니다. 구성이 어떻게 되어있나? Vue instance 에 필요한 데이터들을 전부 집어넣었습니다. 크게 view-content 와 button-content 로 나누었습니다 button 을 렌더링할 때 조건을 걸어주어서 각 버튼에 맞는 css 를 적용 시켰습니다. 계산방식 숫자를 담는 numStack, 연산자를 담는 oprStack 을 나누어서 연산자 우선순위에 따라 실시간으로 계산이 되는 방식입니다. git clone https://github.com/heecheolman/vue-calc.git 공부하면 좋을 참고자.. 공감수 0 댓글수 0 2018. 7. 9.
[etc] 프로세스와 쓰레드의 차이 process_thread Process 와 Thread 의 차이 Process 와 Thread 의 차이를 설명해주세요 신입이나 인턴의 기술면접 단골질문 중 하나인데 제대로 개념이 잡혀있지않다면 당황할 수 밖에 없다. 당황하기 싫어서 해당 글에서 정리를 해보려고한다.먼저 개념부터 정리해보면 프로세스(Process) 란? 프로세스란 운영체제로부터 자원을 할당받는 작업 의 단위 쓰레드(Thread) 란? 프로세스가 할당받은 자원을 이용하는 실행 의 단위 하나의 프로세스가 실행되면 기본적으로 하나의 스레드가 생성이되는데 이를 메인스레드 라고 한다 그래서요? 정리하면, 어떤 프로그램을 실행을 하면 프로세스는 운영체제로부터 자원을 할당받는다. 해당 프로세스는 메인 스레드를 통해 코드를 실행하게된다.여기까지 살펴본.. 공감수 0 댓글수 0 2018. 7. 2.
[etc] 동기와 비동기, 블로킹과 논블로킹 정리 sync_async Blocking I/O 와 NonBlocking I/O, Synchronous 와 Asynchronous 동기(Synchronous)와 비동기(Asynchronous) 그리고 블로킹과 논블로킹의 차이를 알아본다. 많이 보게되는 단어들인데 이 용어들에 대해 정리해서 말을 할 수 없었기에 공부를 하기로 했다. 아래의 참고문서를 보며 정리를 했다. Blocking I/O / NonBlocking I/O Blocking I/O 호출된 함수가 자신의 작업을 모두 끝낼때까지 제어권을 가지고 있어 호출한 함수가 대기하도록 만듦 NonBlocking I/O 호출된 함수가 바로 return 해서 호출한 함수에게 제어권을 주어 다른 일을 할 수 있게 함호출되는 함수가 바로 리턴하느냐 마느냐가 중점 Sy.. 공감수 2 댓글수 0 2018. 7. 2.
[vuejs] 뷰 템플릿 (vue templates) vuejs-templates vuejs-templates Boilerplate 란? boilerplate 는 반복되며 자주 쓰이는 것들에 대해 미리 개발환경설정을 구성해놓은 일종의 템플릿 개념이다.front-end 개발을 하다보면 babel, webpack 등 많이 쓰이는 모듈들 또는 빌드 설정들, 폴더구조들을 반복적으로 설정하게되는데 이를 미리 만들어 놓는것이다.이렇게 자동화를 해놓으면 갖다 쓰기만 하면돼서 개발환경구축에 시간과 비용을 단축시킬 수 있다. $vue list해당 명령어를 통해 공식적인 뷰 템플릿의 리스트들을 확인할 수 있다. vuejs-templates 종류 vue-webpack-boilerplate webpack + vue-loader 조합으로 hot-reload, lint-on-sav.. 공감수 0 댓글수 0 2018. 7. 1.
[vuejs] 뷰 라이프사이클 (Vue life-cycle) vue-lifecycle Vue.js 라이프사이클 이해하기 Vue.js 의 라이프사이클은 크게 4가지로 나뉜다. Creation Mounting Updating Destruction 위의 그림은 Vue.js 의 라이프사이클 다이어그램이다. 빨간색폰트가 컴포넌트에서 사용할 수 있는 함수들이다. Creation : 컴포넌트 초기화 컴포넌트들을 초기화하는 단계이며 서버렌더링에서 지원되는 단계이다. 클라이언트나 서버 렌더 단에서 처리해야 일이 있으면 이 단계에서 진행한다.아직 Component가 DOM 에 추가되기 전이므로 DOM에 접근할 수 없다. new Vue() Vue Instance 생성 Init(Events & Lifecycle) Event 와 Lifecycle 초기화 beforeCreate 가장 처음.. 공감수 1 댓글수 0 2018. 7. 1.
[blah blah] 2018 SW개발 하계인턴(정규직 채용 연계형) 코딩테스트 후기 2018 SW개발 하계인턴(정규직 채용 연계형) 코딩테스트 후기 ㅋㅋㅋㅋㅋㅋ 망했다.서류전형은 합격했지만 코딩테스트 필기테스트에서 엄청 갈릴것같다. 문제는 저작권상 알려줄 수 없다 [느낀점] * 필기도 생각보다 많이 어려웠다ㄴ 여러가지 유형의 필기문제들이 많았다. 좀 더 기본적인 것들을 배워야겠다. ㄴ 생각하는 힘이 부족한것같다 * 일단 백준 알고리즘을 많이 풀어봐야할것같고 문법에도 익숙해져야겠다ㄴ 알고리즘에도 많은 종류가 있는데 종류별로 매일매일 풀어보는게 좋을것같다ㄴ 기본적인 문자열 다루기에 힘좀 써야겠다.ㄴ 생각하는것을 코드로 옮기는것이 아직 미숙한듯 하다, 특히 문자열 * 원래부터 목표는 서류전형 1차였으니 다시 심기일전해서 가야겠다.ㄴ 아직 공부한지 반년밖에안됐으니 천천히 다시 생각해봐야겠다.ㄴ.. 공감수 0 댓글수 0 2018. 5. 19.
[blah blah] 2018 SW개발 하계인턴(정규직 채용 연계형) 서류전형 지원 [2018 SW개발 하계인턴(정규직 채용 연계형)] 대학 생활 하면서 인턴쉽 생활을 꼭 해보고싶었는데 마침 좋은 기회가 있어서 지원을 해봤다. 솔직히 말하면 개발자의 길로 가고싶다는 생각을 갖고 실천한게 얼마 되지 않았다. 한 반년? 길다면 길지만 정말 쉬지않고 달렸기때문에 나의 실력을 테스트해보고싶었던 순간이었다. 1차는 서류전형이다. 서류전형이 항상 문제다 ㅎㅎ자소서는 글을 못쓰는 나에게있어서 정말 힘들었지만 그래도 나의 진심이 글에 녹았나보다!! 결과는 1차 서류전형합격!!! 필기 / 코딩테스트의 시험이 남았다. 솔직히 내일인데 긴장되서 글을 쓰고있다.알고리즘 공부보다는 이제까지 문법 공부들과 웹 공부를 전념하고있던터라 항상 코딩테스트에 약한 내 모습을 볼 수 있었다. 저번에 '프로그래머스' 에서 .. 공감수 0 댓글수 0 2018. 5. 18.
[Git] Git, Github about_github Git 에 대하여 Git 사용법을 알아야 한다. git은 필수다. 라는 말을 수도없이 들어왔고 나도 한번 써본 이후로 편리해 계속 쓰게되었다. 사용한지 얼마 되진않은 뉴비이기에 잘못된점은 말씀해주시면 감사하겠습니다. Git 탄생배경 리누스 토발즈가 리눅스 커널을 개발에 이용하려고 개발했다고 한다. 그래서 Git 이 뭐죠? Git 은 소스 코드 관리를 위한 분산버전관리 시스템 이다. Git 의 작업폴더는 소스코드 수정기록과 그 기록을 볼 수 있는 로컬저장소(Local Repository) 이다. 분산버전관리 시스템이란? 분산된 버전관리이다. 이는 각 개발자가 서버에 접속하지 않고도 각자 개발을 할 수 있는 것이다. 버전이란? 소스코드 하나 또는 여러 묶을 하나의 버전이라고 한다 왜 .. 공감수 0 댓글수 0 2018. 5. 1.
Vuetiful Korea 4회 를 다녀오며 vuetifulKorea4 Vuetiful Korea 4회 를 다녀오며 2018년 4월 17일에 해당 밋업을 다녀왔다. 밋업에 살짝 늦게되어 첫번째 발표는 듣지 못했다.발표순서는 다음과 같았다. 아뇨, 난 Vue.js 사용할건데요? 새로운 패러다임, 이전 코드의 문제점, vue.js 를 도입하기전 신경써야하는 부분, 실제 서비스에 적용해본 vue.js, 느낀점 Vue.js와 Electron으로 데스크탑 앱 만들기 electron, desktop, chromium, node.js, cross-platform Apollo로 알아보는 Vue in the GraphQL graphql, api, apollo, vue 느낀점 나는 밋업이 처음이었다. 지인을 통해 같이 가게되었는데 처음 신청하고 든 생각은 '과연 내.. 공감수 0 댓글수 0 2018. 4. 23.
[Web] SPA와 라우팅 hash SPA & Routing & Hash 1. SPA (Single Page Application) 란? 단일 페이지 어플리케이션은 모던 웹의 패러다임이며, 기본적으로 단일 페이지로 구성되어있다. 기존의 웹은 요청시마다 새로고침이 발생하여 서버로부터 리소스들을 받아 렌더링하게 되는데 이렇게 서버가 해당하는 html을 내려주는 방식을 서버 사이드 렌더링(Server-side rendering) 이라고 부른다. 대체로 header 나 footer 부분은 변하지않고 contents 부분만 변하게 되는데 변하지 않는 부분까지 렌더링을 하게되면 굉장히 비효율적이다.하지만 SPA 는 처음에 모든 정적 리소스들을 처음에 한번 내려받는다. 이렇게되면 새로운 페이지를 요청할 때 해당하는 데이터만 전달하면 되므로 필.. 공감수 1 댓글수 0 2018. 4. 3.
[Javascript] Singleton Pattern 싱글톤 패턴 singleton Singleton Pattern 싱글톤패턴(singleton pattern) 이란? 싱글톤 패턴은 전체 시스템에서 하나의 인스턴스만 존재하도록 보장하는 객체 생성패턴이다. 동일 클래스로 new 를 해도 인스턴스 하나만 존재한다는 것이다. 특징 객체 자체에는 접근이 불가능해야함 객체에 대한 접근자(비공개 멤버: 클로저)를 사용해 실제 객체를 제어할 수 있다. 객체는 단 하나만 만들어지며, 해당 객체를 공유함 다음과 같은 객체 리터럴도 싱글톤 패턴이다. var obj = { a: 'foo', b: function(){}} 이렇게 하게되면 비공개상태 및 함수를 정의할 수 없다.그렇기 때문에 closure 를 통해 비공개로 만들어야한다. var Singleton = (function() { /.. 공감수 4 댓글수 1 2018. 3. 27.
[Javascript] bind, call, apply 그리고 this bind bind, call, apply bind() .bind(thisArg[, arg1[, arg2[,...]]]) bind() 의 역할은 새로운 함수를 만든다. 이 함수의 실행 문맥은 .bind()의 첫번째 인자로 받은게 된다. 바인딩함수는 미리 정의해둔 this 값으로 함수를 생성할 수 있기 때문에 매우 유용하다. call() .call(thisArg[,arg1[,arg2[,...]]]) call() 함수는 첫번째 인자로 함수 내부에서 사용할 this로 만들어준다 나머지 parameter 는 메서드에 전달한 인자 목록이다. apply() .apply(thisArg[,argsArray]) apply() 함수는 call() 함수와 동일하지만 배열로 메서드에 인자를 전달한다는것이 차이이다. 헷갈리는 부.. 공감수 0 댓글수 0 2018. 3. 24.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.