개인코딩개발공장

Introduction사실 개발하면서 많이들 배우는 웹소켓인데 난 남들과는 다르게 배워왔고 내가 만들려고 목표했던 서비스는 웹소켓 기능이 필요가 없었다. 근데 이번에 개인 프로젝트를 하면서 기능개발하는데 필요한것 같아서 배우게됨.쉽다고해야할지 어렵다고 해야할지.. 암튼 배워두면 좋은 내용임.   # 우리가 흔히 아는 api통신우리가 프론트랑 백을 개발했다고 하고 프론트서버에서 클라이언트가 받은 웹사이트가 렌더링되고 그 클라이언트는 백단으로 각각 기능마다 api요청을 보낸다. 해당 api요청을 받으면 백단 서버는 그에 맞는 응답을 해준다.1요청 1응답. 이게 바로 우리가 아는 기본적인 api요청 플로우? 원칙? 같은거다.  # 만약 이런기능을 개발해보려고 한다면?프론트단 백단 전부 구현을 해본사람이라면 알..

이미지파일을 디렉토리별로 분류해서 관리한다. js파일에서 특정디렉토리에 어떤 파일들이 있는지 동적으로 알고싶은데 node처럼 path모듈을 사용할수도 없고..해서 찾아봤더니 require.context가 있더라 const context = require.context("../assets/img", false, /\.png$/); for (const key of context.keys()) { console.log(key); } 참고로 assets/img폴더안에 있는 이미지들을 가져올거다. require.context메서드 파라미터는 각각 첫번째 : 찾을 경로 두번째 : 불린값인데 하위 폴더까지 다가져올거냐 마냐임. 세번째 : 원하는 파일명 정규식 결과를 보면 ./1.png ./2.png ./3.png 이..

먼저 cross-env모듈을 설치해주자. 따로 모듈을 서버코드에서 가져올 필요는 없다. npm i cross-env 서버 실행 모듈을 대게는 배포모드일때 pm2를 사용하며, 개발모드일때는 nodemon모듈을 사용한다. 이를 적용하려면 package.json을 수정해주어야 한다. "scripts": { "start": "cross-env NODE_ENV=production PORT=3000 pm2 start app.js", "dev": "cross-env NODE_ENV=development nodemon app.js", "test": "echo \"Error: no test specified\" && exit 1" }, # start : npm start를 커맨드에 쳤을때 설정값이다. 위코드를 해석하자면..

보호되어 있는 글입니다.

# 먼저 설치 npm i dotenv # .env파일을 만들고 # 파일내용 id = '바보' password = '1234' # js 파일에서는 require("dotenv").config(); 이거로 모듈 가져오고 # process.env.id 이런식으로 가져올수 있음.

먼저 data/data.js 파일을 만들고 module.exports = { name : 'jacob', age : 30 } 이렇게 한다. 다른파일에서 const data = require("./data/data.js") console.log(data.name) 하면 jacob이 출력된다.. 어레이든 오브젝트든 암거나 넣어서 보내도됨..

vue create frontend 로 프론트앤드 만들기 # 1 app.vue 세팅 import Ground from "./components/Ground.vue"; export default { components: { Ground, } } 그라운드라는 컴포넌트로 세팅. # 2 component/ground.vue 세팅 import Header from './Header.vue' import Footer from './Footer.vue' import Memo from './Memo.vue' export default { name: "Ground", components: { Header, Footer, Memo } } 헤더, 푸터, 그리고 메인인 memo로 나눔. # component/header세팅 ..

휴대폰에서 사용자의 정보를 가져오는 기능을 개발하려는데 보통은 노트북으로 공부하니까 이게 테스트를 어떻게 해야할지 몰랐다 그래서 이번엔 휴대폰으로 테스트 하는 방법을 찾아봤다. 일단 내 컴퓨터의 ip주소를 알아봐야한다. 커맨드에 ipconfig를 쳐서 아이피를 따오자. 여기서 IPv4주소를 쓰면된다. 그리고 서버 실행하고 휴대폰으로 저 IPv4주소:포트번호 이렇게 접속하면된다. 중요한건 집인터넷으로 휴대폰 와이파이를 연결해야한다.

# 라우터 넘기기 app.get('/',(req,res,next)=>{ res.sendFile(path.join(__dirname,'/index.html')); if(false){ next('route') }else{ next() } },(req, res)=>{ res.send('라우터1') }) app.get('/',(req,res,next)=>{ res.send('라우터 2') console.log('라우터 2') }) 먼저 슬레시로 들어가면 if 조건이 true 이면 next('route')가 있다. 그럼 라우터 1로 연결되는게아니라 라우터 2가 연결된다. 다음라우터라는 뜻이 밑에 연결된 미들웨어가 아니라 '다음라우터'라는 뜻이다 만약 조건이 false면 라우터 1로 연결되겠지. 이걸로 로그인한사람..

const cookieParser = require('cookie-parser'); const session = require('cookie-parser'); const dotenv = require('dotenv'); 이렇게 모듈들을 가져왔다. app.use(express.json()); app.use(express.urlencoded({extended : false})); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ resave:false, saveUninitialized : false, secret: process.env.COOKIE_SECRET, cookie : { httpOnly : true, secure : false..