본인이 사용하는 터미널을 연다. ssh -i [발급받은 SSHKey] bitnami@ip주소를 입력해서 ssh에 접속해준다. 참고로 발급받은 SSHKey는 파일을 드래그 앤 드롭으로 가져오면 된다. 본인의 ip주소는 aws에 접속하면 확인할 수 있고, Static IP라고 되어있는 고정IP를 사용하면된다. 그럼 접속 완료 !

처음에는 스위프트님 글 보면서 시도해봤는데, wget https://dl.eff.org/certbot-auto 404 Not Found가 떴다. 그래서 https://dl.eff.org/certbot-auto에 들어가보니 페이지 자체가 Not Found 상태였다.

그래서 서칭하다 Bitnami 애플리케이션용 Let’s Encrypt SSL 인증서 생성 및 설치 문서 발견!

4. sudo /opt/bitnami/bncert-tool 입력

5. Domain list 에 본인 도메인 주소 입력

6. Do you want to add them? Y 입력!

도메인을 등록하고 나면 리다이렉션 여부를 설정한다. 나는 http로 접속시 https로, www입력시 non-www로 리다이렉션 되도록 설정했다!

7. HTTP 에서 HTTPS 로 리다이렉션 할래? y

8. non-www 에서 www 로 리다이렉션 할래? n

9. www 에서 non-www로 리다이렉션 할래? y

10. 1~7번과 같이 변경될거야, 동의하니? y!

11. Let’s Encrypt Subscriber Agreement에 동의하니? y!

12. please be patient…… Success!

10. 설치완료! 워드프레스에 들어가보면 이제 자물쇠가 채워진걸 볼 수있다.

http에서 https로 변경하기 끝!

22.03.22 덧붙이자면,, 워드프레스로 운영하던 블로그를 벨로그로 옮겨왔다. 워드프레스를 통해 나의 내 도멘으로 블로그를 개설해본것은 좋은 경험이였다. 그러나 여러가지 이유로(?) 가장 처음 시작했던 벨로그에서 다시 블로그를 이어나가야겠다 결정했다. 벨로그 정리좀 해야겠다.

bcrypt 설치하고 적용해보자

먼저, bcrypt 설치해보자. package.json의 dependencies에 예쁘게 들어온걸 확인 할 수있다.

npm install bcrypt

이번에는 설치해준 bcrypt를 사용해 비밀번호를 암호화해주는 함수를 작성해보자.

const mongoose = require('mongoose');
const bcrypt = require('bcrypt'); // bcrypt 임포트

const saltRounds = 10; // salt값을 10으로 정해주었다. 

const userSchema = mongoose.Schema({
  name: {
    type: String,
    maxLength: 50,
  },
  email: {
    type: String,
    maxLength: 50,
    trim: true, // space를 없애준다.
    // unique: 1, // 같은값은 하나만 존재할 수 있다.
  },
  password: {
    type: String,
    maxLength: 50,
  },
  role: {
    type: Number,
    default: 0, // 값이 정해지지 않았다면 디폴트로 0!
  },
  token: {
    type: String,
  },
  tokenExp: {
    type: Number,
  },
});

userSchema.pre('save', function (next) {  // userSchema가 save 되기 전에(pre) 실행할 함수function은~

  const user = this; //  this는 userSchema를 가르킨다. 

  if (user.isModified('password')) {   // password가 수정될때만 아래 코드 실행!
    bcrypt.genSalt(saltRounds, function (err, salt) {  //  saltRounds가 10인 salt를 generate 해주자. 
      if (err) return next(err); // 에러처리

      bcrypt.hash(user.password, salt, function (err, hash) {  // user.password를 salt로 변경해서 hash로 return하는 함수~
        if (err) return next(err); // 에러처리
        user.password = hash; // user.password 자리에 hash를 할당!
        next(); // pre에서 나가 다음 코드 실행!
      });
    });
   else {
       next(); // password 변경이 아닌 경우 바로 save코드 실행 
   }
  }
});

const User = mongoose.model('User', userSchema); // userSchema를 model로 만들어준다.

module.exports = { User };

위 처럼 코드를 비밀번호를 암호화해주는 코드를 작성 한 뒤, 포스트맨에서 비밀번호 입력하고 register api 호출해보자.

return 값의 password를확인해보니 암호화된 값이 잘들어왔다👍🏻

참고

처음에는 salt가 10자리 인줄 알았는데 리턴값을 보니 그렇지 않았다. 그래서 위키트리에서 암호화된 비밀번호의 구조를 찾아보았다. 아직 Cost가 무엇인지 왜 Salt와 Hash로 나눠 주는지 모르겠지만 이렇게 보니 구조는 눈에 들어온다.

John Ahn님의 유튜브 강의를 통해 공부하며 글을 작성했습니다😊

이 코드는 github에 올린다면 어떻게 될까? 누구나 나의 MongoDB 비밀번호를 알 수 있게된다. 그렇기 때문에 외부에 노출되지 않아야 하는 코드가 있다면 잘 숨겨줄 방법이 필요하다.

// index.js

...

// 몽구스 연결
const mongoose = require('mongoose');
mongoose
  .connect('mongodb+srv://devCecy:<비밀번호!!>@devcecy.dprgf.mongodb.net/myFirstDatabase?retryWrites=true&w=majority', {
    // useNewUrlParser: true,
    // useUnifiedTopology: true,
    // useCreateIndex: true,
    // useFindAndModify: false,
  })
  .then(() => console.log('MongoDB conected'))
  .catch((err) => {
    console.log(err);
  });

...

개발환경과 배포환경 두가지 경우로 나눠 비밀정보를 숨겨주려고 한다. 오늘은 개발환경을 위해 비밀정보를 숨겨보자.

root 디렉토리에 config라는 폴더를 생성하고, 그 안에 development.js, key.js, production.js 3가지 파일을 생성했다.

development.js 파일에는 개발환경을 위한 비밀정보를 작성해 줄것이고, production.js파일에는 배포환경을 위한 비밀정보를 작성해 줄것이다. 그리고 key.js 파일에서 현재 어떤환경에 있는지 파악해 그에 맞는 환경을 위한 코드로 분기를 나눠줄 것이다.

자, 이제 숨겨주고 싶은 아래의 URI를 뽑아와보자. 물론 실제 코드에서는 <비밀번호!!> 이 자리에 실제 비밀번호가 들어있을 것이다.

'mongodb+srv://devCecy:<비밀번호!!>@devcecy.dprgf.mongodb.net/myFirstDatabase?retryWrites=true&w=majority'

먼저, 개발환경을 위한 development.js 파일이다.

다른파일에서도 사용할 수 있도록 module.export로 감싸준뒤, 변수 mongoURI에 숨기고 싶은 정보를 넣어주었다.

// development.js

module.exports = {
  mongoURI:
    'mongodb+srv://devCecy:<비밀번호!!>@devcecy.dprgf.mongodb.net/myFirstDatabase?retryWrites=true&w=majority',
};

production.js파일도 개발환경과 마찬가지로 바깥 파일에서 사용할 수 있도록 export모듈로 감사준 후, 그 안에는 process.env.MONGO_URI 라는 환경변수를 넣어주었다.

배포환경는 개발환경과 달리 실제 배포 후에도 비밀정보를 사용해야 하므로 Heroku라는 사이트에 MONGO_URI 라는 변수에 숨기고 싶은 코드를 넣어주어 사용해 주었다. 나는 아직 배포단계가 아니여서 실제 Heroku라는 사이트는 이용하지 않고 코드만 작성해 주었다. (웹 환경에서도 환경변수를 사용하여 개발,테스트,배포 환경에 따라 파일을 작성해 정보를 숨겨주곤 하는데, 따로 사이트를 사용하진 않았다. 그래서 이 부분은 좀 더 서칭을 해보려고한다. )

// production.js

module.exports = {
  mongoURI: process.env.MONGO_URI,
};

key.js 파일에는 어떤 환경에 있는지 파악해 분기를 나눠주는 코드를 작성한다.

process.env.NODE_ENV 는 환경변수로 실제 서버를 실행했을때 개발환경이면 development, 배포환경이면 production 이 찍히는 걸 확인해볼 수 있다. 그걸 이용해서 아래와 같이 분기를 해주었다. (지금은 process.env.NODE_ENV를 찍어보면 undefined가 나오는데 그래서 분기가 else로 빠져 개발환경 코드를 사용하게 된다. )

if (process.env.NODE_ENV === 'production') { // 배포환경이면, 
  module.exports = require('./production'); // production.js 파일 코드를 사용하고,
} else { // 배포환경 이외의 환경이라면 (현재는 배포,개발환경 2가지이기때문에!)
  module.exports = require('./development'); // development.js파일 코드를 사용한다. 
}

분기를 해주었으므로, 다시 index.js 파일로 돌아와 비밀정보였던 URI자리에 방금 만든 key.js 코드를 넣어주자.

./config/key을 require로 가져온 후, 원래 URI가 있던 자리에 넣어주면 된다. key.js파일은 {}객체를 export하고 있는데, 실제로 사용하고 싶은건 그 객체안의 mongoURI이기 때문에 config.mongoURI로 가져오면 된다.

...

// development와 production 분기
const config = require('./config/key');

...

// 몽구스 연결
const mongoose = require('mongoose');
mongoose
  .connect(config.mongoURI, {
    // useNewUrlParser: true,
    // useUnifiedTopology: true,
    // useCreateIndex: true,
    // useFindAndModify: false,
  })
  .then(() => console.log('MongoDB conected'))
  .catch((err) => {
    console.log(err);
  });

마지막으로, 개발환경을 위한 development.js파일에는 여전히 비밀정보들이 들어있다. 그러므로 .gitignore 파일에 development.js파일을 넣어주면 github에 코드가 올리가지 않게 된다.

// .gitignore

node_modules

development.js 

John Ahn님의 유튜브 강의를 통해 공부하며 글을 작성했습니다😊

nodemon은 개발환경에서만 사용할것이므로 --save-dev 를 붙여 devDependencies에 설치해주었다.

npm install nodemon --save-dev


// package.json

...
  "devDependencies": {
    "nodemon": "^2.0.15"
  }

package.json에 nodemon이 잘 설치되었다면, nodemon을 통해 서버가 실행될 수 있도록 scripts를 작성해준다.

"backend" : "nodemon index.js"

 "scripts": {
    "start": "node index.js",
    "backend": "nodemon index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

이제 npm run backend로 서버를 실행해보면 nodemon이 잘 실행되는 것을 볼 수 있다.

hello word 옆에 🙂 적어주고 리프레시 해주니 바로 반영된 것을 확인할 수 있다. nodemon 👍🏻

  res.send('hello world :-)');
});

John Ahn님의 유튜브 강의를 통해 공부하며 글을 작성했습니다😊

지난 포스팅까지 작성해 둔 코드위에 회원가입 api 생성을 위해 코드를 추가하고 볼드처리했다.

const express = require('express'); // express 임포트
const app = express(); // app생성
const port = 5000;


const { User } = require('./models/User'); // 1. 지난 번 만들어 두었던 User.js(스키마) 임포트


app.use(express.urlencoded({ extended: true })); // application/x-www-form-urlencode

app.use(express.json()); // application/json


// 1.
app.get('/', function (req, res) {
  res.send('hello world');
});

// 2. register api
app.post('/register', (req, res) => {
  const user = new User(req.body); // 상단에서 require로 가져온 User 스키마에 req.body를 담아 user라는 인스턴스로 만든다.

  user.save((err, userInfo) => {
    if (err) return res.json({ success: false, err }); // err일 경우 return 값
    return res.status(200).json({
      //status가 200일 경우 return 값
      success: true,
      userInfo,
    });
  });
});

app.listen(port, () => console.log(`${port}포트입니다.`));

// 몽구스 연결
const mongoose = require('mongoose');
mongoose
  .connect(
    'mongodb+srv://devCecy:algusl109@devcecy.dprgf.mongodb.net/myFirstDatabase?retryWrites=true&w=majority',
    {
      // useNewUrlParser: true,
      // useUnifiedTopology: true,
      // useCreateIndex: true,
      // useFindAndModify: false,
    }
  )
  .then(() => console.log('MongoDB conected'))
  .catch((err) => {
    console.log(err);
  });

postman은 먼저 https://www.postman.com/ 에서 다운받아주면된다. 웹버전, 데스크톱 버전 둘다 제공하고 있으며 나는 데스크톱에 다운받아 쓰고있다.

0. postman 상단은 request부분이고 하단이 response부분이다. request는 유저가 회원가입시 입력하는 자신의 정보라고 생각하면된다. response는 유저가 회원가입 버튼을 클릭하면 호출되어 그 결과를 알려주는 부분이라고 생각하면된다. 물론 실제 response는 개발자가 확인하여 회원가입 성공, 실패로 나누어 처리할거싱고, 유저는 회원가입 완료! 혹은 오류! 라는 문구를 보게되는 것이다.

1. 회원가입은 request안에 데이터를 보내고 저장해야 하므로 post 메소드를 사용한다.

2. localhost로 테스중이기 때문에 http://localhost:5000/register 로 url을 만들어주고, (포트는 자신이 지정한 포트로 사용!)

3. body – raw – JSON 으로 선택해준뒤, json형태로 회원가입시 필요한 데이터를 넣어준다. (name, email, password, role)

4. send 버튼을 누르면 하단에 response가 온다. 나는 success:true, userInfo 가 들어오도록 했다. 데이터가 예쁘게 들어왔다!

이제 MongoDB에 회원가입한 데이터가 잘 들어왔나 확인해보자! Browse Collections 를 클릭,

방금 보낸 회원가입 데이터가 DB에 잘 쌓여있다! 회원가입 성공!

John Ahn님의 유튜브 강의를 통해 공부하며 글을 작성했습니다😊

1. 터미널에 아래 명령어로 ssh key가 발급되어 있는지 먼저 확인한다.

```$ ls -a ~/.ssh

id_rsa id_rea.pub // 두 디렉토리가 있다면 ssh key가 이미 발급되어 있는것이다.

![](https://images.velog.io/images/dev_cecy/post/74c69531-4f92-43eb-b1a8-3afa46b85e56/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.41.16.png)

2. 없다면 만들어보자! 아래 명령어를 입력한뒤 엔터엔터엔터! 그럼 아래처럼 키의 랜덤아트 이미지가 확인된다.

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

// ssh-keygen -t ed25519 -C "im.ceciliaan@gmail.com"

![](https://images.velog.io/images/dev_cecy/post/6661fff7-df57-4c62-ac8e-375becd94d0f/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.41.37.png)

3. 백그라운드에서 ssh-agent를 시작해준다.

$ eval "$(ssh-agent -s)"

Agent pid 20016

![](https://images.velog.io/images/dev_cecy/post/ea569870-3a4e-4efa-9b6e-a0771bead078/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.42.04.png)

4. macOS Sierra 10.12.2 이상을 사용하는 경우 ~/.ssh/config 파일을 통하여 ssh-agent에 key를 자동으로 로드하고 키체인에 암호를 저장하도록 설정해주어야 한다. 파일 생성전 먼저 해당 파일이 먼저 있나 확인해 줬다.

$ open ~/.ssh.config

The file /Users/ce._.cy/.ssh/config does not exist.

![](https://images.velog.io/images/dev_cecy/post/bdc6d88a-b9ae-4206-8c1a-bb0d74ce23f6/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.42.24.png)

5. 파일이 존재하지 않으므로 하나 만들어준다. 그리고 파일을 열어 Host~ 부터의 코드를 작성해 준다.

$ touch ~/.ssh/config $ open ~/.ssh.config

// 오픈된 파일에 아래 코드를 넣어준다. Host * AddKeysToAgent yes UseKeychain yes IdentityFile ~/.ssh/id_ed25519

6. SSH key를 ssh-agent에 추가하고 키체인에 암호를 저장해준다.

$ ssh-add -K ~/.ssh/id_ed25519

Identity added: ~

![](https://images.velog.io/images/dev_cecy/post/3fcd777f-b36c-45fd-a02d-066b813fb305/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.42.54.png)

7. 생성된 SSH key를 확인해보자. 터미널에 아래의 코드를 적고 엔터 치면 response는 없다. 대신 그 상태에서 메모장 같은곳에 붙여넣기를 하면 생성된 자신의 SSH key를 확인할수 있다.

```$ pbcopy < ~/.ssh/id_ed25519.pub```

8. 생성된 SSH key를 이제 github에 연동해주어야 한다. github 프로필을 클릭하면 settings가 있고 거기서 SSH and GPGkeys 메뉴를 클릭해 준다.
![](https://images.velog.io/images/dev_cecy/post/92330e24-a865-4d67-8e4c-8961974832fb/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.43.24.png)

9. title을 적고, key안에 복사한 자신의 SSH key를 붙여넣어주고 add SSH key 버튼을 클릭해준다.

![](https://images.velog.io/images/dev_cecy/post/bf2c8db5-0188-442c-87cc-f079fa54ab7f/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.43.35.png)

10. 이제 node.js 프로젝트 코드를 안전하게 깃헙에 푸시할 수 있게 되었다! 프로젝트를 로컬에 먼저 저장한 후 remote 저장소인 github에 push 해주자. 그럼 끝 !👊🏻

$ git add . $ git commit -m "first commit" $ git branch -M main // 이건 필수는 아니지만 github도 master 브랜치를 main으로 변경해 쓰길권고하기 있기 때문에 변경해주었다. $ git remote add origin https://github.com/devCecy/boilet-plate-feat.node.js-.git $ git push -u origin main

_[John Ahn님의 유튜브 강의](https://www.youtube.com/watch?v=fgoMqmNKE18&list=PL9a7QRYt5fqkZC9jc7jntD1WuAogjo_9T)와 [github에서 제공하는 문서](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent)를 바탕으로 글을 작성했습니다._

schema는 데이터의 구조, 표현 방법, 데이터 간의 관계를 언어로 정의한 구조다. 쉽게말해 아래의 코드에서 const로 선언된 userSchemadml {} 안쪽 부분이 schema이다. 그리고 model은 그 schema를 감싸주는 역할을 한다.

코드로 확인해보자. root에서 Models 디렉토리를 만들고 그안에 User.js 파일을 생성했다.

// User.js

const mongoose = require('mongoose'); // mongoose를 선언해주고,

const userSchema = mongoose.Schema({  // userSchema라는 이름의 schema를 작성해준다. 
  name: { 
    type: String,
    maxLength: 50,
  },
  emial: {
    type: String,
    maxLength: 50,
    trim: true, // space를 없애준다.
    unique: 1, // 같은값은 하나만 존재할 수 있다.
  },
  role: {
    type: Number,
    default: 0, // 값이 정해지지 않았다면 디폴트로 0!
  },
  token: {
    type: String,
  },
  tokenExp: {
    type: Number,
  },
});

const User = mongoose.model('User', userSchema); // userSchema를 model로 감싸준다. 

module.exports = { User }; // User라는 모델을 본 파일 밖에서도 사용할 수 있도록 export 구문을 작성해준다. 

John Ahn님의 유튜브 강의를 통해 공부하며 글을 작성했습니다😊

node.js는 웹브라우저에서만 사용되던 javascript를 웹 외부에서도 실행할 수 있는 환경을 제공해준다. 그래서 node.js를 통해 서버를 생성할 수 있게 되는것이다. javascript 하나의 언어로 웹프론트와과 웹서버 모두를 만들 수 있기 때문에 많이 사용되고있다. 사실, 나도 그래서 선택했다.

node.js를 통해 웹 서버를 생성하기 위해서는 express 라는 node 웹 프레임워크를 설치해주면 된다.

실제 데이터를 저장할 곳은 Mongo DB로 MongoDB는 NoSQL(관계형 데이터베이스가 아닌 SQL) 데이터베이스다.

mongoose는 node.js와 Mongo DB를 연동해주는 라이브러리이다.

이제, node.js와 Mongo DB를 연동해보자.

Mongo DB 생성

1. Mongo DB 사이트에 접속한뒤, 아이디가 없다면 회원가입 후 로그인 한다.

2. 로그인 후 Create 버튼을 클릭해주면,

3. Create New Cluster페이지로 넘어간다. 나는 AWS를 사용할거기 때문에 AWS선택! 다른 클라우드를 사용할 예정이라면 그걸 선택하면 된다.

4. 서울은 FREE TIER가 지원되지 않기 때문에 가장 가까운 도쿄로 선택해 주었다.

5.M10 을 선택해준다. 이 상태로 최종 create을 해주면 1~5분 뒤 cluster가 생성된다.

6.좌측 메뉴에서 Database를 클릭해보자. 아직 cluster가 생성중이라면 생성중 안내가 나올것이고, 완료되면 아래와 같은화면을 볼 수 있다.

7. Connect를 클릭해준다.

8. 1번의 Add Your Current IP Address를 클릭하면 이미 ip주소가 입력되어있을 것이다. 그럼 add 버튼을 눌러주기만 하면된다. 그리고 나는 User를 이미 입력해주어서 입력칸이 안나오는데, 2번에 username과 password를 입력해 주면된다. (추후 앱 연결에 필요하기 때문에 꼭 기억할것!)

9. choose a connection method를 클릭하여 다음 스텝으로 넘어간다. 그리고 두번째 Connect your aplication을 클릭해준다.

10. 2번의 코드를 복사한다!

11. MongoDB와 나의 app을 연결하기 위해 먼저 vscode에디터를 사용하여 프로젝트를 하나 생성해 놓았다.

• express를 설치해준다. npm install express
• mongoose를 설치해준다. npm install mongoose
• Index.js에 아래와 같이 작성해준다.
• mongoose.connect() 안쪽에는 MongoDB에서 복사해두었던 코드를 붙여넣어주면된다. 그리고 <password>부분에 역시나 MongoDB에서 지정해 주었던 비밀번호를 입력해준다. <>괄호 모두 제거하고 비밀번호만 넣어주어야한다!
• 몽구스의 useNewUrlPaser등의 옵션들은 에러 생성으로 잠시 주석 처리를 해놓았다.

 // index.js
const express = require('express'); // express 임포트
const app = express(); // app생성
const port = 5000;

app.get('/', function (req, res) {
  res.send('hello world!!');
});

app.listen(port, () => console.log(`${port}포트입니다.`));

// 몽구스 연결
const mongoose = require('mongoose');
mongoose
  .connect(
    'mongodb+srv://devCecy:<password>@devcecy.dprgf.mongodb.net/myFirstDatabase?retryWrites=true&w=majority',
    {
      // useNewUrlPaser: true,
      // useUnifiedTofology: true,
      // useCreateIndex: true,
      // useFindAndModify: false,
    }
  )
  .then(() => console.log('MongoDB conected'))
  .catch((err) => {
    console.log(err);
  });

12. npm run start로 실행해주면 콘솔에 아래와같이 찍히는 걸 볼 수있다. (물론, package.json의 script에 "start": "node index.js"를 추가해주어야 가능하다.)

나의 앱과 몽고DB 첫 연결 성공!

Mongoose 옵션 에러?

서칭해보니 몽구스6.0이상의 버전에서는 지원하지 않는 옵션이라고 한다. 그래서 삭제해주었다!

John Ahn님의 유튜브 강의를 통해 공부하며 글을 작성했습니다😊

오늘은 클라이언트가 서버로부터 응답받은 데이터를 어떻게 브라우저에 렌더링하는지 그 과정에 대해 알아보겠습니다.

브라우저의 렌더링 과정

먼저, 브라우저의 렌더링 과정을 크게 나눠보면 아래와 같습니다.

브라우저의 렌더링 과정

1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트파일 등 렌더링에 필요한 리소스를 서버에 요청하고 응답을 받습니다. (여기까지는 웹의 동작방식에서 확인했습니다.)
2. 브라우저의 렌더링 엔진은 서버로부터 응답받은 HTML과 CSS를 *파싱하여 DOM과 CSSOM을 생성하고, 이 둘을 결합하여 렌더트리를 생성합니다.
3. 브라우저의 자바스크립트 엔진은 서버로부터 응답받은 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트 코드로 변환하여 실행합니다. 만약 이때, 자바스크립트가 DOM API를 통해 DOM이나 CSSOM을 변경한다면, 변경된 DOM과 CSSOM은 다시 렌더트리로 결합됩니다.
4. 결합된 렌더트리를 기반으로 HTML요소의 레이아웃을 계산하고 브라우저에 HTML요소를 페인팅 합니다.

*파싱(pasing)은 문자열을 의미있는 토큰(token)으로 분해하고, 문법적 의미와 구조를 반영하여 트리형태의 자료구조인 파스 트리(parse tree)를 만드는 과정을 말합니다.

이제 위의 과정을HTML > CSS > Javascript 순서로 자세하게 뜯어보겠습니다.

HTML파싱과 DOM 생성

HTML문서를 파싱하여 그 결과물인 DOM을 구성하기까지의 과정은 아래와 같습니다.

1. 서버는 브라우저로부터 요청받은 HTML 파일을 읽어드린후 > 메모리에 저장하고 > 그 메모리에 저장된 바이트(2진수: 101101000100…)을 응답합니다.
2. 브라우저는 응답받은 바이트 형태의 문서를 meta태그의 charset 어트리뷰트에 지정된 인코딩방식(UTF-8)에 따라 문자열로 반환합니다.
3. 문자열로 변환된 HTML문서를 이번에는 문법적 의미를 갖는 코드의 최소 단위인 토큰(token)으로 분해합니다.
4. 토큰은 객체로 변환하여 노드를 생성합니다.
5. 생성된 노드는 HTML요소간의 부자관계에 따라 트리 자료구조 즉 DOM(Document Object Model)으로 구성됩니다.

CSS파싱과 CSSOM 생성

렌더링 엔진은 HTML문서를 한줄 한줄 순차적으로 파싱하며 DOM을 생성해 나갑니다. 그러다 CSS를 로드하는 link태그 혹은 style태그를 만나면 DOM생성을 중지한 후 CSS파싱의 결과물인 CSSOM을 생성하는 과정을 진행합니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8"> // 여기까지 해석한후, 
  <link rel="stylesheet" href="style.css"> //link 태그를 만나면서 DOM생성을 중지하고 CSS파일을 서버에 요청한 후 응답받아 CSS파싱을 시작합니다. 

    ...

CSS파싱 과정은 바이트 > 문자 > 토큰 > 노드 > CSSOM 생성 순으로 HTML의 파싱과정과 동일합니다.

렌더트리 생성

지금까지 렌더링 엔진이 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성했습니다. 이제 이 둘을 렌더트리로 결합하여 레이아웃을 계산하고 브라우저에 그려내기만 하면 됩니다.

렌더트리는 이름 그대로 렌더링을 위한 트리형태의 자료구조 입니다. 그렇기 때문에 화면에 렌더링 되지 않아야하는 노드들은 제외하여 보여줄 것들로만 렌더트리를 구성합니다. 예를 들면 HTML의 meta태그, script태그 혹은 CSS의 display: none과 같은 요소들은 포함되지 않습니다.

완성된 렌더트리는 HTML요소의 레이아웃을 계산하고, 브라우저에 픽셀을 렌더링 하는 페인팅 처리에 입력됩니다. 이렇게 우리가 렌더링 된 화면을 볼 수 있게 됩니다.

위의 렌더링 과정은 아래의 경우에 의해 반복 실행될 수 있습니다.

• 자바스크립트에 의해 노드가 추가되거나 삭제되는 경우
• 브라우저 리사이징에 의한 뷰포트 크기가 변경되는 경우
• 레이아웃을 변경시키는 스타일이 변경되는 경우

레이아웃 계산과 페인팅을 다시 실행하게 만드는 것은 반복되는 리렌더링을 만들어 내므로 성능에 악영향을 줄 수 있으므로 주의할 필요가 있습니다.

자바스크립트 파싱

자바스크립트의 파싱은 CSS파싱과 마찬가지로 렌더링 엔진이 HTML 문서를 한줄 씩 읽어나가다 script태그를 만나면 자바스크립트 엔진에 제어권을 넘기며 시작됩니다.

자바스크립트 엔진은 CPU가 이해할 수 있는 저수준 언어로 자바스크립트 코드를 파싱하고 > DOM, CSSOM과 같은 *AST(Abstract Syntax Tree, 추살적 구문 트리)를 생성하며 > AST를 기반으로 바이트코드를 생성하여 > 인터프리터가 실행될 수 있도록 만듭니다.

• AST는 토큰에 문법적 의미과 구조를 반영한 트리형태의 자료구조입니다.

리플로우와 리페인트

자바스크립트 코드가 실행되는 과정에서 DOM과 CSSOM을 변경하는 DOM API가 사용되면 변경된 DOM과 CSSOM이 다시 렌더트리로 결합되고 레이아웃과 페인트 과정을 거쳐 다시 렌더링 됩니다. 이 과정을 리플로우(reflow), 리페인트(repaint)라고 합니다.

리플로우는 레이아웃을 다시 계산하는 것이며, 리페인트는 재결합된 렌더트리를 기반으로 다시 페인트하는 것입니다. 리플로우는 노드의 추가/삭제, 요소의 크기/위치 변경, 윈도우의 리사이징 등 레이아웃에 영향을 주는 경우에만 실행되기 때문에 리플로우와 리페인트가 반드시 순차적으로 실행되는 것은 아닙니다. 레이아웃의 변화가 없다면 리페인트만 실행되기 때문입니다.

여기까지 브라우저의 렌더링 과정을 살펴보았으며 관련하여 함께 알아두면 좋을 사항도 살펴봅시다.

더 알아두면 좋은 사항

자바스크립트 파싱에 의한 HTML 파싱의 중단

HTML, CSS, 자바스크립트를 처음에 배우게되면 script 태그를 바디의 가장 하단에 삽입하라고 배우셨을 것입니다. 그 이유에 대해서 자세히 알아봅시다.

렌더링 엔진과 자바스크립트 엔진 코드를 직렬적으로 파싱하게 됩니다. 즉, 위에서 아래로 한줄 한줄 동기적으로 읽는 다는 말이죠.

<!DOCTYPE html> 
 <html>  
  <head>   
   <meta charset="UTF-8">
   <link rel="stylesheet" href="style.css"> //HTML 파싱 중단 > CSS 파싱 
   <script src="app.js"></script> //HTML 파싱 중단 > 자바스크립트 파싱/실행 
    ...
    ```
script 태가그 위의 코드와 같이 헤드안에 있을 경우 다음과 같은 문제가 발생할 수 있습니다.

1. DOM이 완성되지 않은 상태에서 자바스크립트의 코드가 DOM Api를 통해 DOM을 조작하면 에러가 발생할 수 있습니다.
2. 자바스크립트의 로딩/파싱/실행으로 인해 페이지의 로딩 시간이 길어질 수 있습니다.

그렇기때문에 script코드는 DOM이 모두 생성된 후 파싱/실행될 수 있도록 아래와 같이 바디의 가장 하단에 적어주면 DOM조작시 오류가 없고, HTML 파싱이 블로킹 없이 실행되어 페이지 로딩시간이 단축됩니다.

```js
<!DOCTYPE html> 
 <html>  
  <head>   
   <meta charset="UTF-8">
   <link rel="stylesheet" href="style.css">
  </head>
  <body>
   ....
   <script src="app.js"></script>
  </body>

    ...
    ```

## Script 태그의 async/defer 어트리뷰트
자바스크립트 파싱에 의한 HTML 파싱 블로킹현상을 근본적으로 해결하기 위해 HTML5부터 async와 defer 어트리뷰트가 추가되었습니다.

```js
<script async src="script.js"></script>
<script defer src="script.js"></script>

async와 defer 어트리뷰트는 HTML파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행되도록 만들어 줍니다. 하지만 두 어트리뷰트 사이에는 자바스크립트의 실행시점의 차이가 존재합니다.

async async 어트리뷰트는 HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행됩니다. 단, 자바스크립트 파싱과 실행은 자바스크립트 파일이 로드되면 바로 진행되며 이때는 HTML파싱이 중단됩니다. 즉, async 어트리뷰트를 사용하면 자바스크립트 파일의 로드는 비동기적으로 진행할 수 있으나, 완료된 순서로 자바스크립트 파일이 실행되므로 실행 순서를 보장할 수는 없습니다.

defer defer 어트리뷰트는 HTML파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 진행된다는 점에서 async어트리뷰트와 동일합니다. 단, 자바스크립트 파싱과 실행은 HTML 파싱이 완료된 직후, 즉 DOM이 생성된 이후에 진행된다는 점이 다릅니다. DOM생성이 완료된 이후 실행되어야 하는 자바스크립트 파일에 유용하게 사용할 수 있습니다.

HTTP 1.1과 HTTP 2

HTTP는 웹에서 브라우저와 서버가 통신하기 위한 프로토콜 입니다. HTTP에 관한 내용은 다음 글에서 더자세히 알아보도록하고, 이번에는 간단하게 HTTP 1.1과 2.0의 차이만 확인해 보려고 합니다.

HTTP/1.1은 한번에 하나의 요청과 하나의 응답 만을 처리합니다. 즉, 여러개의 요청이나 응답을 한번에 처리할 수 없습니다. 그렇기 때문에 아래와 같이 HTML문서내의 여러 리소스 요청들이 한가지씩 요청되고 응답되며 이는 리소스 요청 개수에 비례하여 응답시간이 증가한다는 단점을 가지고 있습니다.

HTTP/2는 한번에 여러개의 요청과 응답이 가능합니다. 따라서 여러 리소스들이 동시에 요청되고 응답받을 수 있어 구글에 따르면 HTTP/1.1에 비해 HTTP/2의 페이지 로드속도가 약 50%정도 빠르다고 합니다.

오늘은 우리가 어떤 주소를 검색하고 브라우저를통해 그 출력물을 눈으로 보게되는 짧은 순간의 과정에 대해 알아보았습니다. 참 짧은 순간인데 그 시간 웹은 정말 바쁘게 움직이고 있네요.

다음글에서는 우리에게 너무 익숙하지만 막상 설명하자면 갸우뚱한 HTTP에 대해 알아보도록 하겠습니다.

이 글은 모던 자바스크립트 Deep Dive(이웅모님 저)의 38장’브라우저의 렌더링과정’을 학습하며 정리한 내용입니다. 본 장에는 브라우저 렌더링 과정이 아주 깔끔하게 정리되어 과정을 이해하는데 큰 도움이 되었습니다.

웹(web)은 월드와이드웹(World Wide Web)의 줄임말입니다. 웹에는 클라이언트(clinent)와 서버(server)라는 두가지의 컴퓨터가 연결되어있습니다.

클라이언트는 WI-FI와 같이 웹 사용자의 인터넷이 연결된 장치들 또는 크롬, 사파리와 같은 브라우저를 말하며, 서버는 클라이언트의 요청에 응답하기 위한 웹페이지, 사이트 또는 앱을 저장하는 컴퓨터를 말합니다.

웹의 동작 방식

만약 제가 브라우저에 웹 주소(devcecy.com)를 입력하면,

1. 브라우저(클라이언트)는 DNS로가서 서버의 진짜 주소(15.164.6.101)를 찾습니다.
2. 그리고 브라우저는 웹사이트의 사본을 자신에게 전달해달라는 HTTP요청 메세지를 서버에 보냅니다. 이때, 요청 메세지와 웹사이트의 사본과 같은 모든 데이터는 *TCP/IP를 통해서 전송됩니다.
3. 요청 메세지를 받은 서버는 200 ok 메세지를 클라이언트에 전송합니다.
4. 그리고 서버는 *데이터 패킷이라는 작은 덩어리들로 웹사이트의 사본을 브라우저에 전송합니다.
5. 브라우저는 전송 받은 데이터 패킷을 조립해서 웹사이트로 만들어낸후 저에게 devcecy.com의 첫화면을 보여 줍니다.

용어정리

• TCP/IP – TCP는 Transmission Control Protocol (전송 제어 규약), IP는 Internet Protocol (인터넷 규약)의 약자로, ‘어떻게’ 웹을 통해 데이터를 전송할 것인지를 정의하는 통신 규약 입니다. 예를들어 우리가 배민에서 야식을 주문했다면 그 음식을 배달해주는 오토바이, 차, 자전거, 사람의 다리 등의 운송장치를 뜻하는 것입니다. 하나하나 좀 더 자세히 설명해 보겠습니다. IP는 패킷을 한곳에서 다른곳으로 옮겨는 줍니다. 그렇지만 IP를 사용하여 데이터를 전송한 송신자는 수신자가 메시지를 언제 받는지, 받기는했는지를 확인할 수 없습니다. 이에 반해, TCP는 IP 위에 만들어졌으며, 패킷이 제대로 전송이 되었는지를 확실하게 보장해줍니다.
• 데이터 패킷(Packet) – 데이터를 주고받는 규칙으로, 네트워크를 통해서 전송되는 데이터조각을 말합니다. 기본적으로 수천개의 작은 덩어리들로 전송이 되어 데이터 트래픽이 정체되지 않고 빠르게 전달 될수 있습니다. 만약 데이터를 덩어리로 쪼개지 않고 한덩어리로 전달한다면 한번에 단 한사용자만 데이터를 다운받을 수 있는 비효율적은 상황이 발생할 것입니다. 다음 글에서는 웹의 클라이언트에 속하는 웹브라우저의 동작방식에 대해서 알아보겠습니다.

MDN의 웹의 동작 방식 를 읽고 스스로 정리한 글입니다.

TCP/IP 용어 설명의 일부분은 '한권으로 읽는 컴퓨터구조와 프로그래밍(조너선 스타인하트)'를 참고했습니다.

두 대의 컴퓨터가 서로 통신하기 위해서는 유선인 이더넷 케이블 혹은 무선인 WiFi나 Bluetooth 시스템을 통해 연결되어야 합니다.

하지만, 모든 컴퓨터가 통신하기 위해 직접 연결되어야 한다면 아래 그림과 같이 복잡해질 것입니다. 컴퓨터 10대를 서로 연결하기 위해서 45개의 케이블이 필요하기 때문입니다.

이러한 문제를 해결하기 위해 소형 컴퓨터인 라우터가 사용됩니다. 라우터는 컴퓨터 간의 통신이 정확하게 이뤄지도록 하는 단하나의 작업만을 진행하는데 컴퓨터 A가 컴퓨터B로 메세지를 보낸다면 컴퓨터 C가 아닌 컴퓨터B로 전달되도록 하는 것입니다.

라우터를 이용하면 10대의 컴퓨터를 서로 연결하기 위해서 10개의 케이블만 있으면 됩니다.

라우터 하나에 수십억대를 모두 연결하면 좋겠지만 단일 라우터에 그많은 컴퓨터를 모두 연결할 순 없습니다. 하지만 라우터또한 소형 컴퓨터이기 때문에 라우터와 라우터간의 연결이 가능하며 아래와 같이 무한하게 연결을 확장할 수 있게 됩니다.

여기까지만 해도 충분하다 느낄 수 있지만, 제가 있는 서울과 부산 혹은 바다 건너 제주도에 있는 컴퓨터는 어떻게 연결될 수있을까요? 이 문제는 이미 많은 곳에 깔려있는 전화선을 통해 해결할 수 있었습니다. 대신 인터넷 네트워크과 전화 시설이 연결되기 위해서는 모뎀이라는 장비가 필요했으며 모뎀은 네트워크 정보를 전화시설에서 처리할 수있는 정보로 변환해 주었습니다.

이제 이렇게 연결된 네트워크를 인터넷 서비스 제공업체(Internet Service Provider, ISP)에 연결하면 끝입니다. ISP는 몇몇 특수한 라우터와 다른 ISP의 라우터에 액세스 할 수 있으며, 이렇게 컴퓨터간의 메세지를 전달 할 수 있게 되었습니다.

인터넷과 웹은 같지 않습니다. 인터넷은 지금까지 알아 본것처럼 수십억대의 컴퓨터를 모두 연결 할 수 있는 인프라를 뜻하며, 웹은 그 인프라 위에 구축된 서비스를 말합니다.

그렇다면 다음으로 웹은 어떻게 동작하는지 알아보겠습니다.

MDN의 인터넷은 어떻게 동작하는가?를 읽고 스스로 정리한 글입니다.

• 일정상 CES 마지막 날만 관람이 가능했다.

• 유명 기업 > 현 회사와 협업가능하거나 참고할만한 기업 순으로 관람했다.

• 벤츠의 차량 외부 색이 변하는 차를 보았는데, 이제 자동차 흰색살까 검정색살까 혹은 튀는색 살까고민하지 않아도 되는 시대가 왔나보다. 벤츠는 야외에 부스를 세웠고, 차에 탑승해보거나 스피커 사운드만을 체험하는 부스를 따로 새워놓기도했다. 또, 음료를 무료로 제공하는 바와 야외 라운지를 만들어 관람객들이 벤츠 부스에서 더 많은 시간을 보낼 수 있도록 유도한 부분이 인상적이었다.

• 가장 큰 부스 사이즈로 참가한 삼성은 모든 제품을 끌어모아 나온 느낌이었다. 가전제품 매장인 듯한 느낌이 들어 아쉬웠던것 같기도하고.

• 개인적으로 SK의 부스가 가장 인상적이였다. CES 에서 전하고자 하는 것을 명확해 보였고, 내부 동선과 디자인, 영상미, 증강현실, NFC 직원들의 의상까지 전시회를 위해 많은 노력이 있었음을 느낄 수 있었다. 부스를 모두 관람하고 나오면 관람 중 얻는 포인트로 코인을 얻을 수있는데 이 코인으로는 라스베가스 답게(?) 카지노게임을 할 수 있다. 카지노 게임으로 얻은 쿠폰으로는 야외에서 meat-free 푸드트럭을 운영해 음식을 즐길 수 있게 해주었다.

• Venetian 쪽에는 한국 기업들이 점령 했다고 말해도 과언이 아닐 정도로 많은 기업들이 참가했다.

• NFC와 블록코딩, 마그네틱을 이용한 코딩 교육완구를 가지고 나온 한국기업이 있었는데 많은 영감과 자극을 받았다.

• 적고보니 전시 주최사에서 일했던 경험 때문인지 전시회 전반의 운영과 부스에 대한 생각을 많이 하며 봤구나 싶다.

• 좋았던점

  • 부스에서 참가기업들의 열정이 뿜어져 나와 나도 모르는새에 그 열정을 받아왔다.
  • 생각하지 못했던 서비스와 아이템들을 관람 하면서 매몰되어있는 나만의 생각에서 한 발자국 떨어져 나올 수 있었다.

• 아쉬운점

  • 코로나로 인해 메타, 아마존 같은 유명 기업이 참가하지 않아 아쉬웠다.
  • 하루안에 모든 것을 보려니 여유롭고 꼼꼼하게 관람하는것이 불가능했다. North 관은 아예 관람하지 못했다

• CES에 가면서 세워둔 몇가지 목표가 있었다. 그 중 몇가지는 동료들과 깊은 대화를 나누고, 그들의 인간적 장점을 1개 이상 발견하는 것이었다. 결론적으로 말하면 나의 지극히 개인적인 목표는 모두 달성되었다. 새벽까지 대화하고 기록 하면서, 우리가 개발하는 서비스에 대한 고민과 애정을 가진 이들과 함께 일할 수 있어 감사하는 생각이 들었다.

• CES발 코로나 확진자가 점점 늘어나고있다. CES 전시장 내부는 접종자와 음성확인서를 검사해서 안전하다고 생각했지만, 라스베가스 시내는 정말 코로나에 안걸리면 이상할정도로 시민들이 방역에 참여하고 있지 않았다. 정부정책이 없는것 같기도하고. 전시회가 끝나고 미국에서 pcr음성 1회와 호텔방에 머물며 자가진단 키트로 2번의 음성, 한국에 오자마자 pcr 음성을 받았음에도 여전히 불안한 마음이다. 같이 출장을 다녀온 분들도 격리면제자임에도 불구하고 모두 10일간 재택하며 집에서 스스로 격리하기로 했다. 매일 체크하기 위해 자가진단키트도 샀다. 많은 해외여행과 해외출장을 경험해봤지만 이번처럼 출국도 입국도 이렇게 힘든 적은 처음이다. 나로인해 나의 가족이 감염될까 걱정되기도하고, 스스로도 적지않은 스트레스를 받으며 이래저래 쉽지않은 순간들이다.

• 그렇기 때문에 CES에 다녀온 경험을 더 값지게 만들어야 겠다는 생각이든다.

(22년 1월 13일에 적은 글입니다.)

이번에는 누적된 값과 initialValue를 지정할 수 있는 특성을 이용해 배열 내의 중복된 값이 몇 개 있는지 구해보자!

const array = ['a', 'b', 'a', 'a', 'b'];

const result = array.reduce((accu, curr) => { 
  console.log('accu',accu, 'curr', curr, accu[curr])
  accu[curr] = (accu[curr] || 0)+1; // 객체에서 curr key값을 찾아 value값이 있으면 그 value에서 1을 더하고, 없다면 0을 할당하고 거기에 1을 더해준다. 
  return accu;
}, {});

console.log('result',result); // 'result' { a: 3, b: 2 }

reduce()가 어떤식으로 배열을 순회하는지 보기위해 중간에 console.log을 찍어주었는데, console.log만 가져와서 뜯어보면 이런식이다.

console.log('accu',accu, 'curr', curr, accu[curr])

'accu' {} 'curr' 'a' undefined  // 1번
'accu' { a: 1 } 'curr' 'b' undefined // 2번
'accu' { a: 1, b: 1 } 'curr' 'a' 1 // 3번
'accu' { a: 2, b: 1 } 'curr' 'a' 2
'accu' { a: 3, b: 1 } 'curr' 'b' 1

1. initialValue 를 {}로 지정해주었기 때문에 accu(누적값)의 첫 값은 {}이다. 그리고 배열의 첫 값을 받는 curr는 ‘a’고, 빈 객체에서 ‘a’를 찾는 accu[curr]값은 undefined가 나온다. 아직 빈 객체라 ‘a’ key값의 value가 없기 때문이다.
2. 1번에서 객체안에 ‘a’의 값이 없었기 때문에 0을 할당한 뒤 + 1해주었고, 두번째 curr값은 ‘b’다. 이번에도 역시 객체안에 ‘b’라는 key값은 존재하지 않기 때문에 accu[curr]값은 undefined다.
3. 2번에서 ‘b’의 value값으로 0+1이 할당되었기 때문에 누적값은 {a: 1, b:1}이 되었다. 이후 부터는 객체안에 key값이 존재하면 그 value값에 1을 더해주고, 없다면 0을 할당한뒤 1을 더해주는 방식을 반복한다.

객체를 initialValue로 지정해주고 그 안에 key값이 있는지 확인해 value에 1씩 더해주는 방식으로 배열의 중복되는 원소 갯수를 구해보았다. 👊🏻

Set()

Set은 value들로 이루어져있는 컬렉션이다.

• new Set()으로 새로운 set을 만든다.
• Set은 인덱스로 데이터를 조회할 수 없다.
• set.size set이 가지고 있는 데이터의 개수를 조회한다.
• set.has(value) value가 set안에 존재한다면 true를 반환한다.
• indexOf()로 데이터를 찾는것 보다 빠르다.
• set.add(value) value를 set에 추가한다.
• Set에는 같은 데이터가 2번 존재할 수 없어, 데이터가 이미 존재한다면 추가되지 않는다.
• set.delete(value) value를 set에서 제거한다.
• set.clear() set안의 모든 데이터를 삭제한다.
• set.keys(), set.values(), set.entries() 는 이터레이터들을 리턴하며, Map과의 호환성을 위해 존재한다.

var users = new Set();

users.add('Ceci'); 
users.add('Den')
console.log('users',users)  // Set ['Ceci', 'Den']

users.delete('Charles') //false => Set안에 존재하지않아 삭제할 수 없기 때문에 false 반환
users.delete('Ceci'); // true => Set안에 존재하는 값으로 삭제되었기 떄문에 true 반환

users.size //1 => Set의 길이를 반환 


users.has('Den') //true => Set안에 존재하는 값이기 때문에 true 반환 

users[0] // undefied => 인덱스로 값찾기 불가!

users.clear() //set데이터 모두삭제 

Map()

Map은 key-value의 쌍으로 이루어져있는 컬렉션이다.

• new Map() 으로 새로운 map을 만든다.
• map.set(key, value) map에 key와 value 를 추가한다. 같은 key값이 존재할 경우 기존 데이터를 덮어쓴다.
• map.get(key) key와 관련된 value를 리턴한다.
• map.has(key) key가 존재하는지 확인해 true, false를 반환한다.
• map.size map의 엔트리 개수를 조회한다.
• map.delete(key) key와 관련된 엔트리를 삭제한다.
• map.clear() map의 모든 데이터를 삭제한다.

let users = new Map();

users.set('name', 'Ceci') //추가, set은 같은 key가 존재하면 데이터를 덮어쓴다. 
users.set('nickname', 'devCecy') //추가

users.get('name') // 'Ceci' => key와 관련된 value를 리턴한다.  


users.has('name') // true => key가 존재하는지 확인한다.
users.size //2 => 엔트리의 개수를 반환한다.
users.clear() // 모든 데이터 삭제 

Map을 생성하는 3가지 방법

//1. 
let users = new Map();

//2.
let users = new Map([['age', '29']]); 

//3. 
let users = new Map().set('age', '29').set('phoneNumber', '01012345678')

Map.keys() 와 Map.values()

각각의 순회할 수 있는 모든 iterable object을 반환한다.

var users = new Map().set('name', 'Ceci').set('age', '29')

console.log([...users.keys()]) //[ 'name', 'age' ]
console.log([...users.values()]) //[ 'Ceci', '29' ]

Map 순회하는 2가지 방법

var users = new Map().set('age', '29').set('phoneNumber', '010')

//for-of
for (let [key, value] of users) {
  console.log(key + ':' + value); 
}


//forEach ** value - key 순임!!
users.forEach((value, key, map) => {
  console.log(key + ':' + value);
});

// 둘다 아래와 같은 결과가 반환된다.  
// 'age:29'
//'phoneNumber:010'

Map.entries()

map안의 모든 엔트리들을 순회할 수 있는 iterable object 반환한다.

let users = new Map().set('name', 'Ceci').set('age', '29')
let iterObj  = users.entries();
console.log('iterObj',iterObj) 
//'iterObj' Iterator [Map Iterator] {
//  __proto__: { next: ƒ next() }
//}

console.log(iterObj.next()) //{ value: [ 'name', 'Ceci' ], done: false }
console.log(iterObj.next()) //{ value: [ 'age', '29' ], done: false }
console.log(iterObj.next()) //{ value: undefined, done: true }()

iterable 개념에 대해 알보고 다시 모질라 블로그를 읽어보면 좋을것 같다. 의문점은 set.add()와, set.delete()는 set객체 자신을 리턴한다고 모질라 블로그에서 말하는데, 실제로 실행해보면 true,false값을 반환했다..!

Mozilla 블로그와 Kevin Hong님의 블로그를 보고 공부하며 작성했습니다.

reduce()

reduce()는 배열을 다루는 메소드로 누적값(accumulator)과 현재값(currentValue)을 인자로 가지고 있다는 특징이 있다. 이러한 특징으로 배열을 여러가지로 요리(?)할 수 있도록 만든다.

가장 간단한 예시는 모든 배열의 요소를 더하는 것으로 reduce의 속성을 이해하기에 좋다.

arr.reduce(callback[, initialValue])

const reducer = (accumulator, currentValue) => accumulator + currentValue;


// 1 + 2 + 3 + 4
console.log(numbers.reduce(reducer)); // 10 => 배열의 원소 1,2,3,4를 모두 더한 값을 반환한다. 

// 5 + 1 + 2 + 3 + 4
console.log(numbers.reduce(reducer, 5)); // 15 => initialValue로 5를 지정해주었기 때문에 accumulator의 첫 값은 5가 되고 나머지 1,2,3,4를 더해 15를 반환한다. 

1. reduce()는 배열의 각 요소에 콜백함수를 한번씩 실행한다.
2. 콜백함수는 1) accumulator, 2) currentValue, 3) currentIndex, 4) array, 총 4개의 인자 값을 받는다.

• accumulator는 콜백의 반환값을 누적한다.
• initialValue가 있는 경우 첫 accumulator값은 initialValue이다.
• currentValue 처리할 현재 요소.
• currentIndex (옵션) 처리할 현재 요소의 인덱스. initialValue가 있으면 0, 없다면 1부터 시작한다.
• array (옵션) reduce()를 호출한 배열.
• initialValue (옵션) 콜백의 최초 호출에서 첫 번째 인수에 제공하는 값. initialValue가 없다면 배열의 첫번째 요소를 최초 호출에 사용한다.

slice()는 배열의 시작 인덱스부터 끝 인덱스(끝 인덱스 미포함)까지 얕은복사를 하여 새로운 배열로 반환한다. 새로운 배열을 반환하므로 원본배열은 변화하지 않는다.

구문

arr.slice([begin[, end]])

예시

const names = ['Cecilia', 'Den', 'Sherlock', 'John', 'Microft'];

console.log(names.slice(2)) //[ 'Sherlock', 'John', 'Microft' ] => 시작인덱스 2부터 끝가지 반환

console.log(names.slice(-2)) // [ 'John', 'Microft' ] => 배열끝에서 요소 2개 반환

console.log(names.slice(5)) // [] => 원본 배열의 길이보다 길어서 빈 배열 반환

console.log(names.slice(2,4)) //[ 'Sherlock', 'John' ] => 시작인덱스2부터 인덱스4전까지(=인덱스3) 반환

// const newNames = names.slice(2,-1) //[ 'Sherlock', 'John' ] => 2번인덱스부터 끝에서 -1
// console.log(newNames) 

원본 배열과 새 배열은 동일한 객체를 참조한다. 그러므로 참조된 객체가 변경되면 새 배열도 참조된 객체에 따라 변경된다.

const names = ['Cecilia', 'Den', 'Sherlock', 'John', 'Microft']; //참조된 배열


const newNames = names.slice(2,4);
console.log(newNames);  //[ 'Sherlock', 'John' ] => 새 배열


// names에서 'Cecilia'를 삭제하면(참조된 배열을 변경하면), 
console.log(newNames);  //[ 'John' ] => 새 배열도 변경된다.

slice()와 splice() 간단비교

slice()와 splice()와 비슷하게 생겨서(?) 헷갈리기도 하는데, 간단하게 비교해보자.

splice(start, deleteCount, addItem)

• start부터 deleteCount개 삭제한다.
• addItem을 추가한다.
• 원본 배열을 수정해서 반환한다.

slice(start, end)

• start부터 end까지 자른다.
• 원본 배열을 얕은 복사해서 새로운 배열로 반환한다.

가장 먼저, 자바스크립트 배열의 요소를 추가 및 삭제 할 수 있는 메서드들을 알아보자.

• 배열 요소 추가 unshift(), push()
• 배열 요소 삭제 shift(), pop()

1. 배열에 요소 추가

unshift()

배열의 처음에 하나 이상의 요소를 추가하고, 배열의 길이를 반환한다.

const users = ['Charles', 'Cecilia', 'Den'];

const totalUsers = users.unshift('Sherlock', 'John'); 


console.log(totalUsers); // 5 => 배열의 길이를 반환한다. 
console.log(users); // ['Sherlock', 'John', 'Charles', 'Cecilia', 'Den'] => Sherlock과 'John'이 배열의 첫부분에 추가되었다.

push()

배열의 마지막에 하나 이상의 요소를 추가하고, 배열의 길이를 반환한다.

const users = ['Charles', 'Cecilia', 'Den'];

const totalUsers = users.push('Sherlock', 'John'); 


console.log(totalUsers); // 5 => 배열의 길이를 반환한다. 
console.log(users); // ['Charles', 'Cecilia', 'Den', 'Sherlock', 'John'] => Sherlock과 'John'이 배열의 마지막에 추가되었다. 

2. 배열의 요소 삭제

shift()

배열의 첫 요소를 제거하고, 제거된 요소를 반환한다.

const users = [ 'Sherlock', 'John', 'Moriarty' ];
const newUsers = users.shift();

console.log(newUsers); // 'Sherlock' => 배열의 첫 번째 요소인 'Sherlock'가 반환된다. 
console.log(users); // [ 'John', 'Moriarty' ]

pop()

배열의 마지막 요소를 제거하고, 제거된 요소를 반환한다.

const users = ['Sherlock', 'John', 'Moriarty'];
const newUsers = users.pop();

console.log(newUsers); // 'Moriarty' => 배열의 마지막에 있는 'Moriarty'가 반환된다. 
console.log(users); // [ 'Sherlock', 'John' ]

cpop()과 shift()로 배열의 요소 모두 제거하기

shift(), pop()이 제거할 요소가 없는 경우 undefined를 반환하는 특성을 이용하여, 아래와 같이 배열의 요소를 모두 제거 할 수 있다.

let names = ["Andrew", "Edward", "Paul", "Chris" ,"John"];

while( (i = names.pop()) !== undefined ) {
  console.log('제거된요소',i);
  console.log('변경된배열', names)
}

//console.log()의 결과 값들
'제거된요소' 'John'
'변경된배열' [ 'Andrew', 'Edward', 'Paul', 'Chris' ]
'제거된요소' 'Chris'
'변경된배열' [ 'Andrew', 'Edward', 'Paul' ]
'제거된요소' 'Paul'
'변경된배열' [ 'Andrew', 'Edward' ]
'제거된요소' 'Edward'
'변경된배열' [ 'Andrew' ]
'제거된요소' 'Andrew'
'변경된배열' []
```![](https://images.velog.io/images/dev_cecy/post/8bc9fab9-8e9c-4e33-ab5e-301fb208c8ad/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%201.53.02.png)

배열의 요소를 삭제, 교체하거나 새로운 요소를 추가하여 기존 배열을 변경한다. 그리고 변경된 배열을 반환한다.

# 구문 array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

배열 중간의 요소 삭제

const totalUsers = users.splice(1,1); //1번 인덱스 요소부터 1개 삭제
console.log(totalUsers); // [ 'Cecilia' ] => 삭제된 요소 반환
console.log(users); // [ 'Charles', 'Den' ] => 변경된 배열 반환

배열의 중간에 요소 추가

const totalUsers = users.splice(1,0, 'Microft'); //1번 인덱스 자리에 'Microft' 추가
console.log(totalUsers); // [] => 빈배열 반환, 삭제된 요소 없음
console.log(users); // [ 'Charles', 'Microft', 'Cecilia', 'Den' ] => 변경된 배열 반환

배열의 중간에 한개 이상의 요소 추가

const totalUsers = users.splice(1,0, 'Microft','Merry'); //1번 인덱스부터 2개 요소 삭제
console.log(totalUsers); // [] => 빈배열 반환, 삭제된 요소 없음
console.log(users); // [ 'Charles', 'Microft', 'Merry', 'Cecilia', 'Den' ] => 1번 인덱스부터 'Microft','Merry' 추가됨.

배열 중간 요소 삭제 후 새로운 요소 추가

const totalUsers = users.splice(1,2, 'Microft'); //1번 인덱스부터 2개 요소 삭제
console.log(totalUsers); // [ 'Cecilia', 'Den' ] => 1,2인덱스 요소 삭제되어 반환
console.log(users); // [ 'Charles', 'Microft' ] => 1번인덱스 자리에 'Microft' 추가됨

slice()와 splice() 간단비교

slice()와 splice()와 비슷하게 생겨서(?) 헷갈리기도 하는데, 간단하게 비교해보자.

splice(start, deleteCount, addItem)

• start부터 deleteCount개 삭제한다.
• addItem을 추가한다.
• 원본 배열을 수정해서 반환한다.

slice(start, end)

• start부터 end까지 자른다.
• 원본 배열을 얕은 복사해서 새로운 배열로 반환한다.

문제

배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다.

예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면

array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요.

제한사항

array의 길이는 1 이상 100 이하입니다. array의 각 원소는 1 이상 100 이하입니다. commands의 길이는 1 이상 50 이하입니다. commands의 각 원소는 길이가 3입니다.

입출력 예

array commands return [1, 5, 2, 6, 3, 7, 4] [[2, 5, 3], [4, 4, 1], [1, 7, 3]] [5, 6, 3]

나의 풀이

첫 시도에는 테스트 2번이 실패로 나왔는데 .sort()로만 적었기때문이였다. sort()에 관한 MDN문서를 보면 정식 구문은 arr.sort([compareFunction])으로, compareFunction을 입력하지 않으면 각 문자의 유니 코드 코드 포인트 값에 따라 정렬된다고 한다. 그러므로 확실하게 해주기 위해 .sort(function(a, b) { return a - b; })로 코드를 수정해 주었다. 그렇게 통과 !

function solution(array, commands) {
  var answer = [];

  for(let i =0; i<commands.length; i++){
    const sortedArray = array.slice(commands[i][0]-1, commands[i][1])
    sortedArray.sort(function(a, b) {
  return a - b;
})
    answer.push(sortedArray[commands[i][2]-1])
  }

    return answer;
}

다른분의 풀이 1

비구조화 할당을 통해 코드를 가독성있게 만든 부분이 인상적이였다.

const [sPosition, ePosition, position] = command;

function solution(array, commands) {
    return commands.map(command => {
        const [sPosition, ePosition, position] = command
        const newArray = array
            .filter((value, fIndex) => fIndex >= sPosition - 1 && fIndex <= ePosition - 1)
            .sort((a,b) => a - b)    

        return newArray[position - 1]
    })
}

다른분의 풀이 2

const 에 할당하지 않고 return 문으로 간결하게 코드를 작성해보자라고 다시 한번 생각할 수 있게 만들어준 코드.

다음 문제에는 꼭 실천해보자.

function solution(array, commands) {
    return commands.map(v => {
        return array.slice(v[0] - 1, v[1]).sort((a, b) => a - b).slice(v[2] - 1, v[2])[0];
    });
}

문제

스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장합니다.

예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다.

종류    이름
얼굴    동그란 안경, 검정 선글라스
상의    파란색 티셔츠
하의    청바지
겉옷    긴 코트

스파이가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 return 하도록 solution 함수를 작성해주세요.

제한사항

clothes의 각 행은 [의상의 이름, 의상의 종류]로 이루어져 있습니다. 스파이가 가진 의상의 수는 1개 이상 30개 이하입니다. 같은 이름을 가진 의상은 존재하지 않습니다. clothes의 모든 원소는 문자열로 이루어져 있습니다. 모든 문자열의 길이는 1 이상 20 이하인 자연수이고 알파벳 소문자 또는 ‘_’ 로만 이루어져 있습니다. 스파이는 하루에 최소 한 개의 의상은 입습니다.

입출력 예

clothes    return
[[“yellowhat”, “headgear”], [“bluesunglasses”, “eyewear”], [“green_turban”, “headgear”]]    5
[[“crowmask”, “face”], [“bluesunglasses”, “face”], [“smoky_makeup”, “face”]]    3

나의 풀이 1

reduce()를 통해 의상 타입의 중복값이 몇개인지 구했다. 해시문제 첫번째에서 배운 자료구조를 이용해보고자 그 중복값을 Map으로 만들어줬다. 의상의 타입이 모두 같은 경우는 배열의 길이를 반환했다. 그 외의 경우는 (의상1x의상2x …의상n) + (의상1x의상2 …의상n)의 식을 이용해서 총 경우의 수를 반환했다.

function solution(clothes) {
   let answer;

   const result = clothes.reduce((accu,curr)=> {  // 1번
      accu.set(curr[1], (accu.get(curr[1])||0) +1);
       return accu;
    },new Map());  // 2번


   if(result.size === 1){ //3번
      answer = clothes.length
   } else {
     let sum=0;
     let square =1;
     for (let [key, value] of result) {
       sum = sum +result.get(key) 
       square = square*value
   }

    answer = sum+square
  }
  return answer
}

나의 풀이 2

위와 같이 풀고나니 첫 2가지 테스트 케이스는 통과했지만, 실제 채점에서는 통과되지 않는 테스트 케이스가 있었다. 살펴보니 경우의 수를 구하는 식이 범용되지 않는것 같았다. 그래서 ((의상1+1)*..(의상n+1))-1로 식만 바꿔보니 통과되었다🎉

function solution(clothes) {
     let answer;

     const result = clothes.reduce((accu,curr)=> {
      accu.set(curr[1], (accu.get(curr[1])||0) +1) ;
       return accu;
      },new Map());


     if(result.size === 1){
       answer = clothes.length
     } else {
      let initial=1;  // ((의상1+1)*..(의상n+1))-1로 경우의 수를 구하는 식을 변경해주었다. 
      for (let [key, value] of result) {
       initial = initial * (value+1) 
       answer = initial-1

      }
    }
   return answer
}

나의 풀이 3

해시 첫번째 문제에서 Map과 Set을 배웠기 때문에 써먹어봐야지! 하는 마음이 있었다. 그래서 의상의 중복값을 구할때 불필요하게 Map을 만들어준것 같았다. 그래서 initialValue에 Map을 제거하고 객체로 설정한 뒤 다시 풀어보았다.

function solution(clothes) {
  let answer;
 const newObject =  clothes.reduce((a,b)=> {
  a[b[1]] = (a[b[1]] || 0)+1;
    return a
},{});
 const test = Object.values(newObject)
 const result = test.reduce((c,d)=>{
  return c*(d+1)
},1)
  return answer = result -1
}

다른분의 풀이

배운점🙋🏻‍♀️

변수선언으로 값을 할당해서 쓰지않고 바로 return하여 그 값을 쓰는 방식도 생각해 볼 수 있다. Object.values(object)을 통해서 열거가능한 값을 배열로 리턴 할 수 있다.

function solution(clothes) {
  return Object.values(clothes.reduce((a,b)=> {
    a[b[1]] = (a[b[1]] || 0)+1;
      return a;
  },{})).reduce((c,d)=>{
    return (c*(d+1));
  },1)-1
}

풀었던 코드를 블로그로 옮기면서 다시 읽어보니 변수나 메소드 명을 제대로 지어주지 않은 것이 눈에 보였다. 연습에도 변수명 제대로 쓸것!🙆🏻‍♀️