Web + APP 썸네일형 리스트형 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로만 문제를 해석하라고 할 것임이 분명합니다. 그렇다면 저희는 어떻게 준비해야할까요? 다행히도 제가 좋은 글을 발견해서 이를 기반으로 제 생각을 써보려 합니다. 글의 출처는 아래와 같으며, 아래에서 문제도 풀어볼 수 있더라고요. 굉장히 좋은 경험이라 생각합니다.. 더보기 Angular Large List 최적화 (Angular CDK) 안녕하세요. 꼬동입니다. 오늘은 브라우저 최적화 관련 글을 읽어보다가 발견한 영문 포스팅이 있는데, 좋은 글을 본거 같아 이를 번역해보려고 합니다. web.dev/virtualize-lists-with-angular-cdk/ Virtualize large lists with the Angular CDK Learn how to make large lists more responsive by implementing virtual scrolling with the Angular Component Dev Kit. web.dev 물론, 제가 직접 Angular로 프로젝트를 한 적이 없어서 해당 글에 대해서 겉햝기 밖엔 안되지만 ! 여러분들은 똑똑하시기 때문에 아마 잘 이해하실거라 믿습니다. 리스트 스크롤은 자주 .. 더보기 Angular Tutorial with Docs - 2 두 번째 시간입니다. 이제는 좀더 Angular 프레임워크 사용에 복잡해지는 부분이 많을거 같기도 하네요. 그래도 반복만이 살 길 ! 계속해서 해보도록 합시다. 컴포넌트 만들기 컴포넌트 생성 ng generate component hero-detail src/app/hero-detail 폴더를 생성하고 그 안에 아래의 파일을 생성합니다. 컴포넌트 스타일을 지정하는 CSS 파일 컴포넌트 템플릿을 정의하는 HTML 파일 컴포넌트 클래스 HeroDetailComponent가 정의된 TypeScript ㅏ일 HeroDetailComponent 클래스 파일을 테스트하는 파일 그리고 자동으로 해당 컴포넌트는 app.module.ts 파일에 @NgModule에 등록됩니다. @Input() 히어로 프로퍼티 추가하기 외.. 더보기 Angular Tutorial with Docs - 1 안녕하세요. 꼬동입니다. FE 개발자로 전향되면서, 곧 사용하게 될 Angular를 미리 공부해보려고 합니다. 다행히 공식 문서에서 잘 나와있어 이를 기반으로 정리하는 시간을 가져보도록 합시다. 프로젝트 생성 // 프로젝트 생성 ng new angular-tour-of-heroes angular-tour-of-heroes라는 폴더 이름으로 새로운 워크스페이스를 생성합니다. 서브 폴더 src를 생성하고 이 폴더에 애플리케이션 초기 코드 생성합니다. 서브 폴더 e2e를 생성하고 엔드-투-엔드 테스트 프로젝트 생성합니다. 환경설정파일 생성합니다. // 애플리케이션 실행 cd angular-tour-of-heroes ng serve --open --open의 경우엔 서버 실행을 함과 동시에 브라우저를 열어줍니다.. 더보기 이전 1 2 3 4 5 6 7 8 다음
