만들어보고싶은게 많아서 플러터로 앱같은거 만들어 보고 싶어서 몇일째 공식문서만 보다가 마참내 플러터로 투두 리스트 만들어 보기로 했다.

가장 힘들었던건 동적으로 위젯을 생성하는것이 였는데 다행히도 컨트롤러의 개념과 https://stackoverflow.com/questions/68274886/adding-widgets-dynamically-with-flutter 이 글 을 보고 해결되었다. 근데 문제는 어떻게 작동되는지 잘 모르겠다.

1. class를 써야되는 경우랑 widget만 써도 되는경우

Flutter에서 클래스를 써야 하는 경우와 단순 위젯만 써도 되는 경우는 상황에 따라 다릅니다.

1. 클래스를 써야 하는 경우 📌 재사용이 필요한 위젯 같은 UI 요소를 여러 곳에서 반복적으로 사용할 때 같은 스타일과 동작을 유지하면서, 일부 속성만 변경하고 싶을 때 예제: MyButton, MyRow 📌 상태(StatefulWidget)가 필요한 경우 내부적으로 상태를 변경해야 하는 경우 (예: 체크박스, 버튼 클릭 시 변화) StatefulWidget을 사용하여 setState()를 통해 UI를 갱신할 필요가 있을 때 예제: MyButton (체크박스의 상태 변경을 위해 StatefulWidget 필요) 📌 규모가 커지는 위젯 코드가 길어지고 복잡해질 경우 유지보수를 위해 클래스로 분리하는 것이 좋음
2. 단순한 위젯만 써도 되는 경우 📌 일회성으로 사용되는 위젯 특정 화면에서만 사용되며 재사용될 필요가 없을 때 예제: AddWidgets() 함수 (이건 단순히 위젯을 반환하는 역할이므로 함수로 충분함) 📌 상태 관리가 필요 없는 정적인 UI 요소 내부적으로 변경되지 않는 경우 단순히 레이아웃을 구성하는 경우 예제: MyRow는 사실 const Row()로도 충분함

2.initstate()는 무슨 코드임

initState()란? initState()는 StatefulWidget에서 위젯이 처음 생성될 때 한 번만 실행되는 메서드입니다. 즉, 위젯이 화면에 나타나기 전에 초기화해야 할 작업을 수행하는 곳이에요.

@Entity

public class Article {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name ="id")
    private Long id;
    @Column(name = "title")
    private String title;
    @Column(name = "content")
    private String content;

    protected  Article(){  }

    @Builder
    public Article(String title, String content){
        this.title = title;
        this.content= content;
    }

}

여기서 왜

protected  Article(){  }

    @Builder
    public Article(String title, String content){
        this.title = title;
        this.content= content;
    }

이런 코드를 어떤생각으로 도출해내는건지 모르겠다.

A1)대충 결론부터 말하면 JPA프레임워크에서 요구하는 코드라고 한다. 조금더 자세히 말하면

JPA는 엔티티 객체를 생성하고 관리하기 위해 리플렉션(Reflection) 이라는 기술을 사용합니다. 리플렉션을 통해 클래스의 정보를 가져오고 객체를 생성하는데, 이때 기본 생성자가 필요합니다. protected 접근 제어자는 외부에서 직접 객체를 생성하는 것을 막으면서도 JPA가 내부적으로 객체를 생성할 수 있도록 허용합니다.

이런 이유 때문이라고 한다.

@Getter
@Setter
public class AddArticleRequest {
 private Long id;
 private String title;
 private String content;
 public Article toEntity(){
   return  Article.builder()
           .title(title)
           .content(content)
           .build();

 }
}

여기(DTO)에서 toEntity()메서드 쓰는 이유도 물어봤다

DTO(Data Transfer Object)는 계층 간 데이터 교환을 위해 사용되는 객체입니다. 즉, 레이어 간 데이터를 주고받을 때 사용하는 객체를 의미합니다. 예를 들어, 컨트롤러에서 서비스 계층으로 데이터를 전달하거나, 서비스 계층에서 데이터베이스에 데이터를 저장할 때 DTO를 사용할 수 있습니다.

toEntity() 메서드는 DTO (Data Transfer Object) 객체를 엔티티 객체로 변환하기 위해 만든 메서드입니다. DTO는 계층 간 데이터 교환을 위한 객체이고, 엔티티는 데이터베이스에 저장되는 객체입니다. DTO와 엔티티는 역할과 구조가 다르기 때문에, DTO를 엔티티로 변환하는 작업이 필요합니다. toEntity() 메서드는 DTO 객체의 데이터를 사용하여 새로운 Article 엔티티 객체를 생성하고 반환합니다. 이렇게 생성된 엔티티 객체는 JPA를 통해 데이터베이스에 저장될 수 있습니다.

DTO사용안한 코드는 이렇다 Controller

package com.BlogExample;

import lombok.RequiredArgsConstructor;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;

@RequiredArgsConstructor
@Controller
public class BlogApiController {
    private final BlogService blogService;

    @PostMapping("/api/articles")
    public ResponseEntity<Article> add(@RequestBody Article request) { // DTO 대신 엔티티를 직접 사용
        Article savedArticle = blogService.save(request);
        return ResponseEntity.status(HttpStatus.CREATED)
                .body(savedArticle);
    }
}

Service

package com.BlogExample;

import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;

@Service
@RequiredArgsConstructor
public class BlogService {
    private final BlogRepository blogRepository;

    public Article save(Article article) { // DTO 대신 엔티티를 직접 사용
        return blogRepository.save(article);
    }
}

또 궁금했던건 controller는 json으로 응답을 받을텐데 이거를 어떻게 데이터베이스에 저장하는지 그 매커니즘이 궁금했다. 또 간단하게 설명하면 이렇다.

Jackson 라이브러리는 기본적으로 JSON 데이터의 필드 이름과 객체의 필드 이름을 일치시켜 값을 저장합니다.

{
  "title":"첫글",
  "content":"첫글은 역시 똥글"
}

이 JSON 데이터를 Article 객체로 변환하면, Jackson 라이브러리는 JSON 데이터의 "title" 필드 값을 Article 객체의 title 필드에 저장하고, "content" 필드 값을 content 필드에 저장합니다.

ResponseEntity<Article>

사용하는 이유는 HTTP 응답을 더욱 세밀하게 제어하고, RESTful API 디자인 원칙을 준수하기 위해서입니다.ResponseEntity의 장점 HTTP 상태 코드 제어: ResponseEntity를 사용하면 HTTP 상태 코드를 명시적으로 지정할 수 있습니다. 예를 들어, ResponseEntity.status(HttpStatus.CREATED)는 201 Created 상태 코드를 응답과 함께 전송합니다. 이를 통해 클라이언트에게 요청의 성공 여부, 생성된 리소스의 위치 등을 정확하게 알릴 수 있습니다. 응답 헤더 설정: ResponseEntity를 사용하면 응답 헤더를 자유롭게 설정할 수 있습니다. 예를 들어, Location 헤더를 사용하여 새로 생성된 리소스의 URI를 클라이언트에게 알려줄 수 있습니다. 응답 본문 설정: ResponseEntity를 사용하면 응답 본문에 Article 객체와 같은 자바 객체를 담아서 전송할 수 있습니다. Jackson 라이브러리를 사용하여 자바 객체를 JSON 형식으로 자동 변환하여 클라이언트에게 전달합니다. RESTful API 디자인: ResponseEntity를 사용하면 RESTful API 디자인 원칙을 준수하는 데 도움이 됩니다. RESTful API는 HTTP 상태 코드, 헤더, 본문을 사용하여 리소스의 상태와 관련된 정보를 명확하게 전달해야 합니다. ResponseEntity를 사용하지 않을 경우 ResponseEntity를 사용하지 않고 Article 객체만 반환하면, Spring은 기본적으로 200 OK 상태 코드와 함께 응답을 전송합니다. 이는 단순한 API에서는 문제가 되지 않지만, 복잡한 API에서는 클라이언트에게 충분한 정보를 제공하지 못할 수 있습니다. 결론 ResponseEntity를 사용하면 HTTP 응답을 세밀하게 제어하고, RESTful API 디자인 원칙을 준수하여 클라이언트에게 더욱 명확하고 유용한 정보를 제공할 수 있습니다. 따라서, RESTful API를 개발할 때는 ResponseEntity를 사용하는 것이 권장됩니다.

Article로 반환받아도 되긴 한다는거다 ㅋㅎ

Article로 반환받으면 이렇게 된다고 한다

public Article addArticle(@RequestBody AddArticleRequest request) {

    // AddArticleRequest를 Article 엔티티로 변환합니다.
    Article article = Article.builder()
            .title(request.getTitle())
            .content(request.getContent())
            // 필요한 다른 필드 설정
            .build();

    // blogService를 사용하여 Article을 저장합니다.
    return blogService.save(article);
}

모르는게 뭔지 알아도 다시 짜기는 무섭다.. ㄷㄷㄷ

p.s)추가로 더 알아봐야할것은 제네릭과 리스트에 대해서 자바책으로 조금더 공부해야겠다

내가 했던것

우선 클래스들을 만들었다. 엔티티, 컨트롤러, 리포지토리,서비스 클래스를 만들었다.

근데 작성하는 방법을 까먹었다. 엔티티는 대충 @Id, @GeneratedValue, @Column쓰는것 까지는 기억이 났다. 물론 공식문서도 참고했다. https://spring.io/guides/gs/uploading-files 자세하게 참고한건 아니고 각 계층별 형식같은것만 대충 참고했다. 리포지토리도 그냥 CrudRepository..대충 따라쳤다.

모르겠는것들

@Entity

public class Article {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name ="id")
    private Long id;
    @Column(name = "title")
    private String title;
    @Column(name = "content")
    private String content;

    protected  Article(){  }

    @Builder
    public Article(String title, String content){
        this.title = title;
        this.content= content;
    }

}

여기서 왜

protected  Article(){  }

    @Builder
    public Article(String title, String content){
        this.title = title;
        this.content= content;
    }

이런 코드를 어떤생각으로 도출해내는건지 모르겠다.

그리고 Dto를 왜 만들었고 어떻게 쓰는지에 대한 이해가 더 필요할 것 같다.

@RequiredArgsConstructor
@Controller
public class BlogApiController {
    private final BlogService blogService;
    @PostMapping("/api/articles")
    public ResponseEntity<Article> add(@RequestBody AddArticleRequest request){
            Article savedArticle = blogService.save(request);
            return ResponseEntity.status(HttpStatus.CREATED)
                    .body(savedArticle);
        }

    }

이 코드를 어떻게 생각해내야했을지 더 생각해봐야겠다.

다음포스트에서는 내가 모르는것들에 대한 정리를 해보겠다.

1. localhost:8080/add/articles로 post요청 json으로

   {
   "title":"첫글",
   "content":"첫글은 역시 똥글"
   }

   이렇게 보내면 mySQl db에 이런식으로 저장되게

구조

책에 나온데로 똑같이 해볼것이다. 맨날 막막해서 그냥 책 봐버렸는데 이제는 내힘으로 해볼꺼다

기본구조

1.MVC 모델: 데이터, 비즈니스 로직

뷰: 모델로부터 데이터를 받아 사용자에게 표시 사용자의 입력을 받아 컨트롤러에 전달

컨트롤러: 사용자의 입력처리, 모델과 뷰 사이에 상호작용 관리

내방식대로 대충 정리 Dispatcher Servlet이 브라우저로부터의 요청을 어떻게 잘 처리해서 컨트롤러에게 넘김 컨트롤러는 매핑된대로 서비스에게 넘김 서비스는 컨트롤러에게 가공된 요청을 받아서 비즈니스 로직 수행함 이 과정에서 repository에 데이터 엑세스할수도 있음 repository는 비즈니스로직한테 요청받으면 데이터베이스 읽고 씀 컨트롤러는 실행한 로직을 바탕으로 사용자에게 보여줌 (DispatcherServlet이 반환된 view객체 이용해 최종 응답 렌더링)

Dispatcher Servlet은 요청처음에 받을때 일하고 마지막에 내보낼때 일하는 약간 문지기 느낌?

ORM이란? Java의 객체와 DB연결하는 프로그래밍 기법 RDBMS(관계형 DB 관리하기 위한 소프트웨어 ex)MySQL, Oracle)안써도 되니까 간편함

JPA는 인터페이스 이므로 실제사용을 위해서는 ORM 프레임워크를 써야함 대표적인것이 하이버네이트

하이버네이트 내부적으로는 JDBC API사용

Spring Data는 엔티티 상태관리,트랜잭션 커밋을 클래스 레벨에서 추상화함

Spring Data JPA Spring Data+ JPA기능

** Entity** DB테이블과 매핑되는 객체(객체이지만 DB에 영향을 미치는 쿼리를 실행하는 객체)

JPA의 중요속성1 Entity 매니저 엔티티 관리: DB와 어플리케이션 사이에서 객체생성, 수정, 삭제 엔티티 팩토리에서 만들어짐

JPA중요속성2 영속성 컨텍스트 엔티티 관리하는 가상공간 -1차캐시 -쓰기지연 -변경감지 -지연로딩

계층 1.프레젠테이션 계층 :컨트롤러, 요청과 매핑하여 비즈니스 계층으로 넘김

2.비즈니스 계층 :비즈니스 로직 처리

3.퍼시스턴스 계층 :모든 DB관련 로직처리 이 과정에서 DB에 접근하는 DAO객체를 사용할수 있음

DTO(data transfer object)는 계층끼리 데이터를 교환하기 위해 사용하는 객체입니다.

DAO는 데이터베이스와 연결되고 데이터를 조회하고 수정하는데 사용하는 객체라 데이터 수정과 관련된 로직이 포함되지만

DTO는 단순하게 데이터를 옮기기 위해 사용하는 전달자 역할을 하는 객체이기 때문에 별도의 비즈니스 로직을 포함하지 않습니다.

Chapter 06 클래스 6.1 객체 지향 프로그래밍 6.2 객체와 클래스 6.3 클래스 선언 6.4 객체 생성과 클래스 변수 6.5 클래스의 구성 멤버 6.6 필드 선언과 사용 6.7 생성자 선언과 호출 6.8 메소드 선언과 호출 6.9 인스턴스 멤버 6.10 정적 멤버 6.11 final 필드와 상수 6.12 패키지 6.13 접근 제한자 6.14 Getter와 Setter 6.15 싱글톤 패턴

Chapter 07 상속
7.1 상속 개념 7.2 클래스 상속 7.3 부모 생성자 호출 7.4 메소드 재정의 7.5 final 클래스와 final 메소드 7.6 protected 접근 제한자 7.7 타입 변환 7.8 다형성 7.9 객체 타입 확인 7.10 추상 클래스 7.11 봉인된 클래스

Chapter 08 인터페이스 8.1 인터페이스 역할 8.2 인터페이스와 구현 클래스 선언 8.3 상수 필드 8.4 추상 메소드 8.5 디폴트 메소드 8.6 정적 메소드 8.7 private 메소드 8.8 다중 인터페이스 구현 8.9 인터페이스 상속 8.10 타입 변환 8.11 다형성 8.12 객체 타입 확인 8.13 봉인된 인터페이스

Chapter 12 java base 모듈 12.11 리플렉션 12.12 어노테이션

Chapter 13 제네릭 13.1 제네릭이란? 13.2 제네릭 타입 13.3 제네릭 메소드 13.4 제한된 타입 파라미터 13.5 와일드카드 타입 파라미터

"이것이 자바다" 책 +udemy "초보자를 위한 자바 프로그래밍 과정부터 자바 객체 지향 프로그래밍까지. 보너스: Spring Boot를 활용한 REST API 설계

학습예상기간 (1~3개월)

static은 '정적'이라는 뜻으로 static이 붙는것과 아닌것의 메모리 할당시점이 다르다

Error라고 쓰여진 주석코드를 각각 e1,e2라 하겠다

e1이 발생한 이유는 instanceVar는 인스턴스 변수이기 때문에 객체가 생성이되어야 메모리에 할당이 되기 때문에 객체가 생성이 안된 시점에서는 호출할수 없기 때문이다.

반면 instanceMethod 속 instanceVar를 불러올수 있느 이유는 instanceMethod또한 인스턴스 메소드 이기 때문에 instanceVar가 호출된 시점에는 이미 인스턴스 객체가 생성되고 난 후이기 때문이다.

e2가 발생한 이유는 e1과 같다.

그 밑에 Foo.instanceMethod()가 안되는 이유는 instanceMethod()는 인스턴스 메소드이기 때문에 인스턴스 객체가 생성되어야 호출할수 있기 때문이다.

https://github.com/woominKO/subreddit2

우선 데이터베이스를 연결하는 법은 알려주시지 않았기때문에 json형식으로 데이터를 주셨는데 이것때문에도 꽤나 힘들었다. json을 js에서 어떻게 파싱하는지도 몰랐기 때문이다.

gpt는 최대한 쓰지 않기로 했다. gpt는 정답이 하나인것처럼 말해주는데 그렇게 계속하다보면 생각하는 능력이 떨어지고 다양한 방법을 생각하고 그속에서 의사결정 하는 능력이 떨어질것 같다. (그렇지만 마지막에는 써버렸다...)

아무튼 json파일은 이렇다

{
    "soccer": {
        "name": "Soccer",
        "subscribers": 800000,
        "description": "The football subreddit. News, results and discussion about the beautiful game.",
        "posts": [
            {
                "title": "Marten de Roon to make pizza for more than 1,000 people in Bergamo if Atalanta win the Champions league.",
                "author": "joeextreme"
            },
            {
                "title": "Stephan Lichtsteiner has retired from professional football",
                "author": "odd person"
            },
            {
                "title": "OFFICIAL: Dani Parejo signs for Villareal.",
                "author": "joeextreme"
            }
        ]
    },
    "chickens": {
        "name": "Chickens",
        "subscribers": 23956,
        "description": "A place to post your photos, video and questions about chickens!",
        "posts": [
            {
                "title": "Naughty chicken hid under a shed for 3 weeks and came home with 25 chicks today!",
                "author": "joeextreme",
                "img": "https://preview.redd.it/pcn8u4j7c9z61.jpg?width=960&crop=smart&auto=webp&s=e114976dde1108b9556555d2db36a3cb6211798d"
            },
            {
                "title": "Had to kill my first chicken today. Does it get any easier?",
                "author": "sad boi"
            },
            {
                "title": "My five year old chicken set and hatched one baby. I guess she wanted to be a mama one more time.",
                "author": "tammythetiger",
                "img": "https://preview.redd.it/lervkuis3me51.jpg?width=640&crop=smart&auto=webp&s=6a18ab3c4daa80eccf3449217589b922fa443946"
            }
        ]
    },
    "mightyharvest": {
        "name": "Mighty Harvest",
        "subscribers": 44002,
        "description": "Feeding many villages and village idiots for 10s of days.",
        "posts": [
            {
                "title": "My first meyer lemon ripened today. Im so proud of the little guy. Banana for scale",
                "author": "proudmamma",
                "img": "https://preview.redd.it/1bz6we4j54941.jpg?width=640&crop=smart&auto=webp&s=a036ea99299f7737efde9f6c3bfa43893f5eaa00"
            },
            {
                "title": "I think I overestimated the harvest basket size I needed.",
                "author": "grower123",
                "img": "https://preview.redd.it/4h99osd25i351.jpg?width=640&crop=smart&auto=webp&s=d651250a345bbceeba7a66632e8c52a02d71bc73"
            }
        ]
    }
}

구현하고 싶었던 것은 서버파일을 실행하고 url창에 localhost:3000/r/[subreddit주제] 를 입력하면 ejs가 주제에 맞춰서 페이지를 띄워줘야하는데 이때, ejs반복문을 사용해서 title,author를 출력하고 페이지의 이름과 description도 출력해야했다. css는 뒤로 미뤄두고 간단하게 글자들만 출력하기로 했다.

구현할때 생각해보아야 할것들은 다음과 같았다.

0.기본적인 express.js구조 1.라우팅(/r/서브레딧주제) 2.ejs 반복문을 어떻게 짤것인가

프로젝트를 만들면서 몰랐던것들은 다음과 같다

0.기본적인 express.js서버파일구조 0.1 express()해야하는 이유 0.2 app.listen반드시 써야함 1.프로젝트 경로에 있는 파일을 서버파일과 연결하는법 2.json파일을 js에 이식하는법 3.fs.readFile - (강사분은 이걸 안썼다..) 4.반복문기초 5.js 객체 접근문법 6. app.set이란? 7. res.render문법 8.path.join을 왜써야하고 어떻게 쓰는지 9.구조분해할당--> ex){...data} 10.res.params(이건 알았는데 자세히 공부해야할듯) 11.함수속 메소드 (express()와 express.static이 되는 이유)

나는 반복문을 어디까지 써야할지 고민이였다. 레딧 서브페이지는 따로 만들어야할지 그것조차 반복문(?)을 써야할지..

나는 subreddit마다 페이지를 따로따로 만들었지만 강사분은

const redditData = require('./data.json');
app.get('/r/:subreddit', (req, res) => {
    const { subreddit } = req.params;
    const data = redditData[subreddit];
    if (data) {
        res.render('subreddit', { ...data });
    } else {
        res.render('notfound', { subreddit })
    }
})

이런식으로 :subreddit요청이 오면 json에서 아예 해당 subreddit만 추출해서 ejs에 보내고

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= name %> </title>
    <link rel="stylesheet" href="/app.css">
</head>

<body>
    <h1>Browsing The <%= name %> subreddit</h1>
    <h2><%= description %></h2>
    <p><%=subscribers %> Total Subscribers</p>
    <hr>

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

</html>

이런식으로 만들었는데 놀라웠다.. 이생각을 왜못했지..

[배운점들 정리]

0.1 익스프레스를 사용할때

const express = require('express');
const app = express();

왜 이렇게 하는지 몰라서 index.js파일 만들고 어떤 코드부터 넣어야할지 머릿속에서 아무생각이 없이 멍~했다.

첫번째 줄에서 require로 모듈시스템을 이용하여 라이브러리를 불러오는것은 알게되었는데 두번째줄 관련 코드를 검색해보니 인스턴스를 생성하는코드라는데 인스턴스는 뭘까..

자바스크립트에서 인스턴스는 특정 클래스 또는 생성자함수로부터 생성된 객체를 의미합니다

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function () {
    console.log(`Hello, my name is ${this.name}`);
  };
}
// 인스턴스 생성
const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);
person1.greet(); // Hello, my name is Alice
person2.greet(); // Hello, my name is Bob

위 예제에서 Person은 생성자 함수이고, person1과 person2는 Person의 인스턴스입니다.

class Animal {
  constructor(type, sound) {
    this.type = type;
    this.sound = sound;
  }
  makeSound() {
    console.log(`${this.type} says ${this.sound}`);
  }
}
// 인스턴스 생성
const dog = new Animal('Dog', 'Woof');
const cat = new Animal('Cat', 'Meow');
dog.makeSound(); // Dog says Woof
cat.makeSound(); // Cat says Meow

여기서 Animal은 클래스이고, dog와 cat은 해당 클래스의 인스턴스입니다.

this.name = name은 생성한 인스턴스 괄호속에 있는 인자를 인스턴스의 메소드로 집어넣는다는 뜻인것 같다. 정확히 말하자면 생성한 인스턴스의 property에 괄호 속에 인자를 할당한다는 뜻이라고 한다.

그래서 익스프레스의 인스턴스를 만드는건 뭘까 내생각에는 app.get같은걸 쓰기 위해서 쓰는것 같긴하다.

require('express'): Node.js의 모듈 시스템을 사용하여 Express 라이브러리를 불러옵니다. 이때 반환되는 값은 함수(function) 또는 객체(object)입니다. express 변수: 이 변수는 Express 프레임워크 자체를 의미하며, 서버 인스턴스를 생성할 수 있는 함수를 포함합니다.

어렴풋이 알것같은데.. 정확히는 이해는 안가는 느낌...

좋은 질문이에요! 😊 Express에서 express()는 왜 함수처럼 호출되는지 설명드리겠습니다.

1. 핵심 차이점: Express는 함수(Function)이고, avante는 객체(Object)

객체(Object)

class Car {
  constructor(brand, name, color) {
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
}
const avante = new Car('hyundai', 'avante', 'blue');

• avante는 클래스(Car)의 인스턴스(객체)입니다.
• 객체는 함수처럼 호출할 수 없습니다. → avante()는 오류 발생!

  Express의 경우: 함수(Function)

  ```js const express = require('express'); // express는 함수! const app = express(); // 함수 호출
• require('express') //모듈 자체가 함수(Function)를 반환합니다.
  express() 호출:
  • 이 함수는 새로운 애플리케이션 인스턴스(객체)를 생성하고 반환합니다.
  • 반환된 객체(app)는 서버를 설정하는 데 사용됩니다.
    즉, Express 모듈 자체가 함수이기 때문에 express()처럼 호출할 수 있습니다.

    ## **2. Express는 함수지만 객체처럼 동작**  
    ### 내부 동작:
    ```javascript
    function express() {
    const app = Object.create(null); // 새로운 객체 생성
    app.use = function () { /* 미들웨어 추가 */ };
    app.get = function () { /* GET 라우트 설정 */ };
    app.listen = function () { /* 서버 실행 */ };
    return app; // 최종 객체 반환
    }

• express() 함수는 내부적으로 객체(app)를 생성하고 반환합니다.
• 이 객체에는 메서드(use, get, listen)가 정의되어 있습니다.
• 결과적으로 express()는 함수처럼 호출되지만 반환값은 객체이므로, 아래와 같은 사용이 가능해집니다.

  const app = express(); // 새로운 객체(app) 반환
  app.get('/', (req, res) => res.send('Hello World!')); // 객체 메서드 사용

  3. 일반 객체도 함수처럼 만들 수 있음! (팩토리 패턴)

  Express의 구조는 팩토리 패턴(Factory Pattern)을 사용한 예제입니다. 팩토리 패턴을 활용하면 일반 객체도 함수처럼 동작할 수 있습니다.

  function createCar(brand, name, color) {
  return {
    brand: brand,
    name: name,
    color: color,
    drive() {
      console.log(`${this.name} is driving`);
    }
  };
  }
  const avante = createCar('hyundai', 'avante', 'blue'); // 함수 호출
  avante.drive(); // 'avante is driving'

• 이 예제에서 createCar()는 함수이면서 객체를 반환합니다.
• Express도 이와 유사하게 동작합니다.

  4. 결론

• express()는 함수(Function)로 정의되어 있기 때문에 직접 호출할 수 있습니다.
• avante는 객체(Object)이기 때문에 직접 호출할 수 없습니다. - Express는 팩토리 패턴을 이용해 함수 호출 시 객체를 반환하는 방식으로 동작합니다.
• 필요에 따라 일반 객체도 팩토리 패턴을 사용하여 함수처럼 동작하게 만들 수 있습니다.
• 이해가 안 되는 부분이나 추가 궁금한 점이 있으면 언제든 물어봐 주세요! 😊

0.2 app.listen이란? 서버를 어느포트에서 실행한껀지를 정하는데 문법은 app.listen(포트번호,콜백함수) 로 되는데 보통 콜백함수에는 console.log("you're listening to 포트번호")이렇게 많이 쓰는듯 하다

1.우선 익스프레스 모듈을 js파일로 불러와야 하는데 이때 require를 쓴다.

NodeJS에서는 require 메서드를 통해 외부 모듈을 가져올수 있다. require메서드는 node가 local object에 추가한 메서드로서 다음 과 같이 파라미터로 추가할 모듈의 파일 경로값을 받는다

require('파일경로');

만약 연결하는 모듈파일이 같은 파일안에 있다는 경로값의 시작은 ./이 됩니다. npm으로 설치하거나 기본내장모듈은 파일경로에 이름만 단순히 입력해도 불러와진다.

깟땜gpt한테 물어본 결과

require('express')만 입력해도 되는 이유는 Express.js가 Node.js의 npm(Node Package Manager) 패키지로 설치되기 때문입니다.

1. npm 패키지 구조

Express.js는 npm을 통해 설치되며, node_modules 폴더에 저장됩니다.
예를 들어, 다음 명령어로 설치할 수 있습니다.

npm install express

2. 패키지 이름과 모듈 경로 매칭

• 설치된 Express.js는 node_modules/express 폴더에 위치합니다.
• require() 함수는 기본적으로 node_modules 폴더를 검색합니다.
• 따라서 require('express')는 node_modules/express/index.js 파일을 로드합니다.

  3. package.json의 "main" 필드 활용

  node_modules/express 폴더 안의 package.json 파일에는 다음과 같은 내용이 있습니다.

  {
  "name": "express",
  "main": "index.js"
  }

• 여기서 "main": "index.js"는 기본 진입점(entry point)을 정의합니다.
• 따라서 require('express')는 자동으로 index.js를 불러옵니다.

  4. 파일 경로를 명시하지 않아도 되는 이유

  직접 파일 경로(예: require('./express')) 대신 require('express')를 사용해도 되는 이유는:
• npm 패키지는 전역 모듈 검색 경로에 등록됩니다.
• Node.js는 자동으로 node_modules 폴더를 찾습니다.
• express 패키지는 등록된 이름으로 직접 호출됩니다.

  정리

  Express.js를 npm을 통해 설치하면, Node.js는 자동으로 모듈을 찾고 로드합니다.
  따라서 파일 경로 대신 패키지 이름만 입력하면 쉽게 사용할 수 있습니다.
• 참고로 module.exports를 해야 해당모듈을 다른파일에서도 불러올 수 있다.

라고한다..

https://velog.io/@kakasoo/Node%EC%9D%98%EB%AA%A8%EB%93%88%EC%8B%9C%EC%8A%A4%ED%85%9C%EA%B3%BCrequire 참고링크

2&3 json파일을 js에 이식하는법 내가쓴 방법은 fs.readFile을 씀으로써 js가 json을 받아들이도록 했다. fs는 file system의 약자로 nodejs 내장모듈이다 https://nodejs.org/api/fs.html#fsreadfilepath-options-callback

그렇다고 합니다

4. object array반복문

   

   foreach는 반복문이 아니라 메소드였다는 사실!!

5. js 객체접근문법

참고* key값에 접근하는법

6. app.set이란? https://expressjs.com/en/5x/api.html#app.set

*참고 app.use https://expressjs.com/en/guide/using-middleware.html https://backend.turing.edu/module2/lessons/how_the_web_works_http

Router-lever middleware도 있다는데 다음에 알아보자

7. res.render문 https://expressjs.com/en/api.html#res.render

8. path.join()

   const express= require('express')
   const path= require('path')
   const app = express()
   

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

app.get('/r/:subreddit',(req,res)=>{ const subreddit = req.params.subreddit; console.log(subreddit) res.render('index', {subreddit:subreddit}) })

app.listen(3000);

위 코드를 보면서 path.join에 대해 알아보자


path.join은 view engine과 관련해서 쓰였다.
그래서 view, view engine 부터 알아보자 

view와 view engine은
app.set의 name칸에 들어가는 property다
app.set은 아까봤듯이 말그대로 어플리케이션의 세팅을해주는 메소드인데 
위에있는 사진에서 있던view에 대한 설명을 가져오자면
A directory or an array of directories for the application's views
라고한다.

그리고 view engine에 대한 설명은
The default engine extension to use when omitted. 
라고 한다.

공식문서에는 
![](https://velog.velcdn.com/images/mankiew_vol9/post/4d49eae4-fec4-4458-bee3-8deb6ad5c697/image.png)
![](https://velog.velcdn.com/images/mankiew_vol9/post/b3b1f3dc-90b0-4b24-84a4-8517d2ebb292/image.png)
라고 나와있다.
> To render template files, set the following application setting properties, in the default app.js created by the generator:
views, the directory where the template files are located. Eg: app.set('views', './views'). This defaults to the views directory in the application root directory. 
view engine, the template engine to use. For example, to use the Pug template engine: app.set('view engine', 'pug').

세팅을 해야한다는거 보니 app.set으로 view, view engine을 설정해야하는것 같다.

위에 설명한 app.set('views', './views') 을 보면 뒤에 인자에 파일경로를 써야되는것 같은데 위에 js코드를 보면 여기에 path.join이 쓰였다.

https://expressjs.com/en/guide/using-template-engines.html
![](https://velog.velcdn.com/images/mankiew_vol9/post/de4421de-8051-4d3f-a576-400d87b70f83/image.png)

9.구조분해할당
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
![](https://velog.velcdn.com/images/mankiew_vol9/post/56744981-dd46-48c9-af03-a048f831ff1c/image.png)
![](https://velog.velcdn.com/images/mankiew_vol9/post/8185e55e-5d89-4ce3-be51-1d241f1e9aeb/image.png)
![](https://velog.velcdn.com/images/mankiew_vol9/post/06cf6b45-3ad7-4e34-ae09-a0ee0903274d/image.png)
![](https://velog.velcdn.com/images/mankiew_vol9/post/413b9ef3-a1ca-4453-b7c4-4afe703eaf0e/image.png)
![](https://velog.velcdn.com/images/mankiew_vol9/post/68666408-3849-4b32-8f1b-fee8a99cbc05/image.png)
![](https://velog.velcdn.com/images/mankiew_vol9/post/3d11e6f9-4dbd-47b6-8144-38c2e0103961/image.png)
![](https://velog.velcdn.com/images/mankiew_vol9/post/d36b3575-3b72-4e0d-9847-8f6ac8569575/image.png)
![](https://velog.velcdn.com/images/mankiew_vol9/post/64575748-2b22-4cf7-bf83-46a372b6c14b/image.png)
![](https://velog.velcdn.com/images/mankiew_vol9/post/3d29920e-706f-4681-83bd-06f0a575e145/image.png)
![](https://velog.velcdn.com/images/mankiew_vol9/post/0b9db425-49f6-410e-87bc-b0eeb58cdb5b/image.png)
![](https://velog.velcdn.com/images/mankiew_vol9/post/59cbe750-f1fb-4577-9e42-2f7ba74c9794/image.png)
![](https://velog.velcdn.com/images/mankiew_vol9/post/708f092c-54ca-46de-82ea-0418627ec867/image.png)

10.res.params
![](https://velog.velcdn.com/images/mankiew_vol9/post/7c51b5ed-b041-4e49-881e-d0d80d16e8ea/image.png)

11.prototype
https://developer.mozilla.org/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
```js
const express= require('express')
const app = express()
express.XXX

뭔가 이상하다

express는 함수라 호출도 되는데 express.xxx처럼 메소드도 있다.

아마 prototype때문에 가능한것 같다.

공부방법

https://www.youtube.com/watch?v=llk__mId4yQ&t=256s&pp=ygUPc3FsZCDqs7XrtoDrspUg

저 위 동영상대로 data onair랑 요약본 개념보다가 너무 어려워서 때려침... 근데 처음보면 진짜 1과목은 경악스러운데 자주보고 인터넷에 검색하면서 최대한 쉬운말로 풀어써져 있는 말로 되어있는걸로보면 나중에는 별것도 아닌데 왜이렇게 어렵게 써놨을까 라는 생각이 든다

밀리의서재에 있는 민트책을 여러번 읽었다

그리고 노랑이 풀었는데 2과목 너어어무 어려워서 울면서 풀었는데 막상 시험은 그렇게 어렵게 나오진 않았다.( 쉬웠다는 뜻이 아니다. 그에 준하는 복잡한 문제들도 있었다) 참고로 어쩌다DBA님의 해설강의를 보면 그나마 낫다. 개념설명도 해주셔서(특히 계층형 쿼리 설명이 좋았음)보면 좋다.

기출을 봐야한다고 했는데 볼껄 후회중이다...왜냐하면 문제의 수준과 빈출유형을 알 수 있기 때문이다.

막판에 3개 동영상을 봤는데 이 세 동영상에 있는 내용을 완벽하게 숙지한다면 진짜 합격했을것 같다. 진짜 이대로 나옴..

https://www.youtube.com/watch?v=PC3ypt_VGWI&pp=ygUEc3FsZA%3D%3D

https://www.youtube.com/watch?v=PjCSvexo3Ow&t=327s&pp=ygUEc3FsZA%3D%3D

https://www.youtube.com/watch?v=BQxAxMnHByU&t=5s&pp=ygUEc3FsZA%3D%3D 쪽집게 강의는 강의 자료도 줬는데 여기 필기하면서 보고 시험보기 전에 계속 보고 있었더니 도움이 되었다.

9월에.. 재도전??

[문제]

19기 코딩 테스트 문제

컴퓨터가 되어버린 운영진을 이겨라!

피로그래밍 운영진 카드 게임

2개월 간의 혹독하지만 보람찬 세션과 과제들을 완수하며 **코딩 지옥🔥**에 빠져버린 피로그래밍 운영진들…

운영진과의 카드 게임에서 1등을 해야 코딩 지옥에서 벗어날 수 있다는데..😨

제시된 출력 형태를 참고하여 아래의 조건들을 만족하는 프로그램을 구현해 운영진을 구해주세요🥺✨

출력 형태를 바탕으로 아래의 조건들에 맞게 프로그램을 구현하시오.

문제설명

[ 게임 시작 전 ]

• 캐릭터가 총 4명 존재한다.

[ 게임 진행 ]

• 게임은 4 라운드 동안 진행된다.
• 매 라운드의 시작마다 카드 덱을 섞는다.
• 내 캐릭터 포함 네 명의 플레이어들은 돌아가며 덱의 맨 뒤부터 카드를 뽑는다.
• 모든 사람이 카드를 뽑은 후 해당 라운드에서 가장 숫자가 큰 카드를 뽑은 플레이어가 승리하며, 승리한 플레이어는 가장 낮은 숫자의 카드를 뽑은 플레이어의 카드 숫자와의 차이만큼 점수를 얻는다.
  • 가장 숫자가 큰 카드를 뽑은 사람이 여러 명일 경우 해당되는 모든 플레이어가 점수를 얻는다.
  • 이때 모든 사람이 카드가 동일한 경우 결론적으로 모든 0점을 얻게 된다.
• 플레이어가(내 캐릭터, 컴퓨터 공통) 카드를 선택할 때마다 어떤 카드를 뽑았는지 출력한다. 카드를 모두 뽑은 후 승리한 플레이어가 얻을 점수를 구해서 출력한다.

• 각 라운드가 종료되었을 때 업데이트된 플레이어의 점수를 표시.

[ 게임 종료 후 ]

• 4라운드 동안 진행되며, 4라운드 종료 후 게임 결과를 출력한다.
  • 먼저 라운드에서 승리한 횟수 순서, 점수 순서 두가지 형태로 각각 출력한다.
    단, 승리한 횟수나 점수가 같을 경우 이름 순으로 출력한다.
  • 결과 출력 상에서 내가 선택한 캐릭터는 이름 앞뒤에 * 를 출력해준다.

HINT

• 카드를 무작위로 뽑거나 섞을 때는 random 함수를 사용해보세요.

• 정렬할 때에는 sort, lambda 함수를 사용해보세요.

• 어디서부터 공부해야할지 모르겠다면, 아래 링크에 들어가보세요!

  • https://wikidocs.net/book/1 (점프 투 파이썬)
  • 점프 투 파이썬 1, 2, 3, 4, 5장을 참고하세요.

  스켈레톤 코드

• 스켈레톤 코드는 참고사항일 뿐입니다.

• 스켈레톤 코드를 사용하지 않아도 좋습니다.

• 사용하실 분들은 TODO 로 표시 되어있는 부분을 참고해주세요.

• 자유롭게 조건에 맞는 프로그램을 구현해주세요.

import random

class Player:
    def __init__(self, name):
        self.name = name
        self.score = 0
        self.round_wins = 0

    def __str__(self) -> str:
        return f"{self.name}"

class Game:
    def __init__(self):
        self.players = [] # 유저들의 목록
        self.deck = [] # 카드 무작위 생성
        self.my_player = ""

    def start_game(self):
        """
        - [ 게임 시작 전 ] 부분을 담당하는 함수 입니다.
        - 캐릭터들을 초기화 하고, 사용자가 플레이할 캐릭터를 선택합니다.
        - 1부터 13사이의 숫자의 무작위 숫자를 골라서 30개의 카드로 이루어진 덱을 만듭니다.
        - 동일 클래스의 game()에서 호출됩니다.
        """

        self.players.append(Player("박신빈"))
        self.players.append(Player("윤정원"))
        self.players.append(Player("임담희"))
        self.players.append(Player("김용현"))

        print("당신의 캐릭터 번호를 선택해주세요 (1,2,3,4) :", end = "")
        # TODO 1-(1): 사용자로부터 캐릭터를 입력받아 my_player에 저장해주세요.
        # Write code here..
        ##### END OF TODO 1-(1)(문제와 본 라인 사이에 코드를 작성하세요.) #####

        # TODO 1-(2) : 랜덤으로 1부터 13 사이의 카드 30장을 deck에 저장해주세요
        # random에 대한 함수를 공부해봅시다.
        # Write code here..
        ##### END OF TODO 1-(2)(문제와 본 라인 사이에 코드를 작성하세요.) #####

    def set_play_order(self, round_num):
        """ 
        - [ 게임 진행 ] 부분에서 게임진행 순서를 정하는 함수 입니다.
        - 동일 클래스의 play_game()에서 호출됩니다.
        """
        # TODO 2 : 게임진행을 위한 플레이어를 재정렬해주세요.(ROUND 1 : 사전 순서로 이름을 오름차순으로 정렬, ROUND 2,3,4 : 점수를 기준으로 오름차순 정렬)
        # sort 와 lambda 함수에 대해 공부해보세요. 사용하지 않아도 좋습니다.
        # Write code here..
        ##### END OF TODO 2 (문제와 본 라인 사이에 코드를 작성하세요.) #####

    def play_round(self):
        """
        - [ 게임 진행 ] 라운드 진행을 담당하는 함수 입니다.
        - 동일 클래스의 play_game()에서 호출됩니다.
        """

        play_order = ",".join(map(str, self.players))

        print(f"게임은 {play_order} 순으로 진행됩니다.\n")

        # TODO 3-(1) : 카드를 뽑기 전에 self.deck을 랜덤으로 섞어주셔요.
        # Write code here..
        ##### END OF TODO 3-(1) (문제와 본 라인 사이에 코드를 작성하세요.) #####

        print("===========플레이어가 뽑은 카드============")
        # TODO 3-(2) : 플레이어들이 카드를 뽑는 부분입니다. 플레이어들이 뽑은 카드를 players_cards에 저장해주시고, 뽑을 때마다 어떠한 카드를 뽑았는지 출력하는 코드를 작성해주세요. 
        # Write code here..
        ##### END OF TODO 3-(2) (문제와 본 라인 사이에 코드를 작성하세요.) ##### 

        # TODO 3-(3) : 가장 큰 숫자를 뽑은 플레이어가 점수를 얻는 코드를 작성해주세요.
        # 점수 계산 방식 : 본인의 카드에 적힌 숫자 - 플레이어들이 뽑은 카드 중 가장 숫자가 작은 카드에 적힌 숫자
        # Write code here..
        ##### END OF TODO 3-(3) (문제와 본 라인 사이에 코드를 작성하세요.) ##### 

    def play_game(self):

        """
        - [ 게임 진행 ] 부분을 담당하는 함수 입니다.
        - 동일 클래스의 game()에서 호출됩니다.
        """
        for round_num in range(1, 5):

          self.set_play_order(round_num)

          print("===========================")
          print(f"     ROUND {round_num} - START")
          print("===========================")
          self.play_round()


          print("===========================")
          print(f"     ROUND {round_num} - END")
          print("===========================")
          # 라운드 종료 후 각 플레이어들의 현재 점수
          for order, player in enumerate(self.players, 1): 
            print(f"{order}. {player} : {player.score}점")
          print()

    def game_result(self):

        # TODO 4-(1) : 점수 순으로 결과값을 출력해주세요.
        # 내가 선택한 캐릭터 이름 앞뒤에는 *을 붙여주세요.
        # sort 와 lambda 함수에 대해 공부해보세요. 사용하지 않아도 좋습니다.
        print("=============================")
        print("     게임 순위 - 점수")
        print("=============================")
        # Write code here..
        ##### END OF TODO 4-(1)(문제와 본 라인 사이에 코드를 작성하세요.) #####


        # TODO 4-(2) : 승리 횟수 순으로 결과값을 출력해주세요.
        # 내가 선택한 캐릭터 이름 앞뒤에는 *을 붙여주세요.
        # sort 와 lambda 함수에 대해 공부해보세요. 사용하지 않아도 좋습니다.
        print("=============================")
        print("     게임 순위 - 승리 횟수")
        print("=============================")
        # Write code here..
        ##### END OF TODO 4-(2)(문제와 본 라인 사이에 코드를 작성하세요.) #####


    def game(self):

        """
        - 게임 운영을 위한 함수입니다. 
        - 별도의 코드 작성이 필요 없습니다. 
        """

        self.start_game()
        self.play_game()
        self.game_result()

if __name__ == "__main__":  
    """
    - 코드를 실행하는 부분입니다. 
    - 역시 별도의 코드 작성이 필요 없습니다. 
    """
    game = Game()

    game.game()

TODO list

• TODO List

  1-1. 번호 입력 받아 해당 캐릭터 my_player에 저장하기

  1-2. 1부터 13 사이의 숫자 카드를 랜덤으로 30장 생성해서 deck에 저장하기

  2. 플레이어 순서 정렬 (1R: 이름 순, 2R ~: 점수 낮은 순)

     3-1. 카드를 뽑기 전에 deck을 랜덤으로 섞기

     3-2. 플레이어별로 카드를 deck의 뒤에서부터 뽑고 출력하기

     3-3. 라운드 종료 후 플레이어별로 점수 계산해서 업데이트 후 출력하기

     4-1. 점수 순으로 결과값 출력하기

     ⇒ 점수가 같다면 이름순 출력

     4-2. 게임 종료 후 승리 횟수 순으로 결과값 출력하기

     ⇒ 승리 횟수가 같다면 이름순 출력

입출력케이스

• 이해에 도움을 드리기 위한 다양한 입출력케이스입니다.

• 입출력 예시 1

  입력형태 1

  당신의 캐릭터 번호를 선택해주세요 (1,2,3,4) : 4

  출력형태 1

    ===========================
         ROUND 1 - START
    ===========================
    게임은 김용현,박신빈,윤정원,임담희 순으로 진행됩니다.
  
    ===========플레이어가 뽑은 카드============
    >> 김용현 (현재 점수: 0)
    >> 뽑은 카드: 5
  
    >> 박신빈 (현재 점수: 0)
    >> 뽑은 카드: 11
  
    >> 윤정원 (현재 점수: 0)
    >> 뽑은 카드: 6
  
    >> 임담희 (현재 점수: 0)
    >> 뽑은 카드: 2
  
    >>>> 박신빈님이 9 점을 얻었습니다 \^_^/ <<<<
  
    ===========================
         ROUND 1 - END
    ===========================
    1. 김용현 : 0점
    2. 박신빈 : 9점
    3. 윤정원 : 0점
    4. 임담희 : 0점
  
    ===========================
         ROUND 2 - START
    ===========================
    게임은 김용현,윤정원,임담희,박신빈 순으로 진행됩니다.
  
    ===========플레이어가 뽑은 카드============
    >> 김용현 (현재 점수: 0)
    >> 뽑은 카드: 9
  
    >> 윤정원 (현재 점수: 0)
    >> 뽑은 카드: 10
  
    >> 임담희 (현재 점수: 0)
    >> 뽑은 카드: 8
  
    >> 박신빈 (현재 점수: 9)
    >> 뽑은 카드: 4
  
    >>>> 윤정원님이 6 점을 얻었습니다 \^_^/ <<<<
  
    ===========================
         ROUND 2 - END
    ===========================
    1. 김용현 : 0점
    2. 윤정원 : 6점
    3. 임담희 : 0점
    4. 박신빈 : 9점
  
    ===========================
         ROUND 3 - START
    ===========================
    게임은 김용현,임담희,윤정원,박신빈 순으로 진행됩니다.
  
    ===========플레이어가 뽑은 카드============
    >> 김용현 (현재 점수: 0)
    >> 뽑은 카드: 12
  
    >> 임담희 (현재 점수: 0)
    >> 뽑은 카드: 5
  
    >> 윤정원 (현재 점수: 6)
    >> 뽑은 카드: 7
  
    >> 박신빈 (현재 점수: 9)
    >> 뽑은 카드: 3
  
    >>>> 김용현님이 9 점을 얻었습니다 \^_^/ <<<<
  
    ===========================
         ROUND 3 - END
    ===========================
    1. 김용현 : 9점
    2. 임담희 : 0점
    3. 윤정원 : 6점
    4. 박신빈 : 9점
  
    ===========================
         ROUND 4 - START
    ===========================
    게임은 임담희,윤정원,김용현,박신빈 순으로 진행됩니다.
  
    ===========플레이어가 뽑은 카드============
    >> 임담희 (현재 점수: 0)
    >> 뽑은 카드: 12
  
    >> 윤정원 (현재 점수: 6)
    >> 뽑은 카드: 3
  
    >> 김용현 (현재 점수: 9)
    >> 뽑은 카드: 11
  
    >> 박신빈 (현재 점수: 9)
    >> 뽑은 카드: 7
  
    >>>> 임담희님이 9 점을 얻었습니다 \^_^/ <<<<
  
    ===========================
         ROUND 4 - END
    ===========================
    1. 임담희 : 9점
    2. 윤정원 : 6점
    3. 김용현 : 9점
    4. 박신빈 : 9점
  
    =============================
         게임 순위 - 점수
    =============================
    1등 - *김용현* : 9점
    2등 - 박신빈 : 9점
    3등 - 임담희 : 9점
    4등 - 윤정원 : 6점
    =============================
         게임 순위 - 승리 횟수
    =============================
    1등 - *김용현* : 1번
    2등 - 박신빈 : 1번
    3등 - 윤정원 : 1번
    4등 - 임담희 : 1번

• 입출력 예시 2

  입력형태 2

  당신의 캐릭터 번호를 선택해주세요 (1,2,3,4) : 3

  출력형태 2

    ===========================
         ROUND 1 - START
    ===========================
    게임은 김용현,박신빈,윤정원,임담희 순으로 진행됩니다.
  
    ===========플레이어가 뽑은 카드============
    >> 김용현 (현재 점수: 0)
    >> 뽑은 카드: 3
  
    >> 박신빈 (현재 점수: 0)
    >> 뽑은 카드: 10
  
    >> 윤정원 (현재 점수: 0)
    >> 뽑은 카드: 8
  
    >> 임담희 (현재 점수: 0)
    >> 뽑은 카드: 3
  
    >>>> 박신빈님이 7 점을 얻었습니다 \^_^/ <<<<
  
    ===========================
         ROUND 1 - END
    ===========================
    1. 김용현 : 0점
    2. 박신빈 : 7점
    3. 윤정원 : 0점
    4. 임담희 : 0점
  
    ===========================
         ROUND 2 - START
    ===========================
    게임은 김용현,윤정원,임담희,박신빈 순으로 진행됩니다.
  
    ===========플레이어가 뽑은 카드============
    >> 김용현 (현재 점수: 0)
    >> 뽑은 카드: 11
  
    >> 윤정원 (현재 점수: 0)
    >> 뽑은 카드: 7
  
    >> 임담희 (현재 점수: 0)
    >> 뽑은 카드: 2
  
    >> 박신빈 (현재 점수: 7)
    >> 뽑은 카드: 4
  
    >>>> 김용현님이 9 점을 얻었습니다 \^_^/ <<<<
  
    ===========================
         ROUND 2 - END
    ===========================
    1. 김용현 : 9점
    2. 윤정원 : 0점
    3. 임담희 : 0점
    4. 박신빈 : 7점
  
    ===========================
         ROUND 3 - START
    ===========================
    게임은 윤정원,임담희,박신빈,김용현 순으로 진행됩니다.
  
    ===========플레이어가 뽑은 카드============
    >> 윤정원 (현재 점수: 0)
    >> 뽑은 카드: 1
  
    >> 임담희 (현재 점수: 0)
    >> 뽑은 카드: 11
  
    >> 박신빈 (현재 점수: 7)
    >> 뽑은 카드: 10
  
    >> 김용현 (현재 점수: 9)
    >> 뽑은 카드: 7
  
    >>>> 임담희님이 10 점을 얻었습니다 \^_^/ <<<<
  
    ===========================
         ROUND 3 - END
    ===========================
    1. 윤정원 : 0점
    2. 임담희 : 10점
    3. 박신빈 : 7점
    4. 김용현 : 9점
  
    ===========================
         ROUND 4 - START
    ===========================
    게임은 윤정원,박신빈,김용현,임담희 순으로 진행됩니다.
  
    ===========플레이어가 뽑은 카드============
    >> 윤정원 (현재 점수: 0)
    >> 뽑은 카드: 8
  
    >> 박신빈 (현재 점수: 7)
    >> 뽑은 카드: 2
  
    >> 김용현 (현재 점수: 9)
    >> 뽑은 카드: 9
  
    >> 임담희 (현재 점수: 10)
    >> 뽑은 카드: 7
  
    >>>> 김용현님이 7 점을 얻었습니다 \^_^/ <<<<
  
    ===========================
         ROUND 4 - END
    ===========================
    1. 윤정원 : 0점
    2. 박신빈 : 7점
    3. 김용현 : 16점
    4. 임담희 : 10점
  
    =============================
         게임 순위 - 점수
    =============================
    1등 - 김용현 : 16점
    2등 - *임담희* : 10점
    3등 - 박신빈 : 7점
    4등 - 윤정원 : 0점
    =============================
         게임 순위 - 승리 횟수
    =============================
    1등 - 김용현 : 2번
    2등 - 박신빈 : 1번
    3등 - *임담희* : 1번
    4등 - 윤정원 : 0번

• 입출력 예시 3

  입력형태 3

  당신의 캐릭터 번호를 선택해주세요 (1,2,3,4) : 4

  출력형태 3

    ===========================
         ROUND 1 - START
    ===========================
    게임은 김용현,박신빈,윤정원,임담희 순으로 진행됩니다.
  
    ===========플레이어가 뽑은 카드============
    >> 김용현 (현재 점수: 0)
    >> 뽑은 카드: 13
  
    >> 박신빈 (현재 점수: 0)
    >> 뽑은 카드: 7
  
    >> 윤정원 (현재 점수: 0)
    >> 뽑은 카드: 8
  
    >> 임담희 (현재 점수: 0)
    >> 뽑은 카드: 8
  
    >>>> 김용현님이 6 점을 얻었습니다 \^_^/ <<<<
  
    ===========================
         ROUND 1 - END
    ===========================
    1. 김용현 : 6점
    2. 박신빈 : 0점
    3. 윤정원 : 0점
    4. 임담희 : 0점
  
    ===========================
         ROUND 2 - START
    ===========================
    게임은 박신빈,윤정원,임담희,김용현 순으로 진행됩니다.
  
    ===========플레이어가 뽑은 카드============
    >> 박신빈 (현재 점수: 0)
    >> 뽑은 카드: 13
  
    >> 윤정원 (현재 점수: 0)
    >> 뽑은 카드: 10
  
    >> 임담희 (현재 점수: 0)
    >> 뽑은 카드: 4
  
    >> 김용현 (현재 점수: 6)
    >> 뽑은 카드: 2
  
    >>>> 박신빈님이 11 점을 얻었습니다 \^_^/ <<<<
  
    ===========================
         ROUND 2 - END
    ===========================
    1. 박신빈 : 11점
    2. 윤정원 : 0점
    3. 임담희 : 0점
    4. 김용현 : 6점
  
    ===========================
         ROUND 3 - START
    ===========================
    게임은 윤정원,임담희,김용현,박신빈 순으로 진행됩니다.
  
    ===========플레이어가 뽑은 카드============
    >> 윤정원 (현재 점수: 0)
    >> 뽑은 카드: 2
  
    >> 임담희 (현재 점수: 0)
    >> 뽑은 카드: 9
  
    >> 김용현 (현재 점수: 6)
    >> 뽑은 카드: 5
  
    >> 박신빈 (현재 점수: 11)
    >> 뽑은 카드: 6
  
    >>>> 임담희님이 7 점을 얻었습니다 \^_^/ <<<<
  
    ===========================
         ROUND 3 - END
    ===========================
    1. 윤정원 : 0점
    2. 임담희 : 7점
    3. 김용현 : 6점
    4. 박신빈 : 11점
  
    ===========================
         ROUND 4 - START
    ===========================
    게임은 윤정원,김용현,임담희,박신빈 순으로 진행됩니다.
  
    ===========플레이어가 뽑은 카드============
    >> 윤정원 (현재 점수: 0)
    >> 뽑은 카드: 1
  
    >> 김용현 (현재 점수: 6)
    >> 뽑은 카드: 6
  
    >> 임담희 (현재 점수: 7)
    >> 뽑은 카드: 5
  
    >> 박신빈 (현재 점수: 11)
    >> 뽑은 카드: 11
  
    >>>> 박신빈님이 10 점을 얻었습니다 \^_^/ <<<<
  
    ===========================
         ROUND 4 - END
    ===========================
    1. 윤정원 : 0점
    2. 김용현 : 6점
    3. 임담희 : 7점
    4. 박신빈 : 21점
  
    =============================
         게임 순위 - 점수
    =============================
    1등 - 박신빈 : 21점
    2등 - 임담희 : 7점
    3등 - *김용현* : 6점
    4등 - 윤정원 : 0점
    =============================
         게임 순위 - 승리 횟수
    =============================
    1등 - 박신빈 : 2번
    2등 - *김용현* : 1번
    3등 - 임담희 : 1번
    4등 - 윤정원 : 0번

코드 로직

파이썬 잘 못하는데 재미있었다.

추가로 공부해야할 부분들

1)람다 함수,sorted: 인터넷에 올라온데로 막 썼는데 정확한 동작원리를 모르겠다.

        if round_num == 1:
            self.players = sorted(self.players, key=lambda x: x.name)
        elif round_num > 1:
            self.players = sorted(self.players, key=lambda x: x.score)

2) for문 enumerate가 뭔지

 for i, player in enumerate(self.players):
            if self.deck[-(i+1)] == MaxCard:
                MaxPlayer = player
                MaxPlayer.score += MaxCard - MinCard
                MaxPlayer.round_wins += 1

3)

def __str__(self) -> str:
        return f"{self.name}"

def __repr__(self):
        return f"{self.name}"

4)

if __name__ == "__main__":
    """
    - 코드를 실행하는 부분입니다. 
    - 역시 별도의 코드 작성이 필요 없습니다. 
    """
    game = Game()

    game.game()

5)

play_order = ",".join(map(str, self.players))

스터디원의 권유로 인해 막차타고 5/12일에 신청했다. 다행이 고사장 자리는 있었다.

sqld 공부하느라 당분간 커밋은 못할것같기도 하지만 스터디에서 프로젝트같은거 할꺼니까 활동을 꾸준히 할 수 있을 것 같기도 하다. 벨로그는 공부 일지적는용으로 쓸것 같다.

공부법은 아래 링크대로 공부할 예정이다. https://www.youtube.com/watch?v=llk__mId4yQ&t=133s&pp=ygUJc3FsZCAz7KO8

아니 근데 그나저나 응시료 5만원 실화냐

나는 프론트엔드의 깊은 이해가 필요하다고 생각했다. 그래서 자바스크립트 deepdive책도 찾아봤다. 그러던중 커뮤니티에서 위 사이트를 추천해주었는데 페이지를 열자마자 엄청나게 어려운 기술용어와 영어울렁증이 시너지를 이루어 나를 숨막히게 했다. 그래도 드림코딩의 ECMAScript의 변천사에 관한 영상을 본적이 있기에 익숙한 내용이 몇몇개 있기는 했다.

내가 읽은 몇개의 문단들을 소개하겠다.

• 주의 필자는 영어에 잼병이므로 필자의 해석을 믿지 마시오

Introduction의 일부분

This Ecma standard defines the ECMAScript 2015 language, which is the sixth edition of the ECMAScript language specification. Since the first edition was published in 1997, ECMAScript has become one of the most widely used general-purpose programming languages in the world. It is best known as the language embedded in web browsers, but it is also widely used for server and embedded applications. The sixth edition is the most comprehensive update to ECMAScript since the first edition was published in 1997...

초간단 해석: ECMAscipt 2015는 6판(가장 포괄적), 가장 널리 쓰이는 프로그램됨, 서버와 임베디드 app에도 쓰임 -대충 자랑

*Goals for ECMAScript 2015 include providing better support for large applications, library creation, and for use of ECMAScript as a compilation target for other languages. Some of its major enhancements include modules, class declarations, lexical block scoping, iterators and generators, promises for asynchronous programming, destructuring patterns, and proper tail calls. The ECMAScript library of built-ins has been expanded to support additional data abstractions including maps, sets, and arrays of binary numeric values as well as additional support for Unicode supplemental characters in strings and regular expressions. The built-ins are now extensible via subclassing. * 초간단해석: ES6는 더 많은 기능을 지원함(include modules, class,비동기적 프로그래밍을 위한 promise 등등 겁나 많음)

ECMAScript is based on several originating technologies, the most well-known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company’s Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet Explorer 3.0.

초간단해석:ECMAScript는 js와 Jscript기반임

The development of the ECMAScript Language Specification started in November 1996. The first edition of this Ecma Standard was adopted by the Ecma General Assembly of June 1997.

초간단 해석: ECMAScript 스펙은 1996부터 작성됨

That Ecma Standard was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the second edition of ECMA-262 to keep it fully aligned with ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.

초간단해석: Ecma Standard는 ISO/IEC에 fast-trak(거의 절차 없이 개빨리) 승인됨 international standard ISO/IEC 16262으로 1판과 2판은 거의차이 없는 편집상의 수정사항 (1판은 ISO/IEC JTC 1 가 채택한것 같은데 2판부터는 Ecma General Assembly가 채택하는듯)

The third edition of the Standard introduced powerful regular expressions, better string handling, new control statements, try/catch exception handling, tighter definition of errors, formatting for numeric output and minor changes in anticipation future language growth. The third edition of the ECMAScript standard was adopted by the Ecma General Assembly of December 1999 and published as ISO/IEC 16262:2002 in June 2002.

초간단 해석:3판도 겁나 기능 추가됨 3판은 Ecma General Assembly에 의해 채택되었고 ISO/IEC 16262:2002 로 공개됨

After publication of the third edition, ECMAScript achieved massive adoption in conjunction with the World Wide Web where it has become the programming language that is supported by essentially all web browsers. Significant work was done to develop a fourth edition of ECMAScript. However, that work was not completed and not published as the fourth edition of ECMAScript but some of it was incorporated into the development of the sixth edition.

초간단해석: 3판 공개 이후 월드 와이드 웹과의 연결에 채택됨-모든 브라우저에서 지원됨

4판에는 중요한 것들이 있었지만 4판이라는 이름으로 출간되지 않고 6판에 끼워서 출간됨

The fifth edition of ECMAScript (published as ECMA-262 5th edition) codified de facto interpretations of the language specification that have become common among browser implementations and added support for new features that had emerged since the publication of the third edition. Such features include accessor properties, reflective creation and inspection of objects, program control of property attributes, additional array manipulation functions, support for the JSON object encoding format, and a strict mode that provides enhanced error checking and program security. The Fifth Edition was adopted by the Ecma General Assembly of December 2009.

초간단해석: 5판... 아 귀찮아.. 안할래 comformance부터 보세요 ㅎ

The fifth Edition was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262:2011. Edition 5.1 of the ECMAScript Standard incorporated minor corrections and is the same text as ISO/IEC 16262:2011. The 5.1 Edition was adopted by the Ecma General Assembly of June 2011.

초간단해석:

[Conformance]의 일부분 -> 약간 준수해야 하는 메뉴얼 같은 느낌? comformance: 적합성

A conforming implementation of ECMAScript must provide and support all the types, values, objects, properties, functions, and program syntax and semantics described in this specification.

ECMAScipt 준수하면서 구현하려면 타입, 변수 ,객체, 프로퍼티 함수 그리고 프로그램 문법등이 스펙에 제공되어야함

A conforming implementation of ECMAScript must interpret source text input in conformance with the Unicode Standard, Version 5.1.0 or later and ISO/IEC 10646. If the adopted ISO/IEC 10646-1 subset is not otherwise specified, it is presumed to be the Unicode set, collection 10646.

ES준수하면서 구현하려면 텍스트 입력을 유니코드 기준에 맞춰야 한다.

A conforming implementation of ECMAScript that provides an application programming interface that supports programs that need to adapt to the linguistic and cultural conventions used by different human languages and countries must implement the interface defined by the most recent edition of ECMA-402 that is compatible with this specification.

언어적 문화적 관습에 적응될 필요가 있는 프로그램을 도와주는 api를 제공하는 ES 준수하면서 구현하는것은 반드시 구현해야 한다 인터페이스를 ECMA-402에 의해 정의된

근데 여기서 말하는 api가 정확히 무엇을 의미하는지는 모르겠음.. 서버 통신하는 api는 아닌것 같은데..

이 문단이 너어어어ㅓㅇ무 해석하기 어려워서 이 문단이 쓰인 의미와 정 반대 의미로 해석했을 수 있다

A conforming implementation of ECMAScript may provide additional types, values, objects, properties, and functions beyond those described in this specification. In particular, a conforming implementation of ECMAScript may provide properties not described in this specification, and values for those properties, for objects that are described in this specification.

(앞에서 말했던 지원 내용) 변수 타입 객체 프로퍼티등을 준수하면서 구현해야함

후기 이걸 왜읽었을까?.. 너무 앞부분만 읽어서 구체적인 작동원리는 잘 모르겠다. 뒷부분을 읽어야할것 같다.

컴퓨터가 랜덤으로 1-20까지 숫자를 고르면 내가 맞추면 되는 게임이다 내가 입력한 숫자가 더 크면 up 이 출력되고 더 낮으면 down이 출력된다.

여기서 내가 조금 어려웠던 것은 이 부분이다.

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //최댓값은 제외, 최솟값은 포함
}

math.random 메소드를 사용한 것인데...로직을 설명해 보자면 우선 Math.ceil과 Math.floor는 변수와 가장 근처에 있는 정수 하나를 반환한다. 요약하자면 올림/내림이다 .그런데 어짜피 정수를 입력받을 것이기 때문에 딱히 필요없는 코드이긴 한 것 같다. 하지만 Math.floor의 기능을 그냥 지나쳐도 되냐는 질문에는 아니요 라고 대답할 것같다. 왜냐하면 return값에 Math.floor메소드를 사용했기 때문이다. Math.random() 은 0 이상 1 미만의 부동소숫점 의사 난수를 반환한다. 여기서 한가지 궁금했던 점은 왜 max-min을 곱하냐는 것이다.

예시를 들어 그림을 그려보면 조금더 쉽게 이해가 된다. 이렇게 보면 math.random()이 어떤 0과 1사이의 부동소수점을 생성하는지와 관계없이 max값과 min사이의 정수값들을 모두 출력한다.참으로 신기한 로직이다

한가지 수정사항이 필요한데 html이 다 로드된 후에 while문이 실행되도록 하고 싶다.

깃헙 리포지토리:https://github.com/woominKO/ToDoList 넷틀리파이:https://woomin-todo-list.netlify.app/

*삭제버튼 작동하게 만듬 *

조금 힘들었다.ㅎㅎ 가장 많이 마주쳤던 오류는 Uncaught TypeError: Cannot read property 'addEventListener' of null이다. 그 이유인 즉슨 나는 처음에 동적으로 생성되는 html위에 해당 생성되는 html의 요소를 queryselector로 선택했고 addeventlistenr를 추가했기 때문에 오류가 발생했다.

전자 처럼 코드를 짰더니 newdiv를 인식하지 못해서 혹시..? 하는 마음에 후자처럼 코드를 옮겼더니 오류가 해결되었다. 사실 delfunc의 removechild 메소드가 document.만 선택해서 오류가 떴긴 했지만 금방 해결했다.

조금더 할일이 있었지만 피곤해서 내일로 미뤘다. 중요한건 코딩할 여력을 남겨놓는것이다. 다 소진해버리는 것이 아닌