프론트엔드와 에이전트 개발을 하며 배운 것을 짧게 기록합니다.https://sub2n.github.io/ko-krhttps://sub2n.github.io/posts/2026/blog-reboot-astro/https://sub2n.github.io/posts/2026/blog-reboot-astro/2019년에 멈춘 Hexo 블로그를 Astro로 다시 만들었다. 옛 글 168개는 주소 그대로 살렸다.Fri, 18 Sep 2026 00:00:00 GMTastrobloghttps://sub2n.github.io/2019/08/17/190817-TIL/https://sub2n.github.io/2019/08/17/190817-TIL/Today I LearnedFastflix에서 헤더에서 사용자를 선택하면 해당 사용자에 맞는 정보를 다시 불러오는 기능을 getter, setter 를 이용하는 방식으로 고치고자 한다. 우선 내가 찜 한 콘텐츠를 보여주는 페이지에 적용해보았는데 되긴 하는데 너무…Sat, 17 Aug 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/08/14/Fastflix/https://sub2n.github.io/2019/08/14/Fastflix/FastflixWeb FrontEnd, BackEnd, iOS 세 팀이 협업한 Netflix Clone Project 패스트캠퍼스 프론트엔드 개발 스쿨의 파이널 프로젝트로 진행했다. 팀원박수빈, 한현진, 정수영 역할나는 프론트엔드의 팀장을 맡았다. 팀장으로써의 역할…Wed, 14 Aug 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/08/08/190808-TIL-%EC%B7%A8%EC%97%85%ED%81%B4%EB%A6%AC%EB%8B%89/https://sub2n.github.io/2019/08/08/190808-TIL-%EC%B7%A8%EC%97%85%ED%81%B4%EB%A6%AC%EB%8B%89/Today I Learned 프로젝트를 build 해서 서버에 올렸다. 깔끔한 앱을 보여주기 위해서 테스트 용 log를 제거했다. 취업 클리닉 능력은 개인이 가지고 있는 것, 역량은 그 능력으로 성과를 내는 것이다. 자기소개서의 소제목에 성과가 드러나도록 써야 한다.Thu, 08 Aug 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/08/07/190807-TIL/https://sub2n.github.io/2019/08/07/190807-TIL/Today I Learned 트러블 슈팅 시간에 상태 관리를 위한 Subject 에 대해서 조언 받았다. Hot Observable 공부하기 영화 장르 별로 화면을 보여주는 기능을 추가했다. 이제 프로젝트가 거의 마무리 되어 프로젝트를 build 해야 한다.Wed, 07 Aug 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/08/06/190806-TIL/https://sub2n.github.io/2019/08/06/190806-TIL/Today I Learned 오늘은 프로젝트의 잔 오류를 수정했다. Wait for User to Stop Typing Netflix는 User가 검색창에 한 글자를 입력할 때마다 검색 결과를 화면에 보여주는데, 약간의 텀이 있어 사용자 경험이 부드러웠다. 나는…Tue, 06 Aug 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/08/04/190804-TIL/https://sub2n.github.io/2019/08/04/190804-TIL/Today I Learned 기능 구현이 거의 끝난 코드를 주석을 정리하고 잔 오류를 고쳤다. 내일 마무리를 하고 모듈을 나눌 예정이다. 기능 구현에 급급해서 오랜 시간 코딩만 하다 보니 사람의 언어를 잃었다..Sun, 04 Aug 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/07/30/190730-TIL/https://sub2n.github.io/2019/07/30/190730-TIL/Today I Learned 오늘 정말 열일을 했다. 어제 백엔드 팀에서 프로젝트를 하차하는 팀원이 우리가 작업하던 Github Organization Repository를 삭제하는 일이 있었다. 덕분에 어제 하루 종일 복구를 하느라 고생했다. 나중에 정리하기 위해…Tue, 30 Jul 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/07/23/190723-TIL/https://sub2n.github.io/2019/07/23/190723-TIL/Today I Learned오전유니티 수업을 들었다. 안드로이드 환경에서 테스트했다. 오후백엔드에서 제공한 API를 이용해서 영화 정보를 가져와 Movie Component에 영화 정보를 표시햇다. Movie의 Child Component인 Slider…Tue, 23 Jul 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/07/22/190722-TIL/https://sub2n.github.io/2019/07/22/190722-TIL/Today I Learned오전 학교에서 유니티를 활용한 VR 콘텐츠 교육을 7월 22일부터 7월 25일까지 수강한다. AR/VR Virtual Reality (VR) 현실 세계가 전혀 없는 완전 가상 환경 현실을 차단할 수 있는 장치 필요 (HMD : Head…Mon, 22 Jul 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/07/22/C-Basic/https://sub2n.github.io/2019/07/22/C-Basic/CObject-oriented Language다른 객체 지향 언어와 마찬가지로 Class와 Instance Attribute, Method 등의 개념이 존재한다.Mon, 22 Jul 2019 00:00:00 GMTC#Unityhttps://sub2n.github.io/2019/07/20/190720-TIL/https://sub2n.github.io/2019/07/20/190720-TIL/Today I Learned 백엔드에서 API가 하나씩 완성이 되어 협업을 하다보니까 생각지 못한 변수가 생겼다. 하나를 고치면 새로운 수정 사항이 생기기를 반복하는 식이다. step이 4개가 되는 회원가입, 로그인과 관련된 Http 통신을 구현했다. 현재 로그인을…Sat, 20 Jul 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/07/16/190716-TIL/https://sub2n.github.io/2019/07/16/190716-TIL/Today I Learned Home과 Movie, My List 뷰의 Header와 Footer를 통일하고 Header의 sub menu와 hover transition 등을 마무리 했다. bootstrap 모듈을 하나 가져다 썼다고 내가 적용했던 CSS가 먹통이…Tue, 16 Jul 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/07/15/190715-TIL/https://sub2n.github.io/2019/07/15/190715-TIL/Today I Learned오전 프로젝트 구현을 시작하기 위해서 팀원들과 개발 환경을 세팅했다. 오후 모일 시간 등 회의 Header Component의 Secondary Navigation과 Directive를 이용한 window scroll Fixed…Mon, 15 Jul 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/07/13/React-Basic/https://sub2n.github.io/2019/07/13/React-Basic/React & Angular 비교React Facebook이 만든 Frontend Framework 오로지 View만 관리 Facebook, Netflix, Airbnb 등 Angular 구글이 만든 Frontend Framework Framework로서 많은…Sat, 13 Jul 2019 00:00:00 GMTReacthttps://sub2n.github.io/2019/07/12/Angular-JWT/https://sub2n.github.io/2019/07/12/Angular-JWT/Angular Guard로그인에 성공한 사용자만 접속할 수 있는 페이지를 구현해야할 때가 있다. 이런 때에는 Angular Guard를 이용한 Authentication을 한다. Guard는 Service의 일종이다.Fri, 12 Jul 2019 00:00:00 GMTAngularhttps://sub2n.github.io/2019/07/10/Angular-Routing/https://sub2n.github.io/2019/07/10/Angular-Routing/SEO(Search Engine Optimization)SPA(Single Page Application)의 단점으로 부각되는 SEO 문제를 해결하기 위해서 각 page마다 고유한 URL을 부여하는 Routing 기능이 Angular Framework에도 제공한다.…Wed, 10 Jul 2019 00:00:00 GMTAngularRoutinghttps://sub2n.github.io/2019/07/09/190709-TIL/https://sub2n.github.io/2019/07/09/190709-TIL/Today I Learned 오전에 프로젝트 기능 분석, 컴포넌트 분리에 대해 회의를 진행했다. 오후에 이력서 특강을 들었다. ✨이력서 특강 요약✨Tue, 09 Jul 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/07/08/190708-TIL/https://sub2n.github.io/2019/07/08/190708-TIL/Today I LearnedTEST Wrapper Object 1234'string'.length; // 6const s = 'super'String.prototype.sayHi() = () => { console.log('Hi')…Mon, 08 Jul 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/07/08/Angular-NgModule/https://sub2n.github.io/2019/07/08/Angular-NgModule/ModuleAngular의 모듈은 관련이 있는 구성 요소(Component, Directive, Pipe, Service)를 하나의 단위로 묶는 메커니즘 모듈은 관련이 있는 구성 요소들로 구성된 integrated functional block으로…Mon, 08 Jul 2019 00:00:00 GMTAngluarhttps://sub2n.github.io/2019/07/06/190706-TIL/https://sub2n.github.io/2019/07/06/190706-TIL/Today I Learned Anguler Reactive Form을 이용해서 Netflix 회원가입과 로그인 Form을 Validation까지 구현했다. FastCampus Final Project로 Netflix를 클론하기로 했다. CSS 작업은 늘 어렵다.…Sat, 06 Jul 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/07/03/Angular-Form/https://sub2n.github.io/2019/07/03/Angular-Form/Angular FormAngular Form은 Template-driven Forms와 Ractive Forms를 제공한다. Template-driven Forms 간단한 form (Form Control 한두개)을 구성할 때 사용 Reactive Forms 복잡한…Wed, 03 Jul 2019 00:00:00 GMTAngularhttps://sub2n.github.io/2019/07/01/190701-TIL/https://sub2n.github.io/2019/07/01/190701-TIL/Today Test[오답] 식별자를 검색했을 때 없으면 ReferenceError지만 Property를 검색했을 때 없으면 error가 아니고 undefined를 리턴 함수가 아닌 것에 () 붙여 실행하면 TypeError (SyntaxError 아님!!!!!!)…Mon, 01 Jul 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/06/28/190628-TIL/https://sub2n.github.io/2019/06/28/190628-TIL/FDS12 School Hackaton패스트캠퍼스에 들어오고 두 번째 해커톤을 마쳤다. 총 10개 팀 중 3개 팀을 수상했는데 우리 팀이 인생을 바꾸는 작은 유용함 상을 수상했다. 각 스쿨의 매니저분들이 엑셀 파일로 학생 관리를 하는 불편함을 해소하고자 학생 관리…Fri, 28 Jun 2019 00:00:00 GMTFDS12HackatonTILhttps://sub2n.github.io/2019/06/25/190624-TIL/https://sub2n.github.io/2019/06/25/190624-TIL/Today I Learned ToastUI를 JavaScript와 Angular로 구현했다. window.pageYOffset은 wiondow.scrollY보다 cross browsing에 적합(IE 9 지원)하므로 pageYOffset을 사용하는 게 좋다.Tue, 25 Jun 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/06/25/Angular-RxJS/https://sub2n.github.io/2019/06/25/Angular-RxJS/Reactive Programming Reactive Programming is programming with asynchronous data streams. You can listen to that stream and react accordingly.…Tue, 25 Jun 2019 00:00:00 GMTObservableReactive Programminghttps://sub2n.github.io/2019/06/25/Angular-Service-Dependency-Injection/https://sub2n.github.io/2019/06/25/Angular-Service-Dependency-Injection/ServiceComponent는 View를 구성하고 관리하는 역할을 해야한다. 그러나 View를 구성하다보면 필요한 데이터를 가져오기 위해서 서버와 통신을 하는 등의 부가 기능이 필요하게 된다. 이런 기능을 Component에서 하지 않고 Service로 분리한다.…Tue, 25 Jun 2019 00:00:00 GMTAngularDependency InjectionServicehttps://sub2n.github.io/2019/06/24/Angular-Directive/https://sub2n.github.io/2019/06/24/Angular-Directive/DirectiveDirective는 DOM의 모양이나 동작 등을 관리하기 위한 명령이다. HTML Element 또는 Attribute 형태로 사용한다. Directive를 사용하는 HTML Element를 Directive 내에서 Host element라고 부르며,…Mon, 24 Jun 2019 00:00:00 GMTAngularhttps://sub2n.github.io/2019/06/22/190622-TIL/https://sub2n.github.io/2019/06/22/190622-TIL/Today I Learned Front Endgame 컨퍼런스에 갔다왔다. Angular와 React에 대한 정보를 많이 얻었다. 현직 프론트엔드 개발자들이 어떤 식으로 일 하는지 들을 수 있어 좋았다. 앵귤러 공부 위해서 디렉티브 등 템플릿 문법 숙지해야함 RxJS…Sat, 22 Jun 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/06/21/Angular-Pipe/https://sub2n.github.io/2019/06/21/Angular-Pipe/AngularJS에는 60여개의 built-in Pipe가 있었으나 Angular는 9개의 built-in pipe를 지원한다. 나머지 기능은 pipe를 직접 구현하여 사용할 수 있다. pipe meaning date 날짜 형식 변환 json JSON 형식 변환…Fri, 21 Jun 2019 00:00:00 GMTAngularPipehttps://sub2n.github.io/2019/06/19/190619-TIL/https://sub2n.github.io/2019/06/19/190619-TIL/Today I Learned Angular 계층적 구조를 가진 Component 간의 Data 통신을 Service로 한다는 것을 알았다. Angular의 Service는 전체 프로그램에서 하나의 Instance만을 가지는 Singleton이기 때문에 상태 관리가…Wed, 19 Jun 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/06/18/190618-TIL/https://sub2n.github.io/2019/06/18/190618-TIL/Today I Learned Angular로 AnalogClock과 StopWatch를 구현했다. Angular Built-in Directive에 대해서 배웠다. 부모-자식 Component간 통신을 이용해서 simpleTodo를 구현했다. 자식 > 부모…Tue, 18 Jun 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/06/18/Angular-Built-in-Directive/https://sub2n.github.io/2019/06/18/Angular-Built-in-Directive/What is Directive?지시, 명령. View에 관련한 명령을 내리는 모든 것을 directive라고 한다. Component의 공통된 기능을 외부로 내보낸다. Dependency Injectivetype 지정하면 Angular가 class Instance를…Tue, 18 Jun 2019 00:00:00 GMTAngularhttps://sub2n.github.io/2019/06/17/190617-TIL/https://sub2n.github.io/2019/06/17/190617-TIL/Today I Learned Angular Component의 Data Binding에 대해서 배웠다. Angular의 ngFor와 ngIf Directive를 적용해서 TabsUI를 구현해봤다. Angular 문법이 아직 익숙하지는 않은데 재미있다. 생각을…Mon, 17 Jun 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/06/17/Angular-Data-Binding/https://sub2n.github.io/2019/06/17/Angular-Data-Binding/Interpolation Property Binding[propertyName] = "expression" " " 내부에는 string이 아니라 expression(표현식)이 오는 곳이므로 주의하자. Attribute and…Mon, 17 Jun 2019 00:00:00 GMTAngularhttps://sub2n.github.io/2019/06/14/Angular-Basics/https://sub2n.github.io/2019/06/14/Angular-Basics/AngularAngular는 SPA(Single Page Application) 개발을 위한 Google의 Open source JavaScript Framework. Framework and LibraryLibrary는 관련있는 함수를 모아놓아 개발자가 사용할 수…Fri, 14 Jun 2019 00:00:00 GMTAngularhttps://sub2n.github.io/2019/06/14/Angular-Component/https://sub2n.github.io/2019/06/14/Angular-Component/Angular Application은 component를 중심으로 구성되는만큼 component는 Angular의 핵심 개념이다. Component는 application의 화면을 구성하는 View를 생성하고 관리한다. Component는 template의 중첩…Fri, 14 Jun 2019 00:00:00 GMTAngularhttps://sub2n.github.io/2019/06/12/190612-TIL/https://sub2n.github.io/2019/06/12/190612-TIL/Today I Learned TypeScript에 대해서 배우고 실습해봤다. Angular로 간단한 TodoList 기능을 구현해봤다. 맛보기만 해봤지만 재밌다! 그리고 엄청 편하다. TypeScript는 기존에 알고 있던 객체지향개념(Class, Interface…Wed, 12 Jun 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/06/12/TypeScript-1/https://sub2n.github.io/2019/06/12/TypeScript-1/TypeScriptJavaScript는 모듈 기능을 지원하지 않고, 동적 타입 언어라는 단점 때문에 대형 프로젝트를 진행하기에 불편한 점이 많았다. 따라서 JavaScript의 단점을 보완하고자 하는 AltJS(Alternative) 언어들이 출시되었다. 브라우저는…Wed, 12 Jun 2019 00:00:00 GMTTypeScripthttps://sub2n.github.io/2019/06/12/TypeScript-2/https://sub2n.github.io/2019/06/12/TypeScript-2/TypeScript의 주요 기능 타입 선언 Class Interface GenericWed, 12 Jun 2019 00:00:00 GMTTypeScripthttps://sub2n.github.io/2019/06/11/190611-TIL/https://sub2n.github.io/2019/06/11/190611-TIL/Today I Learned SPA (Sigle Page Application)에 대해서 배웠다. JavaScript Class를 복습했다.Tue, 11 Jun 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/06/10/190610-TIL/https://sub2n.github.io/2019/06/10/190610-TIL/Today I Learned Tab UI를 만들었다. Accordian UI를 만들었다. Range Slider UI를 만들었다. 셋을 합쳤다. jQuery로 구현된 코드를 Vanilla JavaScript로 고쳤다. ✨UI ExerciseMon, 10 Jun 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/06/10/36-SPA/https://sub2n.github.io/2019/06/10/36-SPA/SPA (Single Page Application)Single Page Application은 모던 웹 패러다임으로, 기본적으로 하나의 페이지로 구성된다. 하나의 페이지라는 것은 html 파일이 하나라는 뜻이다. 기존의 Sever-side 렌더링과 비교할 때 배포가…Mon, 10 Jun 2019 00:00:00 GMTRoutingSPASingle Page Application자바스크립트https://sub2n.github.io/2019/06/07/35-Closure/https://sub2n.github.io/2019/06/07/35-Closure/Purpose of Closure: Maintain Status클로저의 주된 목적은 안전한 상태 유지를 하는 것이다. 다른 객체지향 프로그래밍 언어의 경우 private, public, protect 등의 접근 제한자(Access Specifier)를 제공하지만…Fri, 07 Jun 2019 00:00:00 GMT자바스크립트https://sub2n.github.io/2019/06/05/190605-TIL/https://sub2n.github.io/2019/06/05/190605-TIL/Today I Learned 오늘은 실행 컨텍스트를 배웠다. 엄청 어렵다.. 변수 선언문을 배울 때부터 의문점이었던 실행 컨텍스트의 렉시컬 환경의 정체에 대해서 알게 되어서 속이 시원한 것 같다.Wed, 05 Jun 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/06/05/34-Execution-Context/https://sub2n.github.io/2019/06/05/34-Execution-Context/실행 컨텍스트(Execution Context)는 실행 가능한 코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다. Context는 문맥, 맥락이라는 뜻이다. 프로그램에도 맥락이 있다. 예를 들면 식별자가 어느 스코프에서…Wed, 05 Jun 2019 00:00:00 GMT실행 컨텍스트자바스크립트https://sub2n.github.io/2019/06/04/190604-TIL/https://sub2n.github.io/2019/06/04/190604-TIL/Today I LearnedMongoDBMongoDB는 Document-Oriented NoSQL Database이다. RDBMS의 Table을 Collection, Tuple를 Document라고 부른다.RDBMS처럼 고정된 Schema가 존재하지 않고 하나의…Tue, 04 Jun 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/06/03/190603-TIL/https://sub2n.github.io/2019/06/03/190603-TIL/Today I Learned 오후에 3분간 나가서 자바스크립트 키워드에 대해서 설명하는 시험을 봤다. 자바스크립트 원시타입과 객체타입의 차이에 대해서 발표했다. 💛 키워드 정리 Todo List Server가 있는 환경에서 실습하기 위해서 작업환경을 세팅했다.…Mon, 03 Jun 2019 00:00:00 GMTTILhttps://sub2n.github.io/2019/06/03/npm/https://sub2n.github.io/2019/06/03/npm/npm (node package manager) and Modularization자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 만들어진 언어로, 다른 범용 프로그래밍 언어와는 달리 모듈 기능이 없다. 모듈이란 애플리케이션을 구성하는 개별적인 요소를 말한다.…Mon, 03 Jun 2019 00:00:00 GMTBabelNode.jsWebpacknpmhttps://sub2n.github.io/2019/05/31/190531-TIL/https://sub2n.github.io/2019/05/31/190531-TIL/Today I Learned Ajax, Promise로 CRUD 구현 fetch, async 와 await도 사용해봤다Fri, 31 May 2019 00:00:00 GMTTIL