Node
-
TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react appNode 2021. 4. 27. 19:52
TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react app 라는 메시지와 함께 나를 당황시켰지만.. 검색을 통해 알아본 결과 build를 위해 yarn upgrade와 install 을 새롭게 한 것이 원인인 것 같다 정확히 어떤 문제인지는 모르지만 react-script 의 버전에 관련된 문제가 발생하는 것 으로 보이고 해결하기 위해 StackOverflow에서 찾은 해결방법 node_modules\ 를 삭제한다. package-lock.json file을 삭제한다. (필자는 이 부분을 생략 했다. 해당 파일을 찾지 못했고 사..
-
Python(Flask)+React+SASS+mongoDB로 웹 서비스 제작하기 프로젝트(2-3) – Login Component 만들기(Animation, SASS)Node 2021. 4. 27. 19:45
진짜 진짜 진짜 하고싶었던 것 애니메이션 적용시켜서 Web-Application을 조금 더 ‘트렌디’하게 보이게 하는 것… 오늘 했다 그래서 포스팅 연속으로 3개 올리고 있다. 사실 paper_lee가 만든 API를 통해 회원가입 데이터 송수신 하는 것 까지 했는데 아직 완성이 안돼서 오늘 여기까지만 쓸 것..! 먼저 여기 들어가보셈 http://anicollection.github.io 쩔음. 내가 사용한 것은, bounceIn Left Right, bounceOut Left Right, fadeIn 이렇게 5개 씀. 먼저 여기서 코드 복사해서 ‘src/Animation.css’ 에 작성 src/Animation /*base code*/ .animated { -webkit-animation-durati..
-
Python(Flask)+React+SASS+mongoDB로 웹 서비스 제작하기 프로젝트(2-2) – Login Component 만들기(React-Router)Node 2021. 4. 27. 19:41
지난 글에서 Login, Join component 를 만들었고 구조를 설명했듯 접속시 회원가입 컴포넌트를 보여주고 로그인을 하기 위해 로그인 버튼을 누르면 로그인 컴포넌트로 전환시켜줄 것이다. React-Router react는 SPA를 만들기에 정말 좋은 JavaScript 라이브러리. 변화하는 데이터를 빠르게 View로 보여주기 위해 가상 DOM에 View에 그려져야 할 부분이 있는지를 분류하고 다른 부분이 있다면 기존의 DOM을 날려버리고 새롭게 DOM을 re-rendering하는 조금은 괴팍하고 강력한 친구… 하지만 이런 React는 가볍고 빠르게 하기 위해 그리고 본연의 기능에 충실하기 위해 최소한의 기능만 가지고 있고 추가적으로 필요한 라이브러리를 설치해서 사용할 수 있는 구조이다. 그 중 ..
-
Python(Flask)+React+SASS+mongoDB로 웹 서비스 제작하기 프로젝트(2-1) – Login Component 만들기Node 2021. 4. 27. 19:37
Kakao Maps API 분석을 어느정도 하고 간단하게 로그인 컴포넌트를 만드려고 했다. 근데 하나도 안간단했음..; 공부한 내용을 포함해서 이번 프로젝트 모든 커밋이 있는 레파지토리 참고가능 일단 구조를 로그인 하지 않은(로그인 세션이 유지되지 않은) 상태에서 접속 했을 경우 회원가입을 위한 화면이 보여지고 아이디가 있는 경우에 로그인 버튼을 눌러 로그인 컴포넌트로 화면이 전환된다. 로그인 성공시 메인 화면으로 넘어간다. 위 계획을 세우고 로그인 컴포넌트를 쉽게 생각하고 만들다가 생각보다 많은게 필요한 계획이라는 것을 알았다. 먼저 필요한 추가 라이브러리 나열하면 react-router ( 컴포넌트 전환용 다른 방법이 있으나 이게 제일 간단할 것 같았음) axios (API를 통해 데이터를 받기위해 ..
-
Python(Flask)+React+SASS+mongoDB로 웹 서비스 제작하기 프로젝트(1-4) – Kakao Map API 입력받은 값으로 지도중심 및 마커 이동시키기Node 2021. 4. 27. 19:34
API분석의 끝이 오는 것 같다. 백엔드에서 날아오는 값으로 지도를 옮기고 마커를 찍는 일은 아마도 다반사일 것이다. 따라서 난 input box에서 데이터를 입력받고 그 입력된 데이터를 이용해 지도를 이동시켜볼 것이다. 지도와 마커를 이동시키는 버튼을 만들자 데이터를 직접 받아서 이동시키기 전에 버튼을 만들어서 값을 바꾸는 간단한 것 부터 해보자! 먼저 API부터 확인하자. function panTo() { // 이동할 위도 경도 위치를 생성합니다 var moveLatLon = new kakao.maps.LatLng(33.450580, 126.574942); // 지도 중심을 부드럽게 이동시킵니다 // 만약 이동할 거리가마 지도 화면보다 크면 부드러운 효과 없이 이동합니다 map.panTo(moveLa..
-
Python(Flask)+React+SASS+mongoDB로 웹 서비스 제작하기 프로젝트(1-3) – Kakao Map API 지도 클릭 시 마커 출력 및 좌표 얻어오기Node 2021. 4. 27. 19:31
서비스를 제작하기 위해 Kakao Maps API를 연구하는 단계에서 지도에 마커(핀)을 찍는 방법과 마커가 찍힌 곳의 좌표를 얻어오는 방법을 알아봤다. // 지도를 클릭한 위치에 표출할 마커입니다 var marker = new kakao.maps.Marker({ // 지도 중심좌표에 마커를 생성합니다 position: map.getCenter() }); // 지도에 마커를 표시합니다 marker.setMap(map); // 지도에 클릭 이벤트를 등록합니다 // 지도를 클릭하면 마지막 파라미터로 넘어온 함수를 호출합니다 kakao.maps.event.addListener(map, 'click', function(mouseEvent) { // 클릭한 위도, 경도 정보를 가져옵니다 var latlng = m..
-
Python(Flask)+React+SASS+mongoDB로 웹 서비스 제작하기 프로젝트(번외 for React.js) – ECMAScript 6(ES 6) 문법 정리Node 2021. 4. 27. 19:29
ES6는 ECMAScript 2015로도 알려져있다. ECMAScript는 Ecma international 의 ECMA-262 기술 규격에 정의된 표준화 스크립트 프로그래밍 언어이다. 자바스크립트를 표준화하기 위해 만들어졌고 지금도 자바스크립트가 제일 잘 알려져있지만, 액션스크립트와 J스크립트 등 다른 구현체도 포함하고 있다. React를 이용하여 서비스를 제작하려 하니 레퍼런스 사이트를 포함한 모든 문서가 ES6 문법으로 작성되어 있어서 별 생각 없이 React는 ES6로 작성해야만 하나보다 라고 생각하다 이번 포스트를 위해 조사를 해보니 정확하지는 않지만 JavaScript로도 작성할 수 있는 것 같다. 하지만 Javascript 언어의 특성(?)으로 인해 ES6를 쓰는 이유가 있었고 이건 뒤에서 ..
-
Python(Flask)+React+SASS+mongoDB로 웹 서비스 제작하기 프로젝트(1-2) – Kakao Map API를 React Component로 만들기Node 2021. 4. 27. 19:19
이전에 살펴본 바로 javascript를 통해 간단하게 지도를 삽입할 수 있었으나 앞으로 프로그램이 커짐과 동시에 분명히 지도의 좌표값을 기준으로 데이터를 주고받을 일이 생길 것이라고 확신했다. 따라서 이를 위해 관련된 스크립트를 es6 문법에 맞게 작성하여 Component로 사용하기 위해서 검색을 하던 중 방법을 알게 됐다. 딴소리 필요 없고 소스부터 필요한 사람을 위해... /*global kakao*/ import React, {Component} from 'react'; import './Map.css'; class Map extends Component { componentDidMount(){ // 컴포넌트가 만들어지고 첫 렌더링을 다 마친 후 실행되는 메소드 const script = doc..