쪼렙 as! 풀스택

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

import { Component } from 'react'; class Child extends Component { constructor(props) { super(props) if(props.onParentRef) { props.onParentRef(this); } } blahblah = () => { console.log("BlahBlah~"); } render() { return ( 여기는 Child 컴포넌트. ); }} class Parent extends Component { constructor(props) { super(props) this.childComponent; } callChildMethod = () => { this.childComponent.blahblah() } render..

안녕하세요, 매감매기 개발자 입니다. 많은 사람들이 사랑해 주시고 있어서 힘이 됩니다. 그래서 어떻게 하면, 여러분들께 더 좋은 것들을 제공해 드릴 수 있을까... 하는 고민을 많이 하게 됩니다. 그 결과로, 이번에 1.8 업데이트를 진행하였고,이제부터 '소망나무' 콘텐츠가 새롭게 제공되기 시작했습니다. 시각적으로 아름다운 묵상글들을 제공해 드리는 코너로 기획했습니다. 이 아이디어에 처음으로 동참해주신 '온맘닷컴'의 김택환 대표님께 진심으로 감사드립니다. 앞으로도 더 많은 콘텐츠를 제공해드리고자 다른 작가분들께도 컨택해볼 예정입니다. 아름답고 은혜로운 콘텐츠들이 더욱 풍성해지길 기대해 봅니다. 감사합니다.

안녕하세요, 매일감사 매일기도 개발자 김현우 입니다. 8월 초에 가입자가 500명을 넘어섰어요~!! 진정, 감사합니다~^^ -------------- 지금 저는 회사일에 치여사느라, 집에오면 녹초가 되어업데이트를 하지 못하고 있답니다. 매일감사 매일기도를 사용하시는 모든 분들께,어떻게 하면 더 가치있는 것들을 드릴 수 있을까 고민하면서, 업데이트를 준비하고 있습니다. 마침 제가, 다음주 내내 회사 휴가기 때문에 집에서 업데이트를 할 수 있을 것 같아요~!열심히 해봐야겠네요. 기대하셔도 좋습니다~!^^

빈스토크 - 로드밸런서를 쓰고 있는경우, http 인지 https 인지 구분하는 방법이 약간 특별해진다. 그 특별한 내용은 여기 참조...Elastic Beanstalk 에서 HTTPS 로 Redirect 시키려 한 삽질들... 이번엔 Node - Express 서버에서 리다이렉트를 시켜본다. const server = express() server.use(function(req, res, next) { const xForwrded = req.get('X-Forwarded-Proto') //로드밸런서경우, X-Forwarded-Proto 로, 어떤 요청으로 왔는지 알 수 있다. if(!!xForwrded && xForwrded !== 'https') { res.redirect('https://' + re..

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 ...

React + next.js 로 정말 신나게 코딩하면서, 프로젝트의 마무리 단계에 와있었다. 그동안은, 당연하게 localhost:3000 로 테스트를 하고 있었고, 서버 테스트는, next 를 만든 zeit 사의 'now' 서비스를 사용했었다. zeit / now 서비스는 정말 감동적으로 좋은 서비스였다.그냥 터미널에다 'now' 라고 3글자만 치면, 자동으로 프로젝트를 서버에 올리고, 자동으로 빌드되고, 곧장 실서버 상황을 볼 수 있었기 때문이다. 그러다가, 이제 정말 product 로 배포해야할 때가 다가 왔고, 그래서 진짜 실서버 테스트를 하려고, AWS - Elastic Beanstalk 에 올려보려고 했다.나는 이제껏, BackEnd 는 다 PHP 로 개발 해 오다가, 이번에 React 로 프..

안보이는 임시의 textarea를 만든 후, focus() -> select() -> execCommand('copy') 한 후, document 에서 제거해준다. const selBox = document.createElement('textarea'); selBox.style.position = 'fixed'; selBox.style.left = '0'; selBox.style.top = '0'; selBox.style.opacity = '0'; selBox.value = '복사할 문자열'; document.body.appendChild(selBox); selBox.focus(); selBox.select(); document.execCommand('copy'); document.body.removeC..

Next.js 를 이용해서 서버사이드 렌더링을 하고 있다. Next.js 에서는 최초에 한번 서버사이드에서 렌더링해서 내보내 주고,그 이후는 클라이언트에서만 라우팅을하며 렌더링 해주는 방식으로, SSR 과, SPA(CSR) 의 장점을 매우매우 훌륭하게 조합하여 구현해준다. 그런데 간혹, 특정 Component 에 한해서, 서버사이드에서는 렌더링 하지 않았으면 하는 마음이 있다.그 '특정 컴포넌트' 라 함은, 특별히 SSR 이 중요하지도 않은데, 매우 무거워서, 최초 로딩 performance 에 악영향을 미치는 경우라 할 수 있겠다. Next.js 에서 3.0부터 제공하는 'dynamic' 기능을 이용해서, 이런 문제를 해결할 수 있다. import dynamic from 'next/dynamic'con..

직접 만든 서비스들 ( 100% 참여 ) Objective-C (iOS)- 라이프팔레트 - 오캘린더- 모바일 서명운동 - 싸인 Swift (iOS)- 줄거리알려줌, - IT 알려줌, - 투이톡- 매일감사 매일기도 Java (ANDROID)- 줄거리 알려줌- IT 알려줌- 알려줌- 투이톡- 매일감사 매일기도- 모바일 서명운동 - 싸인 PHP- 알려줌 서비스 API 서버 Angular- FANZEEL.COM- Fanzeel.com 관리자 페이지. React- FANZEEL.COM (ver2) 주로 사용하는 라이브러리 iOS - SwiftyJSON- Alamofire, AlamofireImage- Firebase Android- OkHTTP- Glide, Picasso- Butter&Knife , Data-b..