본문 바로가기
728x90
반응형
SMALL

분류 전체보기135

14) Nodejs - 백앤드 넓고 얕게 맛보기_정리_환경변수로 보안 관리(출처 유튭 강의) 환경 변수 OS 운영 시스템에 등록되는 변수 OS 운영 전반에 걸쳐 적용이 된다 dotenv 이걸 왜 쓰는지는 알아야지 개발하는 OS마다 환경변수를 지정해주는게 다르다 그런데 이걸 쓰면 알아서 각 OS에 맞게 환경변수 지정을 해준다 해당 경로에 .env 만들고 사용법 예를 들어 PORT라는 변수에 3000을 넣었 그랫 process.env로 접근 하면 방금 저장한 PORT가 뜨며 불러올수가 있는거 이렇게 하는 이유는 보안상 노출 되면 안되는 코드들을 가려놓을 수 있다 2023. 11. 3.
13) Nodejs - 백앤드 넓고 얕게 맛보기_정리_Postman 사용하기(출처 유튭 강의)★★★ 백엔드를 개발하고 API를 테스트 할때 프런트에서 테스트를 하는게 아니라 https://www.postman.com/downloads/ Download Postman | Get Started for Free Try Postman for free! Join 25 million developers who rely on Postman, the collaboration platform for API development. Create better APIs—faster. www.postman.com 포스트맨을 사용하여 테스트를 하는거다 사용하기 왜 우리 라우트 경로에 뭐 다 만들어 놨지 않음? 저 하면 됨 get으로 / 기본 경로 불러오면 이래 나옴 get /login get /registe POST /login.. 2023. 11. 3.
12) Nodejs - 백앤드 넓고 얕게 맛보기_정리_데이터를 파일에 저장하기(출처 유튭 강의)★★ 먼저 순서를 보자 유저가 값을 다 입력 후 SIGN UP을 누르면 저기 /register 경로의 POST 요청이 들어오게 되면 ctrl.process.register의 함수가 동작하게 되있는데 여기 컨트롤러에서 regiester 함수를 보면 26번째 줄 user클래스의 register() 메서드가 실행되게 된다 그래서 user 클래스의 register() 메서드를 보면 UserStorage에 save()메서드를 client를 담아 호출하게 되있다 (client는 유저가 입력한 값이 담긴 거) 그래서 이제 UserStorage의 save()를 보면 여기에 입력받은 값을 저장 시키는게 로직이 작성 될거 파일에 저장 해보자 입력된값을 writeFile()를 사용해 첫번째 인수엔 저장할 파일 경로를 넣고 두번째.. 2023. 11. 1.
11) Nodejs - 백앤드 넓고 얕게 맛보기_정리_데이터 파일로 관리하기(출처 유튭 강의)★★★ DB를 만들거다 파일로 데이터를 관리 할거다 이거 겁나 신박하고 신기하다 방법을 알면 언제든 사용할것 같다 파일로 저장을 한다고? 어떻게? 요 부분 뜯어내서 databases 폴더 안에 users.json을 만들어 붙여 넣고 json 형식에 맞게 수정좀 해주자 이렇게 해당 필드에 대한 데이터들을 만들어 놨고 다시 UserStorage에서 users.json 파일에 접근을 하려면 파일에 접근할수있는 모듈인 fs를 불러와야 한다 이걸로 해당 파일에 접근 한번 해보자 로그인 쪽에 이렇게 fs모듈을 사용해 readFile()로 ./ 현재경로의 package.json 을 한번 불러와 보자 어떻게 나오나 buffer 에 대한 결과가 나온 16진수로 이대로는 읽을수가 없다 이렇게 하면 JSON 파이를 불러올수 있구나.. 2023. 11. 1.
10) Nodejs - 백앤드 넓고 얕게 맛보기_정리_회원가입 요청 기능 구(출처 유튭 강의) 먼저 화면 부터 만들어야지 얘는 login.. 코드는 저작권 무료인거 부트스트랩 같은거 복붙 하고 저기 id부분만 수정해주면 정상 작동됨 register 링크 만들고 화면 복붙해 만들어 준다 라우트도 하나 뚫어 주고 컨트롤러로 넘어와 output에 register에 대한 화면 랜더링 연결해주면 복붙해 수정한 얘 나옴 이렇게 수정 해 줬음. . 회원가입 기능 구현 register 파일 만들어 안에는 로그인꺼 그대로 복붙 후 register.ejs 보고 요거 만들어 넣고 응답 하는것들도 잘 넣고 테스트 해보면 . . 콘솔창이 리로드된다 form 태그안 button 태그는 submit 해주는 기능이 있다. 그래서 데이터 보내 놓고 화면 리로드 시키니깐 저걸 바꿔놔야됨 요래 바꾸고 login.ejs랑 login.. 2023. 10. 31.
9) Nodejs - 백앤드 넓고 얕게 맛보기_정리_User 모델 만들기(출처 유튭 강의) 쫌 더 코드를 모듈화 시켜 직관적이게 함 만들어보자 분리하면 좋은게 가독성이 높아지고 생산성과 재사용성이 높아지며 유지보수 하기에도 좋아진 그걸 위해 모델을 하나 더 만들건데 로그인, 회원가입 등을 하는 모델이 User.js 라는 파일을 만들고 이렇게 constructor()를 만들어 body를 넣고 this.body = body를 한 다음 컨트롤러 아래 전부 주석하고 user에 new User()라고 해서 연결을 하고 거기에 req.body를 하는데 컨트롤러의 body가 User 클레스의 생성자 body 로 들어가게 되는데 그래서 저기 this.body로 들어가게 될거고 컨트롤러에서 user라는 객체에 담어 만들수 있게 됬음. User 클레스에서 login() 이라는 메서드를 만들고 컨트롤러에서 use.. 2023. 10. 30.
8) Nodejs - 백앤드 넓고 얕게 맛보기_정리_서버 응답받은 값 처리(출처 유튭 강의) 응답 값이 어디 있었지? 근데 얘는 어디의 뭔데? login.ejs 파일에 연결된 js파일로 유저 입력값을 req에 담아 그걸 fetch를 사용해 JSON 값으로 담아 서버로 갖다주는거 여기 있었지? 그럼 서버에서 응답으로 res 해줄거 아님? 여기 메인으로 갖다 줘야 하니깐 응답의 success가 true 라면 위치 href 값을 '/' 메인으로 두고 false면 경고창으로 message를 띄워 성공하면 루트화면으로 가진다 이제 보니 에커 캐치가 없네? 한줄 만들어 주고 저건 어떨때 뜨는 에러인고 하니 여기 이렇게 라우팅 되는 경로만 없애보자고 그럼 이때 이렇게 에러 메세지가 뜬다 POST 할 경로도 없어 404에러가 뜨고 로그인중 에러가 났다고 나 모델 만들자 (겁나 신기함) 임의로 테스트하기 위해 .. 2023. 10. 30.
7) Nodejs - 백앤드 넓고 얕게 맛보기_정리_프론트 요청에 대한 파싱(출처 유튭 강의) 먼저 post며 login의 경로로 만들어야 한다 메서드 다르고 경로는 같으며 컨트롤러 까지 같으면 안되는데.. 이걸 이제 직관적이되 서로 다른 컨트롤러라는걸 보여주자 그럼 컨트롤러 부분을 가서 보면 home과 login은 단순 랜더링만 해주는 함수이다 그럼 이렇게 만들어 줄수 있 outpupt 이라는 Object 라는걸 만들고 그 안에 home이는 key값과 login이라는 key값을 집어 넣는다 그리고 모듈을 내보는곳도 output으로 내보내줘야 한다 여기까지 컨트롤러를 수정해 줬고 라우트 부분도 수정을 해줘야 함 ctrl로 접근해 output을 불러와 그안에 home와 login을 각각 불러오는걸로 좀더 직관적이게 됬다 자 그럼 router.post("login", crtl.login) 얘는 그럼... 2023. 10. 30.
6) Nodejs - 백앤드 넓고 얕게 맛보기_정리_프론트 엔드 기능 구현(출처 유튭 강의) 폴더 구조 정리 하며 만들었던 이 안에서로그인 기능을 구현을 할거다 자.. 먼저 생각을 해보자 프런트 단에서 사용자에게 입력을 받고 [ 로그인 ] 버튼을 눌러야 서버로 전송을 한다 이때 서버는 그런 데이터를 받아 인증과 식별등을 하는거 DOM 프런트 단에서 값을 입력받아 그걸 제어하는게 뭘까? DOM 객체라 한다 에.... 왜 이렇지? ejs 때문임 defer 을 달아주면 문제 없이 출력 된다 그럼 해당 값들을 잘 이용해 서버에 던져 넣는걸 해보자 이게 되면 절반 끝남 1단계 클릭했을때 동작하는지 먼저 확인 클릭 하니깐 bye가 잘 출력 됨 2단계 저 안에 입력된 값 가져오기 .value 면 된다 그러니까... 이게 값을 담아 서버로 요청을 해야 하니까 이렇게 담으면 되고 값을 서버로 전달해주기 위해 f.. 2023. 10. 28.
728x90

티스토리툴바