본문 바로가기
  • 삽질하는 자의 블로그
3. 섬네일을 만들어볼까나? (수정) 파일 선택기를 누르면 나오는 섬네일을 만들어보자! 특징1. 자바스크립트코드는 한번 딱! 생성되면 다시 원래대로 돌아가버린다. [무한한 요청을 해야한다] 특징2. FileReader() 객체를 생성하여, onload 되었을경우 발생되는 상황을 함수로 만든다. * FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다. /출처 MDN *onload 는 , 이벤트 읽기동작이 성공적으로 완료될때마다 발생한다. 1. img element를 만들어, setAttribute로 src에 event.target.result 로 [파일탐색기에 들.. 2022. 9. 23.
하루 종일 오류랑 싸웠다. 물론 반은 내 눈썰미가... 오늘은 오류를 고치느라 3시간을 썼다. 하핫 그랬다. 앞으로 매일매일이 이렇게 될것이다! 분명하다! 으하핫... 아무튼 첫번째 커다란 오류는... 얼토당토 없이도, MODEL에 적은 파라미터를 잘못 적어서.... 파일 업로드를 위해 multer를 사용하여, 파일 정보를 받아오고, 저장위치를 잡았다. VIEW 에서 FORM 형식으로 데이터를 받아오고 (쿼리로 csrf 토큰도 추가하고!) 모든 파일정보를 받아오기 위해, enctype = "multipart/form-data" 를 사용하였다. 라우트에, multer 미들웨어를 추가하여, 받아온 파일데이터와 저장위치를 서버로 보낼 수 있었다. 서버에서 사용한 model, Contorller productData에는 req.body들이 들어갈 예정이었다. 와, .. 2022. 9. 23.
궁금하다. 댓글창의 대댓글이 나오는 형식이 궁금하다. 대댓글이 나오는 형식이 [댓글 FORM] 에 [등록버튼] 에 AJAX 요청 ==>> [댓글생성] 이때, [등록버튼]에서 [AJAX 요청으로, DB에서 받아온 글]을 [li 형태로 만들어 댓글창 안에 넣을 것] 같다. 요청되는 값은 FORM 의 VALUE 에서 나올것이고, 그렇다면 궁금한건...!! [대댓글에 있는 등록버튼의 ID는 뭘로 만들었길래 AJAX 요청을 한번 더 하는거지!] 2022. 9. 22.
날려버린 나의 AJAX! 바보였다 바보였어 관리자 전용 페이지를 만들었다. 조오기 업데이트 버튼을 눌러서, 글을 받아오려는 것을 만들려고 했다. 새로고침을 하기 싫어서 (상품 휠로 내린거 다시 위로 쭉 올라오니까) AJAX 요청으로 하려고 했다. 그랬다. 그랬었다... 1. 버튼의 data-이름 = "값" (값에는 물품의 DB _id)으로 동적인 값을 받아 스크립트로넘기고 2. 버튼의 ID로 버튼을 선택해 아이디의 data-값을 dataset 으로 넘겨받아 3. AJAX요청으로, DB에서 값을 받아와, 사이트 내의 값을 채우고 싶었다. 문제는 중요한 곳에 있었다. 바로 2번에 버튼 ID를 받아 오는게 문제였다. 사실상, 버튼 ID를 받아오기에는, 똑같은 ID의 버튼만 계속 만들어진다. => 불가능 접근을 잘못하고 있다는 사실을 2시간 넘게 날리고.. 2022. 9. 21.
2. 로그인페이지, 검증과 오류처리, 세션, 물건 업데이트 페이지 생성 하루동안 만들어본것들 하루동안 나름 공부하면서 꽤나 많은 것들을 해보았다! 전체적인 리팩토링 로그인 기능 구현, 검증, 세션을 통한, 관리자 생성, 검증, 가입실패시 다시적는것을 방지하는 데이터세션 등! 나름 한건 많은데 정리하자니 복잡하다. 아직 중구난방이기도 하고... 무엇보다 오늘 AJAX 요청을 하느라 2시간을 날려버렸는데 원인을 찾고 찾다보니 결국 구현이 불가능하게 코드를 짰다는 사실을 알아버렸다!! 제대로된 첫 타격이 아닌가 싶다. 으윽 내머리 화이팅 2022. 9. 21.
2. insertOne() 은 항상 promise를 생성한다! MVC 모델에서 class User { constructor(email,password,name,street,postal,country){ ... async getUserWithSameEmail(){ return db.getDb().collection("userInfo").findOne({email:this.email}) } 를 보고자한다. 비동기함수인 async getUserWithSameEmail() 은 프로미스를 통해, 값을 반환할 수 있다. 그래서 대부분 함수의 실행 코드 앞에 await 를 붙여, 값을 반환하는데 여기서 중요한 점은 , 데이터베이스에 접근하는 findOne은 항상 프로미스를 반환한다. 즉, await를 쓰지않고, (앞으로 더 쓸 코드가 없다면) retrun을 하여, 그대로 함수자.. 2022. 9. 20.
[csrf 토큰이 먹지 않아 ] 2편.... csrf토큰은 세션이 필요햇 시간은 밤 열두시... 복잡한 머리를 가라앉히고자 csruf를 통해 csrf token만 집어넣고 자려고했다! 룰루랄라 csurf 설치하고~ 패키지 불러오고~ 모든 템플릿에 한번에 보내려고 미들웨어형태로 집어넣고~ 템플릿에 hidden value 집어넣고~ 이제 우리의 토큰이, 브라우저로 들어가서, 브라우저에서 서버로 인증토큰을 딱! 제시해주면! 응 네 토큰 없어 오늘은 눈을 씻고 찾아봐도 없었다. 그 어떤 구문오류도, 오타도 한시간을 내다버리고, 일단 골이아파서 자고일어났다. 오늘 아침 문뜩 생각해보니, 서버에서 템플릿으로 싹 다 보내..? 그렇다면 혹시 내가 세션패키지를 통한 세션을 구현하지 않아서 그런가...? 일단 세션을 구현해보았다. 야홋! 된다!! 역시 사람은 잠을 자야하는거였다. 2022. 9. 20.
1. 구상하기, 세팅하기, 기본 가입페이지만들어보기 나만의 작은 쇼핑몰을 만들어보자. 하핫. 물론 로컬이다 하핫. [ 구상 ] 0. 공통 : 로그인, 회원가입, 로그아웃 ... 1. 사용자 : 상품보기, 상품 정보보기, 카트담기, 결제하기, 완료페이지 ... 2. 관리자 : 상품 등록, 상품 정보 등록, 모든 사용자 결제완료페이지 보기 ... MVC 패턴을 기반으로 하여 시작해보았다! [ 서버 생성, 데이터베이스연결, 필요한 패키지 연결] 1. 서버를 열고, mongoDB기반의 데이터베이스를 연결하고, ejs view engine을 설치하여, VIEW를 깔고가자 npm init 을 통해, 패키지 설치 기반을 다지는 것을 잊지 말자! 컨트롤러에는 route들의 필요한 function db 에는 db middleware 에는사용자 지정 middleware가 .. 2022. 9. 19.
[res.locals.csrfToken] 난관에 봉착했다. csrf 토큰이 한쪽 controller에만 먹는다 MVC 패턴 리팩토링중... VIEW는 이미 리팩토링 하며 하고있었고, MODEL과 CONTROLLER는 완성시켜, 마무리단계로 CONFIG들을 조금씩 처리중에 있었다. 그런데 무한정 생성해놓은 오류페이지로 넘어가기 시작했다. 물론, VSCODE의 오류는 없이. 그렇다면, 모든 오류를 캡쳐하기 위해, 생성해놓은 오류페이지로 렌더된다는 것인데, 최근에 바꾼것이라곤, res.locals.csrfToken 으로, 라우트에서 따로 토큰을 부여하지않고, app.js 에서 모든 페이지에 한번에 적용하기 위한, 방책이었다. 그런데, 만들어 놓은 controller 2개 중, 한쪽의 controller에만 이게 적용되고 나머지 하나는, render할때마다 csrf 토큰 에러가 발생한다. 결론부터 말하자면, 이유는 모르.. 2022. 9. 17.
1. 인스턴스화... 대체 넌 누구냐 인스턴스화라는 말이 너무나 많이 나온다. 찾아바도 된통 모를 소리들만 가득하다. 인스턴스화가 무엇이고, 대체 왜 사용하는가! 드디어 명쾌한 답을 낸것같다. 인스턴스화는 [새 메모리 주소를 할당하는 것] = 즉, 값을 복사해 새집에 넣어주고 사용하는것이다. 대체 왜 인스턴스화를 하는가? 우선, 나의 조건은 이랬다. 데이터베이스의 쿼리에서, 사용자함수(클래스)를 만들고, find에는 인스턴스화 하지 않고 사용 insert에는 인스턴스화를 하고 사용 const post = Post(x,y,z) await post.save() const userDatas = Post.fetchAll() 인스턴스화는 값의 변질을 막고, 휘발되는 것을 막아주며, 계속해서 우려먹을 값이라면 굳이 따로 데이터를 불러오지 않고 그냥 두.. 2022. 9. 15.
[간단한 블로그만들기 - 오류 모음3] res.locals.isAuth 를 통해, 템플릿 동적 관리하기가 안되요! 동적 템플릿 관리를 위해 res.locals 를 꺼내들었다. 그런데 웬걸? 헤더가 바뀌지 않아! 뭐가 문제일까! 문제는 미들웨어의 위치였따. 이 미들웨어는 [세션 생성 이후] 템플릿을 렌더하기 이전 [조건을 생성]해주어야 하기 때문에 세션 생성 이후, 라우터 미들웨어 이전에 위치해야한다. 아주 좋은 위치다! return 빼먹은 것도 다시 집어넣었고 헤더도 이쁘게 바꿔놓았고! 아주 깔끔하게 되었다! 로그인시 세션을 부여하여, 액세스를 제한하고 ejs 구문( ) 이외에, locals 를 사용하여, 전체 템플릿에 적용되는 동적 템플릿을 만들었다. 난이도가 높아질수록 이해하고 복습하는데, 머리나 컴퓨터나 오류가 많이 발생한다. 좀더 논리적인 하루가 되었으면 좋겠다. 2022. 9. 14.
[간단한 블로그만들기 - 오류 모음2] db에서 불러온 데이터가 없어요! 멍청이가 다시 소환되었다. 네. db를 소환하는데 await를 안했다니요. 아하하하핫 await는 써서 고쳤는데 alert라니 아직도 나는 자바스크립트의 노예가 분명하다. 2022. 9. 13.

티스토리툴바