10. 실습: Tweet

 

✔ 파일을 만들어 실습해보자!

1.

프로젝트 폴더에 Client, Server 파일 만들기

 

2.

비쥬얼 스튜디오에서 서버 폴더 열기

 

3.

터미널 입력: Git init

4.

npm init -y 입력

 

5.

package.json 파일에서 "type" : "module" 넣기

package.json 파일에서 "start":"nodemon app" 입력

 

"main":"app.js"로 수정

6.

terminal 에서 npm i nodemon --save-dev 입력

 

7.

terminal에서 npm i express 입력

 
8.

terminal에서 npm i moran 입력

 

9. 파일 생성

 

• app.js

 

      < app.js >

            import express from "express";

            import morgan from "morgan";

            import tweetsRouter from './router/tweets.js'

 

            const app = express();

 

            app.use(express, json());  // json로 연결

            app.use(morgan("dev"));

            app.use('/tweets', tweetsRouter);  //tweetsRouter 미들웨어 등록

            app.use((req, res, next) => {

                res.sendStatus(404);

            });

 

            app.listen(8080);

 

       </ app.js  >

  

 

• .gitignor

  

           

            node_modules/

            .gitignore

            package-lock.json

  

 

git에 안올릴 파일들 적어주기

 

 

• tweets.js

  

      < tweets.js >

 

                import express from "express";

                const router = express.Router();

                let tweets = [

                    {

                        id: '1',

                        text: '안녕하세요!',

                        createdAt: Date.now().toString(),

                        name: '김사과',

                        username: 'apple',

                        url: 'https://www.logoyogo.com/web/wp-content/uploads/edd/2021/02/logoyogo-1-45.jpg'

                    },

                    {

                        id: '2',

                        text: '반갑습니다!',

                        createdAt: Date.now().toString(),

                        name: '반하나',

                        username: 'banana',

                        url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJSRyel4MCk8BAbI6gT_j4DBTEIcY0WW4WWfoklymsWA&s'

                    }

                ];

                // 해당 아이디에 대한 트윗 가져오기

                // GET

                // http://localhost:8080/tweets?username=:username

                // http://localhost:8080/tweets?username=banana

                router.get('/', (req, res, next) => {

                    const username = req.query.username;

                    const data = username

                        ? tweets.filter((tweet) => tweet.username == username)

                        : tweets;

                    res.status(200).json(data);

                });

                // 글번호에 대한 트윗 가져오기

                // GET

                // http://localhost:8080/tweets/:id

                // http://localhost:8080/tweets/1

                router.get('/:id', (req, res, next) => {

                    const id = req.params.id;

                    const tweet = tweets.find((tweet) => tweet.id === id);

                    if(tweet){

                        res.status(200).json(tweet);

                    }else{

                        res.status(404).json({message: `${id}의 트윗이 없습니다`});

                    }

                });

                // 트윗하기

                // POST

                // http://localhost:8080/tweets

                // name, username, text

                // json 형태로 입력 후 추가된 데이터까지 모두 json으로 출력

                // {

                //     "id":55,

                //     "text":"트윗을 추가했어요555",

                //     "name":"김사과",

                //     "username":"apple"

                // }

                router.post('/', (req, res, next) => {

                    const { text, name, username } = req.body;

                    const tweet = {

                        id: '10',

                        text: text,

                        createdAt: Date.now().toString(),

                        name: name,

                        username: username,

                        url: 'https://www.logoyogo.com/web/wp-content/uploads/edd/2021/02/logoyogo-1-45.jpg'

                    };

                    tweets = [tweet, ...tweets];

                    res.status(201).json(tweets);

                });

                // 트윗 수정하기

                // PUT

                // http://localhost:8080/tweets/:id

                // http://localhost:8080/tweets/1

                // id, username, text

                // json 형태로 입력 후 변경된 데이터까지 모두 json으로 출력

                // {

                //     "text":"트윗을 변경했어요!"

                // }

                router.put('/:id', (req, res, next) => {

                    const id = req.params.id;

                    const text = req.body.text;

                    const tweet = tweets.find((tweet) => tweet.id === id);

                    if(tweet){

                        tweet.text = text;

                        res.status(201).json(tweet);

                    }else{

                        res.status(404).json({message: `${id}의 트윗이 없습니다`});

                    }

                });

                // 트윗 삭제하기

                // DELETE

                // http://localhost:8080/tweets/:id:

                router.delete('/:id', (req, res, next) => {

                    const id = req.params.id;

                    tweets = tweets.filter((tweet) => tweet.id !== id);

                    res.status(201).json(tweets);

                });

                export default router;

 

 

       </ tweets.js  >

  

 

 

1. ---------------------------------------------------------------------------------------------------------------------------- 2-1. 2-2. 2-3. -------------------------------------------------------------------------------------------------------------------------------- 3. ---------------------------------------------------------------------------------------------------------------------------------------- 4. ----------------------------------------------------------------------------------------------------------------------------------------------- 5.

 

 

 

✔  git hub랑 연동해보자!