코딩기록

이제 수면은 포기다. 어제를 기준으로 5,6시간만 자는 날들이 시작된것 같다. 수면시간은 둘째 치고 프론트랑 백이랑 합치는데 나는 오류들이 문제다 왜 그런 오류가 나는지 알기 어렵다. 또 하나 확인하려면 서버 켜는 백인원, 프론트 연결해서 데이터 입력하는 프론트인원 백 코드 작성자 최소 2,3은 있어야 한다. multer를 이용해서 파일 업로드 코드를 짜야하는데 같이 보는 중이라서 당장 만들기가 어렵다. 오늘의 할일 1. 백,프론트 배포후 테스트 현재 프론트와 같이 기능 확인 중 인데 게시글 생성, 삭제는 가능하다 다행이다 2. multer 파일업로드 기능 구현 중간에 댓글 갯수 구현하느라 또 미뤄졌다. 내일 꼭 해야지 오늘의 스케줄 09:10 - 기상 11:00 - CS스터디 02-16 05:10 - ..

Thunder client에서 jwt토큰을 입력해 게시글 생성,수정,삭제등 본인 확인(authMiddleware)이 필요한 작업을 했다. 혼자서 로그인하는 게시판을 만들때는 프로트에서 값을 입력받아 게시판 생성,수정,삭제 등을 했기때문에 Thunder client를 자주 사용하지 않았다. 프론트 없이 jwt토큰이 입력 됐다 치고 게시판 생성, 수정, 삭제 하는 방법이 생각보다 오래 걸려 다음번에는 좀 더 시간을 절약 하고자 기록한다. 폴더구조 middlewares 폴더 auth-middleware.js const jwt = require('jsonwebtoken'); const User = require('../schemas/user'); module.exports = (req, res, next) =>..

어제 저녁에 백엔드 머지를 끝내려고 했는데 생성부터 막혔다. 오늘 가장 먼저 할일이 바로 머지다. 오늘의 할일 1. 백엔드 머지 끝내기 머지를 다하고 authMiddleware를 연결하고 데이터를 확인 해야 하는데 thunder client에서 token을 입력해야했다. 처음엔 Thunder client로 jwt토큰 입력하는 방법을 몰라서 지난 프로젝트에서 파일을 가져와서 프론트를 연결해야 하나 고민했는데 연결하는것도 일이라서 Thunder client로 api 데이터를 확인하는 방법을 하기로 하고 검색하던 중 2,3시간 씨름한 끝에 찾았다. 그리고 블로거에 정리했다. 2. 파일업로드 api 21:32분 multer로 파일 업로드를 한다는걸 알고 검색하던중 ftp, ftps, sftp, multer, m..

SOP(Same Origin Policy) 다른 출처의 리소스를 사용하는 것에 제한하는 보안 방식 URL의 Protocol, Host, Port를 통해 같은 출처인지 다른 출처인지 판단한다. CORS가 나온 이유 SOP 보안 정책에 따르면 다른 origin에는 접근이 불가능하다. 하지만, frontend와 backend의 상호작용을 위해서는 다른 orgin에 접근해야할 필요가 있다. 이를 해결하는 답이 바로 CORS(Cross-Origin Resource Sharing)이다. CORS(Cross-Origin Resource Sharing) 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹..

어제 각자 맡은 백api를 깃으로 commit 하려고 했는데 이래저래 시간이 흘러 결국 각자의 파일만 공유하고 각자 합해서 기능 추가 구현 해보는 것으로 이야기가 끝났다. 오늘 좀 쉬고 WIL작성하고 나니 벌써 밤이다. 그래도 CORS 문제 해결까지는 WIL에 추가하고 api를 합쳐봐야 겠다. 오늘의 할일 1. WIL 작성 2. 블로그 정리 3. api 합치기 오늘의 스케줄 10:30 - 기상 15:30 - 공부 시작 오늘 배운 것 cors는 백과 프론트를 합치기 위해 꼭 알아야 하는 개념이다. 프론트의 요청을 백에서 처리 하기 위해 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 만약 cors를 사용하지 않으면 해킹에 취약해지고 서버의 정보가 노출되거나 변경되는 위험이 있다. CORS ..

아날로그 처리 방법 아날로그 아날로그는 외부적인 원인에 의해 연속적으로 변하는 것들을 '연속된 물리량'으로 나타내는 방법이다. 아날로그 신호(Analog Signal)라 하면, 연속적인 값(아날로그 데이터)들이 전기적 신호로 변환된 형태를 의미한다. 예시) 더보기 디지털 아날로그와 반대되는 말으로, 자료를 연속적인 실수가 아닌, 특정한 최소 단위를 갖는 이산적(離散的)인 수치를 이용하여 처리하는 방법을 말한다. 연속적이지 않고, 뚝뚝 끊어져 있다는 말이다. 예시) 더보기 디지털을 아날로그로 변환 DA 변환기(digital-to-analog converter, D/A, DAC) 디지털을 아날로그로 바꾸는 변환기 이며 DA 변환기(DAC)는 전압을 만들어 낸다. DAC를 사용해 아날로그 파형을 만들 수 있다..

깃 코드올리기 먼저 하기!! > Node.js기초반강의 4-5 (10:40-gitignore) 에 깃설치, 로컬, 레파지토리, 커밋등 기본개념 설명 노드 터미널에서 .gitignore 파일 먼저 만들기!! node_modules 라는 파일은 변경사항으로 취급하지 않음 절대 배포하면 안되는 파일!! .gitignore node_modules 깃헙 repository 만들기 new repository 클릭 create a new repository → repository name 적고 public 선택, initialize this repository with: 아래 체크박스는 아무것도 체크하지 않는다. 만들고 나면 레파지토리페이지로 자동으로 이동됨 Quick setup - ~~ 에서 HTTPS 선택 후 주..

index.spec.js 에 테스트 코드 메시지를 주고 index.js에 메소드를 작성해 테스트 코드 메시지가 통과되게 하는 게 이번 주차 과제이다. 코드자체가 이해가 안되서 계속 js기초 강의를 봤었다. class, constructor, 상속 등을 봤는데 보다보니 얼추, 알것도 같다 주어진 코드 index.spec.js 더보기 // const { Site, Board, Article, Comment } = require('.'); const { Site } = require('.'); describe('Site 요구사항 테스트', () => { test('Site는 n개 이상 생성 할 수 있다.', () => { expect(() => { //new가 붙으면 객체 생성자(constructor) 함수 ..

업뎃, 240710  1. HTML, JS코드 브라우저 실행 -  Live server  2. VSCode에서 JS실행  3. JS 문법체크  4.  임포트를 자동으로 5. 세미콜론 자동 입력shift + enter - 해당 줄 끝에 세미콜론을 자동으로 추가해주고, 커서를 코드 끝으로 이동시킨다.alt + enter - 해당 줄 끝에 세미콜론을 자동으로 추가해주고, 다음줄로 점프한다.ctrl + alt + enter - 해당 줄 끝에 세미콜론을 자동으로 추가해주고, 커서를 가만히 유지한다.  6. 태그 짝궁끼리 한번에 수정할 수 있게  7. 아이콘을 이쁘게~ 이렇게 하면 기분이 좋크든요👍  8.  브라켓을 더 눈에 띄게 컬러풀하게  9. 태그 짝궁끼리 같은색으로 더 눈에 띄게   10. rgb나 16진..

메모리 계층과 성능 컴퓨터 메모리는 '용량(Capacity)'과 '스루풋(Throughout)'이 큰 것이 좋다. 스루풋이란 단위시간당 데이터 처리량을 의미한다. 스루풋이 큰 장치가 데이터 처리속력이 빠르다. 용량이 크고, 처리속도가 빠른 메모리 장치는 가격이 비싸다. 메모리 계층 구조란? 메모리를 필요에 따라 여러가지 종류로 나누어 두는 것 → CPU가 메모리에 더 빨리 접근 가능함 컴퓨터의 설계에 있어 각각의 특징이 있는 서로 다른 여러 종류의 저장 장치를 함께 사용하여 최적의 효율을 낼 수 있게 하는 것 상황에 맞게 여러 저장 장치를 각각 사용할 수 있도록 하여 저렴하고 성능 좋은 컴퓨터를 구현하는 설계 명칭 위치 접근 속도 레지스터 CPU 내부 빠름 캐시 CPU 내부 빠름 메모리 CPU 외부 레지..

자바스크립트는 함수형 언어 *객체란 서로 연관된 변수와 함수를 그룹핑한것. 객체 내의 변수를 프로퍼티(property=속성)라 하고 프로퍼티 안에 함수가 담겨있다면 그 함수를 메소드라 한다. *자바스크립트는 멀티-패러다임 언어로 명령형(imperative), 함수형(functional), 프로토타입 기반(prototype-based) 객체지향 언어다. 비록 다른 객체지향 언어들과의 차이점에 대한 논쟁들이 있긴 하지만, 자바스크립트는 강력한 객체지향 프로그래밍 능력들을 지니고 있다. 간혹 클래스가 없어서 객체지향이 아니라고 생각하는 사람들도 있으나 프로토타입 기반의 객체지향 언어다. 자바스크립트는 클래스 개념이 없고 별도의 객체 생성 방법이 존재한다. 객체 리터럴 Object() 생성자 함수 생성자 함수 ..

댓글을 쓸때 첫번째 게시글 이후에는 댓글 자체가 안써진다. postId와 content를 확인해 보면 게시글 번호와, 댓글 내용이 맞는데 이상하게 commnetId가 중복이라고 한다. 솔루션은 매우 간단하다. 고유 키를 명시적으로 돌리기만 하면 됩니다. false를 입력하거나 삭제한다. 근데 고유키로 설정해야 하는 경우는 어떻게 해야 하는지 모르겠다. 해당 인덱스 값 삭제 db.{collection 명}.dropIndex({"key": "value"}) 를 이용해 삭제. 내 해결방법 : unique 없앰. 참고 https://codesource.io/how-to-fix-mongoerrore11000-duplicate-key-error-collection/

몽고DB에 데이터를 삽입하는 방법 몽고DB에 데이터를 삽입하는 명령어는 save()이며, 기본적인 형식은 다음과 같다. db.콜렉션이름.save( 삽입할 데이터의 JSON ); 기본적으로 몽고DB는 JSON 형태의 문서를 바탕으로 데이터를 저장 및 운영하기 때문에 save() 명령의 매개변수는 JSON 형식이다. 다음의 명령어를 실행해 보자. 몽고DB에서는 기본적으로 JSON 형태의 문서를 사용한다 db.posts.save({ password: 'asdf' }); 콜렉션- posts 문서- password 필드 값- 'asdf' 단, 이렇게 하면 새롭게 _id가 생성된다. 문서 업데이트, 삭제 업데이트, 삭제는 마우스 오른쪽을 클릭해서 할수 있다. 1). 업데이트 "password" : "asdf", 추..

정적 파일을 지정하는 방법 app.js app.use(express.static('public')); 이렇게 설정한다면, 현재 프로젝트의 public 폴더 하단의 파일들을 검색한다. root.js router.get('/route',(req,res)=>{ res.send('Hello Router, ') }) 다음과 같이 /route.png 로 설정하게 된다면 static에서 public을 설정해두었기 때문에 ./public/route.png를 검색한다. /public이 webRoot로 설정된다는 의미임. 이렇게 하여 원하는 폴더명 하단에 html, img css 등의 파일들을 나눠 저장할 수 있다. 출처: https://close852.tistory.com/106 [Mirage.W]

다양한 방법으로 date format을 할 수 있습니다. 첫 번째 코드 (YYYY-MM-DD hh:mm:ss) new Date(+new Date() + 3240 * 10000).toISOString().replace("T", " ").replace(/\..*/, ''); // 2021-08-05 09:51:31 해당 코드는 3240 * 10000 이란 수식만 기억하면 쉽게 사용할 수 있는 코드입니다. "YYYY-MM-DDTHH:mm:ss.sssZ"로 나오는 형식을 정규식을 사용하여 제거해준 코드입니다. 수식을 사용하는 이유는 대한민국 서울 시간에 맞추기 위함입니다. (기존 시간은 UTC 기준) 두 번째 코드 (YYYY-MM-DD) new Date(+new Date() + 3240 * 10000).toIS..

express에서 라우팅이라는 개념은 클라이언트로부터 요청받은 URL과 뷰를 매칭시키는 것이라고 할 수 있습니다. 라우팅이라는 사전적인 의미 그대로 특정한 URL에 대해 특정한 뷰로 연결하는 역할입니다. URL이라고 했지만 실제로 라우팅에 사용되는 정보는 호스트 이름을 제외하고 나머지 경로를 표시한 문자입니다. 예를 들어 다음과 같은 URL로 접속하면 라우팅 대상은 '/hello'라는 문자열이 됩니다. http://localhost:3000/hello 다음은 express를 이용하여 웹 사이트 프로젝트를 만들면 생성되는 app.js의 일부분으로, 페이지 라우팅의 기본적인 구조를 보여줍니다. app.get('/', function(req,res) { res.render('index.jade'); }); a..

Nodel.js 3-1 주특기 입문 주차 마무리 회고록이다. 처음 강의를 보고 강의에서 만든 템플릿을 수정하는 방향으로 프로젝트를 시작했다. 수업에서 나오지 않은 프론트단 연결에서 많은 시간이 할애되었고 그 결과 api 오류 수정할 시간이 부족해 미완성으로 제출했다. 많이 아쉽지만 이번에 시작한 3-2심화주 배운 것 / 느낀것 / 내게 아쉬웠던 것 배운것 Node를 이용한 웹 프레임워크 구성 MongoDB와 Mongoose를 이용한 DB생성, 활용 express 기반 CRUD기능이 포함된 REST API 구현 AWS에 express, MongoDB 서비스 배포 프론트 - HTML 느낀 것 강의를 보고 나서 막상 만들려니 막막했다. 그래도 차분히 기획을 했고 3-2심화주차엔 좀 더 빠르게 해야겠다. 지금은..