본문 바로가기

분류 전체보기

 (129)
WebStorm 에서 React Template 으로 파일 새로 만들기 리액트 프로젝트를 개발하다보면 컴포넌트 파일을 추가할 때 웹스톰에서 제공하는 파일 템플릿에는 리액트 템플릿이 존재하지 않는다. 웹스톰에서는 이를 해결하기 위해 새로운 파일을 만들 때 커스텀 파일 템플릿을 만들 수 있는 기능을 제공한다. 템플릿을 만들기 위해 웹스톰의 상단 메뉴 File -> Settings or Ctrl + Alt + s 을 통해 Settings 창을 띄운다. Settings 창에서 좌측 메뉴의 Editor -> File and Code Templates or 검색어 File and Code Templates 을 입력한다. 우측 내용에서 Files 탭의 아래 + 버튼을 통해 템플릿을 생성한다. 이 때, Name 및 Extension 을 지정할 수 있다. 안의 내용은 본인 스타일에 맞게 작..
docker-compose 를 활용한 react 및 nodejs express 배포 옛날 spring, jsp 시절에는maven(or gradle) 빌드로 나온 war 결과를 tomcat 에 배포하면 쉽게 배포가 되었다. 하지만 react 와 nodejs express 를 개발하고 배포하려고 보면, 어떻게 배포해야할지 난감할 때가 있다. express 앱은 pm2 로 배포해도 될 것 같고, react는 build 이 후 serve로 배포해도 될 것 같고.. 방법은 다양한 것 같다. 하지만 나는 docker-compose 를 활용하여 nginx 를 통한 프록시 설정까지 고려하여 한번에 배포해보려고 한다. ※ 필수 설치 : docker 가 설치되어있어야 한다. [윈도우 도커 설치] 참고 [Docker (1)] window10 Docker 설치하기(윈도우 10 도커 설치) [Docker (1..
Windows 개발환경 노드 버전 관리 매니저( nvm ) 활용 Nodejs 는 버전에 상당히 민감한 것 같다. 여러 프로젝트를 동시에 진행 하다 보면 프로젝트에 맞게 Node 의 버전을 스위치 해야하는 경우가 생긴다. 이 때 Node Version Manager(NVM) 를 사용해서 손 쉽게 내가 원하는 버전으로 Node 를 변경할 수 있다. 1. 일단 nvm 을 사용하기 위해서는 기존에 설치되어있는 Node 를 삭제 해야한다. ( 기존 Node 가 설치 되어있으면 nvm 에서 버전을 아무리 바꿔도 반영이 안되는 것 같다. ) → 제어판 가셔서 삭제하시면 됩니다. 2. 해당 사이트에서 nvm-setup.zip 파일을 다운로드 하고 압축 해제 후 설치한다. https://github.com/coreybutler/nvm-windows/releases Releases ·..
[중앙보훈병원역] 착한낙지 위치 (주차 가능) 서울 강동구 동남로 592 (둔촌동) 착한낙지 서울둔촌점 서울 강동구 동남로 592 (둔촌동 105-10) place.map.kakao.com 메뉴 (네이버 메뉴판 퍼옴) 식사 메뉴 낙지덮밥 1인 낙지해물파전 총평 낙지덮밥이 생각날 때 오게되는 집입니다. 여기 해물파전은 야채튀김에 가까운 맛이 나는데 바삭한 식감이 떠올라 갈때마다 꼭 시키게 되네요. 낙지덮밥은 항상 맛있습니다. 항상 덮밥 -1인에 해물파전을 시켜먹고 오는데 덮밥 1인분을 시킬 때도 싫은 내색 없이 주문 받아주셔서 좋아요. 저렇게 시키면 남는 것 없이 배부르게 먹고 오더라구요. 언젠가 꼭 해물파전에 지평막걸리를 마셔보고 싶은데 차를 안가지고 오기엔 애매한 위치에 있어서 언제 마셔볼 수 있을런지..
[신대방삼거리역] 청송얼음막걸리 위치 (주차 불가능) 서울 동작구 여의대방로24길 133 1층 (대방동) 청송얼음막걸리 신대방삼거리역점 서울 동작구 여의대방로24길 133 1층 (대방동 407-31) place.map.kakao.com 메뉴 식사 메뉴 해물파전 얼큰코다리찜 치즈계란말이 냄비콘치즈 두부김치 두부김치 사진 없음 총평 친구 남편이 막걸리와 전이 끌린다 해서 찾게됬습니다. 알고보니 친구가 이 근처로 직장 다닐 때 자주오던 술집이었습니다. 지날 때마다 항상 사람이 많아 궁금했기에 바로 갔습니다. 오랜만에 왁자지껄한 분위기에서 술을 마시니 기분이 좋았습니다. 음.. 근데 안주에 대한 가성비는 많이 떨어지는 것 같아요. 시킨메뉴 나올때마다 아쉬운 느낌. 그 중 해물파전에 홍합은 너무 비려서 아무도 못 먹고 다 빼내고 먹었습니다. 비..
React + Openlayers 구성 ( By React Context ) 리액트로 Openlayers 라이브러리를 활용한 개발을 하려고하면 한번 생성한 ol/Map 객체에 대해 여러 컴포넌트에서 사용할 때 어떻게 처리해야할지 많은 고민을 하게 된다. (jsp 시절에 개발할 땐 위에 한번 선언만 해주면 주구장창 다른데서 사용했었다....^^) 리액트에서 맵 객체를 사용하는 모든 컴포넌트에 프로퍼티(props)로 매번 전달하기에는 너무 벅차다. 그래서 필자는 상태관리 라이브러리 중 리덕스에 맵 객체를 넣어서 사용했었지만 리덕스의 러닝커브를 감당하지 못하고 리코일로 넘어가버리는 바람에 맵 객체를 리코일 state에 넣으려고 시도했으나,,, 리코일에는 맵 객체가 들어가지를 않았다. ㅠㅠ ( 아마 개인적인 생각엔 리코일 객체로 들어가면서 read only 객체로 객체 내부에서의 변경도..
Webstorm 에서 Terminal CMD 에서 Git bash 로 변경 윈도우 환경에서 Webstorm 을 설치하면 터미널 창이 기본적으로 CMD 로 설정되어있다. 실무에서 개발하는 사람 중 윈도우에서 개발하고 있다면 CMD 보다는 bash 명령어를 사용할 수 있는 Git bash 가 더 편할 것이다. 웹스톰에서는 이 터미널 창을 내가 원하는 터미널로 변경할 수 있다. 1. 먼저 웹스톰을 실행 후 설정 창을 띄운다. ( Ctrl + Alt + s 키 or 상단 메뉴 File -> Settings ) 2. Settings 창에서 검색 필드에 Terminal 을 입력하거나 Tools -> Terminal 로 들어간다. 3. Shell path 부분을 Git 이 설치되어있는 경로로 변경해준다. "C:\Program Files\Git\bin\sh.exe(shell이 설치된 경로)"..
[신대방삼거리역] 조인행닭갈비 위치 (주차 불가) 서울 동작구 여의대방로24길 89-1 (대방동) 조인행닭갈비 서울 동작구 여의대방로24길 89-1 (대방동 409-13) place.map.kakao.com 메뉴 식사 목록 피자닭갈비 2인 막국수 1개 셀프 주먹밥 1개 볶음밥 1인 총평 볶음 닭갈비가 맛있어서 다른메뉴를 다 먹어보고자 두번째 방문을 했습니다. 피자닭갈비는 페퍼로니와 치즈를 가득 올린 치즈닭갈비 느낌입니다. 사장님이 취향을 물어보고 간을 맞춰주십니다. 저희는 자극적인걸 좋아한다고 하니 양념을 더 넣어서 볶아주셨어요. 너무 맛있어요! 사이드로 주먹밥과 볶음밥 그리고 막국수를 시켰습니다. 밥류는 모두 맛있습니다. 꼭 시켜드세요! 막국수도 시원한 국물이 맛있긴했지만 저는 비빔 막국수처럼 국물이 자박하게 나오면 더 맛있을 것 ..
React(+material-ui) draggable + resizing modal 컴포넌트 material-ui 를 사용하여 컴포넌트를 개발하던 중 Backdrop 이 없는 움직이는 다이얼로그 창이 필요했다. material 에서 제공해주는 컴포넌트 중 Draggable dialog 가 있었지만, 내가 필요한 것은 Backdrop 이 없으며 이동가능해야하고, 리사이즈 기능까지 있어야 했다. 그래서 나는 material 컴포넌트의 일부와 모달 드래그 및 리사이즈 라이브러리(react-draggable, react-resizable) 를 사용하여 컴포넌트를 구성하였다. 먼저 필요한 라이브러리를 설치한다. //npm $ npm i --save @material-ui/core @material-ui/icons react-draggable react-resizable prop-types // yarn ..
[신대방삼거리역] 흥부골숯불돼지갈비 (feat.함흥냉면) 위치 (주차가능) 서울 동작구 상도로15길 3 (상도동) 흥부골숯불돼지갈비 서울 동작구 상도로15길 3 (상도동 348-147) place.map.kakao.com 메뉴 먹은 것 돼지갈비 3인 (강추) 공기밥 1개 서비스 냉면 물냉,비냉 각 1개(강추) 총평 보통 알고 있는 돼지갈비와 다르게 뼈없이 두툼한 목살처럼 생긴 양념갈비가 나옵니다. 고기는 직원분께서 직접 구워주시고 불판도 자주 갈아주십니다. 갈비가 정말 부드럽고 맛있어요. 참고로 냉면은 서비스로 주시는데 물/비빔 택1입니다. 종류는 함흥냉면으로 둘다 맛있습니다. 기본반찬부터 고기, 냉면까지 갈 때 마다 아주 만족스러운 식사를 하고오는 곳입니다. 지인들이 놀러와서 갈비가 먹고 싶다고하면 돼지갈비가 끌린다면 흥부골. 소갈비가 끌린다면 갓갈비. 이렇..

티스토리툴바