본문 바로가기

분류 전체보기

 (108)
Vue&Express 연동하기 (2) Client 1. Client 파일을 열고 config/index.js 파일을 열어 proxyTable을 설정해준다. proxyTable: { '/api':{ target:'http://localhost:3000/api', changeOrigin: true, pathRewrite: { '^/api':'' } } }, 2. axios 모듈을 설치 : npm i axios 3. src/main.js 파일에 axios를 전역에서 사용할 수 있도록 코드를 추가해 준다. import axios from 'axios' Vue.prototype.$http = axios 4. components/IndexPage.vue파일을 만들고 코드를 작성해준다. (화면에 보여질 vue파일 만드는것!) 접속한 유저 아이디: {{ ..
vue&express 프로젝트 생성 + 연동까지 Vue 1. npm install -g @vue/cli vue-cli는 기본 vue 개발환경을 설정해주는 도구이다. 기본적인 vue 프로젝트 세팅을 해준다. 2. vue init webpack (project 이름) vue 프로젝트를 생성한다. 이름은 client로 해주었다. 3. client파일로 이동 -> npm run dev 위치를 client파일로 이동하고 npm run dev를 해서 실행시킨다!! 4. localhost:8080 접속 Express 1. npm install -g express-generator express-generator는 express의 project 구조를 쉽게 만들어주는 라이브러리 client파일에서 나와 express-generator를 설치해준다. 2. expres..
[ERROR] vue: command not found 환경변수 설정합시다 vue_cli를 쓰려니까 또 vue를 못찾는다ㅋㅋㅋㅋ 해결이 안돼서 몇달동안 무시하고 했는데 이제는 해결해야할듯.....ㅠㅠㅠㅠ 환경변수가 문제인거같은데 안된다. 아무래도 경로가 잘못된 듯 하다..... 위 사진처럼 폴더 경로 확인하고 C:\Users\samsung\AppData\Roming\npm\node_modules\vue-cli\bin 이 경로로 환경변수를 설정해준건데 ㅎㅎㅎ방금 이유를 찾았따,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,Roamin인데 Roming이라고 오타를 냈었네,,,,,,,,,, 바보인가아,,,,,,,,, C:\Users\samsung\AppData\Roaming\npm\node_modules\vue-cli\bin 이렇게 말고 %AppData%\npm\n..
Socket.io 시작하기 npm install --save socket.io 먼저 socket.io 모듈을 설치한다. 작성해준 package.json이다. socket.io와 더불어 express와 nodemon또한 모듈을 설치해주었다. io.on('connection',(socket)=>{ }); connection이 발생할 때 메소드 안의 핸들러를 실행한다. socket으로 연결된 페이지를 로드하면 connection이 발생하고, 페이지를 닫으면 disconnection이 실행돼 socket이 해제된다. 실행시켜주면 잘 연결되었다고 console.log로 찍어준 listen:3000이라는 로고가 뜬다! 이제 localhost:3000 을 열어주면 "연결됨!" 이라고 찍어준 console.log가 뜬다. 일단 아래에서 보인 코..
Http 통신 VS Socket 통신 네트워크를 통해 서버로부터 데이터를 가져오기 위한 통신 방식은 크게 http통신과 socket통신 2가지가 있다. 1. HTTP 통신 http 프로토콜은 Client에서 요청이 있을때 응답하여 데이터를 처리한 후 바로 연결을 끊는 방식이다. Client가 요청(Request)을 하는 경우에만 Server가 응답(response)하는 단방향 통신이다. 서버는 클라이언트로 요청을 보낼 수 없다. 이런 방식을 사용하는 이유는 서버의 부하를 줄여서 다른 접속을 원활하게 처리하기 위함이다. Client가 요청을 보내는 경우에만 Server가 응답하는 단방향 통신이다. Server로 부터 응답을 받은 후에는 연결이 바로 종료된다. 필요한 경우에만 Server로 요청을 보내는 상황에 사용하기 적합하다. 요청을 보내 ..
Error: listen EADDRINUSE :::3000 Error: listen EADDRINUSE :::3000 어제까지만해도 오류없이 잘 실행됐는데 오늘 서버를 실행시키니 오류가 떴다....ㅠㅡ 3000번 포트가 이미 사용중이라서 뜨는 에러라고한다. 찾아보니 nodemon을 사용하다보면 종종 서버충돌 현상이 발생한다고 한다! 해결하기 위해서는 3000번 포트를 사용하는 프로세스를 찾아 종료시켜주어야한다. 1. cmd창을 열어 netstat -ano 입력 netstat를 통해 포트를 사용중인 프로세스를 확인할 수 있다! 3000번 포트를 사용하고있는 PID는 30552 이다. 2. 작업관리자 -> 세부정보에서 해당 PID를 찾아 작업 끝내기 작업관리자에 가서 30552 PID를 찾아서 강제 종료 시켜준다. 이제 프로젝트를 다시 실행시켜보면 성공.....!!!
[Bootstrap-Vue]게시판 만들기 - Read와 Delete 구현하기 임의의 게시글 목록을 클릭하면 해당 게시글의 contentid를 가져와 detail페이지로 갈 수 있게 해준다. @row-clicked="rowClick" 를 사용했다. 세개의 인자를 받는데, 첫번째 인자 : 클릭된 row가 가지고 있는 data 그 자체 두번째 인자 : 클릭된 row의 index 세번째 인자 : 클릭한 당시의 이벤트 정보를 볼 수 있다. detail 페이지로 content_id를 보내줌! style은 아직 하나도 해주지 않았다. class만 달아둔 상태!! 강의에서도 css는 안보여주셨는데 이거 다하고 css 스타일 달아줘야겠다.
게시판 만들기 - 정렬과 글쓴이 필드추가하기 정렬 지금은 글 번호 순서대로 정렬이 되어있다. 하지만 실제 게시판은 최신순으로 나열된다. 즉, 정렬이 반대가 되어야한다! 최근에 작성한게 앞으로 가게끔! sort 정렬을 이용한다! 자바스크립트 공부할때 했었다. 두 요소를 뺐을 때 양수가 나오면 자리를 바꿔준다! ( 양수면 정렬 음수면 고대로 둠! ) 글쓴이 필드 추가하기 게시판의 요소들은 Content 데이터들을 뿌려준것인데, Content 데이터에는 유저의 이름이 없다. 유저의 이름은 User에서 가지고 와야한다! 그러므로 유저의 이름은 User에서 가져와야한다. 이럴때 써야하는것이 map함수!! items = items.map(contentItem => { return { ...contentItem, user_name: data.User.filte..

티스토리툴바