쪼렙 as! 풀스택

회사에서 fanzeel.com 을 리뉴얼 작업을 하였는데, 개발 결과물의 표면적인 부분은 '[개발후기] FANZEEL.COM 리뉴얼' 이 글에 남겨 두었으며, 이 글은 Angular 에서 React 로 변경하면서, 기술적인 측면에서 느낀점과, 두 라이브러리(프레임웍)을 개인적인 취향으로 비교하며 기록하고자 한다. 기존 환경(변경 전).기존 fanzeel.com 환경은 프론트는 Angular5, 백엔드와 API 서버는 PHP 로 만들어져 있었다. 변경하게 된 동기.사실, 다 만들어서 잘 돌아가고 있는 서비스를 갈아 엎는다는게 쉬운 결정은 아님에도 불구하고, 프로젝트를 갈아엎기로 결정한 몇가지 이유가 있는데, 가장 중요한 이유는 'SEO 문제' 였다. - Fanzeel.com 특성상, 페이지를 페이스북이나 ..

import { DomSanitizer } from '@angular/platform-browser'; constructor(private sanitizer: DomSanitizer, ..., ) { } public mThumbUrl: any = '' // img 태그의 소스 변수. ... const url = URL.createObjectURL(someFile)const safe = this.sanitizer.bypassSecurityTrustUrl(url)this.mThumbUrl = safe ...

FANZEEL.COM 을 운영하는데, 이미지 첨부를 할일이 굉장히 많다. 관리자단에 이미지를 올릴 수 있게 해달라는 명령이 떨어졌다. 목표1 : AWS - S3 에 이미지 파일을 업로드, CloudFront 를 붙인 주소를 사용할 수 있도록 한다.목표2 : 어드민 페이지에서 이미지 주소를 쉽게 사용할 수 있도록, '클릭' 한번하면, 그냥 클립보드에 복사되도록 만든다. 1. Angular 에서 파일업로드가 성공후, 이미지 리스트를 다시 불러온다 하더라도, 페이지가 이동된게 아니기 때문에, 파일 업로드 의 상태는 파일이 선택되어있는 상태 그대로 유지되고 있다. 그래서, 파일 업로드가 성공하면, 리스트가 리프레시될 뿐 아니라, 선택되어있는 파일들을 제거해줘야 한다. - 우선 input 에 #으로 id 를 부여..

fanzeel.com 에 알림 기능을 붙였다. 페이스북의 알림기능을 본따서 만들었다. 1. display: flex VS grid- 프로필 사진을 좌측에 정렬하기 위해서, flex 를 사용할까, Grid 를 사용할까 고민을 했다. - 페이스북은 그냥 float 을 사용했더라. - https://caniuse.com/#search=grid 에서 확인을 해보니, 좀 오래된 Android 브라우저에서는 Grid 가 불가능할 것같았다.- 난 무조건 최신 기능을 사용하기를 좋아하는 편이지만... 그래도 사용 프로젝트이니까, Flex 를 사용했다. 2. 중복 알림을 어떻게 할것인가.- 한 게시글에 댓글이 달리는 알림이 있다고 가정했을 때, 댓글 마다 알림을 주는 방법이 있을 것이고, 한 게시물에 여러댓글을 하나의 ..

Angular4로 component 단위의 개발은 매우 편리한데,Javascript 라이브러리를 가져다 쓰려면, 꼭 귀찮은 일들이 발생하기 마련이다. GoogleAnalytics 로 Tracking 을 해야됐어서, Javascript 코드로 심으려고 보니까,window 객체에 property 를 추가해야했다. 개발자 가이드를 보면, https://developers.google.com/analytics/devguides/collection/gtagjs/ window 객체에 dataLayer 라는 프로퍼티와, gtag() 라는 function 을 추가해야한다. 문제는 TypeScript 에서 window 객체에는 그냥 저런식으로 접근할 수도, 추가할 수 도 없다. 그래서 TypeScript 에서 windo..

https://thor3.fanzeel.com 을 작업하고 있다. Angular 에서 '뒤로'버튼을 누르면 해당 컴포넌트가 첨부터 다시 Init 하면서, 첨부터 다시 렌더링을 한다.필요한 데이터도 새로 불러오기 때문에, 모든 화면이 리프레시 된다. 내가 작업하고 있는 사이트에서는 메인페이지의 글 목록이 있는데, 예를 들어 "3"페이지에 있는 게시물을 선택해서 상세보기에 들어갔다가 다시 "뒤로"버튼을 눌러서 리스트 화면으로 돌아오면,이게 컴포넌트를 처음부터 새로 생성하면서, 모든 데이터도 다시 불러오고 "1"페이지 부터 다시 보여지는 것이다. UI 상 큰 문제가 되었다. 이것을 해결하기 위해 Angular 에서 제공하는 RouteReuseStrategy 인터페이스를 구현해야 했다. 1. RouteReuse..

프로젝트 참여. 백엔드 (서버) - 100%프론트 (Angular) - 50% 0. 개요- 로아컨설팅과 함께 만든, 기업용 콘텐츠 (B2B) 를 보여주는 웹 사이트- 기업용 계정 관리- 유튜브 영상 플레이, PDF 보고서 보기, Audio 청취. 1. AWS 사용.- Elastic Beanstalk 로 서버를 구성했다. 로드밸런서와 오토스케일링을 자동으로 세팅해주니 무지하게 편하다. - CertificateManager 으로 아마존에서 제공하는 HTTPS 인증서를 무료로 사용할 수 있는데, 이것은 또 로드밸런서에만 사용이 가능하다. 로드밸런서도 손쉽게 구성해주니, 더욱 Elastic Beanstalk 를 사용하게 된다.- Elastic Beanstalk 에 Database Tier 도 구성해 줄 수 있긴..

Angular는 SPA 방식으로, 완벽하게 클라이언트 사이드 렌더링으로 돌아가게 되어있다. 이때문에 맨처음 index.html 파일과 관련된 js 파일 들을 단순히 다운로드만 받아도, 서버와 통신할 필요없이 사이트가 돌아갈 수 있게 된다. (물론 실제론 데이터 CRUD 를 위한 API 통신을 하겠지만, 이론적으론 이것과 별개의 이야기다) 그래서 맨처음엔 '우와, 서버리스로 구성해봐야징~' 하면서 아마존 S3 에 올려놓고, static 웹호스팅으로 연결해버렸다. S3 요금은 일반 서버를 사용하는것보다 훨씬 저렴하고, 따로 서버 컴퓨팅 리소스를 사용하지도 않기 때문에, '완전 좋네~' 하면서 만족해 했었다. 그런데 사이트를 완성해 놓고, SEO 와 페이스북 공유를 해보다 보니, 큰 문제가 있었다. ㅠㅠ HT..