본문 바로가기

전체 글

 (96)
쇼핑몰 사이트 만들기4(Select Option 처리하기) map 이라는 메소드를 통해서 거기 안에 있는 값들 하나하나를 다 각각 컨트롤할 수 있습니다. 결과: 대륙 설정해준 부분인데 다른 값을 선택해서 클릭할 때 value가 잘 바뀌는 것을 볼 수 있습니다. 다음에는 Drop Zone을 이용해서 파일을 올리는 것을 해볼 것입니다.
쇼핑몰 사이트 만들기2(업로드 페이지 만들기 시작) 일단 상품 업로드 페이지를 만들어야하는데요. 상품 업로드 페이지 만드는 순서를 말하자면 1. 비어 있는 업로드 페이지를 2. 업로드 페이지 Route 만들기 3. 업로드 페이지 탭 만들기 4. Drop Zone을 제외한 Form을 만들기 -> 파일 업로만을 위한 컴포넌트 만들기 5. 모든 INPUT을 위한 onChange Function 만들기 이렇게 구성되어있습니다. 일단 지금 업로드 페이지를 생성해야합니다. 그러기 위해서 일단 client 폴더 안에 components 폴더 안에 UploadProductPage 폴더 안에 UploadProductPage.js라는 파일을 생성해줍니다. 그리고 함수 컴포넌트를 생성해줍니다. 그리고 UploadProductPage는 로그인한 사람만 들어갈 수 있어야하니 t..
쇼핑몰 사이트 만들기1(Boiler-Plate 사용, mongodb 연결) 일단 처음에 Boiler-Plate code(회원가입, 로그인에 해당하는 부분)라는 것을 사용할 것입니다. Boiler-Plate란? 컴퓨터 프로그래밍에서 보일러플레이트 또는 보일러플레이트 코드라고 부르는 것은 최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말합니다. Boiler-Plate 이용 이유 1. 더 빠르게 개발을 완성하기 위해서 2. 이 프로젝트의 중요한 부분을 더욱 집중할 수 있기 위해서 해커톤같이 짧은 시간내에 문제를 해결해야하는 대회나 부분에서는 매우 도움이 될 것 같습니다! config안에 dev.js를 생성한다음 거기에다가 위 틀처럼 작성하고 저기 안에 자신의 몽고 디비를 연결할 수 있는 url을 입력해준다. https://www.mongodb.com/..
Node.js - Express 요번에 대회 나가고 제가 백엔드 부분이 부족하다는 것을 느끼고 하울의 코딩 채널 영상을 보고 공부한 것을 토대로 올릴 것입니다. package.json을 만들기 위해서 npm init을 콘솔창에 적어줍니다. 콘솔창에 적으면 이름또한 다른 부분들을 동의할 것이냐고 질문을한다. 동의를 할거면 enter 키를 누르면 된다. 만약 npm init -y 을 하면 npm init을한 다음 자동으로 엔터키를 계속 누른거랑 똑같다. Express.js란? Node.js를 위한 웹 프레임워크의 하나로, 웹 애플리케이션, API 개발에 이용된다. 결과: node server.js로 서버를 가동시켰는데 만약 이렇게 서버를 가동시키면 수정사항이 있을 때마다 콘솔창에 계속 저렇게 찍어줘야한다. 그래서 그렇게 고생하는 것을 방지..
Node.js - Router RestAPI 만들기 CRUD Create: Post Read: Get Update: Put Delete: Delete 일단 RestAPI 개발을 위하여 Postman을 설치해준다. Postman 화면 코드 router.js user.js Postman 결과 받아오는 메소드 GET으로 설정하였을 때: 받아오는 메소드 POST으로 설정하였을 때: 받아오는 메소드 PUT으로 설정하였을 때: 받아오는 메소드 DELETE으로 설정하였을 때:
Node.js - Passport Node.js Passport란? Passport는 여권이라는 이름과 같이 서버에서 사용자를 인증하기 위해 사용하는 Node.js용 미들웨어다. Passport는 다양한 인증 매커니즘(session, jwt등)을 각 모듈로 패키지화해 제공하고 있으며 편리하게 인증을 구현할 수 있다. 일단 passport를 설치해줘야하는데요. passport-http 다운로드 소스 코드 router.js auth.js Postman 화면 authorized에 Username과 Password를 제대로 적었을 경우 authroized Username고 Password를 제대로 안 적었을 경우 Create: Post = 회원가입 Read: Get = 로그인 Update: Put = 회원정보 수정 Delete: Delete =..
Node.js - Body Parser 요번 시간에는 Get 방식으로 간단하게 데이터를 보내는 것을 해볼 것이고 body parser에 대해서 배울 것이다. router.js Postman 화면 router.js Postman 화면 post를 해주기 위해서 코드 router.js에다가 post 방식을 추가해줬다. 그러고나서 Postman에다가 Post방식으로 이렇게 불러와주면 결과는 아래 사진처럼 데이터가 undefined로 뜨게 된다. 이유는 파싱을 못해서이다. 그래서 우리는 이제 body parser를 통해서 파싱을 해줄 것이다. 일단 body-parser란? Node.js에서 body의 요청을 파싱해주는 미들웨어입니다. 즉, 요청과 응답 사이에서 공통적인 기능을 수행하는 소프트웨어이다. POST에 들어오는 data를 JSON형식으로 바꿔..
Node.js - MongoDB 오늘은 회원가입에서 아이디 생성에 대해서 나갈 것이고 데이터베이스는 MongoDB로 할것이다. 우선 일단 mongodb를 설치해줄 것인데요. 전 이 강의 보고 따라서 다운 받았는데 여러분도 이거 보고 따라서 다운 받아보세요. https://www.youtube.com/watch?v=5spmnQX0IjM ​ 우선 디비를 연동시키기 위해서 mongoDB를 켜줘야하는데요. 위 사진처럼 저렇게하면 오류가 떠요. 왜냐하면 vs code에서 사용할 수 있게 환경 설정을 안해줬기 때문이에요. 여기 새로 만들기 들어가서 우리가 설치해준 mongodb 파일에서 bin 파일 location을 복붙해주면 된다. 저는 저렇게 설정하고 나서 vs code에 mongo라고 쳤을 때 오류가 났었는데요. 저처럼 여러분들도 오류 나면..

티스토리툴바