타닥타닥 개발자의 일상

connection error: MongoServerSelectionError: connect ECONNREFUSED ::1:27017 에러해결

NomadHaven — Wed, 8 May 2024 10:07:17 +0900

app.js 파일에서 아래와 같은 코드로 mongoose와 mongodb 서버를 연결하려 했다.

코드 출처: https://github.com/Colt/YelpCamp/blob/c12b6ca9576b48b579bc304f701ebb71d6f9879a/app.js#L7

mongoose.connect('mongodb://localhost:27017/yelp-camp', {
    useNewUrlParser: true,
    useCreateIndex: true,
    useUnifiedTopology: true
});

그러니까 이런 오류가 나왔다.

connection error: MongoServerSelectionError: connect ECONNREFUSED ::1:27017
    at EventTarget.<anonymous> (C:\Program Files\Web Developer Bootcamp\Web-Developer-Bootcamp\section39-YelpCamp\node_modules\mongodb\lib\sdam\topology.js:289:34)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:741:20)
    at EventTarget.dispatchEvent (node:internal/event_target:683:26)
    at abortSignal (node:internal/abort_controller:368:10)
    at TimeoutController.abort (node:internal/abort_controller:402:5)
    at Timeout.<anonymous> (C:\Program Files\Web Developer Bootcamp\Web-Developer-Bootcamp\section39-YelpCamp\node_modules\mongodb\lib\utils.js:976:92)
    at listOnTimeout (node:internal/timers:569:17)
    at process.processTimers (node:internal/timers:512:7) {
  reason: TopologyDescription {
    type: 'Unknown',
    servers: Map(1) { 'localhost:27017' => [ServerDescription] },
    stale: false,
    compatible: true,
    heartbeatFrequencyMS: 10000,
    localThresholdMS: 15,
    setName: null,
    maxElectionId: null,
    maxSetVersion: null,
    commonWireVersion: 0,
    logicalSessionTimeoutMinutes: null
  },
  code: undefined,
  [Symbol(errorLabels)]: Set(0) {},
  [cause]: MongoNetworkError: connect ECONNREFUSED ::1:27017
      at connectionFailureError (C:\Program Files\Web Developer Bootcamp\Web-Developer-Bootcamp\section39-YelpCamp\node_modules\mongodb\lib\cmap\connect.js:353:20)
      at Socket.<anonymous> (C:\Program Files\Web Developer Bootcamp\Web-Developer-Bootcamp\section39-YelpCamp\node_modules\mongodb\lib\cmap\connect.js:268:44)
      at Object.onceWrapper (node:events:629:26)
      at Socket.emit (node:events:514:28)
      at emitErrorNT (node:internal/streams/destroy:151:8)
      at emitErrorCloseNT (node:internal/streams/destroy:116:3)
      at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
    [Symbol(errorLabels)]: Set(1) { 'ResetPool' },
    [cause]: Error: connect ECONNREFUSED ::1:27017
        at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16) {
      errno: -4078,
      code: 'ECONNREFUSED',
      syscall: 'connect',
      address: '::1',
      port: 27017
    }
  }
}
C:\Program Files\Web Developer Bootcamp\Web-Developer-Bootcamp\section39-YelpCamp\node_modules\mongoose\lib\connection.js:875
    err = new ServerSelectionError();
          ^

MongooseServerSelectionError: connect ECONNREFUSED ::1:27017
    at _handleConnectionErrors (C:\Program Files\Web Developer Bootcamp\Web-Developer-Bootcamp\section39-YelpCamp\node_modules\mongoose\lib\connection.js:875:11)
    at NativeConnection.openUri (C:\Program Files\Web Developer Bootcamp\Web-Developer-Bootcamp\section39-YelpCamp\node_modules\mongoose\lib\connection.js:826:11)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:538:9)
    at process.processTimers (node:internal/timers:512:7) {
  reason: TopologyDescription {
    type: 'Unknown',
    servers: Map(1) {
      'localhost:27017' => ServerDescription {
        address: 'localhost:27017',
        type: 'Unknown',
        hosts: [],
        passives: [],
        arbiters: [],
        tags: {},
        minWireVersion: 0,
        maxWireVersion: 0,
        roundTripTime: -1,
        lastUpdateTime: 5756880,
        lastWriteDate: 0,
        error: MongoNetworkError: connect ECONNREFUSED ::1:27017
            at connectionFailureError (C:\Program Files\Web Developer Bootcamp\Web-Developer-Bootcamp\section39-YelpCamp\node_modules\mongodb\lib\cmap\connect.js:353:20)
            at Socket.<anonymous> (C:\Program Files\Web Developer Bootcamp\Web-Developer-Bootcamp\section39-YelpCamp\node_modules\mongodb\lib\cmap\connect.js:268:44)
            at Object.onceWrapper (node:events:629:26)
            at Socket.emit (node:events:514:28)
            at emitErrorNT (node:internal/streams/destroy:151:8)
            at emitErrorCloseNT (node:internal/streams/destroy:116:3)
            at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
          [Symbol(errorLabels)]: Set(1) { 'ResetPool' },
          [cause]: Error: connect ECONNREFUSED ::1:27017
              at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16) {
            errno: -4078,
            code: 'ECONNREFUSED',
            syscall: 'connect',
            address: '::1',
            port: 27017
          }
        },
        topologyVersion: null,
        setName: null,
        setVersion: null,
        electionId: null,
        logicalSessionTimeoutMinutes: null,
        primary: null,
        me: null,
        '$clusterTime': null
      }
    },
    stale: false,
    compatible: true,
    heartbeatFrequencyMS: 10000,
    localThresholdMS: 15,
    setName: null,
    maxElectionId: null,
    maxSetVersion: null,
    commonWireVersion: 0,
    logicalSessionTimeoutMinutes: null
  },
  code: undefined
}

그래서 몽구스와 mongodb를 연결하는 코드에서 주소를 아래와 같이 바꿨다.

mongoose.connect("mongodb://127.0.0.1:27017/yelp-camp", {
  useNewUrlParser: true,
  // useCreateIndex: true,
  useUnifiedTopology: true,
});

그러니까 잘 연결된다

윈도우에서 MongoDB, Mongosh 설치. Mongoose 이용해서 Node 환경에서 JS 파일로 데이터 삽입하기

NomadHaven — Tue, 5 Mar 2024 11:24:06 +0900

1. MongoDB 를 윈도우에서 설치한다.

https://www.youtube.com/watch?si=VdpwP_r8PRZJOupG&v=MCpbfYvvoPY&feature=youtu.be

위의 튜토리얼을 참고하면 되는데,

참고해야할 부분은

1. 몽고디비 인스톨시에 설정

2. 환경 변수 설정하고 몽고 디비 커맨드 환경에서 바로 호출

3. 커맨드 창에서 mongod 입력하고 서버 잘 구동되는지 확인

참고로 3번 부분에서 멋대로 커맨드창을 닫기 하면 안된다. ctrl+C를 통해서 안정적으로 서버를 종료한뒤 커맨드 창을 닫아야 한다. 이 절차 없이 커맨드 창을 닫았다가, 몽고가 비정상적 서버종료로 인식해서 프로그램에 lock을 거는 경우가 생긴다. lock이 걸리면 몽고 서버 자체에 연결 안되는 오류가 생겨서 골치 아파진다. 혹자는 .lock 파일을 삭제하면 된다고 하지만.. 본인 같은 경우에는 그냥 몽고를 삭제하고 다시 깔아서 오류를 해결했다.

여기 까지다. 이후에 파워쉘 추가로 하나 더 켜서 mongo입력하고 몽고db 서버에 연결하는 부분 부터는

오류가 난다.

이후에 mongodb가 업데이트 되어서 mongo라는 명령어가 먹히지 않게 되었기 때문이다.

이제 mongosh라는 커맨드를 써서 몽고 서버와 연결해야 하는데, 이때는 추가로 설치 및 환경변수 구성이 필요하다.

그부분 역시 다행히 mongodb 사이트에 나와 있다.

https://www.mongodb.com/docs/mongodb-shell/install/

Install mongosh — MongoDB Shell

Docs Home → MongoDB Shell To use the MongoDB Shell, you must have a MongoDB deployment to connect to.You can use the MongoDB Shell to connect to MongoDB version 4.2 or greater.You can install MongoDB Shell 2.0.0 on these operating systems:Operating Syste

www.mongodb.com

상기의 사이트에서 mongosh 설치 방법을 참고하면 된다.

설치 방법은 mongodb 랑 거의 유사하다.

위의 mongosh 까지 설치 완료한다면

파워쉘에서 mongodb 명령어를 입력해 몽고db 서버가 잘 작동하는지 확인한다.

잘 작동한다면 새로 파워쉘 창을 켜서 mongosh 명령어를 입력한다.

mongosh 명령어를 통해 mongodb 서버와 잘 연결이 되었다면 위와 같은 화면이 뜬다.

그렇다면 잘 설치해 놓은 mongodb 서버에,

Node로 로드된 JS 파일을 통해서 데이터를 삽입하는 방법은 무엇일까?

바로 파워쉘 커맨드 창에서 mongodb 서버에 데이터를 삽입하는 방법도 있다. 하지만,

JS 개발 환경에서 JS 파일로 데이터를 삽입하고, JS 환경에서 바로 mongodb 서버에 접속해 데이터를 관리하면 훨씬 편할 것이다.

그러기 위한 도구가 바로 Mongoose라는 도구이다.

mongsoose는 mogodb에 넣고 싶은 자신의 데이터를 모델링해서 데이터 삽입을 도와주는 도구로, 데이터 스키마 생성, 데이터 조회, 삽입, 편집등의 기능도 지원해주는 도구이다.

https://mongoosejs.com/

Mongoose ODM v8.2.1

Let's face it, writing MongoDB validation, casting and business logic boilerplate is a drag. That's why we wrote Mongoose. const mongoose = require('mongoose'); mongoose.connect('mongodb://127.0.0.1:27017/test'); const Cat = mongoose.model('Cat', { name:

mongoosejs.com

몽구스를 이용하기 위해서는 몽구스를 설치부터 해야한다.

터미널을 git-bash 환경으로 설정해 놓고 moogse를 설치하자

npm install mongoose --save

몽구스가 잘 설치되었다면 노드 모듈 디렉토리에서 확인이 가능하다.

또한 본인이 데이터 스키마를 생성하고, 데이터를 삽입할 코드를 작성할 index.js파일을 만들어야 한다.

index.js 파일의 내용은 아래와 같다.

const mongoose = require("mongoose");
// moviceApp 데이터 베이스에 연결. 
//moviceApp 데이터 베이스가 없어도 괜찮다. 이 구문이 만들어 줄것.
mongoose
  .connect("mongodb://127.0.0.1:27017/movieApp")
  .then(() => {
    console.log("CONNECTION OPEN");
  })
  .catch((err) => {
    console.log("OH NO ERROR!");
    console.log(err);
  });

//movieSchema이라는 스키마 생성
const movieSchema = new mongoose.Schema({
  title: String,
  year: Number,
  score: Number,
  rating: String,
});

//Movice라는 class를 생성. 
//model메서드로 생성한 스키마를 클래스와 연결
//파라미터는 클래스 이름, 스키마이름 순으로 적는다.
const Movie = mongoose.model("Movie", movieSchema);

위와 같이 코드를 작성해서 기본적인 몽구스 연결과 스키마 생성 및 스키마와 클래스 연결 설정 같이 마쳤다.

그렇다면 위의 코드를 노드 환경에서 활성화 하려면 어떻게 해야 되는가?

우슨 노드 환경을 활성화해야 한다. 터미널에서 노드 명령어 입력.

node

그 다음 활성화된 node 셸에서

.load index.js

명령어를 입력한다.

* 참고: 최신 버전의 Node.js를 사용하는 경우 JS 파일에서 몽구스 모듈을 가져오고 강의 코드를 실행할 때 .load index.js 명령을 사용하면 버그가 발생할 가능성이 있습니다.

.load index.js명령을 node 셸에 입력하면 const mongoose = require('mongoose');코드 라인이 무한 루프로 출력되는 버그가 발생합니다.

해결 방법:

node 셸에서 .load index.js를 사용하지 말고,

시스템 터미널에서

node -i -e "$(< index.js)

명령을 사용.(node 셸 외부에서, 먼저 디렉터리를 index.js 파일이 있는 폴더로 변경).

이렇게 하면 하나의 명령으로 파일을 로드하여 node 셸을 시작할 수 있고 문제가 해결.

명령을 위에 표시된 대로 정확히 입력해야 한다.

위의 명령어를 실행한 이후에는 노드 셸에서

.load index.js

를 실행해도 오류 없이 잘 실행된다.

만약 index.js 파일이 잘 로드 되었다면

아래와 같이 연결 성공시 출력되도록 설정해 놓은 CONNECTION OPEN이라는 문구가 출력될 것이다.

이후에는 몽구스에서 지정한 문법에 따라 데이터를 삽입하면 된다.

아래는 insertMany()라는 몽구스의 메서드를 이용해서 다수의 데이터를 Moive라는 클래스에 삽입한 코드이다.

이 코드 역시 index.js 파일에 작성되었다.

 Movie.insertMany([
 { title: "Amelie", year: 2001, score: 8.3, rating: "R" },
 { title: "Alien", year: 1979, score: 8.1, rating: "R" },
 { title: "The Iron Giant", year: 1999, score: 7.5, rating: "PG" },
 { title: "Stand By Me", year: 1986, score: 8.6, rating: "R" },
 { title: "Moonrise Kingdom", year: 2012, score: 7.3, rating: "PG-13" },
]).then((data) => {
   console.log("IT WORKED!");
   console.log(data);
 });

데이터가 잘 삽입 되었다면 IT WORKED 라는 구문이 출력된 다음,

삽입된 데이터가 출력되도록 설정한 코드이다.

index.js 파일의 전체코드는 아래와 같은 모습이다.

const mongoose = require("mongoose");
//test 데이터 베이스에 연결. 없어도 괜찮다. 이 구문이 만들어 줄것.
mongoose
  .connect("mongodb://127.0.0.1:27017/movieApp")
  .then(() => {
    console.log("CONNECTION OPEN");
  })
  .catch((err) => {
    console.log("OH NO ERROR!");
    console.log(err);
  });

//스키마 생성
const movieSchema = new mongoose.Schema({
  title: String,
  year: Number,
  score: Number,
  rating: String,
});

//Movice라는 class를 생성. 데이터 베이스, 스키마이름 순으로 적는다.
const Movie = mongoose.model("Movie", movieSchema);



Movie.insertMany([
 { title: "Amelie", year: 2001, score: 8.3, rating: "R" },
 { title: "Alien", year: 1979, score: 8.1, rating: "R" },
 { title: "The Iron Giant", year: 1999, score: 7.5, rating: "PG" },
 { title: "Stand By Me", year: 1986, score: 8.6, rating: "R" },
 { title: "Moonrise Kingdom", year: 2012, score: 7.3, rating: "PG-13" },
 ]).then((data) => {
  console.log("IT WORKED!");
   console.log(data);
 });

위의 코드를 작성 뒤, 노드셸에서 아래의 명령문을 실행하자.

.load index.js

몽고db서버에 잘 연결되어 데이터가 성공적으로 삽입되었다면 터미널에 아래와 같은 결과가 출력된다.

> .load index.js
const mongoose = require("mongoose");
//test 데이터 베이스에 연결. 없어도 괜찮다. 이 구문이 만들어 줄것.
mongoose
  .connect("mongodb://127.0.0.1:27017/movieApp")
    .then(() => {
        console.log("CONNECTION OPEN");
          })
            .catch((err) => {
                console.log("OH NO ERROR!");
                    console.log(err);
                      });

                      //스키마 생성
                      const movieSchema = new mongoose.Schema({
                        title: String,
                          year: Number,
                            score: Number,
                              rating: String,
                              });

                              //Movice라는 class를 생성. 데이터 베이스, 스키마이름 순으로 적는다.
                              const Movie = mongoose.model("Movie", movieSchema);

                              // const amadeus = new Movie({
                              //   title: "Amadeus",
                              //   year: 1986,
                              //   score: 9.2,
                              //   rating: "R",
                              // });

                              // Movie.insertMany([
                              //   { title: "Amelie", year: 2001, score: 8.3, rating: "R" },
                              //   { title: "Alien", year: 1979, score: 8.1, rating: "R" },
                              //   { title: "The Iron Giant", year: 1999, score: 7.5, rating: "PG" },
                              //   { title: "Stand By Me", year: 1986, score: 8.6, rating: "R" },
                              //   { title: "Moonrise Kingdom", year: 2012, score: 7.3, rating: "PG-13" },
                              // ]).then((data) => {
                              //   console.log("IT WORKED!");
                              //   console.log(data);
                              // });

Promise {
  <pending>,
  [Symbol(async_id_symbol)]: 152,
  [Symbol(trigger_async_id_symbol)]: 151
}
> CONNECTION OPEN
> Movie.find({}).then(data =>console.log(data))
Promise {
  <pending>,
  [Symbol(async_id_symbol)]: 835,
  [Symbol(trigger_async_id_symbol)]: 831
}
> [
  {
    _id: new ObjectId('65e57d283c40e2d5368b0471'),
    title: 'Amadeus',
    year: 1986,
    score: 9.5,
    rating: 'R',
    __v: 0
  },
  {
    _id: new ObjectId('65e663502e7a641811485222'),
    title: 'Amelie',
    year: 2001,
    score: 8.3,
    rating: 'R',
    __v: 0
  },
  {
    _id: new ObjectId('65e663502e7a641811485223'),
    title: 'Alien',
    year: 1979,
    score: 8.1,
    rating: 'R',
    __v: 0
  },
  {
    _id: new ObjectId('65e663502e7a641811485224'),
    title: 'The Iron Giant',
    year: 1999,
    score: 7.5,
    rating: 'PG',
    __v: 0
  },
  {
    _id: new ObjectId('65e663502e7a641811485225'),
    title: 'Stand By Me',
    year: 1986,
    score: 8.6,
    rating: 'R',
    __v: 0
  },
  {
    _id: new ObjectId('65e663502e7a641811485226'),
    title: 'Moonrise Kingdom',
    year: 2012,
    score: 7.3,
    rating: 'PG-13',
    __v: 0
  }
]
> Movie.find({rating:'PG-13'}).then(data =>console.log(data))
Promise {
  <pending>,
  [Symbol(async_id_symbol)]: 1195,
  [Symbol(trigger_async_id_symbol)]: 1191
}
> [
  {
    _id: new ObjectId('65e663502e7a641811485226'),
    title: 'Moonrise Kingdom',
    year: 2012,
    score: 7.3,
    rating: 'PG-13',
    __v: 0
  }
]
>

REST vs RESTFUL 는 무엇인가? 둘의 미묘한 차이점

NomadHaven — Sun, 3 Mar 2024 16:19:09 +0900

REST(Representational State Transfer)와 RESTful은 웹 서비스 아키텍처를 설계하는 데 사용되는 용어로, 서로 유사하지만 약간의 차이가 있다.

REST(Representational State Transfer)

-정의: REST는 자원(URI), 행위(HTTP 메서드), 표현(Representations)으로 구성된 아키텍처적인 스타일
- 특징:
  1. 자원은 URI로 표현되며, 각 자원은 고유한 식별자를 보유
  2. 행위는 HTTP 메서드(GET, POST, PUT, DELETE)를 이용하여 수행.
  3. 표현은 클라이언트가 자원의 상태를 나타내는 방식.

RESTful:
- 정의: RESTful은 REST 아키텍처를 따르는 웹 서비스다. 즉, REST 원칙을 준수하여 구현된 웹 서비스를 RESTful이라고 한다.
- 특징:
  1. REST의 원칙을 따르며, 자원, 행위, 표현을 활용합니다.
  2. URI는 명사(자원)를 사용하고, HTTP 메서드는 동사(행위)를 나타냅니다.
  3. 클라이언트와 서버 간의 상태는 필요 없고, 요청이 완전히 독립적입니다.

REST와 RESTful의 차이:

REST는 아키텍처 스타일을 나타내는 개념이고, RESTful은 이를 실제로 구현한 웹 서비스를 의미.

RESTful은 REST 원칙을 따르지만, 엄격한 규칙을 따르지 않을 수도 있다.

- REST:
  - 단순한 서비스나 작은 규모의 프로젝트에서 사용할 때 간편하게 적용.
  - 표준에 엄격하게 따를 필요가 없거나, 서비스의 요구사항이 RESTful을 엄격히 따르지 않아도 되는 경우에 사용.

- RESTful:
  - 대규모의 복잡한 프로젝트나 기업 수준의 서비스에서 사용.
  - 표준화된 URI 및 HTTP 메서드 사용으로 인해 간편하게 개발 및 유지보수가 가능.
  - 자체적으로 규칙을 가지고 있어 개발자들 사이의 협업이 용이.

종합적으로, 간단한 서비스에서는 REST를 적용하여 빠르게 개발할 수 있고, 대규모이거나 표준화가 필요한 프로젝트에서는 RESTful을 적용하여 일관성 있고 효율적인 웹 서비스를 구현.

오버라이드 VS 오버로드의 차이점 알아보기

NomadHaven — Sun, 3 Mar 2024 16:12:25 +0900

오버라이드(Override)와 오버로드(Overload)는 객체지향 프로그래밍에서 다형성(Polymorphism)을 구현하는 방법 중 두 가지.

1.오버라이드(Override)
   - 오버라이드는 상위 클래스(부모 클래스)에서 이미 정의된 메서드를 하위 클래스(자식 클래스)에서 동일한 시그니처(메서드 이름, 매개변수 유형 및 개수)로 다시 정의하는 것을 의미.
   - 오버라이드를 사용하면 하위 클래스는 상위 클래스의 메서드를 자신의 필요에 맞게 재정의 가능.
   - 오버라이드된 메서드는 상위 클래스의 메서드 대신 호출되며, 다형성을 통해 동일한 메서드 호출 시에도 실제 객체의 타입에 따라 다른 동작이 수행.

class Animal:
    def make_sound(self):
        return "Some generic sound"

class Dog(Animal):
    def make_sound(self):
        return "Bark bark!"

class Cat(Animal):
    def make_sound(self):
        return "Meow meow!"

# 사용 예시
dog = Dog()
cat = Cat()

print(dog.make_sound())  # "Bark bark!"
print(cat.make_sound())  # "Meow meow!"

2.오버로드(Overload)
   - 오버로드는 같은 클래스 내에서 메서드의 이름은 같지만 매개변수의 유형, 개수, 또는 순서가 다른 여러 버전을 정의하는 것.
   - 오버로드된 메서드는 메서드 이름이 같지만 시그니처가 다르므로 컴파일러가 인자의 유형을 기반으로 어떤 메서드를 호출할지 결정.
   - 오버로드된 메서드는 같은 이름을 사용하며 다양한 매개변수를 받아들일 수 있어, 코드의 가독성과 유연성을 높이는 데 사용.

class Calculator:
    def add(self, a, b):
        return a + b

    def add(self, a, b, c):
        return a + b + c

# 사용 예시
calculator = Calculator()
result1 = calculator.add(1, 2)      # 에러, 메서드 오버로드가 지원되지 않음
result2 = calculator.add(1, 2, 3)   # 정상 동작

오버라이드는 상속 관계에서 메서드를 재정의하고 다형성을 구현하는 데 사용,

오버로드는 하나의 클래스 내에서 동일한 이름의 메서드를 다양한 매개변수 조합으로 정의하여 유연성을 높이는 데 사용.

클래스 vs 인터페이스 vs 추상 메서드 는 언제 어떻게 사용하는가?

NomadHaven — Sun, 3 Mar 2024 16:08:48 +0900

클래스와 인터페이스는 객체지향 프로그래밍에서 다른 역할을 수행하며, 사용하는 상황에 따라 선택된다.

클래스(Class)란?
   - 클래스는 객체지향 프로그래밍에서 데이터와 메서드(함수)의 모음.
   - 객체의 설계도 혹은 틀로, 객체를 생성하기 위한 모든 특징과 행위를 정의.
   - 클래스는 구체적인 객체를 생성하기 위한 템플릿이며, 객체의 상태(속성)와 동작(메서드)을 정의.

class Car:
    def __init__(self, make, model):
        self.make = make
        self.model = model

    def start_engine(self):
        print("Engine started")

추상 클래스란?

-추상 클래스는 일부 메서드의 구현을 하지 않은 추상 메서드를 포함할 수 있는 클래스.

-추상 메서드는 하위 클래스에서 반드시 구현.

-직접 객체를 생성할 수 없으며, 상속을 통해 하위 클래스에서 추상 메서드를 구현한 후에 해당 하위 클래스의 객체 생성 가

from abc import ABC, abstractmethod

class Shape(ABC):
    @abstractmethod
    def area(self):
        pass

class Circle(Shape):
    def __init__(self, radius):
        self.radius = radius

    def area(self):
        return 3.14 * self.radius * self.radius

인터페이스(Interface)란?
   - 인터페이스는 일종의 추상 클래스로, 모든 메서드가 추상 메서드인 특별한 형태의 클래스.
   - 인터페이스는 객체의 동작 방식을 정의하지만, 실제 동작 내용은 제공하지 않는다.
   - 여러 클래스가 동일한 동작 방식을 가져야 하는 경우 인터페이스를 사용하여 일관성을 유지한다.
   - Java와 같은 언어에서는 인터페이스를 사용하여 다중 상속을 지원.

from abc import ABC, abstractmethod

class Flyable(ABC):
    @abstractmethod
    def fly(self):
        pass

class Bird(Flyable):
    def fly(self):
        print("Bird is flying")

추상 메서드(Abstract Method)란?
   - 추상 메서드는 메서드의 선언만 있고 구현이 없는 메서드.
   - 추상 메서드는 해당 메서드를 가지는 클래스가 반드시 구현해한다.
   - 추상 메서드는 일반적으로 추상 클래스나 인터페이스에서 정의.
   - 추상 메서드를 포함하는 클래스는 반드시 추상 클래스로 선언.

클래스는 객체의 구체적인 모습을 정의.

인터페이스는 객체의 동작 방식을 정의.

추상 메서드는 구현이 없는 메서드를 의미.

이들을 적절히 조합하여 객체지향 프로그래밍에서 유연하고 확장 가능한 구조를 설계한다.

클래스(Class)의 특징

1.구현 가능한 메서드 포함
   - 클래스는 데이터와 그 데이터를 처리하는 메서드(동작)를 함께 포함
   - 클래스는 구체적인 객체의 속성과 행동을 정의하며, 객체를 생성하는 데 사용.

2. 단일 상속
   - 대부분의 언어에서 클래스는 단일 상속만을 지원. 즉, 한 클래스는 하나의 클래스만을 직접적으로 상속 받는다.

3.인스턴스 생성 가능
   - 클래스는 객체를 생성하여 해당 객체의 인스턴스를 만들 수 있다.

4.일반 메서드와 속성을 가진다.
   - 클래스는 일반 메서드와 속성을 가질 수 있어, 객체의 특정 동작 이외의 일반적인 기능도 포함 가능하다.

인터페이스(Interface)의 특징

1.추상 메서드만 포함
   - 인터페이스는 모든 메서드가 추상 메서드로 이루어져 있다. 즉, 메서드의 선언만 있고 구현은 없다.

2. 다중 상속
   - 인터페이스는 다중 상속을 지원하므로, 여러 인터페이스를 동시에 구현할 수 있습니다.

3.인스턴스 생성 불가
   - 인터페이스는 객체를 직접적으로 생성할 수 없으며, 해당 인터페이스를 구현하는 클래스에서 구현해야 한다.

4.구현 강제:
   - 클래스가 인터페이스를 구현한다면, 해당 클래스는 인터페이스에서 정의한 모든 메서드를 반드시 구현해야 한다.

추상 클래스의(Abstract class) 특징

1.추상 메서드 포함

- 하나 이상의 추상 메서드를 포함. 추상 메서드는 본체(구현)가 없고 선언 존재.

- 하위 클래스에서는 추상 메서드를 반드시 구현.

2. 인스턴스 생성 불가:

- 추상 클래스로 직접 객체(인스턴스)를 생성 불가. 주로 상속을 통해 하위 클래스에서 구현을 강제화하는 용도로 사용.

3. 일반 메서드 포함:

- 추상 클래스는 추상 메서드뿐만 아니라 일반 메서드도 포함.

4.다중 상속 가능:

- 추상 클래스는 다른 클래스와 마찬가지로 다중 상속이 가능. 여러 추상 클래스를 상속하여 하나의 클래스에서 여러 기능을 동시에 활용.

클래스와 인스턴스는 언제 사용하는가

*클래스 사용 시
  - 구체적인 객체를 표현하고자 할 때.
  - 단일 상속만 필요한 경우.
  - 객체의 상태와 동작을 함께 다룰 필요가 있는 경우.

*인터페이스 사용 시
  - 다중 상속이 필요한 경우.
  - 여러 클래스 간에 공통적인 동작을 정의하고 싶을 때.
  - 클래스 간의 결합도를 낮추고 유연성을 높이고자 할 때.
  - 특정 동작을 보장하고 강제하고자 할 때.

*추상 클래스 사용 시

-객체들 간의 공통된 특성과 동작이 필요할 때

-하위 클래스에서 특정 메서드의 구현을 강제화할 때

-코드의 일관성과 유지보수성을 높일 때

-다중 상속을 활용할 때

자바스크립트, Express와 ejs를 이용해서 만드는 댓글 등록 및 수정 페이지

NomadHaven — Fri, 23 Feb 2024 11:30:26 +0900

페이지의 기본 구조

1. 전체 댓글을 볼수 있는 목록 페이지

2. 전체 댓글목록에서 detail 클릭 클릭하면 넘어가는 특정 댓글 페이지 (댓글 수정 및 삭제 가능)

3. 특정 댓글 수정페이지

4.새로운 댓글 작성 페이지

이 페이지는 서버를 구동하기 위해서 express 패키지를 사용하였으며 템플릿으로는 ejs를 사용했다.

또한 유니크한 아이디를 만들기 위해서 uuid 패키지, 특정조건에서 Restful 명령어를 실행하기 위한 method-overide 패키지도 사용했다.

package.json 파일

{
  "name": "reststudy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ejs": "^3.1.9",
    "express": "^4.18.2",
    "method-override": "^3.0.0",
    "uuid": "^9.0.1"
  }
}

위의 패키지 내용을 복사 한뒤

npm install

명령을 실행하면 동일한 노드 패키지 조건으로 설치 환경을 구성할 수 있다,

해당 페이지의 디렉토리 구조는 하기와 같다.

페이지 구동에 필요한 패키지가 설치된 node_modules 디렉토리,

특정 경로마다 반환할 페이지가 저장된 views 디렉토리

전체 페이지 경로를 설정하는 index.js 파일이 있다.

해당 페이지가 어떠한 패키지의 기능을 사용하는지, 어떤 경로에서 어떤 페이지를 반환하는지, 어떤 기능에서 어떤 Restful 요청을 사용하는지 등의 전체적인 흐름을 파악하고 싶다면?

RestStudty 디렉토리 바로 하단에 있는 index.js 파일을 확인하면 된다.

파랗게 표시한 이 파일

RESTful 문법 정하기

GET/comments- 모든 코멘트 리스트업
POST/comments- 새로운 코멘트 등록
GET/comments/:id - id 이용해서 하나의 코멘트만 가져오기
PATCH/comments/:id - 하나의 코멘트를 업데이트
DELETE/comments?/:id - 하나의 코멘트를 삭제

index.js 파일의 코드

//required는 특정 파일이나 패키지의 모듈을 불러와 현재 파일에서 사용할 수 있게 해주는 문법.
const path = require("path");
//uuid() 메소드를 실행하면 universally unique한 아이디를 만들 수 있다.
const { v4: uuid } = require("uuid");
//서버 구동을 위해 express 패키지 사용
const express = require("express");
const app = express();

//use는 어떤 방식의 요청이든 매번 실행되는 함수를 의미한다.
//Form 데이터를 POST 요청 BODY로 파싱하는 미들웨어
app.use(express.urlencoded({ extended: true }));
//들어오는 POST 요청(req)의 BODY를 JSON 형식으로 파싱하는 미들웨어
app.use(express.json());
//fake PUT/PATCH/DELETE 요청을 수행하기 위해 사용되는 패키지 methodOVerried
app.use(methodOverride("_method"));
//VIEW 폴더의 경로와 EJS 템플릿 설정
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");

//화면에 보일 더미 데이터를 배열로 생성한다.
let comments = [
  {
    id: uuid(),
    username: "Todd",
    comment: "lol that is so funny!",
  },
  {
    id: uuid(),
    username: "Skyler",
    comment: "I like to go birdwatching with my dog",
  },
  {
    id: uuid(),
    username: "Sk8erBoi",
    comment: "Plz delete your account, Todd",
  },
  {
    id: uuid(),
    username: "onlysayswoof",
    comment: "woof woof woof",
  },
];

//comments 페이지로가면 코멘트 디렉토리의 index 파일을 렌더한다.
//index 페이지는 전체 코멘트의 목록을 보여주는 페이지다.
app.get("/comments", (req, res) => {
  res.render("comments/index", { comments });
});

// comments/new 페이지로 이동해서 새로운 코멘트를 작성하는 폼을 렌더한다
app.get("/comments/new", (req, res) => {
  res.render("comments/new");
});

//새로운 코멘트를 작성해서 작성된 데이터를 POST 리퀘스트로 전송한다.
//POST 리퀘스트가 성공했을시 전체 댓글 목록 페이지로 이동한다.
app.post("/comments", (req, res) => {
  //Post Request로 전달된 내용을 destructure
  const { username, comment } = req.body;
  //destructure 한 data를 comments 배열에 추가
  comments.push({ username, comment, id: uuid() });
  //요청이 성공했을 시 /comments 페이지로 이동
  res.redirect("/comments");
});

// app.get("/comments/:id", (req, res) => {
//   //id는 req의 param으로 넘겨주는 값, 즉 주소창의 파라미터가 id
//   const { id } = req.params;
//   //comments 배열에 있는 원소의 id 값이 req에서 요청한 id과 동일한 코멘트를 찾는다
//   const comment = comments.find((c) => c.id === id);
//   res.render("comments/show", { comment });
// });

// comments/show로 이동해서 특정한 id의 댓글을 보여준다.
app.get("/comments/:id", (req, res) => {
  //매개변수로 전달 받은 param을 id에 저장
  const { id } = req.params;
  //특정 id와 일치하는 id를 코멘트 배열에서 검색
  const comment = comments.find((c) => c.id === id);
  //특정 id의 댓글만 보여주는 페이지를 렌더
  res.render("comments/show", { comment });
});

// comments/:id/edit 경로로 이동해 특정한 id의 댓글을 편집하는 폼으로 이동
app.get("/comments/:id/edit", (req, res) => {
  const { id } = req.params;
  const comment = comments.find((c) => c.id === id);
  res.render("comments/edit", { comment });
});

//patch와 put의 차이 : put은 전체 내용을 완전히 새로 교체하는 것이고 
//patch는 부분적으로 수정하는 것
//PATCH 명령을 통해 특정한 댓글을 수정한다
app.patch("/comments/:id", (req, res) => {
  const { id } = req.params;
  //req로 전달되는 코멘트 내용을 새로운 코멘트로서 대입한다.
  const newCommentText = req.body.comment;
  const foundComment = comments.find((c) => c.id === id);
  //id와 일치하는 코멘트를 새로운 코멘트로 수정한다.
  foundComment.comment = newCommentText;
  res.redirect("/comments");
});


//DELETE 명령어를 통해 특정한 댓글을 삭제한다.
app.delete("/comments/:id", (req, res) => {
  const { id } = req.params;
  const foundComment = comments.find((c) => c.id === id);
  //filter를 이용해서 배열에서 id값이 다른 element만 추출
  comments = comments.filter((c) => c.id !== id);
  res.redirect("/comments");
});

app.get("/tacos", (req, res) => {
  res.send("GET /tacos response");
});

app.post("/tacos", (req, res) => {
  //body로 보내진 요청(req)를 meat과 qty라는 변수에 파싱하고
  const { meat, qty } = req.body;
  //아래의 형식으로 응답한다.
  res.send(`OK, here are your ${qty} ${meat} taco(s)`);
});

app.listen(3000, () => {
  console.log("ON PORT 3000");
});

index.js 파일을 통해서 전체적인 페이지의 흐름을 파악했다.

그렇다면 특정 페이지의 구성은 어떻게 할 수 있을까?

상기 코드에 있었던 이 부분이 힌트다.

app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'ejs')

화면에 보여지는 페이지 경로는 views 디렉토리의 경로를 참조하며

화면에 보여지는 템플릿은 ejs를 사용한다는 말이다.

따라서 views 폴더 내부에 있는 html 파일들의 형식은 모두 ejs이다.

우선 전체 코멘트를 반환하는 index.ejs 페이지부터 확인해보자.

index.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Comments Index</title>
  </head>
  <body>
    <h1>Comments</h1>
    <ul>
      <% for (let c of comments){ %>
      <li><%=c.comment%> - <b><%=c.username%></b></li>
      <a href="/comments/<%=c.id%>">details</a>
      <% }%>
    </ul>
    <a href="/comments/new">New Comment</a>
  </body>
</html>

ejs 템플릿 문법인 <% %>, <%= %>를 사용하고 있다.

<% %>는 자바스크립트 코드를 감싸고 있으며

<%= %>는 GET 명령어로 받아온 comments 배열의 element 프로퍼티인 comment, username, id값을 반환하고 있다.

<a href="/comments/<%=c.id%>">details</a>

받아온 특정 id를 a태그의 경로로 입력해서 동적 페이지 이동도 가능하게 한다.

그 다음으로는 특정 아이디의 댓글을 보여주는 show.ejs 페이지를 살펴보자.

show.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Show</title>
  </head>

  <body>
    <h1>Comment id: <%= comment.id %></h1>
    <h2><%=comment.comment %> - <b><%=comment.username %></b></h2>
    <a href="/comments">back to index</a>
    <a href="/comments/<%=comment.id%>/edit">Edit Comment</a>
    <form method="POST" action="/comments/<%= comment.id %>/?_method=DELETE">
      <button>DELETE</button>
    </form>
  </body>
</html>

주목할 점은 form 태그로 DELETE 버튼을 감싸고 있으며, 해당 DELETE버튼을 클릭시 method 패키지를 이용해서 DELTE 명령어를 수행하게 하는 점이다. ?_method=DELETE 명령어를 통해서 버튼을 클릭시 특정 아이디의 댓글이 삭제된다.

다음은 새로운 댓글을 작성하는 form을 보여주는 new.ejs 페이지를 살펴보자.

new.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>New Comment</title>
  </head>
  <body>
    <h1>Make a new comment</h1>
    <form action="/comments" method="post">
      <section>
        <label for="username">Enter username:</label>
        <input
          type="text"
          id="username"
          placeholder="username"
          name="username"
        />
      </section>
      <section>
        <label for="comment">Comment Text</label>
        <br />
        <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
      </section>
      <button>Submit</button>
    </form>
    <a href="/comments">Back to Index</a>
  </body>
</html>

눈여겨 볼 점은 form 태그는 원래 get 명령 밖에 수행하지 못한다는 점이다. 하지만 method="post"를 이용했다. 이는 method override 패키지를 통해 post 명령으로 form 데이터를 전송할 수 있게 한다.

다음은 특정 댓글을 수정하는 edit.ejs 페이지를 살펴보자.

edit.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Edit</title>
  </head>
  <body>
    <h1>Edit</h1>
    <form method="post" action="/comments/<%=comment.id%>?_method=PATCH">
      <textarea name="comment" id="" cols="30" rows="10">
        <%= comment.comment %>
      </textarea>
      <button>Save</button>
    </form>
  </body>
</html>

이 페이지 역시 new.ejs 페이지와 마찬가지로, method override 패키지를 이용했다.

이를 통해 GET 명령만 수행하는 form에게 POST 명령을 수행하도록 설정한게 보인다.

참고로 method-override 패키지를 설치하기 위해선 아래의 명령문을 입력하면 된다.

npm i method-override

제법 간단한 페이지로 보이지만,

이러한 페이지도 세부적인 디렉토리 구성과 추가 패키지 설치가 필요함을 알 수 있다.

또한 페이지 이동에 필요한 RESTful 문법을 잘 설정해야지 페이지 이동시에 오류 없이 이동할 수 있다.

해당 페이지에서 다뤄진 기초적인 부분을 잘 이해하고 사용한다면 후에 고차적인 페이지를 구축할때도 큰 도움이 될 듯하다.

[JS/자바스크립트 ] Javascript JS closure의 사용예시로 closure 이해하기

NomadHaven — Fri, 13 Oct 2023 16:44:37 +0900

자바스크립트의 closure란 개념은 무엇일까?

Mdn에서 clousre의 개념을 찾아보면 이렇다.

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

클로저(Closure)란 함수와 그 함수가 선언될 당시의 렉시컬 환경(Lexical Environment)과의 조합으로, 외부 함수의 스코프에 대한 접근을 내부 함수에서 가능하게 하는 것을 의미합니다. 다시 말해서, 클로저는 내부 함수에서 외부 함수의 범위에 접근할 수 있도록 해주는 것입니다. 자바스크립트에서는 함수가 생성될 때마다 클로저가 생성됩니다.

라는 gpt의 설명을 들어도 한번에 이해가 되지 않는다.

누군가 closure를 이해하기 위해 좀더 쉬운 예시를 든적이 있다.

"closure는 어디든지 함수를 넣고 다니는 백팩이다. 이 백팩은 함수가 생성된 곳에서 보여지는 모든 변수가 담겨있다."

즉 closure란 기능을 통해서 함수의 변수에 접근할 수 있다는 말정도로 이해하면 될 듯하다.

그러면 clousre란 기능을 좀더 쉽게 이해하기 위해서 closure가 나타나는 코드를 살펴보도록 하자.

let f;

const g = function(){
  const a = 23;
  f = function(){
    console.log(a *2);
  }
}

const h = function(){
  const b = 777;
  f = function(){
    console.log(b *2);
  }
}


g();
f();
console.dir(f); 
h();
f(); 
console.dir(f);

위의 함수에서 g함수가 가장 첫번째로 호출 되었다.

g함수는 이미 호출되었고 callstack에서 사라졌지만, 두번째로 호출된 f함수의 출력 결과를 보면, 46이란 결과가 출력된다.

f함수에는 g함수의 변수 a에 2를 곱하는 함수가 대입되었다.

어떻게 f함수는 콜스택에서 사라진 g함수의 변수 a=23에 접근해서, 2를 곱하고 46이란 결과를 출력할 수 있었을까?

바로 위에서 언급한 closure 덕분이다.

이미 콜스택에서 g함수가 사라졌어도, closure를 통해서 g함수의 변수에 접근이 가능했기 때문에 a=23에 접근할 수 있었던 것이다.

세번째로 출력되는 console.dir(f) 를 출력해보면,

f함수가 closure를 이용해 g함수의 변수 a에 접근했음을 알수 있다.

그 다음, 4번째로 h함수가 출력되었다. 이로 인해 f함수에는 h함수의 변수 b에 2를 곱하는 함수가 대입되었다.

그렇다면 5번째로 다시 f함수를 출력한다면 어떻게 될까? 이때도 당연히 closure가 적용된다.

이미 h함수가 콜스택에서 사라졌지만, closure를 통해서 h함수의 변수 b=777에 접근이 가능했으며, 777에 2를 곱한 1544가 출력된다.

가장 마지막에 console.dir(f)를 다시 출력해보면, 이전과 달리 closoure가 h함수에 적용된 것을 확인 할 수 있다.

이를 통해 리턴값이 없는 함수를 할당해도 closure가 적용되며, 재할당 받은 함수에도 closure가 적용됨을 알 수 있다.

또다른 코드를 통해 closure의 개념을 이해해보자.

const boardPassengers = function(n, wait){
  const perGroup = n / 3 ;
  
  setTimeout(function(){
    console.log(`We are now boarding all ${n} passengers`);
    console.log(`There are 3 groups, each with ${perGroup} passenger`);
  }, wait*1000) 

  console.log(`Will start boarding in ${wait} seconds`);
};

const perGroup = 1000;
boardPassengers(180, 3)

위의 코드의 특이한 점은, boadrPssengers 함수 내에서 선언된 perGroup 변수를, 함수 밖에서 새로운 수로 대입한 다음,

boardPassengers함수에 대입한 매개변수를 통해 다시 perGroup 변수에 수를 대입한다는 점이다.

또한 boardPassengers 내부에는 3초후에 실행되는 setTimeout 함수가 있다.

따라서 boardPassengers 가 호출되고 callstack에서 사라져도 setTimeout함수는 closure를 통해 boardPassengers의 변수에 접근할 수 있는 것이다.

위의 함수를 실행한 결과는 아래와 같다.

출력결과에서는 180/3을 한 60이 출력됨을 알 수 있다.

boardPassengers 함수를 선언하기 전에 perGroup에 = 1000을 대입했다고 해도,

boardPassengers 함수를 선언하면서 대입한 매개변수가 다시 perGroup 변수에 덮어씌워지는 점을 알 수 있다.

이를 통해서 n,wait과 매개변수에도 접근 할 수 있음을 알 수 있다. 왜냐면 매개변수 역시 함수의 지역 변수이므로, closure가 접근 가능한 변수이기 때문이다.

[JS/자바스크립트 ] 함수의 디폴트 밸류, 디폴트 값

NomadHaven — Mon, 19 Jun 2023 16:09:48 +0900

함수를 사용할때는 보통 함수에 대입할 파라미터(매개변)를 넣는다.

파라미터를 넣어야지 본인이 얻고 싶은 값이 나오기 때문이다.

하지만 파라미터를 대입하지 않아도 기본적으로 출력되는 값을 설정할수 있다.

바로 함수의 default 값 설정을사용하면 된다.

아래의 createBooking 이란 함수를 보자,

'use strict';

const bookings = [];

const createBooking = function ( flightNum, numPassengers = 1, price = 199 * numPassengers
) {
  const booking = {
   	flightNum,
    numPassengers,
    price,
  };
  
  console.log(booking);
  bookings.push(booking);
};

해당 함수는 매개변수 flightNum(비행시간), numPassengers(승객 인원수), price(비행기 티켓 가격) 을 매개변수로 받는다.

매개변수로 받은 세가지의 값은 booking 이란 구조체에 추가되고 해당 구조체는 다시 bookings라는 배열에 추가된다.

여기서 주목할 점은 defualt 값이 설정된 numPassengers 와 price 라는 두가지 매개변수다.

해당 파라미터는 함수가 호출되기도 전에 이미 numPassengers =1 , price= 199*numpassengers 와 같이 값이 대입되어있다.

즉 createBooking 함수를 호출할때 해당 파라미터를 따로 대입하지 않아도 기본 값이 1, 199*(1)으로 설정되어 있다는 말이다.

그렇다면 default 값이 설정되어 있는 함수를 호출시 어던 결과가 나오는지 알아보자.

코드


createBooking('LH123'); 
createBooking('LH123', 2, 800); 
createBooking('LH123', 5);

출력결과

{flightNum: 'LH123', numPassengers: 1, price: 199}
{flightNum: 'LH123', numPassengers: 2, price: 800}
{flightNum: 'LH123', numPassengers: 5, price: 995}

createBooking('LH123'); 는 flightNum의 매개변수 값만 주었기 때문에 나머지 매개변수는 기본값 1, 199가 출력되었다.
createBooking('LH123', 2, 800); 는 모든 매개변수의 값을 주었기 때문에 대입한 그대로 계산되고 출력 되었다.
createBooking('LH123', 5); 는 flightNum과 numPassengers 값만 주었고 나머지 price 값는 기본값으로 계산되어 출력됐다.

만약 flightNum(비행 번호)와 티켓 가격 정보만 넘겨주고 승객수는 넘겨줄수 없을땐 어떻게 해야될까?

승객수를 입력하는 매개변수 자리에 undefined를 입력하면 호출한 함수가 오류없이 출력된다.

createBooking('LH123', undefined, 1000); // 승객수를 넘겨주기 싫을땐 undefined으로 적용.

위의 경우에는

{flightNum: 'LH123', numPassengers: 1, price: 995} 와 같은 결과가 출력된다.

[JS/자바스크립트] 문자열 메서드를 모두 이용하여 복잡한 문자열을 구조를 갖춘 형태로 변환하는 함수 만들기

NomadHaven — Thu, 15 Jun 2023 10:17:46 +0900

처음부터 정보를 형식에 맞춰서 받으면 정말 좋겠지만,

현실은 그렇지 않다.

보통은 어지럽게 혼합된 정보를 본인이 필터링하고 다듬어서 형식을 갖추게 한다음

고객에게 전달하곤한다.

예를 들어 항공편의 정보가 아래와 같이 전달되었다고 해보자

const flights =
  '_Delayed_Departure;fao93766109;txl2133758440;11:25+_Arrival;bru0943384722;fao93766109;11:45+_Delayed_Arrival;hel7439299980;fao93766109;12:05+_Departure;fao93766109;lis2323639855;12:30';

지연 비행기와 도착시간등이 어지럽게 정보안에 섞여 있어서 한번에 알아보기 쉽지 않다.

해당 정보로 서비스를 하기 위해서는 아래와 같은 형식을 갖춰야 한다.

그렇다면 위의 어지러운 정보를 어떻게 위처럼 형식을 갖춰 정렬할 수 있을까?

자바스크립트의 문자열 메서드를 쓰면 가능하다.

아래는 위의 정보에 문자열 메서드를 적용해 복잡한 정보를 깔끔하게 출력한 코드이다.

// 처음에 주어진 정보. 정렬이 필요함.
const flights =
  '_Delayed_Departure;fao93766109;txl2133758440;11:25+_Arrival;bru0943384722;fao93766109;11:45+_Delayed_Arrival;hel7439299980;fao93766109;12:05+_Departure;fao93766109;lis2323639855;12:30';

//0번째 인덱스부터 3개 글자까지 자른 뒤 대문자로 변환하게 하는 함수.
const getCode = str => str.slice(0,3).toUpperCase()

//fligts 변수를 '+'를 기준으로 나눈다. 나눠져서 생긴 문자열의 수만큼 for문을 반복한다,
  for(const flight of flights.split('+')){
  
  //+를 기준으로 나눠진 문자열 element 을 다시 ';'를 기준으로 나눈다. 
  //첫번째로 나눠진 element는 지연정보, 도착 정보의 종류를 알려주는 type
  //두번째로 나눠진 element는 출발지인 from
  //세번째로 나눠진 element는 도착지인 to
  //네번째로 나눠진 element는 시간인 time 이 된다.
    const [type, from, to, time ] = flight.split(';');
   
   //type이 "_Dayled"로 시작한다면 지연정보이므로  를 추가한다. 아니면 그대로 둬야하므로 ''
    const output =  `${type.startsWith('_Delayed') ? 
    ' ' : ''} 
    //type에 붙은 "_"를 모두 공백으로 대체하기 위해 replaceAll메서드 사용. 
    ${type.replaceAll(
      '_',' ')} 
    //앞의 3글자를 대문자로 바꿔주는 함수를 from과 to에 적용.  
      from ${getCode(from)} to ${getCode(to)}  
   //time의 :는 h로 대체   
      (${time.replace(':','h')})`
   // 위의 모든 변형이 적용된 문자열의 간격을 균일화 하기위해 padStart메서드 적용.   
      .padStart(36)
    
    
    console.log(output);

  }

위의 코드를 적용하면 아래와 같이 출력되어야 한다.

[JS/자바스크립트] 문자열 메서드를 이용해서 언더바 문자열을 카멜 표기법 문자로 바꾸는 함수 만들기

NomadHaven — Thu, 15 Jun 2023 10:05:16 +0900

언더바 표기법으로 작성된 변수의 이름을 카멜표기법으로 변환하는 프로그램을 만들어라

textarea에 입력된 내용은 버튼이 클릭되면 변환된다.

아래의 테스트 데이터를 textarea에 붙여넣고 한번에 변환한다.

underscore_case

first_name

Some_Variable

calculate_AGE

delayed_departure

버튼을 누를시 아래처럼 변환 되어야한다.

textarea에 입력된 내용, 클릭하는 버튼은 아래의 DOM 언어를 통해서 삽입된다.

document.body.append(document.createElement('textarea'));
document.body.append(document.createElement('button'));

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Make Functions</title>
    <style>
      body {
        height: 100vh;
        display: flex;
        align-items: center;
        background: linear-gradient(to top left, #28b487, #7dd56f);
      }
      h1 {
        font-family: sans-serif;
        font-size: 50px;
        line-height: 1.3;
        width: 100%;
        padding: 30px;
        text-align: center;
        color: white;
      }
      button {
        width: 50px;
        height: 20px;
        margin: 10px;
      }
      textarea {
        width: 300px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <h1>Make Functions</h1>
    <script src="codingchallenge.js"></script>
  </body>
</html>

텍스트를 입력하고 버튼을 누르게 하는 기본 index.html 파일이다.

그렇다면 위의 화면에 텍스트를 입력하고 버튼을 누를때,

카멜 표기법으로 변환시키는 코드를 작성해보자

codingchallenge.js

'use strict';

document.body.append(document.createElement('textarea'));
document.body.append(document.createElement('button'));

//버튼에 클릭할시 function이 실행되게 설정
document.querySelector('button').addEventListener('click', function () {

//textarea에 입력된 value 를 text라는 변수에 대입
  const text = document.querySelector('textarea').value;
  
//textarea에 입력된 value를 split 메서드를 이용해서 행별로 나누기  
//행별로 나뉘에진 문자열은 row라는 배열에 저장
  const rows = text.split('\n');

//rows라는 배열의 인덱스를 파악할 수 있도록 for문은 rows.entires()로 반복
//const[i,row] 에서 i는 인덱스 row는 배열에 있는 element
  for (const [i,row] of rows.entries()) {
  
  // element를 소문자로 변환 -> 공백 삭제- >"_"를 기준으로 문자열을 나눔 -> 
  //"_"기준으로 왼쪽 문자열 first, 오른쪽 문자열 second가 됨.
    const [first, second] = row.toLowerCase().trim().split('_');
    
  //first는 그대로 출력, second 문자열의 0번째 인덱스 문자는 대문자로 교체. 
  //first와 0번째 인덱스 문자가 대문자로 교체된 second를 결합하여 카멜표기법으로 변환 완료.
  //변환완료된 문자는 output이라는 문자열에 대입.
    const ouptut = `${first}${second.replace(
      second[0],
      second[0].toUpperCase()
    )}`;
    
    //output 변수에 padEnd 메서드를 이용해서 글자수를 20개로 맞추며 간격 유지.
    //✅에는 repeat메서드 이용해서 인덱스와 일치하는 개수 출력
    console.log(`${ouptut.padEnd(20)}${'✅'.repeat(i+1)}`);
  }
});

위의 코드를 작성하고

아래와 같이 textarea 에 문자열을 입력해보자.

버튼을 누른다음,

아래와 같이 출력된다면

프로그램 완성!

[JS/JavaScript] 문자열 나누기 합치기 정해진 글자수 만큼 다른 문자열로 채우기 반복하기 메소드 정리 split, join, repeat, padStart, padEnd

NomadHaven — Sun, 11 Jun 2023 22:47:02 +0900

문자열을 활용할 수 있는 다양한 자바스크립트 메서드를 알아보자.

문자열을 기준문자 단위로 나눠주는 split 메서드

//split and join
console.log('a+very+nice+string'.split('+')); //['a', 'very', 'nice', 'string']
console.log('Nomad Haven Heaven'.split(' '));//(3) ['Nomad', 'Haven', 'Heaven']

const [firstName, lastName] = 'Nomad Havenheaven'.split(' ');

const newName =['Miss.',firstName, lastName.toUpperCase()].join(' ')
console.log(newName); //Miss. Nomad HAVENHEAVEN

출력화면

(4) ['a', 'very', 'nice', 'string']
(3) ['Nomad', 'Haven', 'Heaven']
Miss. Nomad HAVENHEAVEN

split는 지정한 문자를 기준으로 문자를 나누고 배열에 저장해주는 메서드이다.

split('+')라는 메서드를 통해서 'a+very+nice+string'이라는 문자열을 나눈 뒤 출력하면

결과는 ['a','very','nice','string'] 이라는 배열이다.

해당 배열은 4가지 element로 구성되어있으며 +를 기준으로 나눠진 문자열이 저장된 것이 보인다.

split의 좋은점은 오로지 문자 많이 아니라 공백으로도 문자열을 나눌수 있다는 점이다.

split(' ')은 공백을 기준으로 문자열을 나눈 다는 뜻이다.

split(' ')이 적용된 'Nomad haven Heaven' 이라는 문자열을 출력해보자.

element가 3가지인 ['Nomad','Haven','Heaven']라는 배열이 출력되었다.

이는 띄어쓰기를 기준으로 문자열이 배열에 저장된 것이다.

const [firstName, lastName] 처럼 split을 통해서 문자열을 나눈뒤 각각 배열의 0번째 인덱스 1번째 인덱스에 적용하는 방법도 있다.

아래는 이름의 0번째 인덱스 문자를 대문자로 바꿔주는 CpitalizeName 함수이다. 해당 함수는 split 메서드와 toUppercase 메서드를 이용해서 설명한 기능을 실행한다.

const capitalizeName = function(name){
  const names = name.split(' ');
  const namesUpper = [];

  for( const n of names){
  //  namesUpper.push(n[0].toUpperCase() +  n.slice(1));
  namesUpper.push(n.replace(n[0],n[0].toUpperCase()));
  }
console.log(namesUpper.join(' '));
}

capitalizeName('jessica and smith davis')
capitalizeName('nomad haven')

CpitalizedName 이라는 함수에 대입되는 문자열을 우선 띄워쓰기를 기준으로 나눈 다음,

나눠진 문자를 names라는 배열에 대입한다.

names의 배열에 있는 element 의 개수만큼 for 반복문을 실행하는데,

for 반복문 동안 names의 0번째 인덱스 문자열의 0번째 문자는 대문자로 교체한다.

0번째 글자가 대문자로 교체된 0번째부터 ~ n번째 인덱스의 문자열들을 namesUpper이라는 배열에 저장한다.

반복문이 끝난 뒤 namseUpper 이라는 배열에 있는 문자들을 join 메서드로 합치는데, 합쳐진 문자열 사이에 ' '라는 공백문자를 둔다.

아래는 해당 함수를 사용한 코드를 출력한 것이다.

Jessica And Smith Davis
Nomad Haven

원하는 글자수 만큼 특수 문자를 채워주는 메서드 padStart, padEnd

만약 10번째 번호중 마지막 세번짜 글자만 보이고 나머지 7개 글자는 * 처리를 하고 싶다면 어떻게 해야할까?

카드의 cvc 번호처럼 말이다.

해당 상황에서 쓸수 있는 메서드 역시 존재한다. padStart 메서드와 padEnd 메서드를 사용하면 된다.


//Padding
const message = 'Go to gate 23!'
console.log(message.padStart(20, '+').padEnd(30,'+')); 
console.log('Nomad'.padStart(20,'+').padEnd(30,'+'));

++++++Go to gate 23!++++++++++
+++++++++++++++Nomad++++++++++

위의 코드와 출력문을 보자.

'Go to gate 23!' 이라는 문자열에 padStart(20,'+') 를 적용했다.

이 의미는 총 20글자중 'Go to gate 23!'문자열의 문자 개수인 14글자(공백포함)를 제외한 나머지 글자는 앞에 +라는 문자6개를 추가해서 20개를 맞추겠다는 뜻이다.

PadStart(맞추고 싶은 글자수,'글자수 맞추기 위해 채울 문자') 를 적용한다면, 글자수를 채울 문자가 앞에서 부터 채워진다.

따라서 ++++++Go to gate 23! 까지의 문자열이 완성된 것이다.

이렇게 완성된 문자열 뒤에 .padEnd(30,'+') 이라는 메서드가 적용됐다.해당 메서드는 30개의 글자수를 맞추는데 '++++++Go to gate 23! '의 글자수 20개를 제외한, 나머지 10개 문자는 뒤에 +를 채워서 맞추겠다는 말이다.

따라서 '++++++Go to gate 23!' 뒤편에 +가 10개 붙은 것이 보인다.

아래의 +++++++++++++++Nomad++++++++++ 역시 위와 같은 방식을 통해 이해하면 이해가 될 것이다.

해당 padStart기능을 이용하여 작성된 함수가 maskCreditCard라는 함수다.해당 함수는입력된 번호의 마지막 네글자를 제외하고 나머지는 모두 *로 바꾸는 함수다.

해당함수는

slice메서드를 통해서 마지막 4글자를 잘라낸다음 last 변수에 대입힌다.그다음 last 변수에 padStart 메서드를 적용하는데,메서드에서는 str.length를 이용해 알아낸 원래 문자열의 길이만큼, 앞에서 '*'로 채우겠다는 옵션이 적용되었다.

const maskCreditCard  = function(number){
  const str =  number + ''; // 빈문자 더해주면 자료형이 문자열로 변환
  const last = str.slice(-4);
  return last.padStart(str.length, '*');
}

console.log(maskCreditCard(43213829103830)); 
console.log(maskCreditCard(123442342342342));
console.log(maskCreditCard('234534523534523'));

해당 함수를 적용한 코드를 출력하면 아래와 같다.

**********3830
***********2342
***********4523

문자열을 원하는 수만큼 반복하게 하는 메서드 repeat

자바스크립트 메서드에는 문자열을 원하는 횟수만큼 반복하는 메서드 역시 존재한다.

예를 들어 비행기 방송은 같은 내용을 5번 정도 반복하는데,

해당 방송 내용을 반복하는 함수를 repeat 함수로도 만들 수 있다.

//Repeat
const message2 = 'Bad weather... All Departures Delayed... ';
console.log(message2.repeat(5)); 

const planesInLine =function(n){
  console.log(`There are ${n} planes in line ${'✈️'.repeat(n)}`);
}

planesInLine(5);
planesInLine(3);
planesInLine(10);

출력화면

Bad weather... All Departures Delayed... Bad weather... All Departures Delayed... Bad weather... All Departures Delayed... Bad weather... All Departures Delayed... Bad weather... All Departures Delayed...
There are 5 planes in line ✈️✈️✈️✈️✈️
There are 3 planes in line ✈️✈️✈️
There are 10 planes in line ✈️✈️✈️✈️✈️✈️✈️✈️✈️✈️

message2 문자열에 repeat(5)를 적용한뒤 출력하면 해당 문자열이 반복되어 출력되는 게 보인다.

또한 전제 문자열에만 반복을 적용하는 게 아니라, 문자의 일부에만 반복을 적용할 수도 있다.

${'✈️'.repeat(n)} 와 같이 특정 부분에만 메서드를 적용한 것을 봐도 함수가 잘 출력되는게 보인다.

[JS/자바스크립트] 문자열을 소문자 변환, 대문자 변환, 자르기, 교체하기 하는 방법

NomadHaven — Fri, 9 Jun 2023 21:50:47 +0900

자바스크립트는 문자열을 편집하는 다양한 메서드를 제공한다.

해당 메서드는 무척 유용한 게 많아서 잘 알아두면 나중에 큰 도움이 될 것이다.

그렇다면 문자열 string 을 편집하는 메서드는 무엇이있는지 알아보자.

문자열을 대소문자로 변환하는 기능

const airline = 'TAP Air Portugal';

console.log(airline.toLowerCase()); //tap air portugal
console.log(airline.toUpperCase()); //TAP AIR PORTUGAL
console.log('nomad'.toUpperCase());

.toLowerCase() 메서드를 이용하면 문자열을 한번에 소문자로 바꾸는 게 가능하다

.toUpperCase() 메서드를 이용하면 문자열을 한번에 대문자로 바꾸는 게 가능하다.

출력화면

tap air portugal
TAP AIR PORTUGAL
NOMAD

그렇다면 위의 기능을 종합하여 첫번째 글자는 대문자, 그 이후 글자는 소문자로 맞추는 조정도 가능할까?

물론 가능하다.

const passenger = 'nOmaD'; 
const passengerLower = passenger.toLowerCase();
const passengerCorrect =
  passengerLower[0].toUpperCase() + passengerLower.slice(1);

console.log(passengerCorrect); //Nomad 로 교정

1.문자열을 모두 소문자로 toLowerCase 메서드를 통해서 모두 소문자로 교체

2. 교체된 문자열의 0번째 인덱스 문자를 toUpperCase 메서드를 이용해서 대문자로 교체, 1번째 인덱스 이후의 문자열 slice 메서드로 자르기(1번째 인덱스 문자열 포함) 해서 두 문자열 +로 결합

출력화면

Nomad

문자열 비교하기

//Comparing email
const email = 'hello@nomad.io';
const loginEmail = '  Hello@nomad.Io \n';
const normalizedEmail = loginEmail.toLowerCase().trim();

console.log(normalizedEmail); //hello@nomad.io
console.log(email === normalizedEmail); //true

변수 email의 문자열과

loginEmail의 문자열은 다르다.

하지만 loginEmail의 문자열을 toLowerCase 메서드로 소문자 변환 후, trim 메서드를 통해 공백을 삭제한 뒤 normalizaedEmail 변수에 넣는다면?

normalizedEmail 변수는 결과적으로 email 변수의 문자열과 같게된다.

따라서 email === normalizedEmail 을 비교하면 true 가 출력된다.

hello@nomad.io
true

해당 문자열에 특정 단어가 있는지 확인하고 싶을댄 includes 메서드를 사용하면 된다.

includes('특정단어')를 입력해서 출력하면, 해당 단어가 있을시 true 아닐시 false가 나온다.

//Booleans
const plane = 'Airbus A320neo';
console.log(plane.includes('A320')); //true
console.log(plane.includes('Boeing')); //false

출력화면

true
false

만약 특정 위치에 특정 문자열이 있는지 알고 싶다면 startsWith 메서드와 endsWith 메서드를 사용하면 된다.

해당 문자열이 특정 문자열로 시작하는지 알고 싶을 때 쓰는 문자열은 startsWtih이고

해당 문자열이 특정 문자열로 끝나는지 알고 싶을 때 쓰는 문자열은 endsWith이다.

const plane = 'Airbus A320neo';
console.log(plane.startsWith('Air')); //true
console.log(plane.startsWith('Airb')); //true
console.log(plane.startsWith('bus')); //false

if (plane.startsWith('Airbus') && plane.endsWith('neo')) {
  console.log('Part of the New Airbus Family');
}

출력화면

true
true
false
Part of the New Airbus Family

문자열 교체하기

특정 문자열에서 일부만 변경하고 싶을때가 있다.

그럴때는 replace 메서드를 쓰면 좋다.

replace('바꾸고 싶은 문자열','교체할 문자열') 과 같은 순서로 코드를 작성하면 된다.

//replacing
const priceGB = '288,97F';
const priceUS = priceGB.replace('F', '$').replace(',', '.');
console.log(priceUS);

예를 들어 288,97F는 영국의 파운드 화폐 단위를 표현한 문자열이다.

이 문자를 미국의 달러 단위로 바꾸고자 한다면 288.97$가 될수있다.

원래 문자열에서 ','와'F' 만 바꾸면 될 일이다.

이때 쓰는게 replace 메서드다.

출력화면

288.97$

위의 예시 문장처럼 띄워쓰기 없이 붙어있는 문자열만 되는게 아니라,

공백이 있는 긴 문장역시 교체가 가능하다는 점이 replace 메서드의 장점이다.

const announcement =
  'All passengsers come to boarding door 23. Boadring door 23!';

console.log(announcement.replace('door', 'gate')); //오로지 첫번째 단어만 바꿔줌
console.log(announcement.replaceAll('door', 'gate')); //모든 단어가 바뀜
console.log(announcement.replaceAll(/door/g, 'gate')); //모든 단어가 바뀜. g는 global

참고로 replace 메서드를 쓰면 바꾸고자 하는 문자열의 첫번째 단어만 바뀐다. 그 뒤에 변환하고자 하는 단어가 나와도 이미 첫번째 단어가 바껴서 더이상 바뀌지 않는다.

그래서 console.log(announcement.replace('door', 'gate')); 를 출력하면

All passengsers come to boarding gate 23. Boadring door 23!

와 같이 첫번째 door만 gate로 변경되며, 두번때 door은 그대로 남아있는다.

만약 모든 단어를 교체하고 싶다면 replace대신 repalceAll을 쓰면 된다.

console.log(announcement.replaceAll('door', 'gate')); 를 출력하면

All passengsers come to boarding gate 23. Boadring gate 23!

와 같이 모든 door이 gate라는 단어로 바뀐다.

만약 replace를 쓰는 대신에 모든 단어를 바꾸고 싶다면?

바꾸고 싶은 단어 앞뒤를 슬래쉬(/)로 감싸고 g를 붙여주면 된다. g는 global이라는 뜻으로 모든 단어를 광역적으로 바꾸겠다는 의미이다.

console.log(announcement.replaceAll(/door/g, 'gate')); 를 출력하면

All passengsers come to boarding gate 23. Boadring gate 23!

replace를 썼음에도 불구하고 모든 door가 gate로 바뀐걸 알 수 있다.

위에서 다룬 내용을 조합해서 간단한 함수를 만들수 있다.

bagge에 knife와 gun이 포함되면 탑승할수 없다는 메세지를 출력하는 함수를 만든다고 해보자.

우선 문자열을 toLowerCase 메서드를 이용해서 모두 소문자로 만든 뒤,

includes 메서드로 찾고자 하는 문자열을 걸러내면 된다.

//Practice Exercise
const checkBaggage = function (items) {
  const baggage = items.toLowerCase();
  if (baggage.includes('knife') || baggage.includes('gun')) {
    console.log('You are not allowed on board');
  } else {
    console.log('Welcome abroad');
  }
};

checkBaggage('I have a laptop, some Food and a pocket Knife');
checkBaggage('socks and camera');
checkBaggage('Got some snacks and a gun for proctection');

출력화면

You are not allowed on board
Welcome abroad
You are not allowed on board

[JS, JavaScript] Map 자료구조 개념 이해를 체크하기 위한 간단한 코딩문제 풀어보기

NomadHaven — Fri, 2 Jun 2023 14:53:21 +0900

gameEnvets 라는 이름의 Map은 축구 경기동안 발생한 사건과 시간의 자료를 담은 자료구조이다.

첫번재 key 값은 경기 시작 이후 사건이 발생한 시간이며

두번재 value 값은 해당 시간에 발생한 사건이다.

const gameEvents = new Map([
  [17, '⚽ GOAL'],
  [36, '  Substitution'],
  [47, '⚽ GOAL'],
  [61, '  Substitution'],
  [64, '  Yellow card'],
  [69, '  Red card'],
  [70, '  Substitution'],
  [72, '  Substitution'],
  [76, '⚽ GOAL'],
  [80, '⚽ GOAL'],
  [92, '  Yellow card'],
]);

해당 사항을 참고하여 아래의 문제를 JS 언어로 풀어보자.

Q1) 중복이 없는 사건으로만 구성된 events라는 배열을 만들어라.

A1)

const events = [...new Set(gameEvents.values())];
console.log(events);

출력

Q2) 경기가 끝난 후 64분 경의 옐로우 카드는 부적격 판정을 받았다. 해당 시간에 일어난 사건은 삭제하라.

A2)

gameEvents.delete(64);
console.log(gameEvents);

출력

Q3) 경기 시간 동안 평균 몇분마다 사건이 일어났는지 계산하고 해당 결과를 출력하라.

A3)
//마지막 key 값 찾기(마지막 시간 찾기 위해서)
const time = [...gameEvents.keys()].pop();
console.log(time);

//이벤트 일어나는 시간의 평균 출력
console.log(
  `An event happened, on average, every ${time / gameEvents.size} minutes`
);

Q4) 각 이벤트가 일어날 때마다 [FIRST HALF] 17: ⚽ GOAL 과 같은 형식의 문장을 출력하라. 참고로 45분 이후 발생한 사건은 후반전이므로 [FIRST HALF] 대신 [SENCOND HALF]로 출력되어야 한다.

A4)
for (const [min, event] of gameEvents) {
  const half = min <= 45 ? 'First' : 'Second';
  console.log(`[${half} HALF] ${min}: ${event}`);
}

[JavaScript, JS ]Arrays vs Sets / Maps vs Objects 언제 어디서 써야할까? / data structure 사용 케이스 / 자료 구조체 사용 경우

NomadHaven — Thu, 1 Jun 2023 10:28:12 +0900

데이터의 출처는 세가지 종류가 있다.

1. 프로그램 그 자체 : 데이터가 소스 코드 자체에 적혀있는 경우 (status messages)
2. UI를 통해서 : 유저의 input이나 DOM으로 쓰여진 데이터(tasks in todo app)
3. 외부의 출처를 통해 : Web API 통해서 불러오는 데이터들 (recipe obejct)

이러한 데이터들은 collection of data 데이터의 집합이며 Data structure 자료 구조체를 가진다.

만약 데이터가 단순한 리스트에 대한 값이라면 Arrays or Set 이 적절하다.
만약 데이터가 key,value 값이 필요하다면 Object or Map 이 적절하다.

key는 vlaue를 설명하는 역할을 한다. 따라서 value에 추가적 설명이 필요하다면 Object or Map을 써야한다.

web API는 JSON 형태로 전달되는 Data로서 JSON은 key,value가 필수적이다.

따라서 JSON을 받아서 활용할때 역시 Object, Map을 쓰는게 적절하다.

그렇다면 Array와 Set는 각각 어떤 경우에 써야할까?

Array VS SET

두 자료 구조는 value를 설명할 필요가 없는 list에 사용된다.

Arrays 배열

tasks = ['Code','Eat','Code']

사용 케이스 :

순서가 있는 value가 필요할때 사용.
데이터를 수정할 필요가 있을때 사용.

Set

tasks = new Set(['Code','Eat','Code'])

사용 케이스:

고유한 값만이 필요할때 사용.
고성능의 퍼포먼스가 필요할때 사용.(Set를 통해 item을 검색하거나 삭제하는건 Array를 이용하는 것보다 10배가 더 빠름)
Array의 중복값을 삭제할때 사용

Object VS MAP

Object

task = {
  task: 'Code',
  date : 'today',
  repeat: true
}

사용 케이스:

key/value를 저장하는 좀더 고전적인 자료구조, 오래된 만큼 많이 쓰인다.
작성하기 쉽고 .과 []통해서 접근하기 쉽다.
힘수를 포함해야 할때 사용한다. 함수를 메서드처럼 사용가능.
JSON을 작업해야할 때 사용한다.

Maps

task =new Map([
  ['task', 'Code'],
  ['date', 'today'],
  [false, 'Start coding']

]);

사용 케이스 :

오브젝트보다 더 나은 성능
key값으로 어떤 데이터 타입도 사용가능.
iterate하기 쉽다.
자료구조체의 크기를 파악하기 쉽다. (size메서드 사용)
간편하게 key값을 vluae값과 묶고 싶을때 사용
key 값이 문자열이 아닐때 사용.

JavaScript / Map 과 스프레드 연산자 사용해서 간단한 Quiz앱 만들기 / Map을 Object 와 Array 배열로 변환하는 방법

NomadHaven — Thu, 1 Jun 2023 10:12:30 +0900

이전의 글을 통해서 Map이라는 자료 구조를 배워봤다.

그렇다면 Map을 어떻게 활용할수 있을까?

아래 코드와 같이 question이라는 이름을 가지는 Map 형태의 자료 구조가 있다고 하자.

const question = new Map([
  ['question', 'What is the best programming language in the world?'],
  [1, 'C'],
  [2, 'Java'],
  [3, 'JavaScript'],
  ['correct', 3],
  [true, 'Correct  '],
  [false, 'Try again'],
]);

우리가 만들고 싶은 앱은

1. prompt창에서 "What is the best progamming language in the world?' 라는 질문이 뜨고 ->

2. 해당 질문에 3이라는 번호(JavaScript라는 value의 key값)를 입력하면 ->

3. Correct 라는 대답이 뜨게 하는 앱이다. ->

4. 3외의 답을 입력하면 Try again 이라는 대답이 뜨게 처리하고 싶다.

어떻게 코드를 작성해야 할까?

위와 같은 기능의 퀴즈앱을 만드는데는 if문 조차 필요 없다.


const answer = Number(prompt('Your answer'));
console.log(question.get(question.get('correct') === answer));

1. promprt 창을 띄워 입력값을 받는다.

2. 입력 값을 숫자로 전환해 변수 answer에 대입한다.

3. 대입된 answer이란 변수가 key인 correct의 value 값 3과 일치한다면 true가 된다.

4. true라는 key 값의 value인 Correct 라는 답이 출력되게 한다.

위처럼 코드를 작성했다면,

프롬프트 창에 3이라는 숫자를 입력해보자

이 같은 출력문이 나올 것이다.

Map이라는 자료구조의 기능에 대해 이해하면 위와 같이 여러 방면으로 활용 가능하다.

Map 자료구조는 iterable해서 반복문으로도 활용 가능하다.

for (const [key, value] of question) {
  if (typeof key === 'number') console.log(`Answer ${key}: ${value}`);
}

위의 코드를 출력하면 key와 value가 하나씩 짝을 맞춰 출력되는게 보인다. 즉 Map은 iterable한 자료구조라는 뜻이다.

Object가 interable한 것 처럼 유사한 형태의 Map도 Interable 하다.

아래는 Map 자료구조를 출력한 출력문이다.

console.log(question);

아래는 Object 자료구조를 entries 메서드를 통해 출력한 출력문이다.

const weekdays = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];


const openingHours = {
  [weekdays[3]]: {
    open: 12,
    close: 22,
  },
  [weekdays[4]]: {
    open: 11,
    close: 23,
  },
  [weekdays[5]]: {
    open: 0, // Open 24 hours
    close: 24,
  },
};

console.log(Object.entries(openingHours));

두 자료구조의 출력문을 보면 공통점이 보인다.

element 안에 배열이 있으며 배열이 key값과 value 값을 가진다는 점이다.

이러한 유사성 때문에 Object 는 Map으로 전환 가능하다.

Object를 Map으로 전환하는 방법 또한 간단하다

new Map에 기존에 존재하는 Object를 넣고 새로운 변수를 선언만 해두면 된다.

//Convert object to map
console.log(Object.entries(openingHours));
const hoursMap = new Map(Object.entries(openingHours));
console.log(hoursMap);

이러한 방법으로 선언된 hoursMap이라는 Map은 아래와 같이 출력된다.

Map으로 변환된 Object

그렇다면 map을 array 배열로 변환하는 방법도 있을까?

물론 존재한다.

해당 맵의 element 를 스프레드 연산자를 이용하여 배열에 대입하고 key, value 메서드를 쓰면 된다.

console.log([...question.keys()]);
console.log([...question.values()]);

아래의 코드를 출력하면 key 값만 담긴 배열, value 값만 담긴 배열이 잘 출력되는 게 보인다.

Map 을 이용해서 다양한 형태의 key값을 가지는 구조체 만들기 / Array, Set의 보완 / Map 구조체의 메서드 알아보기

NomadHaven — Wed, 31 May 2023 09:59:46 +0900

자바스크립트에는 다양한 형태의 구조체가 있다.

array는 element별로 인덱스가 있고 인덱스 별로 요소를 구분, 외부에서 요소를 호출도 가능하다. 단점은 요소별로 중복된 값이 있을때 중복 값을 제거하거나 중복된 인수의 값을 구하기가 번거롭다는 점이다.

Set는 중복된 element를 여러번 추가해도 고유한 element 하나만 요소로 가지는 특징이 있다. 따라서 배열내의 중복값을 제거하거나 고유한 요소의 수를 파악할때 좋은 구조체이다. 단점은 Set에는 인덱스가 없다. 따라서 외부에서 Set내의 element를 key값을 통해서 호출하지 못한다.

array와 Set의 아쉬운 점을 보완하는 구조체가 바로 Map이다.

그렇다면 Map의 사용 사례를 알아보자.

const rest = new Map();
rest.set('name', 'Classico Italiano');
rest.set(1, 'Firenze', 'Italy');

console.log(rest.set(2, 'Lisbon', 'Portugal'));

rest라는 이름의 Map 구조체를 new Map(); 을 통해 생성한다.

해당 구조체에 key,value값을 추가하고 싶으면 .set(key,value) 메소드를 쓰면 된다.

첫번째 key/value 값으로 name/Classico Italinao

두번째 key/value 값으로 1/ Firenze, Italy

세번재 key/value 값은 console 창 출력을 통해서 2/Lisbon,Portugal 이 추가되었다.

그렇다면 실제 콘솔창에서는 어떻게 출력될까?

첫번째 key/value 값으로 name/Classico Italinao 는 그대로 추가 되었다.

두번째 key/value 값으로 1/ Firenze만 출력되었다, Italy는 없다.

세번재 key/value 값은 console 창 출력을 통해서 2/Lisbon 만 출력되었다. Portugal은 없다.

.set(key,value) 형식으로 Map에 값을 추가할 때,

key,value 값 다음에 다른 값을 추가해도key,value 값만 추가 됨을 알수 있다.

또한 name이라는 key값처럼 string이 key 값이 될수도 있지만, 1,2 처럼 숫자가 key 값이 될수도 있다.

그렇다면 계속 .set() 메서드를 이용해서 Map에 값을 추가해보도록 하자

rest
  .set('categories', ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'])
  .set('open', 11)
  .set('close', 23)
  .set(true, 'We are open')
  .set(false, 'We are closed');

console.log(rest.get('name'));
console.log(rest.get('true'));
console.log(rest.get(true));
console.log(rest.get('1'));
console.log(rest.get(1));

차례로 name이라는 key값을 get 메서드를 통해 value 호출,

'true'라는 문자열 key값을 get 메서드를 통해 value 호출,

true라는 boolean key값을 get 메서드를 통해 value 호출,

'1'이라는 문자열 key값을 get 메서드를 통해 value 호출,

1이라는 숫자 key값을 get 메서드를 통해 value 호출.

결과를 살펴보자.

차례로 name이라는 key값을 get 메서드를 통해 value 호출 Classico Italiano라는 value 값 호출

'true'라는 문자열 key값을 get 메서드를 통해 value 호출 true라는 문자열 key값이 존재하지 않는다 처리해 undefined.

true라는 boolean key값을 get 메서드를 통해 value 호출 true라는 boolean의 value값인 'We are Open" 호출

'1'이라는 문자열 key값을 get 메서드를 통해 value 호출 1이라는 문자열 key값이 존재하지 않는다 처리해 undefined.

1이라는 숫자 key값을 get 메서드를 통해 value 호출 1이란 숫자 key값의 value 값인 Firenze 호출

이를 통해서 Map 구조체는 key값이 string인지, 숫자인지, boolean인지 모두 구분 가능하다는 사실을 알게 되었다.

그렇다면 이렇게 key 값이 구분 가능한 Map을 어떻게 활용할 수 있을까?

const time = 21;
console.log(rest.get(time > rest.get('open') && time < rest.get('close')));

21이라는 값을 가지는 time 값이 'open'의 value 값 보다 크고 close 보다 작을 경우를 가정헀을때 해당 사실은 참이다.

따라서 출력문 안에 있는 조건은 true가 된다.

또한 rest에서 true라는 키값이 가지는 value는 'We are Open'이다.

따라서 true의 value 값인 we are open이 출력된다.

어떠한 값에 대한 조건이 true, false 일때 이에 대한 값을 출력할수 있도록 Map에서 만들수 있다.

또한 Map 구조체는 해당 구조체 안에 특정한 값이 있는지 역시 확인 가능하다.

해당 구조체 안의 element를 삭제하는 것 역시 가능하다.

해당 구조체 안에 몇개의 element가 있는지 확인하는 것도 가능하다.

아래는 has / delete / size 메서드를 통해서 확인, 삭제, 갯수 확인을 한 코드이다.

//Map 구조체 안에 특정한 요소가 있는지 확인하는 메서드 has
console.log(rest.has('categories')); //true

//Map 구조체 안에 특정한 요소를 삭제하는 메서드 delete
rest.delete(2);
console.log(rest.has(2)); //false

//Map 구조체 안에 있는 요소의 개수를 확인하는 메서드 size
console.log(rest.size); //7

출력 결과

위에서 말했듯 Map 구조체는 string, boolean, number 을 구분해서 key 값을 처리한다.

그렇다면 Map 구조체의 key값으로 array배열도 처리가 가능할까?

[1,2] 라는 배열을 key값으로 추가하고 'Test'라는 Value를 추가했다.

rest.set([1, 2], 'Test');
console.log(rest); //key: (2) [1, 2] value: "Test"

Map 구조체 전체를 출력헀을 시에는 7번 인덱스에 key 값으로 배열 [1,2]가 잘 들어간 것이 보인다.

하지만 해당 값을 출력하면

console.log(rest.get([1, 2]));

undefine이 출력된다.

왜 이렇게 되나 chatGPT 한테 물어보니까.

rest.get([1, 2])에서 [1, 2]는 배열로 키로 사용되고 있습니다.
그러나 Map의 get() 메서드는 키를 정확히 일치하는 값으로 찾기 위해 동등성 비교(===)를 수행합니다.

배열은 참조 타입이므로 동등성 비교를 할 때는 같은 참조를 가리켜야 일치합니다.
console.log(rest.get([1, 2])); 부분에서 [1, 2]는 배열 객체를 생성하여 사용한 것입니다.
이 때, 코드가 실행될 때마다 [1, 2]라는 배열 객체가 매번 새롭게 생성됩니다.

따라서, rest.get([1, 2])는 매번 새로운 배열 객체로 인식되어,
기존에 rest Map에 저장된 [1, 2]와 일치하는 키를 찾지 못하고 undefined를 반환하게 됩니다.

라고 한다.

이럴땐 그럼 어떻게 배열을 Map의 key값으로 사용할수 있을까?

const 를 이용해서 먼저 배열을 선언해주면 된다.

//배열을 key로 사용하기 위해선 const를 사용해서 배열을 선언
const arr = [1, 2];
rest.set(arr, 'Test');
console.log(rest.get(arr)); //Test

위와 같이 arr를 통해서 먼저 선언된 배열을 key값으로 추가하면 get 메서드로 key값을 찾아도 Test라는 Value가 잘 호출된다.

Map의 독특한 기능은 DOM도 key 값으로 쓸수 있다는 점이다.

rest.set(document.querySelector('h1'), 'Heading'); //콘솔창에서 key 클릭하면 hi부분 하이라이트됨
console.log(rest);

위의 코드처럼 h1을 지정한 DOM 을 key 값으로 넣은 다

전체 구조체를 클릭한다 하자.

출력된 key값인 h1을 클릭하면

콘솔창의 웹페이지에서 h1 부분에 해당하는 문자열이 하이라이트 처리된다.

Set 이용해서 Array 의 중복 삭제하기, Set 이용해서 중복 없는 배열 만들기

NomadHaven — Fri, 26 May 2023 13:37:04 +0900

array를 만들다보면 array 내부의 element들이 중복되는 경우가 있다.

만약 array 내에서 중복되는 값을 제외한 겹치지 않는 element들만 알고 싶거나,

중복되지 않는 고유한 element의 개수를 알고 싶다면, 이 중복 element 를 어떻게 처리해야 하나 멈칫 할 것이다.

그때는 Set를 이용하면 쉽게 배열의 중복값을 제거할 수 있으며

고유한 element 의 갯수를 알수 있다.

우선 Set이 어떤 것인지부터 알아보자.

const ordersSet = new Set([
  'Pasta',
  'Pizza',
  'Pizza',
  'Risotto',
  'Pasta',
  'Pizza',
]);

위와 같이 ordersSet라는 Set가 있다고 하자. 이 세트에는 Pizza와 Pasta라는 중복되는 요소가 존재한다.

console.log(ordersSet);

해당 Set를 출력하면

중복값을 삭제한 고유한 요소들만 출력한다.

만약 문자열로 구성된 Set를 출력한다면,

console.log(new Set('Nomad'));

문자열 하나하나를 요소로 삼아 Set가 생성된다.

Set 에는 Array의 length와 비슷한 메소드가 있다.

바로 size이다.

console.log(ordersSet.size);

해당 Set에 size라는 메소드를 적용하면 중복되지 않는 고유한 값의 개수 3이 나온다.

중복값 까지 모두 element로 처리해서 중복되는 원소까지 제외하지 않고 출력하는 length와는 미묘한 차이가 있다.

또한 특정 element가 해당 Set에 있는지 확인하기 위한 메소드로 has 가 있다.

console.log(ordersSet.has('Pizza')); //array의 include와 비슷
console.log(ordersSet.has('Bread'));

Pizza같이 세트에 존재하는 요소를 넣으면 true가 출력되고

Bread 같이 존재하지 않는 요소를 넣으면 false가 출력된다.

배열의 include와 비슷한 기능이다.

또한 add/delete 메소드를 통해서 세트에 요소를 추가 삭제도 가능하다.

add와 delete 를 사용한 예시를 보자.

ordersSet.add('Garlic Bread');
ordersSet.add('Garlic Bread');
ordersSet.delete('Risotto')
//ordersSet.clear();// 모든 element 삭제하는 메소드

console.log(ordersSet); //Garlic Bread  두개가 추가됐지만 갈릭브레드 하나만 추가됨. 리조토 삭제됨.
console.log(ordersSet[0]); // udefined 출력된 이유 : Set에는 인덱스가 없다.

위의 코드에서 add를 통해 Galic Bread를 두번 추가했지만 결국 출력되는 갈릭브레드는 딱 1개 밖에 없다.

같은 값의 요소를 계속 추가해봤자 늘어나지 않는 것이다.

또한 delete메소드를 이용해 삭제한 Risotto는 삭제되어 보이지 않는다.

모든 요소를 한번에 삭제하고 싶다면 clear 메소드를 써도 된다.

Set에 add 를 통해서 같은 값의 요소를 추가해도 하나의 고유한 값만 추가되는 이유는 무엇일까?

Set는 가지고 있는 모든 값을 유니크한 value로 인식하기 떄문이다. 따라서 Set에는 중복된 value를 구분하기 위한 index역시 없다. Set의 모든 요소는 고유한 value이므로 인덱스가 필요 없기 때문이다.

orderSet[0]이라는 인덱스를 출력해봤자 undefined만 출력되는 이유다. 그 이유로 Set는 요소가 있는지 확인하는 메소드 has, 추가 삭제하는 메소드 add delete 밖에 없다.

그래서 외부에서 set의 value도 가져오지 못한다. set에는 인덱스가 없기 때문이다. 외부에서 value를 가져오고 싶을떄는 인덱스를 이용하는 array를 사용해야 한다.

하지만 Set의 요소는 iterable하다.

for문 안에서 Set를 돌리면 각각의 요소가 잘 출력되긴한다.

for(const order of ordersSet) console.log(order);

출력결과

Set의 한계로 인해 실제 사용 범위가 줄어들지도 모른다 생각하겠지만,

Set는 Array와 함께 사용할때 훌륭한 시너지를 낸다.

Set를 활용해 Array의 중복제거를 할수도 있으며, Array에서 중복된 값을 제외한 고유한 요소의 개수도 알수 있다.

const staff = ['Waiter','Chef','Waiter','Manager','Chef','Waiter'];
const staffUnique = [...new Set(staff)]; //set 을 이용해서 중복이 삭제된 새로운 array생성.
console.log(staffUnique);

스태프의 역할을 표기한 staff라는 배열에서 중복되는 역할이 삭제된 값만 알고 싶다면,

배열을 생성하는 괄호안에 스프레드 연산자인 ...를 쓴다음, 기존 staff 배열의 값을 담은 새로운 Set를 생성하면 된다.

출력하면 중복된 값이 제외된 고유한 값 3개만 배열로 생성된 걸 알 수 있다.

배열에서 중복된 값을 제외한 고유한 요소의 갯수를 알수도 있다.

//배열에서 중복된 값을 제외한 고유한 엘레멘트의 개수만 알고싶을때
console.log(new Set(['Waiter','Chef','Waiter','Manager','Chef','Waiter']).size);

Set의 size 메소드만 사용하면 된다.

출력시 중복되지 않는 요소의 갯수인 3이 출력된다.

굳이 배열 뿐만아니라, 문자열의 중복되지 않는 글자 개수를 알고 싶을때도 Set를 쓰면 된다.


//문자 열에서 중복되지 않은 고유한 문자의 개수 알고싶을때.
console.log(new Set('nomadhavensheaven').size);

nomadhavensheaven 이라는 문자열에서 중복된 알파벳이 제거된 고유한 문자열의 갯수 9가 출력된다.

Object 안에 또 Object 가 있는 복잡한 Object의 값 모두 불러오기 / keys, values, entries 이용하기

NomadHaven — Mon, 22 May 2023 19:04:19 +0900

const weekdays = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];

const openingHours = {
  [weekdays[3]]: {
    open: 12,
    close: 22,
  },
  [weekdays[4]]: {
    open: 11,
    close: 23,
  },
  [weekdays[5]]: {
    open: 0, // Open 24 hours
    close: 24,
  },
};

위와 같은 obejct가 있다고 하자.

openingHours라는 object는 value가 또 obejct 로 구성된 복잡한 object다.

해당 오브젝트에서 원하는 key,value 값만 쏙쏙 뽑아서 쓰고 싶으면 어떻게 할까?

바로 property name, key, value를 이용하면 된다.

우선 object에서 property name만 가져오는 방법을 알아보자.

//property Names
const properties = Object.keys(openingHours);
console.log(properties);

let openStr = `We are opne on ${properties.length}
days: `;

console.log(`We are open on ${properties.length} days`);

for (const day of properties) {
  openStr += `${day},`;
}
console.log(openStr);

Object.keys() 괄호부분에 본인이 property name(key) 값만 가져오고 싶은 오브젝트 이름을 넣으면 끝이다.

property의 개수를 알고싶으면 properties.length 를 쓰면 된다.

반복문을 써서 propertyn name 하나하나 출력하는 것 역시 가능하다.

위의 코드를 출력하면 아래와 같은 값이 확인 가능하다.

Property value만 출력한는 것 역시 가능하다.

Object.values()의 괄호한에 Object 이름만 쓰면 끝.

//Property Values

const values = Object.values(openingHours);
console.log(values);

출력하면 다음과 같은 결과가 나온다.

key 따로 value 따로 말고 전체 값을 자유롭게 가져와 쓰고 싶다면,

역시 가능하다. entries 메소드를 쓰면 된다.

//Entrie Objext
const entries = Object.entries(openingHours);

//[key,value]]
//value가  object 라서 destructure 해준다.
for (const [key, {open,close}] of entries) {
  console.log(`On ${key} we open at ${open} and close at ${close}`);

}

entries 메소드를 쓰면 key값 value값 모두 불러올 수 있으며, object 처럼 구성된 value값 역시 위의 코드처럼 호출 가능하다.

위 코드의 반복문을 출력하면 key값 value 값, value 값 안의 value값 까지 모두 출력된게 보인다.

podman 명령어로 linux에 contianer 설치하기

NomadHaven — Fri, 19 May 2023 17:38:07 +0900

1.설치

dnf install podman -y
adduser user3
echo 1111 | passwd --stdin user3
ssh user3@localhost

-dnf 명령어로 podmad 설치

-컨테이너 사용할 유저 user3 생성

-user3의 비밀번호 1111으로 변경

-user3의 계정으로 접속

#user3으로 로그인한 상태
podman pull quay.io/centos7/httpd-24-centos7:latest
podman run -d -p8080:8080 --name container-web quay.io/centos7/httpd-24-centos7:latest
podman ps
curl localhost:8080

-podman pull 명령어로 컨테이너 이미지 불러오기

*컨테이너 이미지는 컨테이너화된 애플리케이션을 실행하기 위한 실행 환경과 애플리케이션 코드 및 종속성을 포함하는 패키지. 이미지는 애플리케이션을 실행하는 데 필요한 모든 파일 시스템, 라이브러리, 실행 파일, 환경 변수 등을 하나의 단위로 묶어놓은 것.

-podman run 명령어 이용해서 컨테이너 실행.

-d 옵션으로 컨테이너 백그라운드에서 실행

-p 옵션으로 호스트의 8080 포트와 컨테이너 8080포트 연결. 이를 통해 호스트 8080 포트로 들어오는 요청이 컨테이너 8080포트로 전달.

--name 으로 실행중인 컨테이너에 "container-web" 이름 지정.

quay.io/centos7/httpd-24-centos7:latest 실행할 컨테이너 이미지 이름

-podman ps로 상태 확인하기

이렇게 컨테이너 이름이 보여아지 잘 구성된것

-8080 포트와 잘 연결되는지 확인하기

이런식으로 인덱스 파일 같은게 출력되어야지 잘 연결되는 것

2. 컨테이너를 사용자 최적화

#user3으로 로그인한 상태
podman generate systemd --new --files --name container-web
mkdir -p ~/.config/systemd/user
cp container-web.service ~/.config/systemd/user
systemctl daemon-reload --user
systemctl enable --now container-web --user

-podman generate systemd ~ 명령어로 Podman 컨테이너를 시스템 서비스로 실행하기 위한 systemd 유닛 파일을 생성.

Podman은 컨테이너를 실행하는 동안 시스템 서비스로 관리할 수 있도록 systemd 유닛 파일을 생성하는 기능을 제공. 이를 통해 컨테이너가 시스템 부팅 시 자동으로 시작되거나, 장애가 발생했을 때 재시작되는 등의 이점을 얻는다.

해당 명령어를 실행하면 container-web이라는 이름의 새로운 유닛파일이 생성되고 해당 파일은 /etc/systemd/system

디렉토리에 저장.

systemd를 사용해서 컨테이너 시작, 중지, 재시작 가능.

-mkdir 명령어로 ~/.config/systemd/user의 디렉토리 생성. 생성되니 디렉토리는 특정한 사용자에서(user3) systemd 서비스 파일 관리하기 위해 사용.

-cp~ 명령어로 container-web.service 파일을 위에서 생성한 디렉토리 ~/.config/systemd/user 에 복사. 이 역시 container-web.service 파일을 특정한 사용자(user3) systemd 서비스로 등록하기 위한 작업.

-systemctl deamon-reload~ 명령어로 현재 사용자(user3)의 systemd 인스턴스에 대한 구성파일 변경사항을 다시 로드. 이 명령어 실행시 변경된 유닛파일 내용 적용된다. systemd가 수정된 구성을 인식하고 해당 유닛 사용할 수 있게 된다.

-systemctl enable~ 명령어로 contaienr-web 서비스를 사용자 레벨에서 활성화 하고, 즉시 시작해도록 하는 명렁어. 이를 통해 container-web 서비스가 사용자 세션에서 자동으로 시작되도록 설정.

#root계정으로 다시 로그인 한뒤, 아래의 명령문 실행

loginctl enable-linger user3

loginctl enable-linger containeruser 명령어는 특정 사용자인 user3이 로그아웃 상태일 때에도 시스템에 로그인된 상태를 유지하도록 설정하는 명령어.

linger 옵션은 사용자의 로그인 세션을 유지하는 기능을 활성화.

일반적으로 로그아웃한 사용자는 시스템이 재부팅되거나 로그아웃된 상태에서 실행 중인 서비스 또는 프로세스가 종료됨. 그러나 linger를 사용하면 사용자가 로그아웃한 후에도 해당 사용자의 서비스 또는 프로세스가 계속 실행될수 있다.

위의 명령어를 통해 user3이라는 사용자 계정에 대해, linger를 활성화하겠다는 의미.

이를 통해 해당 사용자가 로그아웃된 상태에서도 설정된 서비스나 프로세스가 계속 실행될 수 있다.

3. container 서비스 잘 작동하는지 확인하기

systemctl status container-web --user
curl localhost:8080

systemctl staus 명령어로 contianer-web 서비스의 상태 확인.

Active 상태를 확인하니 잘 작동되는게 확인 된다.

curl 명령문으로 포트 8080에 잘 연결되는 것도 확인하면

컨테이너 구성 완료!

다른 방법으로 구성하기

#user3 로그인 한 상태에서 구성

#wget 명령어는 주어진 URL에서 파일을 다운로드하는 명령어
dnf install wget

wget https://raw.githubusercontent.com/tangt64/training_memos/main/opensource/linux-101/materials/Containerfile


#현재 디렉토리(.)에 위치한 Dockerfile을 사용하여 컨테이너 이미지를 빌드. 
#-t 옵션은 이미지에 태그를 지정하는 옵션으로, web-container라는 이름으로 이미지를 태그.
#빌드된 이미지는 로컬 컨테이너 이미지 저장소에 저장, web-container라는 태그로 해당 이미지를 참조.
podman build . -t web-container

#현재 시스템에 저장된 컨테이너 이미지 목록을 보여주는 명령어
podman images

mkdir htdocs/

echo "hello systemd service container" > htdocs/index.html

#"new-web-container"라는 이름으로 "localhost/web-container" 이미지를 기반으로 컨테이너를 생성,실행. 
#컨테이너 내부의 "/var/www/html/" 디렉토리는 호스트의 "/home/user3/htdocs/" 디렉토리와 연결. 
#웹 서비스를 호스트에서 컨테이너로 전달. 
#호스트의 8081 포트는 컨테이너의 80 포트와 연결되어 웹 서비스에 접근.
podman run -d --name new-web-container -v /home/user3/htdocs/:/var/www/html/:Z -p 8081:80 localhost/web-container

curl http://localhost:8081

curl 명령어 실행시 hello systemd service container 가 잘 출력되어야 한다.

* 다운 받은 파일 링크

https://raw.githubusercontent.com/tangt64/training_memos/main/opensource/linux-101/materials/Containerfile

파일 형태의 스왑 swap 생성하는 방법 / dd 명령어 사용해서 파일 형태 스왑swap 만들기

NomadHaven — Fri, 19 May 2023 14:31:04 +0900

1. dd 명령어를 사용해서 크기가 1G 이고 개수가 1개인 swap.data 만들기

#명령문
dd if=/dev/zero of=/swap.data bs=1G count=1

#출력내용
1
1+0 records in
1+0 records out
1073741824 bytes (1.1 GB, 1.0 GiB) copied, 4.36341 s, 246 MB/s

*왜 옵션으로 if=/dev/zero 를 설정해야 하는 가에 대한 chatGPT의 답변

dd 명령어는 입력 소스(if 옵션)에서 데이터를 읽어서 출력 대상(of 옵션)에 씁니다.

데이터를 읽는 입력 소스로 /dev/zero를 사용하는 이유는 다음과 같습니다.

/dev/zero는 리눅스 시스템에서 제공하는 가상 장치 파일입니다.
이 파일에서는 무한히 많은 0(널 바이트)를 읽을 수 있습니다.
dd 명령어의 if 옵션에 /dev/zero를 설정하면, /dev/zero에서 0을 계속 읽어서 출력 대상인 swap.data에 씁니다.

if=/dev/zero를 설정하는 이유는 실제로 스왑 파일을 생성할 때,
초기화되지 않은 공간을 0으로 채워줘야 하기 때문입니다.
스왑 파일은 보안을 위해 기존 데이터가 완전히 지워져야 하므로,
/dev/zero에서 0을 읽어서 스왑 파일에 쓰는 것이 일반적인 방법입니다.

2. 생성된 swap.data 파일이 data 파일인지 확인하기

file swap.data

출력결과

3. 생성된 swap.data 파일을 swap 으로 만들기(swap.data 파일은 /tmp 경로에 생성됨)

mkswap /tmp/swap.data

출력결과

4. swap의 권한 지정하고 확인하기

#권한 지정
chmod 0600 swap.data

#권한확인
ls -lh swap.data

권한이 잘 변경되었다면 이렇게 -rw------- 뜬다

5. 생성된 swap을 swapon 명령어로 활성화 하기

swapon swap.data

6. 잘 활성화 됐는지 swapon 명령어로 확인 하기

swapon -s

잘 활성화 됐으면 생성한 swap.data가 목록에 보인다.

6. 활성화된 swap 을 swapoff 명령어로 중지하고, 중지 됐는지 확인

#swap 중지 명령
swapoff /tmp/swap.data

#중지 여부 확인
swapon -s

잘 중지 되었다면 swap.data가 보이지 않는다.

검색된 파일의 전체를 한번에 다 압축 하는 리눅스 명령문 쓰기 / find와 exec 이용 / + 이용해서 한번에 압축

NomadHaven — Fri, 19 May 2023 10:36:29 +0900

리눅스 공부를 하면서 혼자 아래의 문제를 풀고 있었다.

사용자 user2의 파일을 찾아서 /tmp/user2-banned/에 저장한다.
- 저장된 파일은 xz으로 압축하여 user2-banned이름으로 /root/에 저장한다.
- 반드시 확장자는 올바르게 표기가 되어야 한다.

우선 user2의 파일을 찾아야 하니

find / -user user2 -type f -print

를 입력했고 아래와 같은 파일들이 검색됐다.

/home/user2/.bash_logout
/home/user2/.bash_profile
/home/user2/.bashrc
find: ‘/proc/7227/task/7227/fdinfo/6’: No such file or directory
find: ‘/proc/7227/fdinfo/5’: No such file or directory
/root/.bash_logout
/root/.bash_profile
/root/.bashrc
/var/spool/mail/user2

검색된 파일들을 모두 압축하고 새로운 이름에 저장하려고 아래의 코드를 입력했다.

 find / -user user2 -type f -exec tar cf /tmp/user2-banned/user2-banned.xz {} \;

/tmp/user2-banned/ 경로에 user2-banned.xz라는 파일이 생기긴 했는데,

압축 파일의 내부 파일을 볼수있는

tar -tf user2-banned.xz

를 실행해서 해당파일을 보니 검색된 파일중

/var/spool/mail/user2 만 저장되어 있었다.

모든 파일을 압축하고 싶은데 어떻게 해야되냐 GPT한테 물어보니 아래와 같은 명령어를 실행하라 했다. {} 뒤애 + 가 새롭게 붙었다.

find / -user user2 -type f -exec tar rf /tmp/user2-banned/user2-banned.xz {} +

변경된 부분은 -exec 뒤에 tar 명령어를 실행하는 부분입니다. rf 옵션을 사용하여 압축 파일에 파일을 추가하고, {}는 find 명령어가 찾은 파일을 나타냅니다. +는 여러 개의 파일을 한 번에 처리하도록 지정합니다.

+를 붙여야지 여러 파일을 한번에 압축할 수 있나보다.

위와 같이 명령문을 작성하고 다시 압축된 파일을 확인해보니

모든 파일들이 생성된 압축 파일 내에 잘 복사된게 보인다.

응용 연습문제 풀기

사용자 user1이 가지고 있는 모든 파일을 생성한다.
1메가보다 작은 크기인 파일만 복사한다.
복사된 파일은 bzip2로 복사하여 /root/에 user1-files라는 이름으로 저장한다.
반드시 확장자는 올바르게 표기가 되어 있어야 한다.

작성된 명령문

 find / -user user1 -size -1M -type f -exec tar rf /root/user1-fiels.bzip2 {} +

JavaScript / Optional Chaining을 이용해서 코드 훨씬 간결하게 작성하기 + nullish coalescing operator 이용해서 optional chaining 기능 극대화 / '.?' 만 찍으면 끝

NomadHaven — Thu, 18 May 2023 23:41:55 +0900

아래와 같은 코드가 있다고 하자.

아래의 코드에서 object restaurant는 자신의 object 외부에있는 또다른 object인 openingHour를 불러와서 key와 value를 구성하고 있다.

'use strict';

const weekdays = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];

const openingHours = {
  [weekdays[3]]: {
    open: 12,
    close: 22,
  },
  [weekdays[4]]: {
    open: 11,
    close: 23,
  },
  [weekdays[5]]: {
    open: 0, // Open 24 hours
    close: 24,
  },
};


const restaurant = {
  name: 'Classico Italiano',
  location: 'Via Angelo Tavanti 23, Firenze, Italy',
  categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
  mainMenu: ['Pizza', 'Pasta', 'Risotto'],

  //ES6 enhanced object literals
  openingHours,

  order(starterIndex, mainIndex) {
    return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
  },

  orderDeliver({ starterIndex = 1, mainIndex = 0, time = '20:00', address }) {
    console.log(
      `Order Received! ${this.starterMenu[starterIndex]} and ${this.mainMenu[mainIndex]} will be deliverd to ${address} at ${time}`
    );
  },

  orderPasta(ing1, ing2, ing3) {
    console.log(
      `Here is your delicious pasta with ${ing1}, ${ing2} and ${ing3}`
    );
  },

  orderPizza(mainIngredient, ...otherIngredients) {
    console.log(mainIngredient);
    console.log(otherIngredients);
  },
};

만약 외부에서 해당 레스토랑의 월요일(mon) open 시간을 요청한다고 하자.

그렇다면 외부의 요청시간에 답하기 위해서 restaurant 의 openingHour key 값에 있는 월요일(mon) 시간의 value 을 보내야 겠지만,

restaurant object가 사용하는 외부의 openingHour object 내부에는 월요일(mon)의 key 값과 value 값이 없다.

따라서 막무가내로 아래처럼 출력하면

console.log(restaurant.openingHours.mon.open);

이런 오류가 난다.

우선 오류를 피하는게 가장 급한일이라 생각하고, 바쁜대로 undefined 값이라도 보내야 된다고 하자.

if문을 사용해서 아래와 같이 작성할수도 있겠지만,

//restaurant의 open 시간이 있고 open 시간 중 월요일(mon)이 있으면 해당 시간을 출력
if (restaurant.openingHours && restaurant.openingHours.mon) console.log(restaurant.openingHours.mon.open);

Optional Chaining을 이용하면 코드가 훨씬 간단해 진다. 그저 value를 얻고자 하는 속성에 "?"만 붙여주면 된다.

console.log(restaurant.openingHours?.mon?.open);

이제 외부에서 restaurant의 토요일 오픈 시간을 요청한다고 가정해보자.

다행히 openingHours object에서 토요일 값이 설정되어 있어서 요청을 보낼수 있겠다 싶었는데,

const days = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];

for (const day of days) {
console.log(day);
const open = restaurant.openingHours[day]?.open || 'closed';
console.log(`On ${day}, we open at ${open}`);
}

토요일(sat)의 openinghour이 0시 이고 이 0값은 falsy value라 인식된다.

그래서 거짓으로 인식된 0시의 값 때문에 closed가 출력되고,

On sat, we open at closed라는 예상치 못한 값이 출력되고 만다.

이를 해결하기 위해 nullish coalescing operator를 사용한다. ||대신 ??를 사용하면 된다.

nullish coalescing operator 은 변수가 null 또는 undefined일 때 기본값을 지정하는 데 사용된다.

이 연산자는 변수가 null 또는 undefined인지 확인하고, 그렇다면 지정된 기본값을 반환한다.

그렇지 않으면 변수의 값을 그대로 반환합니다.

이 nuliish coalescing operator의 중요한 특징은 변수가 null 또는 undefined인 경우에만 기본값을 반환하며, 다른 falsy 값인 0, 빈 문자열, false 등은 기본값으로 간주하지 않는다. 따라서 openingHours의 토요일 오픈 시간인 0이 나와도, 0은 기본 값으로 간주되지 않아서 closed가 출력 되지 않는다.

for (const day of days) {
  console.log(day);
  const open = restaurant.openingHours[day]?.open ?? 'closed';
  console.log(`On ${day}, we open at ${open}`);
}

덕분에 토요일에도 0시에 오픈한다는 값이 잘 출력된다.

nullish coalescing operator는 다양하게 이용된다.

method의 유무를 확인 할때도 이용되는데, 아래는 그 예시다

console.log(restaurant.order?.(0, 1) ?? 'Method does not exist');
//order는 존재하는 method 이므로 ['Focaccia', 'Pasta'] 가 출력된다.
console.log(restaurant.orderRisotto?.(0, 1) ?? 'Method does not exist'); 
//orderRisotto는 존재하지 않는 method 이므로 undefined이 되고, 그로인해 기본값 
//Method does not exist 가 출력된다.

배열에 값이 있는지 확인할때도 사용할수 있다.

1.배열에 값이 있을때

const users = [
  { name: 'Nomad', email: 'hello@nomad.io' },
  { name: 'aboc', email: 'aboc@nomad.io' },
 ];


console.log(users[0]?.name ?? 'User array empty'); //Nomad가 출력된다
console.log(users[1]?.name ?? 'User array empty'); //aboc가 출력된다.

2. 배열에 값이 없을때

const users = [];

console.log(users[0]?.name ?? 'User array empty'); 
//user[0].name은 undefine 값이므로 User array empty가 출력.

console.log(users[1]?.name ?? 'User array empty');
//user[1].name은 undefine 값이므로 User array empty가 출력.

만약 nullish coalescing operator를 쓰지 않고 if else문을 써서 배열에 값이 있는지 확인하고, 없을 경우 기본값을 출력하도록 설정한다면

if (users.length > 0) console.log(users[0].name);
else console.log('User array empty');

이처럼 코드가 몹시 길어졌을 것이다.

nullish coalescing operator를 이용해서 깔끔한 코드를 작성해보자.

find 명령어 구분하기 파일 검색 결과를 텍스로 저장 vs 검색된 실제 파일들을 복사하여 지정된 디렉토리에 따로 저장

NomadHaven — Thu, 18 May 2023 18:57:39 +0900

find로 파일을 검색하다보면

검색된 파일들의 목록만 txt로 저장해놓고 싶은 경우도 있고.

검색된 파일들을 실제로 복사해서 디렉토리에 따로 저장하고 싶은 경우도 있다.

해당 경우에는 find 명령문이 조금 달라서 구분하고 기억하고자 글을 작성한다.

#출력 결과를 txt로 저장
find / -iname "*GNU*" -type f -print -exec cp -a {} /root/gnulist2.txt \;

위의 명령어는

1.대소문자 구분없이 "gnu"라는 문자열 가진 파일을 모든 디렉토리에서 찾은 다음,

2.출력결과를 /root/경로에 gnulist2.txt 라는 이름의 파일로 저장 하는 명령문이다.

#검색된 파일들을 실제로 복사해서 지정한 디렉토리에 따로 저장
find / -iname "*license*" -type f -print -exec cp -a {} /root/testcp \;

위의 명령어는

1.대소문자 구분없이 "license"라는 문자열을 가진 모든 파일을 모든 디렉토리에서 찾은 다음

2. 검색된 파일들을 /root/testcp 라는 디렉토리에 에 복사 하는 명령문이다.

따라서 /rooot/testcp라는 명령문에는 license라는 문자열을 가진 모든 파일들이 대소문자 구분없이 저장되어 있을 것이다.

chmod 명령어로 특정한 그룹에게만 권한을 주고 싶을 때, g=rwx 같은 그룹권한 지정전에 해줘야할 chown 소유 그룹 지정

NomadHaven — Wed, 17 May 2023 23:46:00 +0900

chown :agroup /agrpdir

만약 리눅스 환경 내에,

agroup과 bgroup이라는 두가지 그룹이 있고 특정한 경로인 agrpdir이 있다고 하자.

이 특정한 디렉토리인 agrpdir은 agroup만 쓰게 만들고 싶다.

그렇다면 bgroup을 제외한 agroup만 agrpdir를 쓰려면 어떻게 해야할까?

흔히들 그룹에게 특정 디렉토리에 권한을 주는 명령어는

chmod 를 쓴다.

하지만

chmod g=rwx /agrpdir

로 그룹에게만 권한을 주려 하니,

g= 가 가리키는 그룹이 특정한 "agroup"이라는 점이 나타나 있지 않다.

chmod 070 /agrpdir

와 같이 다른 방식으로 표현해봤자 7이라는 권한이 있는 그룹의 자리가 agroup인지 bgroup인지 알수가 없다.

이때는 chmod 명령어로 그룹에 권한을 주기 전에,

특정한 디렉토리의 소유그룹부터 변경해야 한다.

이때 써야되는 명령어는 chown이다.

chown :agroup /agrpdir

명령어를 통해서 agrpdir 디렉토리의 소유 그룹이 agroup인 부분을 먼저 명시해야지

chmod g=rwx /agrpdir 
#혹은
chmod 070 /agrdir

를 통해서 소유 그룹인 agroup만 읽기,쓰기,실행 권한이 있다는 사실이 확실히 된다.

object 밖에 있는 object도 object의 값으로 가져오기 / object의 key값도 밖의 object에서 가져오기

NomadHaven — Wed, 17 May 2023 23:31:55 +0900

openinghours라는 object와 restaurnat라는 object가 각각 따로 존재한다고 가정하자.

const openingHours = {
  thu: {
    open: 12,
    close: 22,
  },
  fri: {
    open: 11,
    close: 23,
  },
 	sat: {
    open: 0, // Open 24 hours
    close: 24,
  },
};

const restaurant = {
  name: 'Classico Italiano',
  location: 'Via Angelo Tavanti 23, Firenze, Italy',
  categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
  mainMenu: ['Pizza', 'Pasta', 'Risotto'],

  order(starterIndex, mainIndex) {
    return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
  },

  orderDeliver({ starterIndex = 1, mainIndex = 0, time = '20:00', address }) {
    console.log(
      `Order Received! ${this.starterMenu[starterIndex]} and ${this.mainMenu[mainIndex]} will be deliverd to ${address} at ${time}`
    );
  },

  orderPasta(ing1, ing2, ing3) {
    console.log(
      `Here is your delicious pasta with ${ing1}, ${ing2} and ${ing3}`
    );
  },

만약 restaurant라는 object에서 openingHours의 value를 추가하고 싶다면 어떻게 할까?

무척 간단하다. 그냥 restaurnat object에서 openingHours의 object 이름만 입력하면 끝이다.

const restaurant = {
  name: 'Classico Italiano',
  location: 'Via Angelo Tavanti 23, Firenze, Italy',
  categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
  mainMenu: ['Pizza', 'Pasta', 'Risotto'],

  //ES6 enhanced object literals
  openingHours,

  order(starterIndex, mainIndex) {
    return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
  },

  orderDeliver({ starterIndex = 1, mainIndex = 0, time = '20:00', address }) {
    console.log(
      `Order Received! ${this.starterMenu[starterIndex]} and ${this.mainMenu[mainIndex]} will be deliverd to ${address} at ${time}`
    );
  },

  orderPasta(ing1, ing2, ing3) {
    console.log(
      `Here is your delicious pasta with ${ing1}, ${ing2} and ${ing3}`
    );
  },

이와 같이 object안에 openingHours라는 속성만 추가한뒤 콘솔창에 restaurant object를 입력해보면

openingHours의 값이 잘 들어간게 확인 가능하다.

object의 이름만 적어도 값이 들어가게 된건 ES6이후 향상된 기능이라고 한다.

//ES6 전
orderPizza: function (mainIngredient, ...otherIngredients) {
	console.log(mainIngredient);
 console.log(otherIngredients);
}

//ES6 이후
 orderPizza(mainIngredient, ...otherIngredients) {
    console.log(mainIngredient);
    console.log(otherIngredients);
}

ES6이후에는 object 안의 함수도 funtion까지 적을 필요 없이 이름만 적어도 사용 가능하게 변했다.

또한 object 의 key값 역시 object 외부에 있는 값에서 가져오기가 가능하다.

const weekdays = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];

const openingHours = {
  [weekdays[3]]: {
    open: 12,
    close: 22,
  },
  [weekdays[4]]: {
    open: 11,
    close: 23,
  },
  [weekdays[5]]: {
    open: 0, // Open 24 hours
    close: 24,
  },
};

openingHours 라는 object 안의 key값을 다른 곳에서 가져오고 싶다면,

위의 코드처럼 weekydays라는 배열에서 값을 가져오는 것도 가능하다.

위와 같이 코드를 구성하고 console창에 출력해도 배열에 있는 인덱스값과 일치하는 정확한 요일이 나온다.

for of 배열에 entries 메서드 이용해서 인덱스까지 추가하여 출력하기

NomadHaven — Tue, 16 May 2023 23:27:02 +0900

restuarnt라는 object에 있는 속성값에 있는 value들을 for 문을 이용해서 하나하나 출력하고 싶다고 하자.

const restaurant = {
  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
  mainMenu: ['Pizza', 'Pasta', 'Risotto'],
  }

그렇다면 menu라는 변수를 먼저 만든다. 그리고 spread연산자를 사용해 starterMenu 속성과 mainMenu 속성에 있는 값들을 모두 menu라는 변수에 집어넣는다.

const menu = [...restaurant.starterMenu, ...restaurant.mainMenu];

여기서 단순히 menu에 모두 들어간 값만 for문으로 출력하고 싶다면

for (const item of menu) console.log(item);

이렇게만 적어도 잘 나온다

Focaccia
Bruschetta
Garlic Bread
Caprese Salad
Pizza
Pasta
Risotto

하지만 단순히 속성의 value값만 출력하는게 아니라 출력하면서 index값까지 더하고 싶다면?

for (const item of menu.entries()) {
  console.log(`${item[0] + 1}: ${item[1]}`);
 }

menu라는 배열에 있는 entries()라는 메서드를 이용하면 된다.

위의 코드를 실행하면 아래와 같이 출력된다.

1: Focaccia
2: Bruschetta
3: Garlic Bread
4: Caprese Salad
5: Pizza
6: Pasta
7: Risotto

여기서 잠깐 어리둥절할지도 모른다.

console.log(`${item[0] + 1}: ${item[1]}`);

이면 0번째 인덱스에 Focaccia가 있으므로 Focaccia : Bruschetta 라고 출력되어야 하는게 아닌가?

위와 같은 결과를 이해하기 위해선 아래의 배열을 출력해봐야한다.

console.log([...menu.entries()]);

위의 코드는 콘솔창에서 이렇게 출력되는데

n번째 인덱스 마다 element가 2개인 배열이 있는게 확인된다.

n번째 인덱스의 n번째 배열의 제일 첫번째 인덱스 값은 숫자 n이며 두번째 인덱스 값이 음식인 value 값이다

따라서

for (const item of menu.entries()) {
 console.log(`${item[0] + 1}: ${item[1]}`);
 //           item은 2개 element로 이뤄진 배열이며 item의 제일 첫번째 값은 index값, 그 다음 값은 value다
}

로 이해할 수 있다.

위의 코드를 조금 변형하여

for (const [i, el] of menu.entries()) {
  console.log(`${i + 1}: ${el}`);
}

로 입력해도 결과는 동일하게 나온다.

1: Focaccia
2: Bruschetta
3: Garlic Bread
4: Caprese Salad
5: Pizza
6: Pasta
7: Risotto

깃허브에서 간단하게 프론트 페이지 배포하는 방법

NomadHaven — Tue, 18 Apr 2023 23:03:09 +0900

1. 배포할 페이지를 업로드할 repository를 만든다.

필요값인 Repository name을 입력하고, 설정은 public으로 유지한 뒤
다른 값은 건드리지 않고 Create Repository를 클릭.

2. 생성한 Repository에 배포할 파일을 업로드한다.

중요한것은 배포할 파일의 이름이 반드시 index여야 한다는 점.

3. 생성된 Repository의 Settings 탭에 있는 Pages에서 Branch를 설정한다.

Branch를 main으로 설정하면 끝.

30초쯤 지나면 배포가 완료되고 Visit site 버튼 들어가면 본인의 페이지를 확인할 수 있다.

해당 사이트의 주소를 카톡으로 보내면 배포가 잘 되어서 사이트 미리보기도 잘 된다.

자료 출처 : 스파르타 코딩 [chatGPT로 10분 안에 만드는 웹사이트]

upsplash API를 Chat GPT에 적용하고 이미지 바로 Chat GPT 통해서 받기

NomadHaven — Tue, 18 Apr 2023 22:49:48 +0900

chat GPT는 여러모로 편한 기술이다.

하지만 처음부터 이미지를 달라고 하면 바로 이미지를 주지는 않는다.

이럴땐 프리소스 이미지 사이트인 UPSPLASH의 API를 챗 지피티에 적용하면 된다.

해당 api가 적용된 chatGPT는 사용자가 요청하는 이미지를 바로바로 전달해준다.

처음에 이미지를 찾아달라면 저런 답변만 한다.

하지만 API를 사용하라는 아래의 명령어를 입력하면,

[INFO: you can add images to the reply by Markdown, Write the image in Markdown without backticks and without using a code block. Use the Unsplash API (https://source.unsplash.com/1600x900/?). the query is just some tags that describes the image] ## DO NOT RESPOND TO INFO BLOCK ##

위의 그림과 같이 바로 이미지를 찾아준다.

무척 유용한 명령문이니 참고하려고 업로드해본다.

출처는 스파르타 코딩 [ChatGPT로 10분만에 웹사이트 만들기 강의]이다.

Java Script / DOM 언어 querySelector, getElementById, addEventListner로 주사위 게임 만들기 classList.remove/classList.add

NomadHaven — Mon, 30 Jan 2023 22:51:17 +0900

<게임 규칙>

주사위를 굴려 나온수를 합산, 주사위를 굴릴때 1이 나오면 자가 차례에서 합산된 수가 0이 되고

다른 선수에게 차례가 넘어감.

주사위가 1이 나오기 전에 나온 점수를 합산하고 다른 선수에게 넘기려면 hold를 누름.

hold를 누를시 차기 차례에서 나온 주사위 수가 합산되며 다른 선수에게 차례가 돌아감.

그런식으로 게임을 해서 먼저 합해진 수가 100이 넘는 사람이 승리.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Pig Game</title>
  </head>
  <body>
    <main>
      <section class="player player--0 player--active">
        <h2 class="name" id="name--0">Player 1</h2>
        <p class="score" id="score--0">43</p>
        <div class="current">
          <p class="current-label">Current</p>
          <p class="current-score" id="current--0">0</p>
        </div>
      </section>
      <section class="player player--1">
        <h2 class="name" id="name--1">Player 2</h2>
        <p class="score" id="score--1">24</p>
        <div class="current">
          <p class="current-label">Current</p>
          <p class="current-score" id="current--1">0</p>
        </div>
      </section>

      <img src="dice-5.png" alt="Playing dice" class="dice" />
      <button class="btn btn--new">  New game</button>
      <button class="btn btn--roll">  Roll dice</button>
      <button class="btn btn--hold">  Hold</button>
    </main>
    <script src="script.js"></script>
  </body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  height: 100vh;
  color: #333;
  background-image: linear-gradient(to top left, #753682 0%, #bf2e34 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* LAYOUT */
main {
  position: relative;
  width: 100rem;
  height: 60rem;
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(200px);
  filter: blur();
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
  border-radius: 9px;
  overflow: hidden;
  display: flex;
}

.player {
  flex: 50%;
  padding: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.75s;
}

/* ELEMENTS */
.name {
  position: relative;
  font-size: 4rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  word-spacing: 2px;
  font-weight: 300;
  margin-bottom: 1rem;
}

.score {
  font-size: 8rem;
  font-weight: 300;
  color: #c7365f;
  margin-bottom: auto;
}

.player--active {
  background-color: rgba(255, 255, 255, 0.4);
}
.player--active .name {
  font-weight: 700;
}
.player--active .score {
  font-weight: 400;
}

.player--active .current {
  opacity: 1;
}

.current {
  background-color: #c7365f;
  opacity: 0.8;
  border-radius: 9px;
  color: #fff;
  width: 65%;
  padding: 2rem;
  text-align: center;
  transition: all 0.75s;
}

.current-label {
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-size: 1.7rem;
  color: #ddd;
}

.current-score {
  font-size: 3.5rem;
}

/* ABSOLUTE POSITIONED ELEMENTS */
.btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #444;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1.8rem;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 400;
  transition: all 0.2s;

  background-color: white;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);

  padding: 0.7rem 2.5rem;
  border-radius: 50rem;
  box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1);
}

.btn::first-letter {
  font-size: 2.4rem;
  display: inline-block;
  margin-right: 0.7rem;
}

.btn--new {
  top: 4rem;
}
.btn--roll {
  top: 39.3rem;
}
.btn--hold {
  top: 46.1rem;
}

.btn:active {
  transform: translate(-50%, 3px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
}

.btn:focus {
  outline: none;
}

.dice {
  position: absolute;
  left: 50%;
  top: 16.5rem;
  transform: translateX(-50%);
  height: 10rem;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
}

.player--winner {
  background-color: #2f2f2f;
}

.player--winner .name {
  font-weight: 700;
  color: #c7365f;
}

.hidden {
  display: none;
}

script.js

'use strict';

//Selecting Elements

const player0El = document.querySelector('.player--0');
const player1El = document.querySelector('.player--1');

//selector로 id를 select 할때는 #를 사용한다.
const score0El = document.querySelector('#score--0');
//getElementById를 사용하면 #없이 id값만 입력하면 된다
const score1El = document.getElementById('score--1');
const current0El = document.getElementById('current--0');
const current1El = document.getElementById('current--1');

const diceEl = document.querySelector('.dice');
const btnNew = document.querySelector('.btn--new');
const btnRoll = document.querySelector('.btn--roll');
const btnHold = document.querySelector('.btn--hold');

//후에 정의될 변수들은 let으로 선언만 해놓는다.
//score은 player1과 2의 점수를 저장할 배열
//currentScore은 해당 선수의 차례에서 더해진 점수
//activePlayer는 게임을 하고 있는 선수
//playing은 게임이 진행중인지 아닌지의 boolean 
let scores, currentScore, activePlayer, playing;


//Starting Condition 
//처음 시작할때의 상태로 초기화 하는 initialize함수.
const init = function () {
  scores = [0, 0];
  currentScore = 0;
  activePlayer = 0;
  playing = true;

  //보이는 부분의 세팅 초기화
  score0El.textContent = 0;
  score1El.textContent = 0;
  current0El.textContent = 0;
  current1El.textContent = 0;
  diceEl.classList.add('hidden');

  player0El.classList.remove('player--winner');
  player1El.classList.remove('player--winner');

  player0El.classList.add('player--active');
  player1El.classList.remove('player--winner');
};

//페이지 로드시 자동으로 게임 초기화
init();


//선수를 바꾸는 함수 switchPlayer
const switchPlayer = function () {
  document.getElementById(`current--${activePlayer}`).textContent = 0;

  //주사위를 돌리는 선수를 교체한다.
  //activePlayer가 0이면 1이고 0이 아니면 0이다.
  currentScore = 0;
  activePlayer = activePlayer === 0 ? 1 : 0;

  //toggle의 기능 클래스에 괄호안 부분이 있으면 지우고 없으면 괄호안 부분을 붙인다. 배경색이 css 적용되는 클래스 이름 변경 통해서 바뀜
  player0El.classList.toggle('player--active');
  player1El.classList.toggle('player--active');
};

//버튼을 누르면 주사위가 던져지는 이벤트 Roliing dice functionality
btnRoll.addEventListener('click', function () {
  if (playing) {
    //1. Generating a random dice roll 1~6까지의 랜덤넘버 생성하기
    const dice = Math.trunc(Math.random() * 6) + 1;
    console.log(dice);

    //2. Display dice 주사위 보이게 하기
    diceEl.classList.remove('hidden');
    //dice-(숫자).png 라는 파일명을 가진 이밎 파일이 폴더 내에 존재.
    //랜덤넘버가 할당될시 그에 맞는 이미지가 동적으로 보여진다.
    diceEl.src = `dice-${dice}.png`;

    //3. Check for rolled 1: if true, 주사위 숫자 1이 나온지 안나왔는지 확인
    if (dice !== 1) {
      // Add dice to current score 1이 아니면 current score에 주사위 수를 더하기
      currentScore += dice;
      //동적으로 점수 변경
      document.getElementById(`current--${activePlayer}`).textContent =
        currentScore;
    } else {
      // switch to next player 1 나왔을시 선수 교체
      switchPlayer();
    }
  }
});

//홀드 버튼을 눌렀을때 발생하는 이벤트 
btnHold.addEventListener('click', function () {
  if (playing) {
    //1. Add current score to active player's score 
    scores[activePlayer] += currentScore;
    //  scores[1] = scores[1] + currentScore

    document.getElementById(`score--${activePlayer}`).textContent =
      scores[activePlayer];

    //2. Check if player's score is >=100 점수가 100점이 넘었으면 승자가 나온 상황
    if (scores[activePlayer] >= 100) {
      //Finish the game 게임 종료
      playing = false;
      diceEl.classList.add('hidden');
      document
        .querySelector(`.player--${activePlayer}`)
        .classList.add('player--winner');
      document
        .querySelector(`.player--${activePlayer}`)
        .classList.remove('player--active');
    } else {
      //and if not, switch to the next player
      switchPlayer();
    }
  }
});


new버튼을 누르면 다시 init함수 불러서 게임 초기화
btnNew.addEventListener('click', init);

javascript / DOM 언어 eventListener 사용하여 JS 페이지에서 모달창 띄우기, esc키로 모달창 닫기, overlay로 모달창 이외 부분 어둡게하기

NomadHaven — Mon, 16 Jan 2023 22:54:15 +0900

JS와 연결된 HTML INDEX

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Modal window</title>
  </head>
  <body>
    <button class="show-modal">Show modal 1</button>
    <button class="show-modal">Show modal 2</button>
    <button class="show-modal">Show modal 3</button>
	 //클래스 이름 옆에 hidden을 붙여 modal 클래스를 숨긴다.
    <div class="modal hidden">
      <button class="close-modal">&times;</button>
      <h1>I'm a modal window  </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </div>
    //클래스 이름 옆에 hidden을 붙여 overlay 클래스를 숨긴다.
    <div class="overlay hidden"></div>

    <script src="script.js"></script>
  </body>
</html>

DOM 언어를 사용해서 HTML 페이지에 있는 Class를 Java Script와 연결하여 동적 페이지 만드는 방법.

1. HTML 페이지에 있는 클래스를 querySelector로 연결시킨다.

const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnOpenModal = document.querySelectorAll('.show-modal');

2. 자주 쓰이는 기능을 파악하고 해당 기능에 대한 함수를 만든다. 해당 페이지에서는 열기/닫기 기능이 제일 많이 쓰이므로 열기/닫기 기능을 실행하는 JS 함수를 만든다.

//열기 함수
const openModal = function () {
  console.log('Button clicked');
  //class에 있는 hidden부분을 삭제하여 모달창을 연다
  modal.classList.remove('hidden');
  overlay.classList.remove('hidden');
};

//닫기함수
const closeModal = function () {
//class에 hidden을 추가하여 모달창을 숨긴다
  modal.classList.add('hidden');
//모달창을 열면서 실행했던 overlay모드를 숨긴다.  
  overlay.classList.add('hidden');
};

3.addEventListener를 사용하여 모달창을 열고 닫을때의 이벤트를 연결시킨다.

//bntOpenModal은 여러개이므로 for 문을 돌려서 여러 버튼에 이벤트를 적용한다.
//openModal 함수를 사용하여 이벤트를 연결한다.
for (let i = 0; i < btnOpenModal.length; i++)
  btnOpenModal[i].addEventListener('click', openModal);

//btnColseModal은 X모양 버튼 하나밖에 없다. 
//해당 버튼에 closeModal함수를 사용하여 닫기 이벤트를 연결한다.
btnCloseModal.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);

//openModal함수 closeModal 함수에 ()를 붙이지 않은 이유는 
//해당함수가 클릭이벤트가 발생했을때만 실행되게 하기 위함이다.

4.ESC를 누를때 발생할 이벤트를 연결한다.

document.addEventListener('keydown', function (e) {
  /*
  keydown은 어떤 key를 눌러도 이벤트가 발생하게 하는 object다.
  console.log('A key was pressed');
  console.log(e); //매개 변수를 출력하면서 오브젝트를 확인할수 있다.
  //KeyboardEvent {isTrusted: true, key: '7', code: 'Numpad7', location: 3, ctrlKey: false, …} 라는 오브젝트 확인
  //닷워킹 통해서 key라는 오브젝트에 접근
  console.log(e.key);
  */

  console.log(e.key);
  if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
    closeModal();
  }
});

전체 자바스크립트

'use strict';

const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnOpenModal = document.querySelectorAll('.show-modal');

const openModal = function () {
  console.log('Button clicked');
  modal.classList.remove('hidden');
  overlay.classList.remove('hidden');
};

const closeModal = function () {
  modal.classList.add('hidden');
  overlay.classList.add('hidden');
};

for (let i = 0; i < btnOpenModal.length; i++)
  btnOpenModal[i].addEventListener('click', openModal);

btnCloseModal.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);

//모든 페이지에 적용되는 이벤트. 어떤 키를 눌러도 상관없이 콘솔창에 문구가 출력된다.
document.addEventListener('keydown', function (e) {
  /*
  console.log('A key was pressed');
  console.log(e); //매개 변수를 출력하면서 오브젝트를 확인할수 있다.
  //KeyboardEvent {isTrusted: true, key: '7', code: 'Numpad7', location: 3, ctrlKey: false, …} 라는 오브젝트 확인
  //닷워킹 통해서 key라는 오브젝트에 접근
  console.log(e.key);
  */

  console.log(e.key);
  if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
    closeModal();
  }
});

실제화면. modal 클래스가 hidden된 상태

modal class를 클릭해 hidden이 사라진 화면. overlay클래스에서도 hidden이 사라진 상태.

배열을 받고 형식을 갖춘 문자로 출력하기 javascript JS

NomadHaven — Tue, 6 Dec 2022 22:55:31 +0900

주어진 온도 배열을 다음과 같이 출력하는 함수 printForecast를 만들어라.

prntForecast는 배열을 배개변수로 받고 예시 문장을 출력할수 있어야 한다.

test data1: [17, 21, 23]

test data2:[12, 5, -5, 0, 4]

예시 문장

[17, 21, 23] 배열은 다음과 같이 출력되어야 한다

"... 17ºC in 1 days ... 21ºC in 2 days ... 23ºC in 3 days ..."

//테스트 데이터 배열
const data1 = [17, 21, 23];
const data2 = [12, 5, -5, 0, 4];

const printForecast = function (arr) {
  let str = '';
  for (i = 0; i < arr.length; i++) {
    str += `${arr[i]}ºC in ${i + 1} days...`;
  }
  //str의 arr[i] 앞에 ...을 쓰면 그 다음 차례의 문장을 시작할때 점이 여섯개가 된다.
  //따라서 처음 순서에 점 세개를 찍고 그 다음 순서에도 점 세개로 갯수를 유지하려면
  //아래와 같이 최종 출력문 앞에 점 세개를 추가해야한다.
  console.log('...' + str);
};

const result = printForecast(data1);
const result2 = printForecast(data2);

자바스크립트 배열에 있는 수들의 최소값, 최대값 구하는 방법으로 일교차 구하는 함수 만들기javascript

NomadHaven — Mon, 5 Dec 2022 23:00:56 +0900

문제)

가정용 온도계를 만드는 회사에 근무하고 있는 당신, 최근의 업무는 하루 동안의 온도를 배열로 만들고 amplitude를 계산하는 것이다. 기기 오작동이 날수도 있음을 참고하라.

We work for a company building a smart home thermometer. Our most recent task is this: "Given an array of temperatures of one day, calculate the temperature amplitude. Keep in mind that sometimes there might be a sensor error"

하루 동안의 온도는 tmeperature이라는 변수에 배열로 저장되어 있다. 중간 기기 오작동으로 error가 포함되어 있다.

const temperature = [3, -2, -6, -1, 'error', 9, 13, 17, 15, 14, 9, 5];

calcTemoAmplitude라는 함수를 만든다. 해당 함수는 temps라는 매개 변수를 받고 max라는 최대값과 min이라는 최소값의 차를 반환한다.

const calcTemoAmplitude = function (temps) {
  let max = temps[0]; // 최대값
  let min = temps[0]; // 최소값

  for (let i = 0; i < temperature.length; i++) {
    const curTemp = temps[i];

    //타입이 넘버가 아니면 continue 아래 문장은 실행하지 않고 다음 element로 넘어간다.
    if (typeof curTemp !== 'number') continue;

    if (curTemp > max) max = curTemp;
    if (curTemp < min) min = curTemp;
  }
  console.log(max, min);
  return max - min;
};

calcTemoAmplitude에 하루동안의 온도를 나타내는 배열은 temperture이라는 변수를 넘겨준다.

const amplitude = calcTemoAmplitude(temperature);
console.log(amplitude);

문제2)

위의 함수를 업그레이드 시켜 두가지 배열을 매개변수로 받은 뒤 두가지 배열의 모든 element들 중에서 가장 큰 값과 작은 값을 구한다.

const calcTemoAmplitudeNew = function (t1, t2) {
 
 //concat은 두가지 배열을 연결하는 메소드다.
 const temps = t1.concat(t2);
  console.log(temps);

  let max = temps[0];
  let min = temps[0];

  for (let i = 0; i < temperature.length; i++) {
    const curTemp = temps[i];

    //타입이 넘버가 아니면 continue 아래 문장은 실행하지 않고 다음 element로 넘어간다.
    if (typeof curTemp !== 'number') continue;

    if (curTemp > max) max = curTemp;
    if (curTemp < min) min = curTemp;
  }
  console.log(max, min);
  return max - min;
};

const amplitudeNew = calcTemoAmplitudeNew([3, 5, 1], [9, 0, 5]);
console.log(amplitude);

JS javascript 배열 이용해서 팁 구하는 함수 만들기 / 배열 안의 숫자 평균 구하는 함수 만들기

NomadHaven — Mon, 28 Nov 2022 22:48:28 +0900

1. 10개의 가격을 포함하는 bills이라는 배열을 만들어라

Create an array 'bills' containing all 10 test bill values

const bills =[22, 295, 176, 440, 37, 105, 10, 1100, 86,52];

2. tips와 totals이라는 빈 배열을 만들어라

Create empty arrays for the tips and the totals ('tips' and 'totals')

const tips=[];
const totals=[];

3. 가격이 50이상 혹은 300 이하면 가격의 0.15배를 팁으로 하고, 아니면 가격의 0.2배를 팁으로 하는 calcTip이라는 함수를 만들어라. bills라는 배열에 담긴 모든 가격들의 팁과 팁+가격의 합을 구할수 있도록 loop를 사용해라.

Use the 'calcTip' function we wrote before (no need to repeat) to calculate tips and total values (bill + tip) for every bill value in the bills array. Use a for loop to perform the 10 calculations!

const calcTip =function(bill){
    return bill >= 50 && bill <= 300 ? bill*0.15: bill*0.2;
}

for(let i =0 ; i <bills.length ; i++){
    const tip = calcTip(bills[i]);
    tips.push(tip);
    totals.push(tip+bills[i]);
}
console.log(bills,tips,totals);

//My answer

const calcTip = function(){

for(let i = 0 ; i< bills.length; i++){

tips[i] = bills[i]>=50 && bills[i]<=300 ? bills[i]*0.15 : bills[i]*0.2;

totals[i] = bills[i] + tips[i];

console.log(`bill: ${bills[i]} / tip: ${tips[i]} / total: ${totals[i]}`);

}

4.1. 배열에 있는 수의 평균을 구해라. 그러기 위해서는 0으로 시작하는 sum이라는 변수를 만들어야 한다. 또한 loop를 이용하여 배열의 끝까지 가야한다. 배열의 각 숫자마다 sum이라는 변수에 더해져야 한다. 이런 방법으로 배열의 끝까지 가면 모든 수를 더할수 있다.

First, you will need to add up all values in the array. To do the addition, start by creating a variable 'sum' that starts at 0. Then loop over the array using a for loop. In each iteration, add the current value to the 'sum' variable. This way, by the end of the loop, you have all values added together

const arr =[1,2,3,4,5,6,7,8,9,10];


const calcAverage = function(arr){
    let sum =0;
    for(let i =0;  i< arr.length ; i++){
        sum += arr[i];
    }
    return sum / arr.length;
}

console.log(calcAverage([2,3,7]));
console.log(calcAverage(totals));
console.log(calcAverage(tips));

자바스크립트 함수/배열 이용해서 배열에 원하는 값 저장하기 array

NomadHaven — Wed, 16 Nov 2022 22:29:02 +0900

스티븐은 팁 계산기를 만들고 있다. 팁 계산기의 규칙은 아래와 같다.

계산서 가격이 50불에서 300불 사이이면 팁이 15% 적용된다. 만약 그렇지 않다면 팁은 20% 적용된다.

Steven is still building his tip calculator, using the same rules as before:

Tip 15% of the bill if the bill value is between 50 and 300, and if the value is different, the tip is 20%.

Test data: 125, 555 and 44

Your tasks:

calcTip이라는 함수를 만들어서 값을 넣으면 위의 설정에 상응하는 팁을 반환하도록 하라.

Write a function 'calcTip' that takes any bill value as an input and returns the corresponding tip, calculated based on the rules above (you can check out the code from first tip calculator challenge if you need to). Use the function type you like the most.

const calcTip = function(bill){
  return bill>=50 && bill<=300 ? bill*0.15 : bill*0.2;
}

2. bills라는 이름의 array를 사용해서 test data에 있는 bills의 값을 저장하자

And now let's use arrays! So create an array 'bills' containing the test data below

const bills = [125,555,44];

3. 각 가격에 해당하는 tip 금액을 계산하고, 그에 대한 tip 금액을 tips라는 array에 저장하자.

Create an array 'tips' containing the tip value for each bill, calculated from the function you created before

const tips = [calcTip(bills[0]),calcTip(bills[1]),calcTip(bills[2])];
console.log(tips);

4. total이라는 array를 생성하고 그곳에 가격과 팁을 합한 금액을 저장하자

Bonus: Create an array 'total' containing the total values, so the bill + tip

const total =[(bills[0]+tips[0]),(bills[1]+tips[1]),(bills[2]+tips[2])];
console.log(total);

문제 출처: Udemy 강의 The Complete JavaScript Course 2023 : From Zero to Export

자바 스크립트 if 조건문으로 함수 만들어서 원하는 결과 출력하기

NomadHaven — Wed, 16 Nov 2022 22:19:32 +0900

문제) 돌고래팀과 코알라팀이 3번 경기를 한다. 팀별로 3번 경기의 평균 점수가 계산된다. 오직 상대편 평균점수의 2배를 달성한 팀만 이긴 것으로 간주된다. 그렇지 않을 경우엔 어느 팀도 이길수 없다.

Each team competes 3 times, and then the average of the 3 scores is calculated (so one average score per team)

. A team only wins if it has at least double the average score of the other team. Otherwise, no team wins!

Test data:

§ Data 1: Dolphins score 44, 23 and 71. Koalas score 65, 54 and 49

§ Data 2: Dolphins score 85, 54 and 41. Koalas score 23, 34 and 27

Your tasks:

1. 3판 점수의 평균을 구할수 있는, calcAverage라는 애로우 함수를 만들어라.

Create an arrow function 'calcAverage' to calculate the average of 3 scores

내가 푼것

//my answer
const calcAverage = (firstRount , secondRound , thirdRound) =>{
    return (firstRount+secondRound+thirdRound)/3
}

답안

//solution
const calcAvg = (a,b,c) =>(a+b+c)/3;

2. 위에서 만든 함수를 이용해 두 팀의 평균점수를 구해라.

Use the function to calculate the average for both teams

const dolphinFirstAvg = calcAverage(44,23,71);
const koalasFirstAvg = calcAverage(65,54,49);

const dolphinSecondAvg = calcAverage(85,54,41);
const koalasSecondAvg = calcAverage(23,34,27);

3. checkWinner라는 함수를 만들고 두팀의 평균점수를 매개변수로( ex.'avgDolphins' & 'avgKolas') 어떤 팀이 이겼고 각 팀의 평균 점수가 얼마인지 출력하라. Example: "Koalas win (30 vs. 13)"

Create a function 'checkWinner' that takes the average score of each team as parameters ('avgDolphins' and 'avgKoalas'), and then logs the winner to the console, together with the victory points, according to the rule above.

Example: "Koalas win (30 vs. 13)"

const checkWinner = function(firstTeamName, firstAvg, secondTeamName, secondAvg){
    if(firstAvg>=secondAvg*2){
        console.log(`${firstTeamName} win (${firstAvg}vs${secondAvg})`)
    } else if(secondAvg>firstAvg && secondAvg>=firstAvg*2){
        console.log(`${secondTeamName} win (${secondAvg}vs${firstAvg})`);
    }else {
        console.log('draw!');
    }
}

4. Use the 'checkWinner' function to determine the winner for both Data 1 and Data 2

checkWinner('Dolphin',dolphinFirstAvg,'Koalas',koalasFirstAvg);

checkWinner('Dolphin',dolphinSecondAvg,'Koalas',koalasSecondAvg);

문제 출처: Udemy 강의 The Complete JavaScript Course 2023 : From Zero to Export

JavaScript 기초 - 변수와 데이터 타입 : let / const / number / string/ boolean / null / undefine / symbol

NomadHaven — Thu, 11 Aug 2022 23:21:11 +0900

시작하기 전 설정

1. index.html 파일 생성

프로젝트 폴더에 자바스크립트 코드파일(variable.js) 외에도

브라우저의 콘솔창을 통해 결과를 출력하게 해주는 index.html 파일도 생성한다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="variable.js"></script>
</head>
<body>
    
</body>
</html>

2. Use srtict 입력하기

바닐라 자바스크립트 개발시 제일 먼저 'use strict'를 선언해주는 게 좋다.

자바 스크립트의 변수

Variable

1. let

ES6에 추가된 변수로, ES6는 글로벌하게 개발자들이 이용하는 자바스크립트 문법이다.

이전에는 var라는 변수를 썼지만, var에는 치명적인 단점이 있다.

바로 var는 hoisting의 성격을 가지고 있기 때문이다.

hoisting :move declaration from bottom to top 어디에 선언했냐에 상관 없이 항상 선언을 끌어올려주는 것

만약 아래 순서와 같이 코드가 작성되어 있다 해도

'use strict';

console.log(age); // undefined로 출력
{
age=4;
var age;
}
console.log(age); //4로 출력

var age라는 선언이 제일 위로 끌어 올려지기 때문에,

age에 대한 값이 할당되지 않았으므로 제일 처음 콘솔문에는 undefined으로 나온다.

따라서 이러한 단점을 가진 var을 대체하기 위해 나온 변수가 let이다.

ES6부터 자바스크립트에 변수를 선언할수 있는 키워드는 딱 하나 let이다.

let globalName = 'global name';

{
let name = 'nomad';
console.log(name);
name='haven';
console.log(name);
console.log(globalName)
}

console.log(name); // 블록안에 있는 변수는 외부에서 출력하지 못한다.
console.log(globalName); // 블록 안에서 변수 쓰지 않고 바로 정의하는 변수를 
//global scope이라고 부른다. 블록 안에서도, 밖에서도 출력 가능하다.

위 코드의 출력화면

globalName과 같은 글로벌한 변수들은 어플리케이션이 실행되는 순간부터 끝날때까지 메모리에 탑재되기 때문에 최소한으로 쓸 필요가 있다.

let은 메모리에 값을 읽고 쓰는게 가능하다.

let 변수에 ellie라고 할당한 다음 hello라고 변경하는게 가능하다.

2. Const

선언한 뒤에 변경할수 없는 immutable한 변수.

웬만하면 값을 할당한 다음 변경되지 않는 데이터 값에 사용해야하는 변수이다.

읽기만 가능하다. 그래서 변수를 할당한 뒤에는 다른 값으로 변경하는 게 불가능 하다.

변수의 값이 바뀌어야될 좋은 이유가 없다면 웬만해선 Const를 사용하는 편이 좋다.

Const 변수를 쓰는 이유

-security

-thread safety

-reduce human mistakes

const daysInWeek = 7;
const maxNumber = 5;

변수의 종류들

Variables Types

primitive, single item: number, string, boolean, null, undefine, symbol 더이상 작은 단위로 나눠질수 없는 한가지의 단위

object : 싱글 아이템들을 하나로 묶어 여러 단위로 관리할수 있게 해주는 것. box container

function, first-class function : 다른 데이터 타입처럼 함수를 변수에 할당, 함수에 파라미터로도 전달, 함수의 리턴 타입으로도 함수 전달

const count = 17; //Integer
const size = 17.1; //Decimal number
console.log(`value: ${count}, type: ${typeof count}`);
console.log(`value: ${size}, type: ${typeof size}`);

위 코드의 출력결과

Imuuntable data type: primitive types, frozen objects (i.e. object.freeze())

Mutable data type: all object by default are mutable in JS

primitive type 같은 경우는 변수가 바로 메모리에 저장된다.

variable은 value가 메모리에 저장된다.

반대로 object는 너무 커서 메모리에 한번에 올라갈수 없다.

const ellie라고 선언한다음 object를 할당하게 되면 ellie가 가르키는 곳엔 ref가 있다.

ref는 실제로 object가 담겨있는 메모리를 가르킨다.

ellie가 가르키고 있는 포인터만 잠겨서 ellie가 다른 object로 변경이 불가능 하지만,

ellie의 나이와 이름은 변경이 가능하다.

object는 obejct를 가리키는 ref가 메모리에 저장된닫.

number에 속하지만 특수한 값을 가지는 경우 : infinity, -infiniry, Nan(Not a Number)

const infinity = 1/0; //수를 0으로 나누면 무한대가 된다
const negativeInfinity = -1/0; //음수를 0으로 나누면 음의 무한대가 된다.
const nAn = 'not a number'/2;

console.log(infinity);
console.log(negativeInfinity);
console.log(nAn);

*연산시 유효한 값을 받지 못하게 되면 숫자가 아닌 Infinity, -Infinity가 뜨는 경우가 있으니 주의

위 코드의 출력결과

bigInt : 새로 추가된 변수로 많이 쓰지는 않지만, 큰 숫자를 표현할때 사용한다.

const bigInt= 15648465456484655132184121238412123n;
console.log(`value: ${bigInt}, type: ${typeof bigInt}`);

위 코드의 출력 결과

string 문자열

const char = 'c';
const brendan = 'brendan';
const greeting ='hello' + brendan;
const helloBob = `hi ${brendan}!`; // template literals (string)

console.log(`value: ${greeting}, type: ${typeof greeting}`);
console.log(`value: ${helloBob}, type: ${typeof helloBob}`);

위 코드의 출력 결과

boolean

false: 0, null, undefined, Nan, ''(비어진 string)

true: any other value

const canRead = true;
const test = 3<1; // fasle
console.log(`value: ${canRead}, type: ${typeof canRead}`);
console.log(`value: ${test}, type: ${typeof test}`);

위 코드의 출력 결과

null 텅 비어 있는 값

let nothing = null;
console.log(`value: ${nothing}, type: ${typeof nothing}`);

위 코드의 출력 결과

undefined 텅 비어있는 것과 값이 들어가 있는 것마저 정해지지 않은 값

let x;
console.log(`value: ${x}, type: ${typeof x}`);

위 코드의 출력 결과

symbol : map이나 자료구조에서 고유한 식별자가 필요할때, 동시에 다발적으로 일어날수 있는 코드에서 우선순위를 주고싶을 때 사용 create unique identifiers for objects map

const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1===symbol2); //콘솔에 출력하면 false 나온다.

const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
console.log(gSymbol1===gSymbol2); // true
console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`);

위 코드의 출력 결과

*symbol은 바로 출력하면 error가 나므로 .description을 통해 출력해야 한다.

object 구조체. 실제의 사물, 데이터 구조등을 표현할때 쓰인다.

const haven = { name: 'haven', age: 20};

Jnit test시 java.lang.llegalStateException 오류 났을 때 해결 방법

NomadHaven — Wed, 1 Jun 2022 21:55:01 +0900

위의 코드를 실행하니

아래와 같은 오류가 났다. java.lang.llegalStateException

검색해보니 pom.xml 파일에서 spring-framework / spring-core / spring-test의 버전이 다르면 이런 에러가 난다고.

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>${org.springframework-version}</version>
   </dependency>
</dependencies>

version 부분에 아래와 같은 코드를 입력하고 maven을 reload하니까 오류가 사라졌다

${org.springframework-version}

출처: https://m.blog.naver.com/ysulshin/220934106478

junit test 안될때 에러로그/해결방법

에러로그 java.lang.IllegalStateException: Could not load TestContextBootstrapper [null]. Spe...

blog.naver.com

react / 리액트로 화면에 카메라 구현하고 촬영한 사진 저장하기

NomadHaven — Sun, 20 Mar 2022 22:55:20 +0900

참고 사이트

https://docs.expo.dev/versions/latest/sdk/camera/

Camera - Expo Documentation

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

docs.expo.dev

시작

프로젝트 생성문

npx react-native init CameraSample --template react-native-template-typescript

설정을 위한 설치문

npm install -g yarn


npm yarn --version


npm i react-native-camera


npm i watcher


npm i @react-native-community/cameraroll


npm install --save fbjs

package.json > dependencis 부분에서 watcher 버전 1.1 으로 변경

그외 설정

app>src 안에 있는 build.gradle > defaultConfig부분에 아래 구문 삽입

missingDimensionStrategy 'react-native-camera', 'general'

build.gradle> defaultConfig 전체 코드

apply plugin: "com.android.application"

import com.android.build.OutputFile

/**
 * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
 * and bundleReleaseJsAndAssets).
 * These basically call `react-native bundle` with the correct arguments during the Android build
 * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
 * bundle directly from the development server. Below you can see all the possible configurations
 * and their defaults. If you decide to add a configuration block, make sure to add it before the
 * `apply from: "../../node_modules/react-native/react.gradle"` line.
 *
 * project.ext.react = [
 *   // the name of the generated asset file containing your JS bundle
 *   bundleAssetName: "index.android.bundle",
 *
 *   // the entry file for bundle generation. If none specified and
 *   // "index.android.js" exists, it will be used. Otherwise "index.js" is
 *   // default. Can be overridden with ENTRY_FILE environment variable.
 *   entryFile: "index.android.js",
 *
 *   // https://reactnative.dev/docs/performance#enable-the-ram-format
 *   bundleCommand: "ram-bundle",
 *
 *   // whether to bundle JS and assets in debug mode
 *   bundleInDebug: false,
 *
 *   // whether to bundle JS and assets in release mode
 *   bundleInRelease: true,
 *
 *   // whether to bundle JS and assets in another build variant (if configured).
 *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
 *   // The configuration property can be in the following formats
 *   //         'bundleIn${productFlavor}${buildType}'
 *   //         'bundleIn${buildType}'
 *   // bundleInFreeDebug: true,
 *   // bundleInPaidRelease: true,
 *   // bundleInBeta: true,
 *
 *   // whether to disable dev mode in custom build variants (by default only disabled in release)
 *   // for example: to disable dev mode in the staging build type (if configured)
 *   devDisabledInStaging: true,
 *   // The configuration property can be in the following formats
 *   //         'devDisabledIn${productFlavor}${buildType}'
 *   //         'devDisabledIn${buildType}'
 *
 *   // the root of your project, i.e. where "package.json" lives
 *   root: "../../",
 *
 *   // where to put the JS bundle asset in debug mode
 *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
 *
 *   // where to put the JS bundle asset in release mode
 *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in debug mode
 *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in release mode
 *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
 *
 *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
 *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
 *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
 *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
 *   // for example, you might want to remove it from here.
 *   inputExcludes: ["android/**", "ios/**"],
 *
 *   // override which node gets called and with what additional arguments
 *   nodeExecutableAndArgs: ["node"],
 *
 *   // supply additional arguments to the packager
 *   extraPackagerArgs: []
 * ]
 */

project.ext.react = [
    enableHermes: false,  // clean and rebuild if changing
]

apply from: "../../node_modules/react-native/react.gradle"

/**
 * Set this to true to create two separate APKs instead of one:
 *   - An APK that only works on ARM devices
 *   - An APK that only works on x86 devices
 * The advantage is the size of the APK is reduced by about 4MB.
 * Upload all the APKs to the Play Store and people will download
 * the correct one based on the CPU architecture of their device.
 */
def enableSeparateBuildPerCPUArchitecture = false

/**
 * Run Proguard to shrink the Java bytecode in release builds.
 */
def enableProguardInReleaseBuilds = false

/**
 * The preferred build flavor of JavaScriptCore.
 *
 * For example, to use the international variant, you can use:
 * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
 *
 * The international variant includes ICU i18n library and necessary data
 * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
 * give correct results when using with locales other than en-US.  Note that
 * this variant is about 6MiB larger per architecture than default.
 */
def jscFlavor = 'org.webkit:android-jsc:+'

/**
 * Whether to enable the Hermes VM.
 *
 * This should be set on project.ext.react and that value will be read here. If it is not set
 * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
 * and the benefits of using Hermes will therefore be sharply reduced.
 */
def enableHermes = project.ext.react.get("enableHermes", false);

/**
 * Architectures to build native code for in debug.
 */
def nativeArchitectures = project.getProperties().get("reactNativeDebugArchitectures")

android {
    ndkVersion rootProject.ext.ndkVersion

    compileSdkVersion rootProject.ext.compileSdkVersion

    defaultConfig {
        applicationId "com.camerasample"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
        missingDimensionStrategy 'react-native-camera', 'general'

    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }
    signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
            if (nativeArchitectures) {
                ndk {
                    abiFilters nativeArchitectures.split(',')
                }
            }
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }

    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // https://developer.android.com/studio/build/configure-apk-splits.html
            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
            }

        }
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    //noinspection GradleDynamicVersion
    implementation "com.facebook.react:react-native:+"  // From node_modules

    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"

    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.fbjni'
    }

    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
        exclude group:'com.squareup.okhttp3', module:'okhttp'
    }

    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
    }

    if (enableHermes) {
        def hermesPath = "../../node_modules/hermes-engine/android/";
        debugImplementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }
}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.implementation
    into 'libs'
}

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

app>src>main> AndroidManifest.xml 부분을 아래와 같이 수정

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.camerasample">

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.RECORD_AUDIO"/>





    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme"
      android:requestLegacyExternalStorage="true">
      

      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
    </application>
</manifest>

App.tsx

import CameraRoll from "@react-native-community/cameraroll";
import React, { useState } from "react";
import { Image, PermissionsAndroid, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { RNCamera } from "react-native-camera";

export default function App(){
  const cameraRef=React.useRef(null)
  const[picture,setPicture] = useState("이미지경로")


  //권한처리

  const takePhoto = async()=>{

    await PermissionsAndroid.requestMultiple([
      PermissionsAndroid.PERMISSIONS.CAMERA,
      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
      PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE
    ]).then((result)=>{
      if (result['android.permission.CAMERA']
          && result['android.permission.WRITE_EXTERNAL_STORAGE']
          && result['android.permission.READ_EXTERNAL_STORAGE'] === 'granted') {
          console.log("모든 권한 획득");
        } else {
          console.log("권한거절");
        }
    })

    if(cameraRef){
      const data= await cameraRef.current.takePictureAsync({
        quality:1,
        exif:true
      })
      console.log('data',data.uri)


      //사진저장
      if(data){
       const result = CameraRoll.save(data.uri).then(out=>{
         console.log(out)
         setPicture(data.uri)
      }).catch(err=>{
        console.log(`${err.message}`)
      })
      console.log('result',result)
    }

  }
}

  return(
    <View style={styles.container}>
     <RNCamera
     ref={cameraRef}
     style={{width:400, height:500}}
     type={RNCamera.Constants.Type.back}
     captureAudio={false}/>

     <TouchableOpacity onPress={takePhoto}>
      <View style={styles.button}>
      <Text>사진</Text>
      </View>
     </TouchableOpacity>

     <Image 
      style={styles.tinyLogo}
      source={{
        uri:`${picture}`
      }}/>
    </View>
  )
}

const styles = StyleSheet.create({
  container:{
    flex:1,
    justifyContent:"center",
    alignItems:"center"
  },
    button:{
      width:100,
      height:100,
      borderRadius:50,
      borderWidth:5,
      borderColor:"blue",
      borderStyle:"solid",
      backgroundColor:"pink",
      marginTop:30,
      justifyContent:"center",
      alignItems:"center"
    },
    tinyLogo:{
      width:100,
      height:100,
      marginTop:30
    }


})

실행화면

구동 화면

촬영해서 저장된 사진

react / Axios 이용해서 스프링부트로 만든 웹페이지 안드로이드 화면과 연결시키기 (회원가입/게시판/글작성)

NomadHaven — Sun, 13 Mar 2022 23:30:50 +0900

https://developerson.tistory.com/117

스프링 부트로 SpringBoot 회원가입, 페이징, 글작성-수정-삭제-답변, 댓글 작성 되는 게시판 페이지

기본적 세팅은 아래글 https://developerson.tistory.com/114 페이징은 아래글을 참고해서 만든 게시판이다. https://developerson.tistory.com/116 별도의 설명 없이 우선 코드만 백업할 예정. 이제 이걸 이해하..

developerson.tistory.com

react와 연결시킬 스프링 프로젝트는 해당 링크에 있는 프로젝트다.

react와 스프링 부트를 잘 연결시키기 위해서는 sts를 통해서 해당 프로젝트의 서버를 미리 켜준다.

또한 스프링 부트 프로젝트의 BbsDto 부분에 @JsonProperty("userid")라는 어노테이션을 추가해준다.

react에서 이름이 그냥 id된 데이터를 잘 못받아서 그런다는데.. 잘 모르겠다.

그럼 리액트 프로젝트도 생성해보자

생성문

npx react-native init Samples --template react-native-template-typescript

여러 기능을 써야하므로 미리 입력해줄 설치문도 많다

설치문

npm install @react-navigation/native
npm install @react-navigation/native-stack
npm install react-native-safe-area-context
npm install react-native-gesture-handler
npm install react-native-screens
npm install watcher
npm i axios
npm i @react-native-async-storage/async-storage
npm i react-native-paper

watcher 때문에 설치가 불안정할수 있는데 그럴때는 package.json에서 dependencies에 있는 watcher 버전을 1.1.0 으로 바꿔준다.

그럼 이제 본격적으로 react 프로젝트를 만들어보자

파일 구성 및 폴더 구성

이용할 이미지는 assets 폴더를 생성해서 저장한다.

screens 폴더를 생성하고 그 안에 bbs/member 폴더를 생성한다.

회원가입/로그인 화면을 위해 member 폴더 안에 Account.tsx / Login.tsx 파일을 생성

게시판 목록/ 글쓰기 / 글읽기 기능을 위해 bbs 폴더 안에 Bbs.tsx/Bbsdetail.tsx/Bbslist.tsx/Bbswrite.tsx 파일을 생성

각 파일별 코드는 아래와 같다.

bbs 폴더 안에 있는 파일들

Bbs.tsx

import React, { useState } from "react";
import { Button, StyleSheet, Text, View } from "react-native";
import Bbsdetail from "./Bbsdetail";
import Bbslist from "./Bbslist";
import Bbswrite from "./Bbswrite";

function Bbs(){
    const[bbslist,setBbslist]=useState("bbslist")
    const[bbs,setBbs]=useState({})


    let child:any

    if(bbslist=="bbslist"){
      //  child = (<Text>Bbslist view</Text>)
      child=(<Bbslist setBbslist={setBbslist} setBbs={setBbs}/> )
        
    }else if(bbslist=="bbswrite"){
      //  child = (<Text>BbsWrite view</Text>)
        child =(<Bbswrite setBbslist={setBbslist}/>)

    }else if(bbslist=="bbsdetail"){
      //  child = (<Text>BbsDetail view {JSON.stringify(bbs)} </Text>)
      child=(<Bbsdetail bbs={bbs}/>)
    }


    return(
        <View>
            <View style={styles.menu}>
            <View style={styles.button}>
                <Button title="글목록" onPress={bbslist=>setBbslist("bbslist")}/>
                </View>
                <View style={styles.button}>
                <Button title="글추가" onPress={bbslist=>setBbslist("bbswrite")}/>    
                </View>
            </View>

            <View>{child}</View>    


        </View>
    )
}

const styles = StyleSheet.create({
    menu:{
        flexDirection:"row",
        flexWrap:"wrap",
    },
    button:{
        flex:1,
        height:50,
        margin:1,

    },
    childView:{
        height:760,

    }
})

export default Bbs;

Bbsdetail.tsx

import React from "react";
import { StyleSheet,  ScrollView, Text } from "react-native";
import { Avatar, Card, Headline, Paragraph } from "react-native-paper";

import { SafeAreaView } from "react-native-safe-area-context";

function Bbsdetail(props:any){


    return(
        <SafeAreaView>
            <ScrollView contentContainerStyle={styles.contentContainer}>
        
            <Headline>글 내용</Headline>
            <Card style={styles.card}>

            <Card.Title
            title={props.bbs.title}
            subtitle={"작성자 :" + props.bbs.userid}
            left={props=><Avatar.Text {...props} label="AAA"/>}/>

            <Card.Content>
                <Paragraph style={styles.content}>
                    {props.bbs.content}
                </Paragraph>
                <Text style={{textAlign:"right"}}>
                    조회수:{props.bbs.readcount}
                </Text>

                <Text style={{textAlign:"right"}}>
                    작성일:{props.bbs.wdate}
                </Text>

            </Card.Content>

            </Card>
        
            </ScrollView>
        </SafeAreaView>
    )
}


const styles = StyleSheet.create({

    contentContainer:{
        padding:16

    },
    card:{
        marginTop:20
    },
    content:{
        fontSize:20
    }

})

export default Bbsdetail

Bbslist.tsx

import axios from "axios";
import React, { useEffect, useState } from "react";
import { StyleSheet, View, TouchableOpacity, Image, Text, FlatList } from "react-native";

//연습용 데이터
// const data=[
//     {
//         "userid":"aaa",
//         "title":"첫번째 제목",
//         "readcount": 3
//     },
//     {
//         "userid":"bbb",
//         "title":"두번째 제목",
//         "readcount": 2
//     },
//     {
//         "userid":"ccc",
//         "title":"세번째 제목",
//         "readcount": 1
//     }

// ]


function Item({id,title,readcount,seq, props}:any){

    function itemClick(seq:number){
        console.log('itemClick')
        console.log(seq)

        axios.get("http://192.168.35.3:3000/bbsdetail", { params:{seq:seq}})
            .then(function(resp){
                console.log(resp.data)

                //짐싸기
                props.setBbs(resp.data)
            })
            .catch(function(err){
                console.log(err)
            })



        //bbsdetail로 이동

        props.setBbslist("bbsdetail")

    }

    return(
        <View style={styles.item}>
            <TouchableOpacity onPress={()=>itemClick(seq)}>
                <View style={styles.idRow}>
                    <Image style={styles.image} source={require("../../assets/dog.png")}/>
                    <Text style={styles.title}>{title}</Text>
                </View>
                <View style={styles.idRow}>
                    <Text style={styles.id}>{id}</Text>
                    <Text style={styles.readcount}>{readcount}</Text>
                    </View>
            </TouchableOpacity>

        </View>
    )
}





function Bbslist(props:any){
    const[data,setData]=useState([])

    function renderItem({item}:any){

        function strLength(str:String){
    
            if(str.length > 20){
                return str.substring(0,17)+"..."
            }else{
                return str
            }
        }
    
        return(
            <Item id={"작성자:"+item.userid} title={strLength(item.title)} 
            readcount={"조회수:" +item.readcount} seq={item.seq} props={props}/>
    
        )

    }

    let mounted= true

    useEffect(()=>{

        axios.get("http://192.168.35.3:3000/getBbsList",{} )
            .then(function(resp){
             console.log(resp.data)   

             setData(resp.data)

            }).catch(function(err){
             console.log(err)
            })
    },[])

return(
    <View style={styles.scrView}>
        <FlatList data={data} renderItem={renderItem} />
    </View>
)
}

const styles = StyleSheet.create({

    item:{
        backgroundColor:'#d7d9f4',
        padding:10,
        marginVertical:2,
        marginHorizontal:8,
        borderColor:"#ff0000",
        borderRadius:15,
        borderStyle:'solid',
        borderWidth:2
    },
    image:{
        width:50,
        height:50,
        marginTop:15
    },
    title: {
        fontFamily: "roboto-regular",
        paddingLeft: 20,
        color: "#400040",
        height: 60,
        width: 500,
        fontSize: 24,
    },
    id: {
        fontFamily: "roboto-regular",
        //backgroundColor: "#ffff00",
        color: "#121212",
        height: 30,
        width: 166,
        fontSize: 20,
        marginLeft: 80,
        marginTop: 8
    },
    readcount: {
        fontFamily: "roboto-regular",
        //backgroundColor: "#00ff00",
        color: "#121212",
        height: 30,
        width: 211,
        fontSize: 20,
        marginLeft: 51,
        marginTop: 8,
        textAlign: "center",
    },

    idRow:{
        height:40,
        flexDirection:"row",
        marginLeft:5,
    },
    scrView:{
        height:760
    }

})

export default Bbslist;

Bbswrtie.tsx

import AsyncStorage from "@react-native-async-storage/async-storage";
import axios from "axios";
import React, { useState } from "react";
import { Alert, StyleSheet, Text, View } from "react-native";
import { Button,  TextInput } from "react-native-paper";


function Bbswrite(props:any){
    const [id,setId] = useState('')
    const [title,setTitle]= useState('')
    const [content, setContent] =useState('')
    
    const loginData = async () =>{
        try{
            let user = await AsyncStorage.getItem('login')
            if(user !=null){
            setId((JSON.parse(user)).id )
            }
        }catch(err){}
    }
    loginData()
   

    function bbsWriteBtn(){
        console.log(id)
        console.log(title)
        console.log(content)

        if(title.trim()==""){
        }

        axios.get("http://192.168.35.3:3000/bbswrite",
        {
            params:{
                id:id,
                title:title,
                content:content
            }
        }).then(function(resp){
            console.log(resp.data)

            if(resp.data=="YES"){
                props.setBbslist("bbslist")
            }

        }).catch(function(){
            Alert.alert("추가되지 않았습니다.")
        })

    }



    return(
        <View>
            <Text style={styles.text}>글추가</Text>
            <View style={{alignItems:'center'}}>


                <TextInput
                style={styles.texInput}
                mode="outlined"
                label="작성자"
                value={id}
                editable={false}/>

                <TextInput
                    style={styles.textArea}
                    mode="outlined"
                    label="제목"
                    value={title}
                    onChangeText={title=>setTitle(title)}/>

                <TextInput
                style={styles.textArea}
                placeholder="내용"
                multiline={true}
                numberOfLines={20}
                value={content}
                onChangeText={content=>setContent(content)}/>
                
                <Button 
                  mode="outlined"
                  style={styles.button}
                  onPress={bbsWriteBtn}>작성완료</Button>


            </View>

        </View>
    )

}

const styles = StyleSheet.create({
    text:{
        marginTop:10,
        fontSize:30,
        textAlign:"center"
    },
    texInput:{
        marginTop:20,
        fontSize:16,
        width:500,
        height:40,
        backgroundColor:"#e3e3e3"
    },
    textArea:{
        fontSize:16,
        borderWidth:1,
        marginTop:20,
        backgroundColor:"#e3e3e3",
        textAlignVertical:"top",
        width:500

    },
    button:{
        marginTop:20,
        marginVertical:8
    }
})


export default Bbswrite

member 폴더 안에 있는 파일들

Account.tsx

import axios from "axios";
import React, { useState } from "react";
import { Image, StyleSheet, View,TouchableHighlight, Text, TextInput, Alert} from "react-native";



export default function Account( {navigation}:any){
    const[id,setId]= useState('')
    const[msg,setMsg]=useState("msg")

    const[pwd,setPwd]=useState("")
    const[name,setName]=useState("")
    const[email,setEmail]=useState("")

    function idCheck(){
        console.log('idCheck')
        console.log(`${id}`)

        if(id.trim()===""){
            Alert.alert("아이디","아이디를 입력해 주십시오.")
            setId("")
        }else{

        axios.post("http://192.168.35.3:3000/getId",null,{params:{id:id}})
        .then(function(resp){
            console.log(resp.data)
            
            if(resp.data=="OK"){
                setMsg("사용 가능합니다.")
            }else{
                setMsg("사용중입니다.")
                setId("")
            }
        })
        .catch(function(err){
            console.log(err)
        })
    }
    }


    
    function regi(){
        if(id.trim()===""){
            Alert.alert("아이디","아이디를 입력해주십시오.")
        }
        else if(pwd.trim()===""){
            Alert.alert("패스워드","패스워드를 입력해주십시오.")
        }
        else{
            axios.post("http://192.168.35.3:3000/addmember",null,
            {
                params:{
                    id:id,
                    pwd: pwd,
                    name:name,
                    email:email
                    }
                 }
            ).then(function(resp){
                console.log(resp.data)

                if(resp.data=="YES"){
                   
                    Alert.alert('regi',
                                '회원가입 되었습니다.',
                                [{
                                   text:'확인',
                                   onPress:()=>navigation.navigate('login')     
                                }])
                }
                else{
                    Alert.alert("regi","가입되지 않았습니다.")
                }

            }).catch(function(err){
                console.log(err)
            })
        }
    }


    return(
        <View style={styles.container}>
            <Image style={styles.logo} source={require("../../assets/welcome.jpg")}/>

            <View style={styles.inputView}>                
                <TextInput
                    style={styles.textInput}
                    placeholder="아이디"
                    value={id}
                    underlineColorAndroid="transparent"
                    onChangeText={(id)=>setId(id)}/>
            </View>


            <View style={styles.idTextContainer}>
                <Text style={styles.idText}>{msg}</Text>
           
                <TouchableHighlight style={[styles.buttonContainer, styles.sendButton]} 
                                    onPress={()=>idCheck()}>
                    <Text style={styles.buttonText}>id확인</Text>
                </TouchableHighlight>
            </View>


            <View style={styles.inputView}>                
                <TextInput
                    style={styles.textInput}
                    placeholder="패스워드"
                    underlineColorAndroid="transparent"
                    onChangeText={(pwd)=>setPwd(pwd)}/>
            </View>

            
            <View style={styles.inputView}>                
                <TextInput
                    style={styles.textInput}
                    placeholder="이름"
                    underlineColorAndroid="transparent"
                    onChangeText={(name)=>setName(name)}/>
            </View>

             
            <View style={styles.inputView}>                
                <TextInput
                    style={styles.textInput}
                    placeholder="이메일"
                    underlineColorAndroid="transparent"
                    onChangeText={(email)=>setName(email)}/>
            </View>

            <TouchableHighlight style={[styles.buttonContainer, styles.sendButton]} onPress={()=>regi()} >
                <Text style={styles.buttonText}>회원가입</Text>
            </TouchableHighlight>



        </View>

        
    )
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        justifyContent:"center",
        alignItems:"center",
        backgroundColor:"#fff"
    },
    logo: {
        justifyContent:"center",
        marginBottom:60
    },
    inputView:{
        borderBottomColor:"#f5fcff",
        backgroundColor:"#dcdcdc",
        borderRadius:30,
        borderBottomWidth:1,
        width:300,
        height:45,
        marginBottom:20,
        flexDirection:'row',
        alignItems:"center"
    },
    textInput:{
        height:45,
        marginLeft:16,
        borderBottomColor:"#fff",
        flex:1
    },
    buttonContainer:{
        height:45,
        flexDirection:'row',
        justifyContent:"center",
        alignItems:"center",
        marginBottom:20,
        width:100,
        borderRadius:30

    },

    sendButton:{
        backgroundColor:"#ff4500"
    },
    idTextContainer:{
        height:45,
        flexDirection:"row",
        justifyContent:"center",
        alignItems:"center",
        width:100,
        borderRadius:30
    },
    idText:{
        marginLeft:20,
        marginBottom:20,
        width:180
    },
    buttonText:{
        color:'white'
    }

})

Login.tsx

import AsyncStorage from "@react-native-async-storage/async-storage";
import axios from "axios";
import React, { useState } from "react";
import { 
    Image, 
    StyleSheet, 
    View, 
    TextInput, 
    Text, 
    TouchableOpacity,    
    Button,
    Alert
} from "react-native";

export default function Login( { navigation }:any ) {

    const [id, setId] = useState("")
    const [password, setPassword] = useState("")
    
    function login(){
        if(id.trim() == ""){
            Alert.alert("id", "아이디를 입력해 주십시오")
        }
        else if(password.trim() == ""){
            Alert.alert("password", "password를 입력해 주십시오")
        }
        else{
            axios.post("http://192.168.35.3:3000/login", null, 
                {
                    params: {
                        id: id,
                        pwd: password
                    }
                }).then(function(resp){
                    if(resp.data != null && resp.data != ""){
                        console.log("로그인 되었습니다")
                        console.log(resp.data)

                        AsyncStorage.setItem('login',JSON.stringify(resp.data))

                        //loginData()
                        navigation.navigate('bbs')
                        
                    }
                    else{
                        Alert.alert("login", "아이디나 패스워드를 확인하세요")
                    }

                }).catch(function(err){
                    Alert.alert("err", err)
                })
        }
    }

    const loginData = async () =>{
        try{
        let user = await AsyncStorage.getItem('login')
                        console.log("login 정보:"+user)
        }catch(err){}
    }

    return (
        <View style={styles.container}>            
            <Image style={styles.image} source={ require("../../assets/logo2.png") } />

            <View style={styles.inputView}>
                <TextInput
                    style={styles.textInput}
                    placeholder="id를 입력해 주세요"
                    placeholderTextColor="#003f5c"
                    onChangeText={(id)=>setId(id)} />
            </View>

            <View style={styles.inputView}>
                <TextInput
                    style={styles.textInput}
                    placeholder="password를 입력해 주세요"
                    placeholderTextColor="#003f5c"
                    secureTextEntry={true}
                    onChangeText={(password)=>setPassword(password)} />
            </View>

            <TouchableOpacity onPress={()=> navigation.navigate("account")}>
                <Text style={styles.forgot_button}>회원가입</Text>      
            </TouchableOpacity>

            <TouchableOpacity style={styles.loginBtn} onPress={()=>login()}>
                <Text>로그인</Text>
            </TouchableOpacity>     

        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center"
    },
    image: {
        marginBottom: 40
    },
    inputView: {
        backgroundColor: "#ffc0cb",
        borderRadius: 30,
        width: "70%",
        height: 45,
        marginBottom: 20,
        alignItems: "center"
    },
    textInput:{
        height: 50,
        flex: 1,
        padding: 10,
        marginLeft: 20
    },
    forgot_button: {
        height: 30,
        marginBottom: 30
    },
    loginBtn: {
        width: "50%",
        borderRadius: 25,
        height: 50,
        alignItems: "center",
        justifyContent: "center",
        marginTop: 40,
        backgroundColor: "#ff1493"
    }
})

실행화면

react / builderX 로 레이아웃 간편하게 만들고 화면에 적용하기

NomadHaven — Sun, 13 Mar 2022 22:57:43 +0900

builderX를 이용하면 별다른 코드를 작성하지 않고 쉽게 화면의 레이아웃을 만들수 있다.

https://builderx.io/

BuilderX

BuilderX is a browser based screen design tool that codes React Native & React for you

builderx.io

구글 아이디만 있으면 편하게 사용 가능하다.

new project를 클릭하면 새로운 레이아웃을 만들수 있다.

Device로 OS를 설정하고 화면의 크기를 설정하는 기초 설정을 먼저해준다.

그다음 본인이 원하는 소스를 추가해 화면을 구성하면 된다.

코드를 보기 위해서는 우측 상단의 CODE를 클릭하면 된다.

CODE를 클릭하면 Download Component 버튼이 보이는데 이를 클릭.

다운 받은 component 폴더는 압축을 풀어준다.

우선 다운받은 component를 적용할 react 프로젝트를 만들어줘야한다.

생성문

npx react-native init sampleBD --template react-native-template-typescript

프로젝트를 생성한 다음 폴더를 만들어준다.

src폴더를 생성한다. > src 폴더안에 assets/ components는 다른데서 복붙할 것이므로 따로 생성하지 않는다.

다시 다운받은 component 폴더를 확인해보자.

폴더 안에 있는 src 폴더의 파일들을 이용해야한다.

src 폴더 안에 있는 assets 폴더와 component 폴더를 복사한다.

그리고 react프로젝트 안에 생성했던 src 폴더에 복사 붙여넣기한다.

아직 builderX를 통해 다운받은 component 폴더에서 사용할 파일이 있다.

srceens 폴더 안에 있는 untilted.js 파일의 코드를 모두 복사한다.

복사한 코드를 리액트 프로젝트의 App.tsx에 붙여넣기한다.

바로 복붙을 하면 에러가 난다. 그럴때는 import문의 from에 있는 폴더 위치를 수정해주고

function 이름을 App으로 수정해준다.

제일 하단에 있는 export 문도 default App; 으로 바꿔주면 된다.

import React, { Component } from "react";
import { StyleSheet, View, Text, TextInput, Slider } from "react-native";
import CupertinoButtonPurple1 from "./src/components/CupertinoButtonPurple1";
import CupertinoSegmentWithTwoTabs from "./src/components/CupertinoSegmentWithTwoTabs";
import MaterialCardWithImageAndTitle from "./src/components/MaterialCardWithImageAndTitle";

function App(props:any) {
  return (
    <View style={styles.container}>
      <Text style={styles.text제목작성}>Text 제목 작성</Text>
      <TextInput
        placeholder="입력하십시오."
        style={styles.입력하십시오}
      ></TextInput>
      <Slider value={50} style={styles.slider}></Slider>
      <View style={styles.rect}></View>
      <CupertinoButtonPurple1
        style={styles.cupertinoButtonPurple1}
      ></CupertinoButtonPurple1>
      <CupertinoSegmentWithTwoTabs
        style={styles.cupertinoSegmentWithTwoTabs}
      ></CupertinoSegmentWithTwoTabs>
      <MaterialCardWithImageAndTitle
        style={styles.materialCardWithImageAndTitle}
      ></MaterialCardWithImageAndTitle>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  text제목작성: {
    fontFamily: "roboto-regular",
    color: "#121212",
    height: 51,
    width: 394,
    textAlign: "center",
    fontSize: 20,
    marginTop: 23,
    marginLeft: 103
  },
  입력하십시오: {
    fontFamily: "courier-regular",
    color: "rgba(0,0,0,1)",
    height: 54,
    width: 505,
    textAlign: "center",
    borderWidth: 1,
    borderColor: "#000000",
    shadowColor: "rgba(0,0,0,1)",
    shadowOffset: {
      width: 3,
      height: 3
    },
    elevation: 5,
    shadowOpacity: 0.81,
    shadowRadius: 0,
    borderRadius: 33,
    backgroundColor: "rgba(255,255,255,1)",
    marginTop: 50,
    marginLeft: 48
  },
  slider: {
    height: 31,
    width: 385,
    marginTop: 22,
    marginLeft: 107
  },
  rect: {
    width: 493,
    height: 261,
    backgroundColor: "#E6E6E6",
    marginTop: 50,
    marginLeft: 54
  },
  cupertinoButtonPurple1: {
    height: 44,
    width: 100,
    marginTop: 14,
    marginLeft: 250
  },
  cupertinoSegmentWithTwoTabs: {
    height: 56,
    width: 375,
    marginTop: 8,
    marginLeft: 107
  },
  materialCardWithImageAndTitle: {
    height: 166,
    width: 359,
    marginTop: 28,
    marginLeft: 121
  }
});

export default App;

코드를 적용한뒤 실행하면 아래와 같은 화면이 잘 적용되었음을 확인할수 있다.

react / Navigator로 화면간 이동 가능하게 만들기

NomadHaven — Wed, 9 Mar 2022 00:45:50 +0900

생성문

npx react-native init sample26 --template react-native-template-typescript

설치문


npm install react-native-gesture-handler

npm install @react-navigation/native


npm install @react-navigation/native-stack


npm install react-native-safe-area-context


npm install react-native-screens


npm install watcher

파일구조

src 폴더 생성 > 그안에 screens 생성 > DetailScreen, HomeScreen 생성

HomeScreen.tsx

import { useNavigation } from "@react-navigation/native";
import React from "react";
import { Button, StyleSheet, Text, View } from "react-native";

export default function HomeScreen(){

    const navigation = useNavigation()

  return(
  <View style={styles.container}>
      <Text>Home Screen</Text>
      <Button title='Detail로 이동' onPress={()=> navigation.navigate("Detail")}/>
  </View>
  )
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        alignItems:'center',
        justifyContent:'center'
    }

})

DetailScreem.tsx

import React from "react";
import { Button, StyleSheet, Text, View } from "react-native";

export default function DetailScreen(){


    return(
        <View style={styles.container}>
            <Text>Detail Screen</Text>
        </View>
        )

}

const styles = StyleSheet.create({
    container:{
        flex:1,
        alignItems:'center',
        justifyContent:'center'
    }
})

App.tsx

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import React from "react";
import { View } from "react-native";
import DetailScreen from "./src/screens/DetailScreen"
import HomeScreen from "./src/screens/HomeScreen"


const Stack = createNativeStackNavigator()

export default function App(){


  return(
  <NavigationContainer>
    <Stack.Navigator initialRouteName="Home">

    <Stack.Screen name="Home" component={HomeScreen}/>
    
    <Stack.Screen name="Detail" component={DetailScreen}/>

    </Stack.Navigator>
  </NavigationContainer>

  )
}

실행화면

Home화면

Detail 화면

react 메인 화면 구성하고 Navigator로 화면 이동하게 만들기

NomadHaven — Wed, 9 Mar 2022 00:39:35 +0900

생성문

npx react-native init sample25 --template react-native-template-typescript

설치문

npm install react-native-gesture-handler

npm install @react-navigation/native


npm install @react-navigation/bottom-tabs


npm install react-native-safe-area-context

npm install react-native-screens


npm install react-native-vector-icons

npm install watcher

npm i --save-dev @types/react-native-vector-icons

생성파일

src 폴더 생성 > 그 안에 screens폴더 생성 > 그안에 BaseScreen, HomeScreen, SettingScreen tsx 생성

build.gradle 설정

android>app>build.gradle 에 코드 추가

apply plugin: "com.android.application"

import com.android.build.OutputFile

/**
 * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
 * and bundleReleaseJsAndAssets).
 * These basically call `react-native bundle` with the correct arguments during the Android build
 * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
 * bundle directly from the development server. Below you can see all the possible configurations
 * and their defaults. If you decide to add a configuration block, make sure to add it before the
 * `apply from: "../../node_modules/react-native/react.gradle"` line.
 *
 * project.ext.react = [
 *   // the name of the generated asset file containing your JS bundle
 *   bundleAssetName: "index.android.bundle",
 *
 *   // the entry file for bundle generation. If none specified and
 *   // "index.android.js" exists, it will be used. Otherwise "index.js" is
 *   // default. Can be overridden with ENTRY_FILE environment variable.
 *   entryFile: "index.android.js",
 *
 *   // https://reactnative.dev/docs/performance#enable-the-ram-format
 *   bundleCommand: "ram-bundle",
 *
 *   // whether to bundle JS and assets in debug mode
 *   bundleInDebug: false,
 *
 *   // whether to bundle JS and assets in release mode
 *   bundleInRelease: true,
 *
 *   // whether to bundle JS and assets in another build variant (if configured).
 *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
 *   // The configuration property can be in the following formats
 *   //         'bundleIn${productFlavor}${buildType}'
 *   //         'bundleIn${buildType}'
 *   // bundleInFreeDebug: true,
 *   // bundleInPaidRelease: true,
 *   // bundleInBeta: true,
 *
 *   // whether to disable dev mode in custom build variants (by default only disabled in release)
 *   // for example: to disable dev mode in the staging build type (if configured)
 *   devDisabledInStaging: true,
 *   // The configuration property can be in the following formats
 *   //         'devDisabledIn${productFlavor}${buildType}'
 *   //         'devDisabledIn${buildType}'
 *
 *   // the root of your project, i.e. where "package.json" lives
 *   root: "../../",
 *
 *   // where to put the JS bundle asset in debug mode
 *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
 *
 *   // where to put the JS bundle asset in release mode
 *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in debug mode
 *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in release mode
 *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
 *
 *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
 *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
 *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
 *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
 *   // for example, you might want to remove it from here.
 *   inputExcludes: ["android/**", "ios/**"],
 *
 *   // override which node gets called and with what additional arguments
 *   nodeExecutableAndArgs: ["node"],
 *
 *   // supply additional arguments to the packager
 *   extraPackagerArgs: []
 * ]
 */

project.ext.react = [
    enableHermes: false,  // clean and rebuild if changing
]

apply from: "../../node_modules/react-native/react.gradle"

/**
 * Set this to true to create two separate APKs instead of one:
 *   - An APK that only works on ARM devices
 *   - An APK that only works on x86 devices
 * The advantage is the size of the APK is reduced by about 4MB.
 * Upload all the APKs to the Play Store and people will download
 * the correct one based on the CPU architecture of their device.
 */
def enableSeparateBuildPerCPUArchitecture = false

/**
 * Run Proguard to shrink the Java bytecode in release builds.
 */
def enableProguardInReleaseBuilds = false

/**
 * The preferred build flavor of JavaScriptCore.
 *
 * For example, to use the international variant, you can use:
 * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
 *
 * The international variant includes ICU i18n library and necessary data
 * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
 * give correct results when using with locales other than en-US.  Note that
 * this variant is about 6MiB larger per architecture than default.
 */
def jscFlavor = 'org.webkit:android-jsc:+'

/**
 * Whether to enable the Hermes VM.
 *
 * This should be set on project.ext.react and that value will be read here. If it is not set
 * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
 * and the benefits of using Hermes will therefore be sharply reduced.
 */
def enableHermes = project.ext.react.get("enableHermes", false);

/**
 * Architectures to build native code for in debug.
 */
def nativeArchitectures = project.getProperties().get("reactNativeDebugArchitectures")

android {
    ndkVersion rootProject.ext.ndkVersion

    compileSdkVersion rootProject.ext.compileSdkVersion

    defaultConfig {
        applicationId "com.sample25"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }
    signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
            if (nativeArchitectures) {
                ndk {
                    abiFilters nativeArchitectures.split(',')
                }
            }
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }

    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // https://developer.android.com/studio/build/configure-apk-splits.html
            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
            }

        }
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    //noinspection GradleDynamicVersion
    implementation "com.facebook.react:react-native:+"  // From node_modules

    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"

    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.fbjni'
    }

    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
        exclude group:'com.squareup.okhttp3', module:'okhttp'
    }

    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
    }

    if (enableHermes) {
        def hermesPath = "../../node_modules/hermes-engine/android/";
        debugImplementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }
}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.implementation
    into 'libs'
}

project.ext.vectoricons = [
  iconFontNames: [ 'Ionicons.ttf', 'FontAwesome.ttf' ]
]


apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)


apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

아래의 두개 코드만 추가된 것.

project.ext.vectoricons = [
  iconFontNames: [ 'Ionicons.ttf', 'FontAwesome.ttf' ]
]

-apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

HomeScreen.tsx

import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default function HomeScreen(){


    return(
        <View style={styles.container}>
            <Text>Home Screen</Text>
        </View>
    )
}


const styles = StyleSheet.create({
    container:{
        backgroundColor:'#ffffff'
    }
})

BaseScreen.tsx

import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default function BaseScreen(){


    return(
        <View style={styles.container}>
            <Text>Base Screen</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    container:{
        backgroundColor:'#00ff00'
    }
})

SettingScreen.tsx

import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default function SettingScreen(){

    return(
        <View style={styles.container}>
            <Text>Setting Screen</Text>
        </View>
    )
}


const styles = StyleSheet.create({
    container:{
        backgroundColor:'grey'
    }
})

실행화면

react / TextProvider, useContext 통해서 다른 파일에 있는 값 화면에 구현하기

NomadHaven — Wed, 9 Mar 2022 00:22:38 +0900

생성문

npx react-native init sample24 --template react-native-template-typescript

생성파일

src 폴더 생성 > 그 안에 component 폴더 생성 >

component폴더안에 CountProvider, First, Second, Third, TextProvider 타입 스크립트 파일 생성

TextProvider.tsx

import React, { createContext } from "react";
import { Text } from "react-native";

export const TextContext = createContext({})

interface Props{
    children: JSX.Element

}

export default function TextProvider({ children }:Props){

    const text = "이것은 전달한 값입니다."

    //매개변수 children에 text값을 전달
    return(
        <TextContext.Provider value={text}>
            {children}
        </TextContext.Provider>
    )



}

CountProvider.tsx

import React, { createContext, useState } from "react";
import { Text } from "react-native";

export const CountContext = createContext({})

interface Props{
    children: JSX.Element

}

export const CountProvider = ({ children }:Props)=>{

    const [count, setcount] = useState(0)

    return(
        <CountContext.Provider value={[count, setcount]}>
            {children}
        </CountContext.Provider>
    )



}

Third.tsx

import React, { useContext } from "react";
import { Text, View, Button } from "react-native";
import { CountContext } from "./CountProvider";
import { TextContext } from "./TextProvider";



export default function Third(){

    const [count,setCount]:any = useContext(CountContext)

    const btnClick = () =>{
        setCount( (pcount:any) => pcount+1 )
    }

    return(
        <View>
            <Text>Third Component: 현재 카운트 : {count}</Text>
            <Button title="+1증가" onPress={btnClick}/>
        </View>        
    )

}

Second.tsx

import React, { useContext } from "react";
import { Text, View } from "react-native";
import Third from "./Third";


export default function Second(){
 

    return (
        
        <View>
            <Text>Second Component</Text>
            <Third/>
        </View>
    )

}

First.tsx

import React, { useContext } from "react";
import { Text, TextComponent, View } from "react-native";
import Second from "./Second";
import TextProvider, { TextContext } from "./TextProvider";

export default function First(){

    return (
           <View>
               <Text>First Component</Text>
                 <Second/>
             </View>
         )


}

App.tsx

import React, { createContext, useContext } from "react";
import { Text, View } from "react-native";
import { CountProvider } from "./src/component/CountProvider";
import First from "./src/component/First";
import TextProvider from "./src/component/TextProvider";

/*
useContext, creatContext
:값 넘기기
*/



export default function App(){


  return(
    <View>
    <CountProvider>
        <First/>
    </CountProvider>
    </View>
  )


}

Second.tsx가 Third.tsx를 전달받고 First.tsx가 Second.tsx를 전달받음

따라서 App.tsx에서 First만 전달받아도 Third,Second의 값을 모두 받을수 있다.

실행화면

버튼 누르면 숫자가 증가한다.

아이콘 정보 사이트

https://ionic.io/ionicons

Ionicons: The premium icon pack for Ionic Framework

Ionicons is an open-sourced and MIT licensed icon pack.

ionic.io

react UseMemo 사용하여 특정 함수만 호출되는 예제 보기 / typescript / useCallback함수 이용하여 버튼 클릭시 숫자 증가시키기

NomadHaven — Tue, 8 Mar 2022 23:59:37 +0900

실행구문

npx react-native init sample22 --template react-native-template-typescript

App.tsx

import React, { useMemo, useState } from "react";
import { Button, Text, View } from "react-native";

/*
useMemo: 연산된 값을 렌더링시에 재사용할때 사용된다
useMeMo(func,검사할 배열 )
*/

function square(params:any){
  const testData = [Array(10).keys]
  testData.forEach(()=>{
  console.log(`계산중.. 루프처리 ${testData.length}회 실행중..`)

})
return params * params
}

export default function App(){

  const[countStateA,setcountStateA] = useState( 0 )
  const[countStateB,setcountStateB] = useState( 0 )


  function countResultA(){
    setcountStateA((prevCount)=>prevCount+1)
    console.log("A+1 버튼이 클릭되었습니다.")
  
  }

  function countResultB(){
    setcountStateB((prevCount)=>prevCount+1)
    console.log("B+1 버튼이 클릭되었습니다.")
  
  }
 //첫번째 값 useState(0) 이므로 params*params=0
 // const squarArea = square(countStateB) / A+1 버튼 눌렀어도 squre 함수 실행
 
  //useMemo 사용했을때는 계산 B+1 눌렀을때만 squree 함수가 실행
 const squarArea = useMemo(()=>square(countStateB),[countStateB])


  return(
    <View>
      <Text>계산 결과 A</Text>
      <Button title="계산: A+1" onPress={countResultA}/>

      <Text>계산 결과 B</Text>
      <Button title="계산: B+1" onPress={countResultB}/>

      <Text>정사각형 면적</Text>
      <Text>계산 결과 X 계산 결과 ={squarArea}</Text>

    </View>
  )

}

실행화면

useMemo 대신 const squarArea = square(countStateB) 코드를 실행하고 A+1 버튼 눌렀을때 터미널

A+1버튼 누를때 squre함수도 같이 실행되는 중

const squarArea = useMemo(()=>square(countStateB),[countStateB]) 사용한 터미널

A+1버튼 누를때 squre함수가 실행되지 않는다.

실행구문

npx react-native init sample23 --template react-native-template-typescript

App.tsx

import React, { useCallback, useState } from "react";
import { Button, Text, View } from "react-native";

/*
useCallback: 함수 재사용
*/

const MyButton = React.memo(({buttonValue,counterState}:any)=>{
  console.log(`${buttonValue}를 클릭했습니다.`)
  return <Button title={buttonValue} onPress={counterState}/>
})

export default function App(){

  const[countStateA,setCountStateA] = useState(0)
  const[countStateB,setCountStateB] = useState(0)

const countIncrementA = useCallback(()=>setCountStateA(countStateA+1),[countStateA])

const countIncrementB = useCallback(()=>setCountStateB(countStateB+1),[countStateB])

  return(

<View>
  <Text>A button{countStateA}</Text>
  <MyButton counterState={countIncrementA} buttonValue='A button'/>

  <Text>B button{countStateB}</Text>
  <MyButton counterState={countIncrementB} buttonValue='B button'/>
</View>

  )

}

위의 코드를 실행하면 버튼을 누릴때마다 button이란 텍스트 옆의 숫자가 증가한다.

react 현재시간 화면에 나타나고 초마다 갱신되게하기 / typescript 시계 만들기

NomadHaven — Tue, 8 Mar 2022 23:49:40 +0900

실행문

npx react-native init sample21 --template react-native-template-typescript

App.tsx

import React, { useEffect, useState } from "react";
import { StyleSheet, Text, View } from "react-native";

export default function App(){
  return(
    <View style={styles.cotainer}>
      <Clock/>
    </View>
  )
}

const Clock =() =>{
  const [date, setDate] = useState(()=> new Date())

  useEffect(()=>{
    const timeId = setInterval(()=>tick(),1000)
    console.log('setInteval')

    return() =>{
      clearInterval(timeId)
      console.log('clearInterval')

    }
  })


  const tick =() =>{
    setDate(new Date())
  }

  return(
    <View style={styles.cotainer}>
      <Text style={styles.timeText}>현재시간</Text>
      <Text style={styles.timeText}>{date.toLocaleTimeString()}</Text>
    </View>
  )
}

const styles = StyleSheet.create({

cotainer:{
  flex:1,
  backgroundColor:'#ffffff',
  alignItems:'center',
  justifyContent:'center'
},
timeText:{
  fontSize:30,
  fontWeight:"bold"
}
})

실행화면

초마다 시간이 갱신되며 콘솔창에 표시된다

react / useEffect 써서 버튼 누를때 특정 텍스트 화면에 보이게 하기 / typescript

NomadHaven — Tue, 8 Mar 2022 23:38:07 +0900

실행문

npx react-native init sample20 --template react-native-template-typescript

App.tsx

import React, { useEffect, useState } from "react";
import { Button, Text, View } from "react-native";


/* 
useEffect: 컴퍼넌트가 rendering 될때마다 특정 작업을 실행할 수 있도록 하는 hook
            compoentDidMount + componentDidUpdate + componentWillUnmount
*/
function Welcome(props:any) {

  console.log('start')

  useEffect(()=>{   //==$(document).ready()
    props.setText('My World')
    console.log('useEffect')
  })

  console.log('end')

  function func(){
    props.setText('world')
  }

  return(
    <View>
    <Text>Welcome</Text>
    <Button title="button" onPress={func}></Button>
    </View>
  )
}

export default function App(){

      //get   set
const [text,setText] =useState('abc')

  
return(
  <View>
    <Text>hello {text}</Text>
    <Welcome setText={setText}/>
  </View>
)

}

버튼 누르면 Hello My World 라는 텍스트가 보인가

Welcome 함수 안에 있는 uesEffect로 인해 text는 My World로 세팅되고 콘솔에 useEffect가 출력되었다.

react / flex 이용하여 원하는 비율로 화면에 아이템 구현하기 / typescript

NomadHaven — Mon, 7 Mar 2022 18:40:11 +0900

프로젝트 생성문

npx react-native init sample19 --template react-native-template-typescript

src 폴더 생성 > components 폴더 생성 > Flexbox.tsx & Marginadding.tsx & WidthHeight.tsx 파일 생성

WidthHeight.tsx

import React from "react";
import { StyleSheet, Text, View } from "react-native";

export const WidthHeight= () =>(
    
        <View style={style.container}>
        <Text>200X100</Text>
      </View>
    )
    

    const style = StyleSheet.create({
        container:{
          width:200,
          height:100,
          borderWidth:StyleSheet.hairlineWidth,
          borderColor:'#bbb'
        }
      })

Marginadding.tsx

import React from "react";
import { StyleSheet, Text, View } from "react-native";

export const MarginPadding = () =>(

    <View style={style.cotainer}>
        <Text>제목입니다.</Text>
    </View>

)
    const style =StyleSheet.create({
        cotainer:{
            marginHorizontal:'10%',
            padding:16,
            borderWidth:StyleSheet.hairlineWidth,
            borderColor:'#ccc',
            backgroundColor:'#ffff00'
        }
    })

Flexbox.tsx

import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default function Flexbox(){
    return(
        <View style={style.container}>
            <Text style={style.item}>아이템1</Text>
            <Text style={style.item}>아이템2</Text>
            <Text style={style.item}>아이템3</Text>
            <Text style={style.item}>아이템4</Text>
            <Text style={style.item}>아이템5</Text>
            <Text style={style.item}>아이템6</Text>
        </View>
    )
}

const style = StyleSheet.create({
container:{
    flexDirection:'row', //가로정렬
    flexWrap:'wrap' //줄바꿈
},
item:{
    width:200,
    height:100,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor:'#bbb'
}

})

App.tsx

import React from "react";
import { StyleSheet, View } from "react-native";
import Flexbox from "./src/components/Flexbox";
import { MarginPadding } from "./src/components/Marginadding";
import { WidthHeight } from "./src/components/WidthHeight";



export default function App(){

  return(
    <View style={style.container}>
      <WidthHeight/>
      <MarginPadding/>
      <Flexbox/>

      <View style={style.box}/>

      
    </View>
 
  )
}

const style = StyleSheet.create({
  container:{
    flex:1
  },
  box:{
    width:150,
    height:100,
    backgroundColor:'red',
    position:'absolute', // 오른쪽 하단
    right:16,
    bottom:16
  }

})

실행화면

react / flex 속성 이용하여 화면 비율 조정하기 (typescript)

NomadHaven — Mon, 7 Mar 2022 18:27:54 +0900

프로젝트 생성문

npx react-native init sample18 --template react-native-template-typescript

App.tsx

import React from "react";
import { StyleSheet, Text, View } from "react-native";


//flex : 크기 비율로 설정하는 것
export default function App(){

  return (
    <View style={style.container}>
      <View style={style.caseOne}/>
      <View style={style.caseTwo}>
        <Text>두번째 화면</Text>
        </View>
      <View style={style.caseThree}/>
      </View>
  )

}

const style = StyleSheet.create({
  container:{
    flex:1,
    width:300
  },
  caseOne:{
    flex:1,
    backgroundColor:'yellow'
  },
  caseTwo:{
    flex:1,
    backgroundColor:'blue'
  },
  caseThree:{
    flex:8,
    backgroundColor:'green',
   height:200
  }
})

실행화면

react / 색상코드와 방향 조절로 화면에 색상카드 만들기 / SafeAreaView / transform : rotateX, rotateZ

NomadHaven — Mon, 7 Mar 2022 18:20:43 +0900

프로젝트 생성문

npx react-native init sample17 --template react-native-template-typescript

App.tsx

import React from "react";
import { Image, SafeAreaView, StyleSheet, Text, View } from "react-native";

const colorList = [
  { color: '#00974A', val: '00974A' },
  { color: '#2e6067', val: '2e6067' },
  { color: '#a92127', val: 'a92127' },
  { color: '#030364', val: '030364' },
  { color: '#0d6729', val: '0d6729' },
  { color: '#ff290b', val: 'ff290b' },
];



export default function App(){


  return(
  
    <SafeAreaView>
      <View style={{padding:16}}>
        { colorList.map( it => ( 
          <View key={it.color} style={[style.card, {backgroundColor:it.color}]} >
            <Text>{it.val}</Text>
            </View>
        ) ) }
      </View>
    </SafeAreaView>

  )
}



const style = StyleSheet.create({

container: {
  flex: 1
},
card:{

  marginVertical:8,
  height: 96,
  borderColor:'lightgray',
  borderWidth:5,
  borderRadius:8,
  transform:[ //move, roatation,scale = 변환
    {rotateX:'45deg'},
    {rotateZ:'0.785398rad'}
  ]
}

})

실행화면

react 이미지 화면에 구현하기 (파일 불러와서 구현하기 / 이미지 주소로 구현하기) / 글자 자간, 글자 배경색 지정하기 / 텍스트 영역에 테두리 만들기 / imageview / text StyleSheet 모음

NomadHaven — Mon, 7 Mar 2022 18:15:27 +0900

프로젝트 생성문

npx react-native init sample17 --template react-native-template-typescript

구현할 이미지는 scr>assets폴더에 저장해둔다.

ship.jpg 파일을 저장해두었다.

App.tsx

import React from "react";
import { Image, SafeAreaView, StyleSheet, Text, View } from "react-native";



export default function App(){


  return(
 

   <View>
       <Image
    source={{uri:'https://reactnative.dev/docs/assets/favicon.png'}}
      style={{width:100, height:100, resizeMode:'contain', opacity:0.5}}
 />  

  <Image
    source={require('./src/assets/ship.jpg')}
     style={{width:300, height:300}} />

 </View>

  )
}

실행화면

글자 배경색, 글자 위치 지정하기

App.tsx

import React from "react";
import { Image, SafeAreaView, StyleSheet, Text, View } from "react-native";


export default function App(){


 return(
<View>
<Text style={{backgroundColor:"#ffff00", textAlign:"center"}}>Hello</Text>
<Text style={{textAlign:"right"}}>World</Text>
</View>

  )
}


const style = StyleSheet.create({
hello:{
backgroundColor:"#ff0000"
}

})

글자 자간 지정하기

App.tsx

import React from "react";
import { Image, SafeAreaView, StyleSheet, Text, View } from "react-native";


export default function App(){


 return(
  
<View>
<Text style={{letterSpacing:2, fontSize:18}}>
오는 9일 진행되는 20대 대선 본투표에서 코로나19 확진자와 격리자들은 일반 유권자와 같은 방법으로 직접 투표함에 용지를 넣는 방식으로 투표를 하게 된다.
</Text>
</View>

   

  )
}

실행화면

자간지정 전

자간 지정 후

텍스트 영역에 테두리 만들기

App.tsx

import React from "react";
import { Image, SafeAreaView, StyleSheet, Text, View } from "react-native";


export default function App(){


  return(
 

<View style={style.world}>
<Text>Hello</Text>
<Text>World</Text>
</View>


  )
}


const style = StyleSheet.create({

world:{
borderWidth:1,
bordercolor:'gray',
borderBottomLeftRadius:10,
borderTopRightRadius:10
}

})

실행화면