웹 개발 공부

'import' and 'export' may only appear at the top level 위와 같은 에러가 발생했다 찾아보니 괄호를 닫지 않아서였다 에러 해결을 도와준 스택오버플로우다 https://stackoverflow.com/questions/37902849/import-and-export-may-only-appear-at-the-top-level 'import' and 'export' may only appear at the top level I'm using webpack with vuejs. Webpack does its thing, but when I look at the outputted app.js file, it gives me this error. 'import' and 'e..

오랜만에 방문하네요 express를 사용했는데 css가 적용이 안 되는 겁니다.. 검색으로는 틀리지는 않았지만 정적으로 하는 방법만 나와있어서 해결까지 하루 종일이 걸렸네요.. 약간은 허무하다고 해야 할까.. 그래도 시간은 많이 걸렸지만 알게 되어 좋습니다. 폴더 등록하고 css를 그 폴더 안에 넣으면 되는 거였습니다. 그리고 정적 폴더로 설정했기 때문에 등록한 폴더를 제외하고 경로 설정을 하면 됩니다. 예를 들어서 public 폴더 안에 css폴더가 있다고 칩니다 그러면 css파일을 사용할 수 있죠 const path = require('path'); app.use(express.static(path.join(__dirname, 'public'))); 경로를 'public/css'로 하지 않고 'pub..

# EJS ( * 랜덤 음악만 구현한다면 꼭 ejs가 아니어도 됩니다. * ) # JS const musicPlay = document.querySelector('.audio-columns__music--play'); const musicStop = document.querySelector('.audio-columns__music--stop'); const audio = document.querySelector('.audio-columns__audio'); const audioList = document.querySelector('.audio-columns__audio-list'); var musicList = ["1.mp3", "2.mp3", "3.mp3"]; var musicTitleList = ["..

구글 클라우드를 사용해서 배포까지 완료된 상태입니다. 이것은 강의를 수강하고 그 토대로 제 입 맛(?)에 맞게 구성한건데, 보다시피 정말 간단합니다... 제가 이 사이트를 만들면서 짠 기능들을 소개할까합니다만.. 막상 소개를 구상을 해보니 음.. 민망스럽지만.. 일단은 제가 게시글에 올릴 기능과 수정, 업데이트 할 사항을 언급한 다음에 건들지 않은 영역과 이유를 설명하고 시작하겠습니다. # 진행할 기능 구현들 1. 익명 실시간 채팅 - 채팅 구현은 앞 게시물에서 다뤘었습니다. https://helloihopeyoulikeit.tistory.com/30 [js/socket.io] socket.io를 사용하여 익명/실시간 채팅 구현하기 ejs 파일에 send ... # SERVER 역할의 JS 파일 우선 s..

html 파일에 send ... # SERVER 역할의 JS 파일 우선 socket.io 셋팅합니다. * 참고로 express 설치 & 연결 상태입니다. const express = require('express'); const app = express(); const http = require('http').createServer(app); const { Server } = require("socket.io"); const io = new Server(http); // css 적용을 위해서 var path = require('path'); // process 부분 / env 파일에 따로 다뤄서 변수로 진행하는 것뿐이다. MongoClient.connect(process.env.DB_URL, functi..

앞서 socket에서 언급했듯이 배포하고 진행하려고 했는데.. 변수가 생겨서 좀 늦어질 것 같습니다. 그래서 일단은 실시간 채팅 기능부터 다루려고 합니다. 혹시나 해서 언급하는 건데 댓글 기능을 다루지 않는 이유는 제가 듣고 있는 강의 방식으로 진행한 데다가 구글에 잘 안 알려져 있기 때문입니다.. 그에 비해 socket.io은 강의 방식으로 진행했긴 했으나 구글에 치면 댓글보다 구현 정보가 많습니다. 일단 여기서는 실시간 채팅 기능 사이트를 구현하면서 갖춘 셋팅들을 다루겠습니다. # 설치 1. express 설치 - npm init해서 package.json 생성&설정 - vs code 터미널에 npm i express 2. mongoDB atlas 로그인 & 설치 & 셋팅 (** 실시간 채팅만 구현할..

드디어.. 댓글 + 채팅 페이지를 만들었습니다! 와아! 보완 & 추가해야할 기능들이 남아있어서 미완성이지만 확장할 토대를 만들었다는 점에서 만족스럽습니다. 카카오 채팅처럼 '나' 일 경우 방향을 다르게 해서 출력하고 싶고, 댓글은 페이징하고 싶습니다. 이 부분들은 이 지식으로 1시간만에 하기에는 좀 걸릴 것 같고 또 더 공부해서 더 좋은 방법으로 하고 싶어서 잠시 패스했습니다. 그런데 페이징은 조만간 하지 않을까 싶습니다. 채팅 + 댓글 중에서 댓글은 강의 내용 일부에 가까워서 아마 채팅 기능만 다룰 것같습니다. 배포까지 마치고 블로그에서 다루려고 했는데 시간이 늦어지기도 하고 해서 배포는 다음 게시글에 언급하겠습니다. (지식 부족 + 보안 문제 이유로 다루지 않은 기능들이나 차차 업데이트할 기능들도 다..

생활코딩에서 arguments 파트 수강했었을 때, arguments로 입력받아야 하는 값 그리고 입력한 값 개수를 비교할 수 있다는 점이 인상(?) 깊었는데 공부하는 내내 계속 떠나가질 않아서 이렇게 블로그에 다룹니다. 참고로 배열 복사나 배열로 foreach같은 메서드를 쓸 때는 arguments보다는 전개 구문&Rest 문법(...)을 쓰는 게 좋습니다. arguments는 진짜 배열이 아니기 때문입니다.. arguments로 출력할 경우 [0 : 2, 1 : 2, 2 : 4]로 인덱스 값 또한 포함합니다. 그런 반면에 전개 구문은 [2, 2, 4]입니다. # JS function arr3 (arg1){ if(arr3.length !== arguments.length){ console.log(`받을..

저번 게시글에서 다룬 정규표현식을 응용하여 적용했습니다. 사용자가 입력한 값과 정규표현식을 비교해서 만일 true가 아니면 경고문 내보내는 파일로 특정 값을 보냅니다. 그럼 그 html 파일에선 if문으로 그 값을 확인하여 있으면 alert로 경고문을 출력합니다. 바로 res.wirte('')로 하지 않고 왜 이렇게 했냐면.. 문자가 깨지기 때문입니다. 이 부분 때문에 이것저것 삽질해보다가 구글 검색해서 찾은 코드를 응용했습니다.. * 참고로 여기선 ejs 템플릿 엔진을 사용합니다. 그리고 데이터 저장은 mongoDB를 이용했었습니다. # ejs 전송을 위한 form과 사용자에게 이메일 받을 input를 만듭니다. email 이어서 미리 또 경고문을 출력할 ejs 파일 생성과 생성한 파일에 코드를 작성했..

nodeJs 공부하다가 문득 console.time()이 떠올라 검색하다가 한 블로그의 게시글이 유용하다 판단되어 제 블로그에도 요약으로 올립니다. 주로 처리 속도가 개선되었는지 확인하거나 보고 할 때 쓴다고 합니다. # JS console.time('시작!'); let c = 0; function addtion(a) { for(let i = 1; i