shere17652294

<pre class="language-javascript"><code>User.findOne({where:{email}});</code></pre>
위에 코드에서 왜 email이 {} 안에 감싸져 있는게 궁금하신거 같은데 이 {email}은 {email : email}과 같습니다.
자바스크립트 es6(es2015) 도입 이후 키와 값이 동일 하다면 이런식으로 { email : email } 을 { email }로 표현이 가능합니다. 한마디로 시퀄라이즈 문법이 아닌 자바스크립트 문법이라는뜻이죠
이제 시퀄라이즈로 넘어와서 코드를 다시 해석해보면 User라는 테이블에서 email 컬럼에 email 변수가 일치하는것이 있다면 User 객체를 반환할 것이고 아니면 undefined로 반환될 것입니다. 님의 데이터베이스의 만약 "abc1234@gmail.com"이라는 데이터가 있다고 가정할 때 email 변수안에 "abc1234@gmail.com"이라는 변수가 있다면 "abc1234@gmail.com"로우가 있는 User 객체를 반환하는 것이죠. 중요한점은 {email}이런 문법은 키와 값이 서로 같을 때 이런식으로 줄일 수 있다는것이고 해당 코드는&nbsp;
<pre class="language-javascript"><code>User.findOne({where:{email}});</code></pre>
를 사용하기 전에 email이라는 변수가 선언되어야만 자바스크립트가 email이라는 변수가 email이라는 키가 중복된것을 인지하고 위와 같은 문법을 사용가능하게 합니다. 만약 email이라는 변수가 없다면 위 문법은 사용할수 없을 것입니다.
<pre class="language-javascript"><code>const email = "abcd1234@gmail.com";

const obj = { email }; // email 변수가 있기 때문에 줄여서 사용가능

console.log(obj.email); // abcd1234@gmail.com</code></pre>
<pre class="language-javascript"><code>const obj = { email };

console.log(obj.email); // ReferenceError: email is not defined
</code></pre>
&nbsp;

Sequelize 문법

&nbsp;제가 제로초님은 아니지만 귀뜸 하나 해드리면 혹시 ShopsService를 UserRepository에서 사용하시나요? 그리고 Shops 모듈내에서 ShopsRepository가 사용되시나요? 만약 ShopsRepository가 사용된다면 provider에 ShopsRepository를 넣어주세요.
Shops 모듈에서 다른 모듈로 provider를 제공해 주려면 exports 배열을 만든 후 ShopsService를 넣어주세요.
그리고 다른 모듈(UserModule)에가서 imports에 ShopModule을 넣어주세요.

제로초님 imports 모듈에러가 나서 질문드려요

제가 2번 이라는것이 어떤것인지 몰라서 그 부분에 대한 답은 못드려서 죄송하지만&nbsp;
let 상품들=["농구공","배드민턴채","탁구채"]
이것에 대해선 이야기 해드릴 수 있습니다. 아마 상품의 객체(ex = 농구공, 배드민턴채, 탁구채)등등을 만드시고 그것을 배열로서 사용하시려는 거 같습니다. 그래서 질문자님께서는&nbsp;
<div class="type-placeholder" style="box-sizing: border-box; overflow-x: auto; font-family: 'Noto Sans KR'; background-color: #ffffff; font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">let 농구공={</div>
<div class="type-placeholder" style="box-sizing: border-box; overflow-x: auto; font-family: 'Noto Sans KR'; background-color: #ffffff; font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">이름:'~~~'</div>
<div class="type-placeholder" style="box-sizing: border-box; overflow-x: auto; font-family: 'Noto Sans KR'; background-color: #ffffff; font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">가격:'~~~~'</div>
<div class="type-placeholder" style="box-sizing: border-box; overflow-x: auto; font-family: 'Noto Sans KR'; background-color: #ffffff; font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">설명:'~~~'}</div>
<div class="type-placeholder" style="box-sizing: border-box; overflow-x: auto; font-family: 'Noto Sans KR'; background-color: #ffffff; font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">&nbsp;</div>
<p class="type-placeholder" style="box-sizing: border-box; overflow-x: auto; font-family: 'Noto Sans KR'; background-color: #ffffff; font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">이런식으로 객체를 만드신거죠. 객체를 만든거 까지는 좋습니다. 하지만 이 객체를 저장하는 것은 농구공 이라는 이름을 가지고 있습니다. "농구공"이 아닌거죠 따옴표를 붙이는 순간 그것은 문자열 자체가 됩니다. 저희는 변수를 사용할 때 따옴표를 사용해서 변수이름을 정하지는 않죠. 따라서 배열에 변수를 저장할 때도 변수 이름을 사용해야합니다. 따라서 
<p class="type-placeholder" style="box-sizing: border-box; overflow-x: auto; font-family: 'Noto Sans KR'; background-color: #ffffff; font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">let 상품들=["농구공","배드민턴채","탁구채"]
<p class="type-placeholder" style="box-sizing: border-box; overflow-x: auto; font-family: 'Noto Sans KR'; background-color: #ffffff; font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">이런 배열에서
<p class="type-placeholder" style="box-sizing: border-box; overflow-x: auto; font-family: 'Noto Sans KR'; background-color: #ffffff; font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">let 상품들=[농구공, 배드민턴채, 탁구채]
<p class="type-placeholder" style="box-sizing: border-box; overflow-x: auto; font-family: 'Noto Sans KR'; background-color: #ffffff; font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">이런식으로 사용하셔야 합니다.

1번문제에대한 질문

&nbsp;변수로 정의한 문자열을 console혹은 html파일등에 나타내기 위해 하는 처리 방식을 템플릿 문자열 이라고 합니다. 질문자님의 코드는 오류가 날 수 밖에 없습니다. 템플릿 문자열은 함수의 매개변수 혹은 변수 등에 서만 사용을 할 수 있죠. 템플릿 문자열을 사용하려면 ' 따옴표가 아닌 `을 사용해야 합니다 `는 백틱이라고 부릅니다.
위에 코드를 아래와 같이 바꿔서 사용해보세요.
<pre class="language-javascript"><code>app.get("/products/:id", (req, res) => {
 const params = req.params;
 const { id } = params;
 res.send(`id는 ${id}입니다.`);
});
</code></pre>
더욱 간단히 사용하려면 아래와 같이 사용해보세요.
<pre class="language-javascript"><code>app.get("/products/:id", (req, res) => {
 const id = req.params.id;
 res.send(`id는 ${id}입니다.`);
});
</code></pre>
&nbsp;

${id}

&nbsp;제가 views가 아닌 'view'라는 폴더를 만들어서 생긴 오류였네요. 강의와 교제 잘 보고 있습니다.허점 짚어주셔서 감사합니다!

넌적스 관련 질문드립니다.

&nbsp;첫번째 코드에서 localhost:8080으로 접속했을때는 " Cannot GET / " 이 출력되었고 /product에 접속했을때는 상품 정보가 잘 출력되었다 하셨죠? 질문자님의 코드에서는 아주 정상적인 출력입니다. 두 번째 코드에서는 express 대신 http 모듈을 사용하셔서 서버를 작성하셨는데 출력이 정상적인 이유는 클라이언트 쪽에서 웹사이트에 접속 할 떄에는 해당 웹사이트의 서버로 'GET'요청을 필수적으로 보내게 됩니다. 두 번째 코드에서 http 모듈로 서버를 만든 후 서버에 접속 했을때는 조건문으로 메서드와 URL(주소)를 지정해주지 않는 한 GET "메서드" 로 / "URL"에 접속한 상황이 됩니다.
&nbsp; http 모듈로 만든 서버가 돌아가고 있을 때 클라이언트가 URL이 localhost:8080인 웹사이트에 접속했다고 가정할 때 질문자님께서 만드신 index.js 안에 코드를 보시면 아래와 같습니다.
<pre class="language-html" style="box-sizing: border-box; margin-top: 0.5em; margin-bottom: 0.5em; padding: 1em; -webkit-font-smoothing: auto; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; background: #2d2d2d; color: #cccccc; font-size: 15px; overflow: auto; overflow-wrap: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none; border-radius: 3px; letter-spacing: -0.3px; text-shadow: none !important;"><code>const server = http.createServer(function (req, res) {
 const path = req.url;
 const method = req.method;
 if (path === "/products") {
 if (method === "GET") {
 res.writeHead(200, { "Content-Type": "application/json" });
 const products = JSON.stringify([
 {
 name: "농구공",
 price: 5000,
 },
 ]);
 res.end(products);
 } else if (method === "POST") {
 res.end("생성됨");
 }
 } else {
 res.end("hello Client!");
 }
});</code></pre>
&nbsp; 조건문 부터 천천히 봅시다. path가 "/products"라면 그 다음 조건인 method가 "GET"인 조건을 찾습니다. 만약 localhost:8080에 접속해서 URL에 "/products"를 입력하면 위에 조건이 성사되게 됩니다. else if를 보시면 method가 "POST"인 조건을 찾는데 이는 저희가 웹브라우저로 주소를 입력한다고 사용할 수 있는 메서드가 아닙니다. 만약 "POST" 요청을 어떻게 보내는지 궁금하시다면&nbsp;
https://testmanager.tistory.com/342
위에 주소에 들어가서 확인해보세요.
&nbsp;else에 경우를 봅시다. 이는 위에 조건과 아무것도 성사 되지 않을 때 사용하는 예약어(키워드)입니다. 만약 저희가 localhost:8080에 접속했다면 else부분이 바로 실행되게 될 것입니다. index.js에서 만든 코드에 조건에 해당하는게 없기 때문이죠. 이런식으로 조건문 분기를 통해서 서버를 작성하는게 여간 까다로운게 아닙니다. 그래서 node.js에서 제공하는 express라는 모듈을 사용 할 수 있습니다.&nbsp; express로 작성된 server.js를 같이 봅시다.
<pre class="language-html" style="box-sizing: border-box; margin-top: 0.5em; margin-bottom: 0.5em; padding: 1em; -webkit-font-smoothing: auto; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; background: #2d2d2d; color: #cccccc; font-size: 15px; overflow: auto; overflow-wrap: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none; border-radius: 3px; letter-spacing: -0.3px; text-shadow: none !important;"><code>const express = require("express");
const cors = require("cors");
const app = express();
const port = 8080;

app.use(express.json());
app.use(cors());

app.get("/products", (req, res) => {
 res.send({
 products: [
 {
 id: 1,
 name: "농구공",
 price: 100000,
 seller: "조던",
 imageUrl: "images/images/products/basketball1.jpeg",
 },
 {
 id: 2,
 name: "축구공",
 price: 50000,
 seller: "메시",
 imageUrl: "images/images/products/soccerball1.jpg",
 },
 {
 id: 3,
 name: "키보드",
 price: 10000,
 seller: "그랩",
 imageUrl: "images/images/products/keyboard1.jpg",
 },
 ],
 });
});

app.post("/products", (req, res) => {
 res.send("상품이 등록됨");
});

app.listen(port, () => {
 console.log("쇼핑몰 서버가 돌아간다");
});</code></pre>
&nbsp;전체를 다 설명해드리기 보단 질문자님께서 궁금하신 내용인 왜 localhost에 접속했는데 "Cannot Get /&nbsp;"이 나오는가에 대해서만 설명드리겠습니다. express의 장점은 미들웨어(app.use(), app.get()등등)를 사용해서 서버에 필요한 코드를 작성하기 쉽다는 것입니다. 특정 URL에 원하는 메서드를 보내고 싶다한다면&nbsp;
app.get("/products", (req, res) ...) 이런식으로 사용할 수 있다는 것이죠. 근데 여기서 코드가 실행되고 서버에 접속했을 떄 "Cannot Get / "이 왜나오고 "/products"를 입력하면 상품정보는 잘만나오는가에 대해서 살펴봅시다. "/products"만 잘나오는 이유는 미들웨어로 app.get("/products")를 작성하셨기 때문입니다. 이는 지금 서버가 잘 돌아가고 있음을 알려줍니다. "Cannot Get /"을 해석해보면 "/"으로 GET 할수 없다 입니다. 저희가 브라우저로 웹에 접속한다면 예를 들어 구글에 접속해 본다고 가정해 봅시다. URL이 www.google.com인 것을 확인해 볼수 있을겁니다. 그런데 여기에는 사실 "/"이 생략되어 있습니다. 따라서 얼래 URL은 www.google.com/인 것이죠 server.js 에서도 GET메서드로 "/"에 접속한다는 미들웨어를 만들어 주신다면 해결되는 문제입니다. 예를 들면 아래처럼 만들 수 있습니다.
<div style="color: #eeffff; background-color: #212121; font-family: 'MesloLGS NF', Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div>app.get("/", (req, res) => {</div>
<div>&nbsp; &nbsp; res.send("여기는 서버에 처음 접속 할 때 나오는 화면입니다!");</div>
<div>});</div>
</div>
&nbsp;이런식으로 만드시고 서버를 다시 실행 후 localhost:8080(index.js에서 만든 port번호, port번호는 본인이 원하는 숫자를 입력할 수 있습니다.)로 접속하신다면 이제 더이상 Cannot get / 이 나오지 않게 될 것입니다. 코드 전체를 다시 올려드리겠습니다.
<div style="color: #eeffff; background-color: #212121; font-family: 'MesloLGS NF', Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div>const express = require("express");</div>
<div>const cors = require("cors");</div>
<div>const app = express();</div>
<div>const port = 8080;</div>
 
<div>app.use(express.json());</div>
<div>app.use(cors());</div>
 
<div>app.get("/", (req, res) => {</div>
<div>&nbsp; &nbsp; res.send("여기는 서버에 처음 접속했을 때 나오는 화면입니다!");</div>
<div>});</div>
 
<div>app.get("/products", (req, res) => {</div>
<div>&nbsp; &nbsp; res.send({</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; products: [</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 1,</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: "농구공",</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; price: 100000,</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; seller: "조던",</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; imageUrl: "images/images/products/basketball1.jpeg",</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 2,</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: "축구공",</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; price: 50000,</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; seller: "메시",</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; imageUrl: "images/images/products/soccerball1.jpg",</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 3,</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: "키보드",</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; price: 10000,</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; seller: "그랩",</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; imageUrl: "images/images/products/keyboard1.jpg",</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; ],</div>
<div>&nbsp; &nbsp; });</div>
<div>});</div>
 
<div>app.post("/products", (req, res) => {</div>
<div>&nbsp; &nbsp; res.send("상품이 등록됨");</div>
<div>});</div>
 
<div>app.listen(port, () => {</div>
<div>&nbsp; &nbsp; console.log("쇼핑몰 서버가 돌아간다");</div>
<div>});</div>
</div>
&nbsp;
두 번째 질문에서 localhost:3000에 접속했을 때 화면이 아무것도 나오지 않으셨다 했는데 포트번호를 3000으로 설정하지 않으시면 나오지 않는게 정상입니다. 포트는 작성하신 코드에서 port변수를 원하는 숫자로 해주시면 될 거 같습니다.
답변이 너무 길어서 죄송하지만 질문자님께 최대한 도움 드리고자&nbsp; 말이 두서없이 길어진 거 같습니다. 너무 직설적인 답변은 답변을 이해하는데 어려움이 있을까 해서 길게 적게되었습니다. 도움이 되셨으면 좋겠네요.

localhost 브라우저 접속 시 문제가 발생합니다

<img src="https://cdn.inflearn.com/public/comments/84265ddd-5cb1-4f1b-a4b4-16e3d27a574b/캡처5.PNG" />
위에서 부터 GET, POST, PUT 으로 요청을 보냈습니다.
<img src="https://cdn.inflearn.com/public/comments/8009f211-7a27-45f9-9f86-3ae0cbc1e15e/캡처6.PNG" />
위 사진은 포스트맨이라는 프로그램으로 GET, POST, PUT 요청을 보냈습니다.

app.use와 req.url

일단 코드 상의 문제는 전혀 없습니다. 그런데 첫번째 화면에서 콘솔을 보니 통신 결과에 있는 Object 객체의 data 프로퍼티(Object 객체 내에 있는 키)가 저런 형식으로 나오진 않습니다.
아래에 사진과 비교해보시면 아시겠지만 products 프로퍼티가 정렬된 모습이 보입니다.
<img src="https://cdn.inflearn.com/public/comments/be63494b-d4a4-4228-8404-5a12b2bb0888/blob.jpg" />
그리고 질문자님의 사진을 보시면
통신 결과 :&nbsp;&nbsp;
밑줄 부분에 빨간색 글씨로 이상하게 써진 글씨들이 보입니다.
이는 포스트맨에서 데이터를 보낼 때 데이터가 보내질 때 에러가 난것 처럼 보입니다.
(아래 사진은 질문자님의 것과 다를 수 있습니다.)
<img src="https://cdn.inflearn.com/public/comments/8ac30a12-3e2d-4f91-8706-5539a92cda05/화면 캡처 2021-12-23 213112.png" />
위 사진처럼 e.g를 누릅니다.
<img src="https://cdn.inflearn.com/public/comments/8b8a29b8-7888-4e00-b895-5faf7473b29e/화면 캡처 2021-12-23 213452.png" />
바디의 내용을 다시 한번 입력해봅니다.
<img src="https://cdn.inflearn.com/public/comments/6056f47e-ab40-45c4-ad8b-1738be47a335/화면 캡처 2021-12-23 213346.png" />
다시 send를 눌러 목서버로 데이터(JSON)를 보냅니다.
이제 axios를 불러오는 코드에 가서 다시 실행해 보세요. 저도 이러한 문제를 겪어 본적이 있었는데 example에 있던 데이터를 다시 작성 해서 저장 후 전송했더니 오류가 해결되었습니다. 감사합니다.
&nbsp;

exios 오류질문

const를 사용하시면 에러가 발생한다고 하셨는데&nbsp;
&nbsp;
for (var i = 0; i < products.length; i++ ) {
&nbsp; &nbsp; const product = products[i]
&nbsp; &nbsp; const price = product.price
&nbsp;이 부분에서 const로 재할당 되며 오류가 발생할거라 생각하신 거 같은데&nbsp;
const product에는 반복문이 돌기전에는 값이 할당되지 않은 undefined상태일 것입니다.
반복문이 돌면서 i가 0부터 돌기 시작할텐데 중요한 것은 products라는 변수인데요 products변수는 getExpensiveProducts 함수 위에 있는&nbsp; 상품 변수 (array) 입니다. 코드에 나와있지는 않지만 상품 변수의 길이( == 상품의 수 )따라서 반복문 범위 (0 < prodouct.length(3)) 일 것이고 products[i]는 i를 통해서 상품 변수의 객체 인덱스를 받아옵니다. 예를 들어&nbsp; 첫번째 상품 객체 (i = 0)가 아래와 같다고 할때
{
&nbsp; &nbsp; name: "축구공",
&nbsp; &nbsp; price:&nbsp; 45000,
}
이 데이터가 products[i]에 들어오게 됩니다. 결국 const product에는 i 인덱스 순서에 따라서 product를 입력 받고 입력받은 product의 price객체를 price변수에 들어옵니다. 이렇게 첫번째(i = 0) 반복문이 돌고 두번째&nbsp; 반복문(i = 1)의 차례가 올때 product변수가 const로 선언되어서 값을 재할당 할시&nbsp; 오류가 발생할거라 생각하시지만 지금(첫번째 반복문이 방금 종료되고 두번째 반복문이 시작될 상황)이 프로그램은 product변수가 아예 없다고 판단합니다. 이유는 const로 선언된 변수는 {}로 구성되어 있는 문장 (함수, 반복문, 조건문 등등) 밖에서 사용할 수 없고 반복문이 한번 실행된 상태라면 두번쨰 반복문에서는 애초에 존재하지 않았던 상태가 되기 때문에 재할당을 해도 오류가 발생되지 않습니다. 따라서 계속해서 const로 선언된 변수를 사용할수 있게 되는거죠
&nbsp;
두 번째 질문에서 const로 선언하면 바꿀수 없어서 let이나 var로 선언하는게 맞는게 아닌가라고 하셨는데&nbsp;
위와 동일한 논리로 설명할수 있겠습니다. 그리고 ES6이후로 생긴 변수 타입인 let, const를 주로 사용하되
var 사용은 기피해야 할 필요가 있습니다. 그 이유는 호이스팅이라는 원리 때문인데요 호이스팅 관련 설명은
https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/
이 링크로 가시면 될거같습니다.&nbsp;
추가적으로 vsc같은 idle를 사용하시면 디버깅을 통해서 어떤 부분이 잘못되었는지 짐작 가능합니다.
감사합니다.

shere17652294

Posts