🍊 감상

📙 열품타 코딩 시간 9hour
👍🏼 -
👎🏼 -

🚀 목표

• Udemy에서 Javascript 강좌 수강하기 (417/682)
• 개인 프로젝트 진행

📣 The Web Developer Bootcamp 2021

32. Exploring Modules & The NPM Universe

325. The all-important package.json

package.json -> contains metadata or information about this particular project or package or application
dependencies

npm.init -> easy way of making a package .json -> will be filled out with whatever answers you enter

if we install dependencies -> those dependencies will automatically be added to the dependency section of package.json
-> useful for keeping a record of what we're using and for sharing this file with other people or with myself on a different machine where I can actually go and download these dependencies in one shot.

327. Installing all dependencies for a project

download the code (node.modules 폴더는 없음, 저장공간을 많이 차지하기 때문)
코드 다운로드 한 다음에 다운한 폴더 내에서 커맨드라인에 npm install 입력
-> package.json 파일 보고 자동적으로 필요한 dependencies 다운받음 -> node.modules 폴더 만들어짐
안 쓰는 dependencies는 지워야 코드 다운받는 사람이 쓸모없는 것 다운받지 않을 수 있음

328. Language guesser challenge

const franc = require('franc');
const langs = require('langs');
const colors = require('colors');
const input = process.argv[2];
const langCode = franc(input);
if (langCode === 'und') {
  console.log("sorry,couldn't figure it out".red);
} else {
  const language = langs.where('3', langCode);
  console.log(`Our best guess is : ${language.name}`.green);
}

33. Creating Servers with express

express is a framework for web developement for creating servers using node.

330. Introducing express

express

express is a fast, unopinionated(편향적, 특정 운영체제에 종속되지 않은, 리눅스, 맥, 윈도우에서 모두 동작하는), minimalist web framewokr for Node.js
helps us build web apps
NPM package which comes with a bunch of methods and plugins that we can use to build web application and API's

• start up a server to listen for requests
• parse incoming requests (json -> javascript or object)
• match those requests to particular routes
• craft our http response and associated content

library and framework

library: you are in charge. you control the flow of the application code, and decide when to use the library

framework: control is inverted. the framework is in charge, and you are merely a participant. framework tells you where to plug in the code.

331. Our very first express app

const express = require('express');
const app = express(); //save the return value in a variable
console.dir(app); //app object has a lot of methods on it

app.use(() => {
  console.log('we got a new request');
});
//incoming request -> executed every time the app recieves a request

app.listen(3000, () => {
  console.log('listening on port');
}); //to get a server going and start listening
//3000 is a port
//localhost:3000 -> local machine

332. The request & response object

ctrl + c 서버 닫음
node index.js 변경사항 있을 시 입력해 줘야 함, restart the server

const express = require('express');
const app = express();
console.dir(app);

app.use((req, res) => {
  console.log('we got a new request');
  res.send('hello we got your request');
});

app.listen(1397, () => {
  console.log('listening on port');
});

333. Express Routing basics

참고링크: 김승엽
app.get -> 어떤 데이터를 전달해주는 방식 (url에 id와 password가 노출됨)
app.post -> 데이터의 값을 변경하는 방식

routing: taking incoming requests and a path that is requested and matching that to some code in some response

we can't have an HTTP request that gets more than one response

const express = require('express');
const app = express();
console.dir(app);

// app.use((req, res) => {
//   console.log('we got a new request');
//   res.send('hello we got your request');
// });

app.get('/cats', (req, res) => {
  res.send('meow');
});
app.post('/cats', (req, res) => {
  res.send('post request to /cats, different from get request');
});
app.get('/dogs', (req, res) => {
  res.send('woof');
});
app.get('/', (req, res) => {
  res.send('welcome to home'); //root route
});
app.get('*', (req, res) => {
  //generic response
  res.send("I don't know that path");
});
//맨 위에다 작성하면 아래 모두 무시되므로 주의, route가 순서대로 매치되기 때문

app.listen(1397, () => {
  console.log('listening on port');
});

334. Express path parameters

make generic pattern
예시링크: 레딧

app.get('/r/:subreddit', (req, res) => {
  const { subreddit } = req.params;
  res.send(`<h1>Browsing the ${subreddit}</h1>`);
});
app.get('/r/:subreddit/:postId', (req, res) => {
  const { subreddit, postId } = req.params;
  res.send(`<h1>Vewing ${postId} on the ${subreddit}</h1>`);
  //: -> indicates variable
});

335. Working with Query strings

예시링크: MDN

app.get('/search', (req, res) => {
  const { q } = req.query;
  res.send(`search result for ${q}`);
});
//localhost:8080/search?q=cat&color=black

336. Auto restart with Nodemon

nodemon index.js

34. Creating dynamic HTML with templating

338. What is templating

templating allows us to define a preset pattern for a webpage, that we can dynamically modify.

339. Configuring Express for EJS

app.set('view engine', 'ejs');
//express behind the scene will require the package called EJS
app.get('/', (req, res) => {
  res.render('home'); //root route
});
//you can add home.ejs, but actually we don't need it if we set the view engine to ejs
//we don't need to say views/home either, because default place is views

340. Setting the views directory

다른 파일 경로에서 실행했을 때 발생하는 에러 해결
-> views directory가 current working directory로 설정돼 있는 것을 바꾼다
디렉토리 주소를 index.js/views로 바꾸기
os별로 달라지는 주소 경로를 자동으로 찾아주고 주소 조합을 자동으로 만들어주는 것

const path = require('path');
app.set('views', path.join(__dirname, '/views'));
//taking our current directory name where the file is located index.js
//and joining the path to /views 

341. EJS interpolation syntax

<h1>homepage <%=4+5+1%> <%='hello world'.toUpperCase()%></h1>

342. Passing data to templates

app.get('/rand', (req, res) => {
  const num = Math.floor(Math.random() * 10) + 1;
  res.render('random', { rand: num });
});
//second argument is a object, key-value pairs
//num is available in my template under the name rand

343. Subreddit template demo

app.get('/r/:subreddit', (req, res) => {
  const { subreddit } = req.params;
  res.render('subreddit', { subreddit });
});
//passing information from the params from the path
//pass that through to the template called subreddit (subreddit.ejs)
//and path that through under the name of subreddit
//and rendering in subreddit.ejs

344. Conditionals in EJS

    <h1>Your random number is : <%= rand %></h1>
    <%if(rand%2===0){%>
    <h2>That is an even number</h2>
    <%} else {%>
    <h2>That is an odd number</h2>
    <%}%>
    <h3>The number is : <%= rand%2===0 ? 'EVEN':'ODD' %></h3>

345. Loops in EJS

//in index.js
app.get('/cats', (req, res) => {
  const cats = ['Blue', 'Rocket', 'Monty', 'Winston'];
  res.render('cats', { cats });
});
//in cats.ejs
    <ul>
      <% for (let cat of cats) { %>
      <li><%= cat %></li>
      <% } %>
    </ul>

346. A more complex subreddit demo

const redditData = require('/data.json')
app.get('/r/:subreddit', (req, res) => {
  const { subreddit } = req.params;
  const data = redditData[subreddit];
  if (data) {
    res.render('subreddit', { ...data });
  } else {
    res.render('notfound', { subreddit });
  }
  res.render('subreddit', { ...data });
  //this allows me to do access individual properties like description
});

//in subreddit.ejs
    <% for(let post of posts){ %>
    <article>
      <p><%= post.title %> - <b><%= post.author %></b></p>
      <% if (post.img) { %>
      <img src="<%=post.img%>" alt="" />
      <% } %>
    </article>
    <% }%>

347. Serving Static assets in Express

app.use(express.static('public'))
//('css') ('js') 폴더별로 가능함 

app.use(express.static(path.join(__dirname, 'public')));
//absolute path based upon wherever index.js file is 

348. Bootstrap + Express

    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>

349. EJS & partials

<%- include('partials/head') %>

<%- will be treated as HTML
<%= won't be treated as HTML

35. Defining RESTful Routes

351. Get vs Post requests

Get

Used to retrieve information
Data is sent via query string
Information is plainly visible in the URL
Limited amount of data can be sent

Post

Used to post data to the server
Used to write/create/update
Data is sent via request body, not a query string
Can send any sort of data(JSON)

참고링크: 생활코딩