본문 바로가기
반응형

전체 글179

node.js 파일목록 뽑아내기 코드를 보면 var testFolder = './data'; //알고싶은 파일명을 작성 var fs = require('fs'); fs.readdir(testFolder, function(error, filelist){ console.log(filelist); //피알리스트를 배열로 콘솔에 찍어냄... }) testFolder라는 변수에 파일목록을 알고싶은 파일명의 경로를 적어준다. fs란 모듈을 node.js에서 사용할것이다. fs중에 readdir란 기능을 사용해 파일의 디렉토리안에있는것을 console.log로 찍어주면된다. node main.js로 실행시켜주면, data라는 폴더안에 저렇게 4가지의 파일이 들어가있어 콘솔에 4가지가 배열로 찍혀서 나온다. 끝! 2020. 11. 22.
node.js Not found 예외처리 추가 url에서 잘못된 path로 이동했을 때 오류 페이지를 띄워주는 작업을 공부했다. 이런 식으로 nonono라는 경로가 없어서 Not found를 띄워주었다. console.log(url.parse(_url, true)); //url 경로를 보여준다. 일단 되는 url을 확인해보기위해 콘솔로 경로를 다 찍어보자. 이런 식으로 루트 패치를 확인할 수 있다. 루트 패치를 확인했으니 pathname이란 변수를 만들어 루트 패치의 값을 가져온다. 그 값으로 이제 비교를 한다. if(pathname === '/'){ }else{ response.writeHead(404); //웹서버랑 웹페이지랑 통신하기위한 간결한 약속 200이라는 값을 웹서버에 주면 //맞는지 확인 파일이 없다면 404를 리턴 response.e.. 2020. 11. 21.
node.js 파일 읽어오기 [CRUD중 Read 실습 ] Create Read Update Delete의 약자이다. 첫 번째로 node.js에서 파일을 읽어오는것을 보겠다. var fs = require('fs'); fs.readFile('읽을파일명', 'utf8', function(err, data){ console.log(data); }); 이런식으로 사용할 수 있다. 동적으로 한페이지 렌더링만하지만 내용은 바뀌는 것을 실습해보겠다. 이 실습은 생활코딩의 node.js실습을 하면서 정리해본 것이다. opentutorials.org/course/3332/21049 App - 파일을 이용해 본문 구현 - 생활코딩 수업소개 파일에 본문을 저장하고, Node.js의 파일 읽기 기능(fs.readFile)을 이용해서 본문을 생성하는 방법을 살펴봅니다. 강의 ?id=.. 2020. 11. 18.
react 카카오맵 API 연동하기 developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 이번에는 react에서 카카오맵 API를 통해 지도를 가져오는 것을 해볼 것이다. 완성된 페이지를보자 이런식으로 잘불러올수있다. 우선 카카오디벨로퍼에 가입되어있다 가정하고 진행하겠다. 코드를 하나하나 살펴보자 저기 홈페이지 가이드라인을 따라하면 안된다. 기존코드를 보자 이것이 기존 카카오에서 제공하는 코드이다. 저기 발급받은 APP KEY값은 카카오지도 API를 신청하면 본인의 고유 키값을 발급해준다. 거기서 앱키에서 JavaScript키값을 복사해서 넣으면된.. 2020. 11. 17.
react 페이지 이동하기 react-router-dom사용 Django를 사용할 때는 url로 값을 넘겨서 해줬는데 뭔가 react랑 비슷한 느낌이다. 한번 따라 해 보도록 하자. 일단 react-router-dom을 package.json에 설치해주자. yarn add react-router-dom npm install react-router-dom 둘 중에 사용하고 있는 패키지 툴을 사용하면 된다. Header.js의 파일을 살펴보자. ../components/Header.js import React from 'react'; import './css/Header.css'; import Logo from '../Logo.jpeg'; import { BrowserRouter as Router, Route, Switch, Link } from 'react-rout.. 2020. 11. 13.
[node.js + react] Would you like to run the app on another port instead? (Y/n) PORT오류 손쉽게 해결하기 Would you like to run the app on another port instead? (Y/n) 종종 이런 것이 뜰 것이다. 그 이유는 지금 실행하려는 포트가 사용 중이기 때문이다. 안 뜨게 하려면 필자를 따라 해 보자. lsof -i -nP | grep LISTEN | awk '{print $(NF-1)" "$1}' | sort -u lsof -i -nP 이거는 대부분 알고 계실 것이다. 구글링을 해보면 커맨드를 알려주는데 솔직히 보기가 힘들다. 그래서 사용 중인 포트를 보기 편하게 나타낼 수 있게 하였다. 이런식으로 사용 중인 포트가 나열된다... 필자는 모르고 계속 Y를 누르다 보니 포트 사용 개수가 많아져서 정리해보았다. 이제 끌 수 있게 해 보자. kill $(lsof -t -i:3.. 2020. 11. 13.
react 파일구조를 어떻게 구성해야할까? 처음 react를 공부하면서 파일구조를 어떻게 구성해야할지 감이 안잡힌다. 디자인패턴을 공부하였다면 자신에 맞는 패턴으로 구성하면되지만 아직 그런 것들을 배우지 않은 입장이라면 고민이된다. 첫번째는 그냥 일단 한 파일에 넣어서 만드는 것이다. 작은 프로젝트라면 이정도면 충분하겠지만 점점 파일이 많아진다면 이때부터 고민을 해봐도된다. 첫번째로는 파일의 기능이나 라우트에 의한 분류를 할수있다. 프로젝트 구조에 대한 일반적인 방법 중하나는 css,js 그리고 테스트 파일을 기능이나 라우트로 분류된 폴더에 같이 두는방법이다. common/ Avatar.js Avatar.css APIUtils.js APIUtils.test.js feed/ index.js Feed.js Feed.css FeedStory.js Fe.. 2020. 11. 10.
react 개발환경세팅 (+MAC OS) 원래 필자는 dango프레임워크만 공부했었다... 근데 회사에서 react와 node.js를 사용해서 서비스를 구축한다고하여 따로 시간내서 공부를 하고있지만 참어려우면서도 재미있다. 기본적으로 vscode와 node.js가 설치되어있다고 가정하여 설명하겠다. 그냥 구글에 node.js 설치, vscode설치 치면 바로 설치할 수 있을 것이다. npx create-react-app (자신이 원하는 프로젝트명) 여기서 사용한 npx는 무엇이냐 npx는 자바스크립트 패키지 관리 모듈인 npm(Node Package Module)의 npm@5.2.0 버전부터 새로 추가된 도구다. npm은 homebrew로 설치했다. homebrew설치는 /bin/bash -c "$(curl -fsSL https://raw.gi.. 2020. 11. 9.
개발자 맥북 pro 13인치 2020 개봉기 (+실리콘 맥을 사지 않은 이유) 그램 19년도 15인치 것을 램만 추가해서 쓰고 있다가 ios앱 쪽 개발도 해보고 싶어서 맥 os를 쓰기 위해 맥북 하나를 장만했다. 나중에 그램과 비교해서 정리해보겠다. 실리콘 맥?을 선택하지 않은 이유는 일단 첫 모델이라 시행착오가 많을 것 같다. 그리고 인텔을 버리고 arm으로 넘어가면서 x86 기반에 이뤄지는 프로그램들의 연동성? 이 얼마나 쾌적화되어있는지 몰라 굳이 모험할 이유가 없다고 생각되었다. 실리콘 맥이 안정화까지 4~5년을 정도를 보기 때문에 충분히 지금 사서 쓴다면, 상관없다. 나의 맥북pro 스펙은 이렇게 구매를 하였다. 기본 모델에 램만 16기가로 추가했다. 램은 8기가로는 빌드할 때 버벅거릴 거 같아 16기가로 올렸고 ssd를 256으로 고른 이유는 굳이 큰 작업은 없을 것 같고.. 2020. 10. 26.
반응형

티스토리툴바