쪼렙 as! 풀스택

리액트를 사용하면서, SSR 을 구현하려고 했다. 기존에 회사 서버가 PHP 로 구성되어있기 때문에, 일단 라우팅과 SSR 은, PHP 에서 담당하고, 리액트는 뷰만 만들어서 쓰기로 했다. 그러다보니, 테스트환경에 문제가 있었다. 나중에 Node 로 넘어가면서 눈여겨보고 있던 Next.js 를 사용하려고 했는데, 그러다 보니, 테스트환경이 매우 복잡해 지고 있었다. 그래서, PHP 서버는 API 서버로만 남겨놓기로 하고, 처음부터 Next.js 와 함께 Node 로 넘어가야겠다는 결심을 했다. 그래서 Next.js 의 공홈에서 제공하는 Learning 을 처음부터 살펴보았다. https://nextjs.org/learn/ 살펴본 결과. 매우 훌륭하다. 똑같이 getInitialProps 를 이용하는데, ..

가끔 오브젝트에 직접 접근해야할 때가 있다. https://reactjs.org/docs/refs-and-the-dom.html constructor 에서, React.createRef() 를 해주고.JSX 에서 ref={this.myFoo} 해주면 된다. class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return ; } } 사용할 때는, current 로 node 에 접근한다.const node = this.myRef.current;

2018. 12. 5. 수정. 현재 최신버전의 create-react-app 으로 만든 프로젝트에 대해 mobx 적용하는 방법이 훨씬 간단해졌다. 1. 일단 리액트 프로젝트를 eject 시킨다.$ yarn run eject 2. mobx 에서 제공하는 babel-preset-mobx 를 추가한다.$ yarn add babel-preset-mobx 3. package.json 에서 babel-presets 을 수정해준다...."babel": { "presets": [ "react-app", "mobx" ] }... 4. mobx , mobx-react 를 추가해준다.$ yarn add mobx mobx-react 그러면 이제 그냥 써도 된다;;; 근데, vscode 에서 데코레이터에 관련된 Warning ..

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

전통적인 방법으, Header set Access-Control-Allow-Origin "*" 가 있다. 하지만 특정 origin 에서만 오픈하고 싶었다.테스트용 로컬호스트와, dev.test.com 이라는 도메인을 열고 싶다면, 아래와 같이 설정한다. SetEnvIf Origin "^http(s)?://(.+\.)?(localhost:4100|localhost:4000|dev\.test\.com)$" origin_is=$0Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is

let extras: NavigationExtras = { queryParams: { "paramKey":"value1" } }this.router.navigate(['/page/'+this.mContents.uri+'/reports'], extras) 주소에서 파라메터 가져오기. let extraValue = this.route.snapshot.queryParamMap.get("paramKey") //extra Param 가져오기.let contentsId = this.route.snapshot.paramMap.get("contentsId") //Route Uri 쿼리해서 가져오기

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

1. 마블의 토르3 - 라그나로크의 팬질 미니홈을 작업중이다. HTML 편집기능이 있는 일반 게시판 기능을 추가해달라고 해서, 위지윅을 포함하는 게시판 기능을 개발하고 있다. 2. 위지윅 에디터 - CKEditor vs tinyMCE- 위지윅을 선택해야 했는데, CKEditor 와 tinyMCE 두개 중에 많은 고민을 했다. 두개다 강력해 보였다. - Angular4 에 compatible 한가 찾아봤는데, 둘다 공식적인 지원은 없고, 그냥 누가 만들었는지 모르지만 wrapper 가 npm 에 올라가 있다. official 래퍼가 아니면, 일단 고민을 더 하게 된다. 언제 지원이 끊길지 모르기 때문에. 그래서 그냥 Javascript 라이브러리 그대로 가져다 쓰기로 결정했다. - TypeScript 에서..