본문 바로가기

Today I Learn

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

티스토리툴바