Web + APP 썸네일형 리스트형 Async Pipe 뜯어먹기 안녕하세요. 꼬동입니다. 오늘은 Angular에서 Observable Data를 template에서 사용할 때, 함께 쓰는 Async Pipe를 알아볼 예정입니다. 우선 Observable Data를 사용하기 위해서는 Observable Stream의 subscribe() 메소드를 이용해야 합니다. 허나 subscribe()의 경우엔 저희가 unsubscribe()도 해줘야 하고, 코드도 복잡해지고 어휴 지지입니다. Async Pipe는 해당 로직을 이미 Angular에서 제공을 해줘, subscribe() 메소드를 사용하는 것보다, 위의 그림처럼 3가지의 이점을 가질 수 있습니다. 구독할 필요가 없습니다. Async Pipe가 Observable Stream을 Subscription으로 만들어줘 다뤄주.. 더보기 RxJS가 해결하려고 했던 문제 3 안녕하세요. 꼬동입니다. 마지막으로 로직 오류 남았었죠? RxJS는 과연 어떻게 로직 오류를 해결하려했는지 알아보도록 합시다. 웹 애플리케이션은 전달받은 입력값을 로직을 통해 새로운 결과를 반환하거나 표현합니다. 이 과정에서 반복문과 분기문 그리고 변수가 사용되는데 이러한 것들은 우리의 코드를 복잡하게 만듭니다. 반복문은 가독성을 떨어뜨리고, 분기문은 파악해야하는 프로그램 흐름을 나누며, 변수의 값은 변경될 수 있습니다. JS의 경우엔 이를 함수형 프로그래밍의 특성으로 해결하려 했습니다. JS 함수는 일급 객체이기 때문에 이와 같은 솔루션이 가능했습니다. 거기에 더불어 고차 함수를 이용해서 문제를 손쉽게 해결하는 프로그래밍 기법이 탄생했습니다. function process(people) { return.. 더보기 RxJS가 해결하려고 했던 문제 2 안녕하세요. 꼬동입니다. https://ggodong.tistory.com/281 RxJS를 시작하기 전에 안녕하세요. 꼬동입니다. Angular를 공부하다보면, 피할 수 없는 RxJS를 공부하고 있습니다. 뭐... Angular가 RxJS를 좋아한다고 했기 때문에, 공부를 하는 감도 있지만, 사실 fetch와 같은 메소드를 써도 ggodong.tistory.com 위 글에서 저희는 웹 애플리케이션 개발을 하면서 발생하는 오류 3개를 마주했습니다. 입력 오류 상태 오류 로직 오류 여기서 입력 오류는 'RxJS가 해결하려고 했던 문제 1'에서 설명을 드렸습니다. 이번에는 상태 오류를 알아보도록 합시다. 위의 링크 글에서 웹 애플리케이션은 하나의 큰 상태 머신이라고 했습니다. 이러한 상태는 서로 유기적으로 .. 더보기 RxJS가 해결하려고 했던 문제 1 https://ggodong.tistory.com/281 RxJS를 시작하기 전에 안녕하세요. 꼬동입니다. Angular를 공부하다보면, 피할 수 없는 RxJS를 공부하고 있습니다. 뭐... Angular가 RxJS를 좋아한다고 했기 때문에, 공부를 하는 감도 있지만, 사실 fetch와 같은 메소드를 써도 ggodong.tistory.com 이 전 글에서 RxJS가 해결하려고 했던 문제를 3가지 말했습니다. 입력 오류 상태 오류 로직 오류 여기서 입력 문제를 RxJS는 어떻게 해결하려 했는지를 알아봅시다. 간단한 게시판 애플리케이션을 생각해보면, 아래와 같은 Data Flow를 상상할 수 있습니다. 목록화면과 조회화면은 서버로부터 데이터를 불러와 브라우저에 전달 브라우저에 전달된 정보를 브라우저의 UI .. 더보기 RxJS를 시작하기 전에 안녕하세요. 꼬동입니다. Angular를 공부하다보면, 피할 수 없는 RxJS를 공부하고 있습니다. 뭐... Angular가 RxJS를 좋아한다고 했기 때문에, 공부를 하는 감도 있지만, 사실 fetch와 같은 메소드를 써도 충분히 구현이 가능한 것도 RxJS를 이용해서 구현하니 그 이유가 좀 궁굼했고, 책을 하나 구매해서 읽어 보았습니다. 그래서 해당 글은 'RxJS 퀵스타트'를 참고 했으며, 해당 글에 대한 정리가 될 수 있겠습니다. 개발을 좀 하는 사람들은 구현 자체에 초점을 맞추기보단, 소프트웨어를 얼마나 효과적으로 유지보수 할 수 있는지, 설계를 통해 얼마나 많은 문제점을 해결할 수 있는지를 고민합니다. 그래서 저희는 라이브러리, 디자인 패턴을 연구하게 되었고, 이런 고민이 녹아든 프레임워크에 .. 더보기 forRoot() / forChild() 당신은 누구신가요? 안녕하세요. 꼬동입니다. 오랜만이군요. 저는 요새 새로운 직장으로 '뉴 커리어'를 시작하며 살고 있습니다. 원하는 일, 업무 환경, 기업이다 보니 출근 길이 예전처럼 힘들진 않네요 ! 그렇게 공부 중 forChild() / forRoot()라는 친구들을 만났습니다. 이 친구들에 대해서 알아보도록 합시다. 우선 얘들이 왜 쓰이는지 부터 알아봅시다. 서비스 프로바이더가 중복 등록이 될 경우가 있습니다. 서로 다른 모듈에서 같은 서비스의 인스턴스를 생성하는 경우인데요, 이렇게 되는 경우 더 이상 싱글턴이 아니게 됩니다. 그렇기 때문에 서비스를 싱글턴으로 유지해야하는 필요성이 있는데, 아래와 같은 해결 방법이 있습니다. 서비스를 모듈에 직접 등록하지말고, providedIn 문법을 쓰자. 모듈마다 서비스를 분리.. 더보기 웹 컴포넌트란? 안녕하세요. 꼬동입니다. 최근 웹 프론트엔드 프레임워크를 공부하다가, 의문이 생긴 것들이 있습니다. 바로 "컴포넌트 기반 개발 프레임워크"라는 말입니다. 아래 글에서도 이를 기반으로 글을 작성했더군요. www.samsungsds.com/kr/insights/frameworks.html 웹 프론트엔드 프레임워크, 무엇을 쓸까? 웹 프론트엔드 프레임워크, 무엇을 쓸까? www.samsungsds.com "~ 기반 개발 프레임워크"는 뭐 그렇다고 친다만, "컴포넌트" 얘는 뭘까요? 뭐.. 독립된 하나의 부품?? 으로 이해할 수 있겠다만, 좀 더 자세히 알아야하지 않을까 싶어서, 찾아보다가 W3C에서 웹 컴포넌트를 정의한 글이 있더군요. W3C는 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직입니다. 그리.. 더보기 프론트엔드 취업 과제 안녕하세요. 꼬동입니다. 제가 최근 프론트엔드 개발자로 전환이 되었는데, 이 과정에서 항상 평가 받았던 것이 있습니다. 바로 프론트엔드 과제였는데요. 알고리즘 문제와는 다르게 정말 과제가 주어집니다. 예를 들어서 "쇼핑몰을 만들어주세요. 다이어리를 만들어주세요. 댓글 창을 만들어 주세요." 등 이런 것들이요. 이러한 과제는 당황스럽기 마련입니다. 왜냐면 실질적인 프로젝트를 하기 전엔 이를 경험할 일이 없거든요. 게다가 이들은 아마 Vanilla JS로만 문제를 해석하라고 할 것임이 분명합니다. 그렇다면 저희는 어떻게 준비해야할까요? 다행히도 제가 좋은 글을 발견해서 이를 기반으로 제 생각을 써보려 합니다. 글의 출처는 아래와 같으며, 아래에서 문제도 풀어볼 수 있더라고요. 굉장히 좋은 경험이라 생각합니다.. 더보기 이전 1 2 3 4 5 6 7 다음
