-
[Angular] Data binding■ Front-End/- Angular 2019. 9. 26. 15:24
Angular Tutorial을 따라하면서 기존 JQuery와는 조금 다른 데이터 바인딩 방법에 대해 알게 되었다. Data binding은 View와 Model을 하나로 연결하는 것을 의미한다. 1. JQuery에서의 Data binding 기존 JQuery에서는 DOM에 직접 접근해서 데이터를 조작하는 코드를 작성해야 했다. 아래 예제 코드를 보면, HTML 파일에서 h1 요소가 p 요소로 변경되면, Javascript에서도 $('h1')을 $('p')로 바꿔줘야 한다. 이처럼 Javascript는 DOM을 직접 조작하는 방식이기 때문에, View가 변경되면 로직도 변경될 가능성이 매우 높다. 하지만 Angular의 경우, DOM에 직접 접근하지 않고, Component 클래스 파일에서 Templat..
-
[Angular] Angular Arichitecture■ Front-End/- Angular 2019. 9. 24. 19:42
Angular 애플리케이션을 구성하는 기본 요소와 그 구조를 알아보자. 1. 모듈(Module) Angular 애플리케이션을 실습하다보면 가장 익숙한 것은 NgModule 이다. NgModule은 비슷한 기능을 하나로 묶어 관리하기 쉽도록 만든 모듈이다. 그렇다면 Angular에서 NgModule은 어떻게 이루어져 있을까? 아래 파일은 Angular에서 최상위 모듈을 뜻하는 AppModule이다. 여기서는 Angular 애플리케이션에서 사용하는 컴포넌트, 모듈 등을 선언한다. declarations와 imports에 포함된 컴포넌트와 모듈들은 튜토리얼을 따라하면서 추가된 것으로, 실제로 초기에는 이렇게 많지 않다 ^^; AppModule에서 다른 모듈을 사용한 것처럼, NgModule에서도 다른 NgMo..
-
[Angular] IntelliJ에서 Angular-CLI를 이용한 프로젝트 만들기■ Front-End/- Angular 2019. 9. 15. 15:44
Angular-CLI는 간단한 명령어를 사용하여 Angular 프로젝트 스캐폴딩(scaffolding)을 생성, 실행, 빌드할 수 있으며 Angular의 다양한 구성 요소를 선별적으로 추가할 수 있는 커맨드-라인 인터페이스(command line interface)이다. 개발용 서버를 내장하고 있어서 간단히 프로젝트를 실행시켜서 동작을 확인할 수 있다. Angular CLI는 Angular 프로젝트 스캐폴딩을 간단한 명령어로 생성해 주어 개발환경 구축에 소요되는 시간을 최소화할 뿐 아니라 표준 스타일 가이드를 제공한다. Angular CLI가 지원하는 기능은 아래와 같다. Angular 프로젝트 생성 Angular 프로젝트에 컴포넌트, 디렉티브, 파이프, 서비스, 클래스, 인터페이스 등의 구성 요소 추가..
-
[npm] npm package 설치 실패시■ Front-End/- Angular 2019. 9. 15. 14:57
프로젝트를 만들어보기 위해 npm 패키지를 설치하려고 했는데 아래와 같은 에러가 발생했다. internal/modules/cjs/loader.js:583 throw err; ^ Error: Cannot find module '../lib/utils/unsupported.js' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15) at Function.Module._load (internal/modules/cjs/loader.js:507:25) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:..
-
[TypeScript] TypeScript란?■ Front-End/- Angular 2019. 9. 3. 14:19
TypeScript는 Javascript(ES5)의 상위 확장 개념 언어이다. 그래서 ES5의 문법을 그대로 사용할 수 있고, ES6에서 새롭게 추가된 기능들을 기존의 자바스크립트 엔진에서 실행할 수 있다. (Babel을 사용하지 않아도 된다.) 장점 1. 정적 타입 지원 기존 Javascript에서 함수를 선언할 때 아래와 같이 사용한다. 위 함수는 2개의 매개변수를 전달받아 두 수의 합을 반환하는 함수이다. 매개변수의 자료형을 다르게 호출해도 자바스크립트 엔진은 동적으로 값을 반환한다. TypeScript는 정적 타입을 지원하는데, 아래와 같이 작성한다. 이처럼 명시적으로 정적 타입을 지정하는 코딩 방식은 여러 장점이 있다. - 컴파일 단계에서 오류를 확인할 수 있다. - 개발자의 의도를 명확하게 코..
-
월간 카카오 경력 지원 후기■ Diary 2019. 8. 14. 13:39
1. 서류 전형 카카오는 다른 회사들보다 입사 지원이 간단한 편이다. 자기소개 문항도 딱 하나. '자기소개' 뿐이다. 경력기술서를 함께 제출하기 때문에, 자기소개서는 좀 더 심플하게 작성했다. - 간단한 자기소개 (1-2줄) - 전 직장에서 했던 일(2-3줄) - 퇴사 이유 + 지원 동기(2-3줄) - 입사 후 포부? 내가 어떤 사람이 되고 싶은지에 대해서 작성 (1-2줄) 심플하게 썼다고 하기엔 10줄 정도 되는 장문이지만, 그래도 너무 짧게쓰면 성의없어보일 것 같아서 열심히 썼다. 그리고 너무 길면 읽는 사람에게도 굉장히 부담스럽다. 전에 서류 검토하시는 분이 옆에 계셨는데, 너무 길면 엄청 싫어하셨다. 그 반응이 기억에 남아있어서, 최대한 줄이고 줄여서 작성했다. 서류는 늦은 저녁에 작성해서 제출했..
-
주니어 개발자 면접 준비하기■ Diary 2019. 8. 11. 00:09
코딩테스트를 통과하고나면 면접이라는 관문을 마주하게 된다. 면접은 보통 기술면접 - 인성면접으로 이루어져있고, 기술면접이 가장 큰 준비가 필요하다. 뭘 어떻게 준비해야할까? 1. 내 경력기술서에 대해 준비하기 보통 기술면접은 경력기술서를 기반으로 이루어진다. 그래서 서류에서 경력기술서는 아주 중요한 역할을 한다. 경력기술서에 함부로 거짓말을 하면 안되는 이유이기도 하다. 나는 내 경력기술서를 면접관의 입장에서 생각하면서 질문 리스트를 쭉 적어나갔다. 면접관의 입장에서 생각하는 방법은 아주 간단하다. 본인이 지원한 채용공고의 자격요건, 직무 소개 글을 보면서 실무진 입장에서 궁금한 점들을 생각했다. 처음에는 질문이 잘 떠오르지 않을 수 있다. 하지만 면접을 자주 보다보면 면접관이 궁금해하는 점들을 알게된다..
-
주니어 개발자 코딩테스트 준비하기■ Diary 2019. 8. 10. 20:05
첫 취업 준비를 시작할 때부터 가장 탈락을 많이 했던건 코딩테스트였다. 주어진 시간 내에 문제들을 풀어내야하는데, 문제조차 이해하기 어려웠던 문제들이 많아서 번번히 탈락하곤 했다. 요즘 백준이 알고리즘, 프로그래머스와 같은 알고리즘 풀이 사이트가 있지만, 문제를 줘도 떠먹지 못하는 때가 있었다. 다른 사람들 풀이를 보면 저 사람은 10줄도 안되는 코드로 짠 하고 작성했는데, 나는 왜 풀지도 못하지? 하면서 자괴감에 빠졌었다. 그래서 코딩테스트 공부법을 여기저기 검색해서 실천해보면서, 나에게 정말 도움이 되었던 몇 가지 방법들을 정리해보았다. 코딩테스트로 고민하고 있을 누군가에게 조금이나마 도움이 되길 바라며! 1. 책을 보자! 대표적인 코딩테스트 책은 '알고리즘 문제 해결 전략', '코딩 인터뷰 완전분석..