본문 바로가기

전체 글

(96)

4. 서비스와 의존성 주입 (1) 2020. 6. 30. 22:52 0. 서비스 서비스란 어플리케이션에서 공통으로 사용하는 데이터나 기능을 묶어 정의한 단위입니다. 가령 여러 컴포넌트에서 공통으로 쓰이는 데이터는 서비스로 정의하여 접근할 수 있도록 한다면 모듈화와 코드의 재사용성이 높아질 것입니다. 일반적으로 뷰 컴포넌트에서는 뷰와 관련한 로직만을 남기고 그외의 서버와 관련한 로직 등은 서비스에 정의하는 것이 좋습니다. 서비스는 의존성 주입이 가능한 클래스로 @Injectable 데코레이터 하단에 클래스를 정의하면 이 클래스는 곧 의존성 주입이 가능한 클래스입을 명시하는 것입니다. @Injectable() export class MyService {} 앵귤러는 서비스 인스턴스를 의존성 주입을 사용하여 생성하는데 그 이유는 여기에서 찾을 수 있었습니다. 1. 의존성 주입을..

3. Modules 2020. 6. 26. 19:15 1. @NgModule 앵귤러에서 모듈은 자바스크립트의 모듈과는 다른 의미로 쓰입니다. 먼저, 자바스크립트의 모듈은 단일 파일에서 모든 멤버 클래스를 정의하지만 @NgModule은 declarations이라는 속성에서 선언 가능한 클래스*들의 리스트를 가지고 있습니다. 선언가능한 클래스*: 앵귤러에서는 컴포넌트, 디렉티브, 파이프, 서비스가 이에 해당합니다. 또한 @NgModule은 import문에 선언된 모듈과 자신의 선언가능한 클래스들만을 export할 수 있으며 그 외의 클래스는 불가능합니다. 공식문서에서 자세히 설명하고 있는 것처럼 앵귤러는 컴파일러에게 @NgModule의 메타데이터로 컴포넌트가 컴파일되는 시점의 컨텍스트를 제공합니다. 컴파일러는 해당 컨텍스트(작업 흐름)에 따라 컴포넌트를 컴파일..

[2020-06-21] 재미난 책들을 발견했다 2020. 6. 21. 15:27 You Don't Know JS, 카일 심슨, 2017 이책 너무 재밌다!!! 이전부터 유명했던 책인거 같은데 왜 이제 봤을까 ㅠㅠ 코어 자바스크립트를 5번 읽었지만 아직도 모르는게 많은 2년차 개린이... 이 책도 코어자바스크립트를 정리한 것처럼 세 번 읽고 내용이 이해될 쯤에 블로그에 하나하나 정리해야지 자바스크립트는 왜 그모양일까?, 더글라스 크락포드, 2020 JSON 창시자가 지은 책이라고 회사 동료분이 공유해주셔서 산 책이다 출퇴근하면서 짬짬히 읽기 시작했는데 자바스크립트에서 저자의 견해나 개인적인 의견을 담은 책이라 신선하고 재밌다 다만 번역이 You Don't Know JS보다는 매끄럽진 못해서 읽는데 살짝 거슬린다 ㅠㅠ 읽다가 뭔말이여?하고 다시 읽고 이해할 때가 많다 예시 코드들도 첫번..

2. Component와 Directive (2) 2020. 6. 20. 21:50 1. Content Projection Content Projection이란 부모 컴포넌트 셀렉터 태그 내부에 자식 컴포넌트 혹은 HTML 엘러먼트를 작성하여 특정 템플릿을 전달할 수 있는 기능입니다. 마치 리액트에서 props.children으로 내부에 작성된 엘리먼트를 props로 전달하는 것과 비슷합니다. 그렇다면 Content Projection은 왜 필요할까요? 그 이유를 여기에서 확인할수 있었는데 글에서 예제로 좌측에 아이콘이 달린 input 태그를 나타내는 fa-input 컴포넌트를 작성한다고 가정합니다. 글에서 제시한 Content Projection없이 작성한 fa-input 컴포넌트는 다음의 문제가 있습니다. input 태그에서 이용할 수 있는 31개나 되는 attribute를 일일히 ..

1. Component와 Directive (1) 2020. 6. 19. 14:58 0. Decorator 데코레이터란, 데코레이터 바로 하단의 클래스를 Angular가 어떤 타입으로 어떤 메타데이터를 가지고 사용할 것인가를 정의하는 장식자입니다. 데코레이터는 '@' 접두어로 표기됩니다. @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent {} 1. Component 컴포넌트(@Component()) : HTML 템플릿을 컴포넌트 데코레이터의 template으로 지정하면 해당 템플릿을 뷰로 지정하여 Angular 프레임워크가 제공하는 디렉티브와 데이터를 바인딩할 수 있는 마크업을 작성할 수 있습니다. 2. Directive 디렉티브(@Directive()) : ..

0. Angular 공부 목록 2020. 6. 15. 19:40 본 내용은 글쓴이가 회사에서 Angular 기초를 학습한 내용과 토이 프로젝트를 리팩토링하면서 진행한 과정 중 필요한 지식만을 담고 있습니다. 완전한 튜토리얼은 Angular 공식 문서 혹은 poiemaweb을 참고하시면 훨씬 도움이 될 것입니다. Angular 9를 기준으로 공부하였습니다. 1. Component와 Directive (1) 2. Component와 Directive (2) 3. Modules 4. 서비스와 의존성 주입 (1) 5. 서비스와 의존성 주입 (2) 6. RxJs와 NgRx (1) 7. RxJs와 NgRx (2) 8. 라우터 9. Reactive Form 1. Component와 Directive (1) 0. 데코레이터 1. 컴포넌트 2. 디렉티브 3. 데이터 바인딩 4. 컴포..

[번역] Error handling with Async/Await in JS 2020. 6. 5. 18:48 본 포스트는 Ian Segers의 Error handling with Async/Await in JS를 번역한 글입니다. Error handling with Async/Await in JS Learn error handling in JS. itnext.io 이 글은 다른 개발자들과 토론과 코드리뷰 동안 이해한 짤막한 글입니다. 본 내용은 주니어 JS 개발자들에게 초점이 맞춰져있습니다. A Simple Try Catch 간단한 try...catch 예시로 시작해보겠습니다. 다음은 예상한대로 동작할 것입니다. 일반 에러를 throw하는 thisThrows()를 호출하면 이 에러를 catch하고 log할 수 있습니다. 그리고 finally 블록에서 선택적으로 어떤 코드를 실행할 것입니다. 그다지 특별한 것은 ..

07. 클래스 2020. 5. 22. 16:44 본 내용은 책 코어 자바스크립트(2019, 정재남)를 세 번 정독 후, 글쓴이가 이해한 내용과 실제 업무에서 겪은 경험을 기술하였습니다. 다소 형식적이지 못합니다. ES6에 클래스 문법이 추가됐지만 클래스 문법은 Syntax Sugar일 뿐, 원래 자바스크립트는 프로토타입 기반 언어로써 상속을 제공하고 있지 않으므로 기존에는 어떻게 구현하고 있는지 알 필요가 있다. 1. 객체 지향 프로그래밍(Object Oriented Programming) 책에서는 클래스와 인스턴스에 대해 현실세계의 개념을 예시로 들어 설명하고 있지만 클래스 뿐만 아니라 객체 지향 프로그래밍을 전반적으로 정리해보기로 하였다. 객체 지향 프로그래밍(이하 OOP)란, 현실세계의 일련의 사건들을 객체로 모델링하여 이들 간의 상호작용을 객체..

[프론트엔드] 성능 최적화 정리 2020. 5. 22. 00:37 목차 0. 개요 1. 브라우저 동작 원리 2. 성능 최적화 2.1 페이지 로드 최적화 2.2 페이지 렌더링 최적화 3. 성능 측정 기준 3.1 브라우저 내부 이벤트 기준 3.2 사용자 기준 성능 지표 3.3 사용자 기준 성능 최적화 4. 정리 0. 개요 프론트엔드의 성능 최적화는 화면을 설계하는 당시에는 사실 고려하기 힘든 경우가 많았다. 회사의 납기를 준수하여야 하는 경우도 있고, 우선적으로 기능 구현을 해서 테스트를 진행하는게 중요했던 상황도 많았기 때문이다. 하지만 프로젝트가 끝나고 유지보수를 하거나, 다음 프로젝트를 하기 전 시간이 나는 경우에 틈틈히 프론트엔드 성능 최적화에 대해 학습하면서 적용해나가다보니, 다음 프로젝트를 착수하게 되었을 땐, "아, 이 부분을 이렇게 설계하면 성능이 더 좋겠구..

[팟캐스트] 2020-04-29 사이드 프로젝트, 꼭 해야 하나요? 2020. 5. 10. 02:24 동생 아이폰에 있는 팟캐스트로 디자이너 두 분이 나오셔서 사이드 프로젝트에 대한 좋은 의견들을 공유해주셨다. 디자이너 뿐만 아니라 개발자한테도 도움이 많이 될 듯 싶어 정리해 보았다. 개인적으로 사이드 프로젝트를 진행할 때 꼭 기억하고 싶은 키워드는 굵은 글씨로 표기하였다. 1. 사이드 프로젝트를 왜 하게 되었나요? - 회사에서 일정한 성취감을 유지하기 힘들어서 - 다양한 경험을 쌓고 싶어서 2. 사이드 프로젝트의 장점 - In-out discount 현상을 감소시킬 수 있다. In-out discount란 외부자의 의견보다 회사 내부의 의견의 설득력이 더 떨어지는 현상으로, 외부 프로젝트 경험을 통해 타인을 설득할 수 있는 힘과 요령을 쌓을 수 있다. 3. 사이드 프로젝트의 단점 - 주말도 사이드 프로..

[자바스크립트]프론트엔드 질문 모음 2020. 5. 6. 14:43 선배님들께 듣거나 기술 면접 때 나올만한(나왔던) 지식 정리용입니다. 주기적으로 업데이트 치는 중입니다. 목차 1. function () {} 표현식과 화살표 함수(_ => {})의 차이점은? 2. 리액트가 DOM을 업데이트하는 과정 3. 3/24에 봤던 탈탈 털린 면접 질문들 (코어 자바스크립트 + 비동기 등) 4. Javascript에서 OOP 구현하기 5. 리액트 redux 6. 이벤트 위임이란? 7. Map과 Set, 객체와의 차이점 8. 5/4 오답노트 1. function () {} 표현식과 화살표 함수(_ => {})의 차이점은? 더보기 - thisBinding 유무: function (){} 은 실행 컨텍스트에 thisBinding 존재, 화살표 함수는 thisBinding이 없어서 호이스..

[리액트] 컴포넌트와 Hook 2020. 4. 23. 15:04 "리액트에서 hook이 왜 등장했을까요?" "클래스 컴포넌트와 hook의 관계는 뭐라고 생각하세요?" 최근 받았던 이 질문들에 대한 답변을 잘 하지 못했다. React 사용자가 아니라 React 개발자가 되기 위해서는 컴포넌트를 제대로 알 필요가 있었다. 2021.02.11. 업데이트 (다시 읽어보니 좀 빈약해서 ^^;) 리액트 16.8 이전까지는 상태 관련 로직을 재사용하기 위해서는 render props, HOC를 사용하였으나 이는 많은 Wrapper컴포넌트 구조를 가지게 되어 코드 구조를 파악하기 어렵게 만듭니다. Hook은 리액트에서 상태관련 로직을 더 쉽게 공유하고 재사용하기 위해 고안되었습니다. React는 컴포넌트간에 재사용 가능한 로직을 붙이는 방법을 제공하지 않습니다. (예를 들어, 스토..

[번역] React Components, Elements, 그리고 Instances 2020. 4. 22. 13:07 본 포스트는 Dan Abramov의 React Components, Elements, and Instances를 번역한 글입니다. 많은 사람들이 React에서 components와 컴포넌트의 instance, 그리고 elements를 혼동합니다. 왜 화면에 그려지는 무언가를 의미하는 각각 다른 세 개의 용어가 있을까요? 당신이 React를 처음 접했을 때 아마 컴포넌트 클래스와 인스턴스만 사용해서 개발하였을 겁니다. 예를 들어, 당신은 클래스를 생성해서 Button 컴포넌트를 선언했다고 합시다. 프로그램이 실행되었을 때, 아마 이 컴포넌트의 여러 인스턴스가 있고, 각각은 인스턴스만의 고유한 props와 지역 state가 존재할 것입니다. 이것은 전통적인 객체 지향 UI 프로그래밍입니다. 그럼 elemen..

06. 프로토타입 2020. 4. 16. 15:24 본 내용은 책 코어 자바스크립트(2019, 정재남)를 세 번 정독 후, 글쓴이가 이해한 내용과 실제 업무에서 겪은 경험을 기술하였습니다. 다소 형식적이지 못합니다. 2019년 6월 NHN OOP 교육에서 배운 프로토타입 내용 또한 첨가하였습니다. 2022-02-20 추가 이전에는 JS는 객체지향프로그래밍의 상속을 구현하기 위해 프로토타입을 지원한다고 생각했는데, 지금 읽어보니 전혀 아니다..!! 프로토타입, 즉 원형이 되는 객체를 기반으로 하되, 문맥(context)에 따라 의미를 다르게 가져갈 수 있음을 구현한 것이다. 임성묵 개발자님의 자바스크립트는 왜 프로토타입을 선택했을까 참고 복기하기 전 주절주절... 이 책을 세 번 읽으면서, 또 OOP 문제를 내·외부에서 설계해보면서도 프로토타입이란 개념은 ..

05. 클로저 2020. 4. 12. 20:47 본 내용은 책 코어 자바스크립트(2019, 정재남)를 세 번 정독 후, 글쓴이가 이해한 내용과 실제 업무에서 겪은 경험을 기술하였습니다. 다소 형식적이지 못합니다. 1. 클로저의 원리 MDN에서는 클로저를 다음처럼 설명하였다. A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). 클로저는 원리를 알아야 그 의미를 이해하기 수월하다. 다음 예시를 보면 var outer = function () { var a = 1; var inner = function () { console.log(++a); } inner(); ..

[HackerRank] Sherlock and Anagrams (Javascript) 2020. 4. 11. 01:26 요즘 머리 환기 겸 간간히 코딩 테스트를 연습하고 있는데 문자열 관련한 문제를 풀던 중 중요한 사실을 하나 알았다. 우선 문제는 다음과 같다. 문제 설명. 주어진 문자열의 부분 문자열 중 Anagram의 개수를 찾는 것. ※ Anagram: 문자열의 길이와 포함된 문자의 개수가 같은 두 문자열의 집합 예를 들어 'abba'이면, [a, a], [b, b], [ab, ba], [abb, bba]가 Anagram이므로 4를 리턴해야 한다. 출처. https://www.hackerrank.com/challenges/sherlock-and-anagrams/problem 아무리 머리를 싸매도 O(n^4)밖에 생각이 안나서 Brute Force로 풀었다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ..

[리액트] Hook 렌더링 최적화 실무 적용기 2020. 4. 9. 16:47 최근에 Daily DevBlog에서 useCallback과 React.memo을 통한 렌더링 최적화에 관한 글을 읽었다. 글을 읽고 깨달은 것은 내가 지금까지 useCallback을 잘못 사용하고 있었다는 점이었다. 마침 챗봇 빌더의 설정 페이지를 시작으로 점차 렌더링 최적화를 적용해나갈 계획이었기 때문에 이를 수정하고자 한다. 더불어 리액트 훅 기반 프론트엔드 개발 시 주의할 점에서 state는 독립적으로 설정해야 하는 점 또한 적용할 것이다. 1. useCallback과 React.memo와의 관계성 우선 공식문서를 꼼꼼히 읽으면서 useCallback의 올바른 쓰임새부터 파악했다. 이것은, 불필요한 렌더링을 방지하기 위해 (예로 shouldComponentUpdate를 사용하여) 참조의 동일성에 의..

[리액트] Toast 알람 구현 (2) 2020. 4. 7. 16:20 3/31일에 Toast 알람을 custom hook으로 한 파일 내에서 구현을 하였다. 그러다 보니 해당 컴포넌트를 함수 실행으로 가져온다거나, 컴포넌트 업데이트를 위한 별도의 state를 두는 등의 좋지 않은 패턴을 썼었다. 저번 포스팅에서의 개선점들을 다시 열거하자면, 1. ToastContainer를 함수로 쓰는게 거슬린다! 로 쓰고 싶다 ㅠㅠ 2. setInterval()이 성능에 영향을 줄 거 같다. 따라서 시각적인 변화는 requestAnimationFrame의 콜백함수에서 해결하고 싶은데 가능할까? 3. trigger state말고 ToastBox 업데이트를 할 수 있는 방법을 찾아보자. 등의 고려 사항이 있었다. 따라서 오픈 소스 라이브러리인 react-toastify 소스 코드를 분석해보..

TDZ (Temporal Dead Zone)이란? 2020. 4. 6. 11:45 본 내용은 Don't Use Javascript Variables Without Knowing Temporal Dead Zone을 번역한 'TDZ를 모른 채 자바스크립트 변수를 사용하지 말라' 글을 기반으로 요약한 글입니다. [출처] TDZ를 모른 채 자바스크립트 변수를 사용하지 말라 TDZ을 모른 채 자바스크립트 변수를 사용하지 말라 간단한 질문을 하나 하겠다. 아래 코드 스니펫에서 에러가 발생할까? 첫 번째 코드는 인스턴스를 생성한 다음 클래스를 선언한다. ui.toast.com 1. TDZ란? 변수 선언 이전에 변수를 참조하는 영역. 해당 영역에서 선언 이전에 참조한 변수는 참조 에러가 발생한다. 즉, TDZ에 영향을 받는 변수는 선언 이전에 참조하는 것을 금지하고 있다. TDZ가 자바스크립트에서 ..

04. 콜백 함수 2020. 4. 4. 15:44 본 내용은 책 코어 자바스크립트(2019, 정재남)를 세 번 정독 후, 글쓴이가 이해한 내용과 실제 업무에서 겪은 경험을 기술하였습니다. 다소 형식적이지 못합니다. 1. 콜백함수란? 콜백함수는 어떤 함수의 인자로 활용되어, 그 제어권또한 함께 위임받은 함수다. 우리가 흔히 addEventListener, forEach와 같은 반복 메소드 등의 첫번째 인자로 넘기는 함수가 곧 콜백함수로, 원하는 시점(버튼 클릭 등)에 특정 함수를 호출할 수 있도록 할 수 있다. 2. ★ 콜백함수는 함수다. 너무 당연한 말이지만 이는 매우x100 중요한 의미이다. 다음의 메소드를 콜백함수로 넘기면 (1)과 (2)의 this는 각각 무엇일까? var obj = { name: "juj", func: function (val, ..

[리액트]크로스 브라우징 이슈 해결 경험기 2020. 4. 3. 00:44 처음 챗봇 빌더 서비스를 기획할 때 IE10, 11, Edge까지 지원하는걸 목표로 잡았다 따라서 polyfill을 맞춰주는 babel 로더를 웹팩 로더에 추가하여 기본 크로스 브라우징은 설정하였으나 그럼에도 레이아웃이 틀어지거나 원하는 대로 기능이 동작하지 않는 등의 이슈가 있어 정리해서 다음에도 유의해야 겠다. 가장 예전에 했던 크로스 브라우징 이슈부터 정리하였다. [목차] 1. input focus를 잃는 현상 2. IE10에서 z-index 어긋나는 현상 3. flex 속성 미적용 4. css var() 미지원 5. 기타 이슈 1. input focus를 잃는 현상 원인: 리액트 컴포넌트 라이프 사이클로 인한 rerendering 2019년 6월 1차 고도화가 끝나고 첫 리팩토링 때 발생했던 이슈..

[리액트] Toast 알람 구현 (1) 2020. 3. 31. 21:50 현재 챗봇 빌더에 구현되어있는 Toast 메세지는 직접 구현한 부분이다. 다만 단점은 여느 라이브러리처럼 여러 개가 뜨는 형식이 아닌 하나만 뜰 수 있는 구조로 구현된 상태였다. 그리고 컴포넌트와 기능 부분을 나눈다고 뷰와 컨트롤러 부분이 각각 /components 와 /helpers에 구현했는데 따로 불러와서 쓰는게 어색했다. 따라서 이번에 Toast 알람을 개선하는 것을 Task로 잡고 시도했었다. 마침 최근에 본 기술 인터뷰 때 받은 테스트에서 유사한 요구사항을 가지고 있어 이것을 집에서 다시 풀면서 어느정도 아이디어를 얻을 수 있었다. (정작 테스트볼 때는 이렇게 못풀었어서 아쉽다...ㅠ 함수형 프로그래밍에 익숙해져 있던 탓인지 OOP로 풀 생각을 못함..U_U) [요구 사항] 1. 여러 개의 T..

세 번의 프론트엔드 기술 면접 후기들 2020. 3. 30. 16:00 2020.08.24. 이 글은 3월 말에 막 이직 준비를 시작했을 때 썼던 글이다. 지금은 이직해서 새로운 환경에서 적응 + 근무 중이라 이제 이 글을 공개해도 될 거 같다 :) 이 때는 공부가 더 안된 상태에서 봤던 라이브 코딩들이라 내 무식함이 부끄럽지만 앞으로 이직 준비하시는 분들께 도움이 된다면야....! 결과는 이랬다. 첫번째. 라이브 코딩 합격 > 최종 불합격 두번째. 라이브 코딩 불합격 세번째. 라이브 코딩 합격 > 최종 합격 ※ 후회, 자책 주의 2020.03.30. 최근에 봤던 세 번의 경력 면접을 보면서 느낀 점과 앞으로는 어떻게 해야겠다를 정리하였다. 기업 규모와는 관련없이 라이브코딩은 다들 보는 추세인거 같다. 그런데 세 번 모두 유형이 달라서 아주 신비롭다. 비록 다 떨어졌지만[1..

해쉬 테이블 2020. 3. 29. 23:00 해쉬테이블은 자바스크립트의 객체, 브라우저 기본객체인 로컬스토리지 등에 사용된 자료구조라 잘 알아야 한다. 해쉬테이블은 key를 해싱(hashing)하여 해쉬 코드로 변환 후 해당 코드의 위치에 값을 저장하는 테이블로, key를 알면 해싱함수를 통해 삽입, 삭제, 검색을 바로 수행할 수 있어 O(1)의 시간복잡도를 가진다. 해쉬테이블에서 중요한 건 해싱 함수인데 해싱 함수는 다음 세가지 성질을 지녀야 한다. 1. 같은 입력값에 대해 항상 같은 출력값을 계산 2. 시간 복잡도는 O(1)이어야 함 3. 배열 내 인덱스를 고르게 분포할 수 있게끔 계산 다른 key라도 해싱함수에 따라 같은 해쉬 코드로 변환될 수 있는데 이를 충돌이라고 한다. 충돌을 해결하는 방법으로는 크게 개방 주소법(Open Addressi..

비동기와 Promise 2020. 3. 29. 16:54 현업에서 웹 개발자로 일한지 어느덧 2년이 다 되가는 시점에서 비동기라는 개념을 애매하게 이해하고 있다고 생각되었습니다. 최근 봤던 저의 지식 밑천이 탈탈 털린(...) 면접에서 비동기에 대해 물었을 때 정말 자신없게 대답해서 너무 부끄러웠습니다ㅠ 이제는 비동기에 대한 개념을 제 것으로 확실하게 만들고 싶습니다. 1. 비동기/동기의 차이점 코어 자바스크립트에서 설명한 '비동기'는 A함수에서 B함수로 제어권을 넘겨 A함수는 B함수를 실행하고 바로 다음 작업을 처리하는 동시에 B함수에서 작업이 완료되면 A함수로 그 결과값을 리턴합니다. A함수는 그동안 신나게 B와 관련없는 작업들을 하고 있다가 B함수로부터 결과값을 받으면 그제서야 B함수 다음으로 해야 할 작업을 실행합니다. 스타벅스 온 김에 real wor..

[그래프탐색] DFS/BFS 2020. 3. 28. 14:11 DFS와 BFS를 구현하기 전, Stack과 Queue를 구현할 수 있어야 한다. 1. Stack 구현 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 function Stack () { this.array = []; } Stack.prototype.push = function (e) { return this.array.push(e) } Stack.prototype.pop = function () { return this.array.pop(); } Stack.prototype.peek = function () { return this.array[this.array.length-1]; } Stack.prototype.is..

[리액트] 리액트 훅 기반 프론트엔드 개발 시 주의할 점 2020. 3. 21. 00:14 1년 넘게 react.js 로 챗봇 빌더 프론트엔드 작업을 하면서 다양한 과정을 거쳐왔었다. 2018년, 제일 처음 React.js로 챗봇 빌더 PoC를 할 때는 필수적인 불변성도 준수하지 못했을 정도로 어리석게 프로그래밍을 했었는데 2019년 정식 서비스 개발에 들어가고 리팩토링(이라 쓰고 실상은 갈아엎음;)을 진행하면서 현재 꽤 올바른 방향으로 프로그래밍을 해오고 있다. 하지만 아직 갈 길이 엄~~~청 멀어서 늘 새롭게 배우는 부분이 많아 충격과 자극을 받으며 하고 있는 만큼, 다음에 또 React.js 개발을 하게 된다면 다음고 같은 점들은 꼭 유의하면서 진행하고 싶어 미리 되짚어보면서 꼭 지키고 싶다. 1, 2차 고도화가 끝난 2019년 10월부터 클래스 컴포넌트를 리액트 16.08버전부터 새로 ..

[정렬] Javascript로 정렬 알고리즘 공부하기 2020. 3. 16. 23:29 가장 기본적인 정렬 알고리즘부터 복기 중! 안보고 칠 수 있을 정도로 해둬야 까먹지 않는 거 같다. 지금까지, C++, Python으로는 많이 했었는데 이제 자바스크립트로도 알고리즘 문제를 어느정도 풀고 싶어졌다. 1. 선택 정렬(Selection sort) 요약: 최소값을 뽑아서 첫번째 인덱스부터 swap 시간복잡도: O(n^2) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function selectionSort (arr) { var len=arr.length for (var i=0;i

03. this와 객체 2020. 3. 5. 16:44 본 내용은 책 코어 자바스크립트(2019, 정재남)를 세 번 정독 후, 글쓴이가 이해한 내용과 실제 업무에서 겪은 경험을 기술하였습니다. 다소 형식적이지 못합니다. 객체는 코어 자바 스크립트에서 소개되어있지 않은 내용이나, 2019년 6월 NHN OOP 교육을 복기하기 위해 추가하였습니다. 프로토타입과 this를 이해하는 데 배경 지식이 됩니다. 1. this Binding 요약 3장은 미리 결론을 짓고 뒷부분에서 좀 더 깊이 뛰어드는 게 개인적으로 이해하기 편했다. 명시적인 thisBinding이 없을 때 전역공간: 전역 객체(window, global) 함수: 자기 자신을 호출한 주체 (===전역객체) 메소드: 닷노테이션(.) 혹은 []가 붙으면 메소드의 주체가 되는 객체 콜백함수: setTimeou..

[번역] The Next.js 핸드북 2020. 3. 4. 13:43 Flavio Copes의 The Next.js Handbook을 번역한 글입니다. The Next.js Handbook I wrote this tutorial to help you quickly learn Next.js and get familiar with how it works. It's ideal for you if you have zero to little knowledge of Next.js, you have used React in the past, and you are looking forward diving more into the React ecosyste www.freecodecamp.org Next.js를 여러분들이 빨리 배우고, 어떻게 작동하는지 익숙해지는데 도움을 주기 위해 이 튜..

이전 1 2 3 4 다음

티스토리툴바