COSMOS

[파이썬] 9655 : 돌 게임

개발 편지 — Tue, 23 Apr 2024 23:46:59 +0900

9655번: 돌 게임

상근이가 게임을 이기면 SK를, 창영이가 게임을 이기면 CY을 출력한다.

www.acmicpc.net

<규칙>

상근이와 창영이.
돌은 1개 또는 3개 가져갈 수 있음.
시작은 상근이가 한다.
마지막 돌 가져가는 사람이 이긴다.
상근이가 이기면 'SK' 출력, 창영이가 이기면 'CY' 출력.

< 규칙 살펴보기 >

1. 상근이가 1개 먼저 뽑았을 경우

상근 => 1 : 1

상근 창영 => 1 1 : 2(1+1)

상근 창영,창영,창영 => 1 3 : 4(1+3)

2. 상근이가 3개 먼저 뽑았을 경우

상근상근상근 창영 => 3 1 : 4(3+1)

상근상근상근 창영창영창영 => 3 3 : 6(3+3)

1,2를 통해 2, 4, 6 짝수의 경우 그 다음 하나가 남으면 무조건 상근이가 이긴다는걸 알 수 있음.

따라서 n이 홀수면 무조건 상근이가 이긴다.

반면에 2,4,6 이렇게 짝수의 경우 마지막으로 뽑는 사람이 다 창영이기 때문에

n이 짝수면 창영이가 무조건 이김을 알 수 있다.

< 수도 코드 >

if n이 짝수면:
    print("CY")
else:
    print("SK")

코드

n = int(input())

if n % 2 == 0:
    print("CY")
else:
    print("SK")

이렇게 하면 맞았습니다! 가 출력된다.

[파이썬] 백준 5073 : 삼각형과 세 변

개발 편지 — Tue, 23 Apr 2024 16:03:46 +0900

5073번: 삼각형과 세 변

각 입력에 맞는 결과 (Equilateral, Isosceles, Scalene, Invalid) 를 출력하시오.

www.acmicpc.net

< 수도 코드 >

while True:

a,b,c입력받기

1. 만약 a,b,c가 같은경우:

(1-1)만약 a=b=c=0이었을경우:

break

print("Equilateral")

2. a,b,c가 다르고, 삼각형 조건을 만족할 경우:

(2-1) 만약 전부 다 다른 숫자일 경우:

print("Scalene")

(2-2) 그게 아니면:

print("Isosceles")

3. 삼각형 조건을 만족하지 못함:

print("Invalid")

이를 토대로 코드를 구현해보면

while True:
    a,b,c = map(int,input().split())
    if a == b == c:
        if a == 0: break
        print("Equilateral")
    elif max(a,b,c) < a+b+c-max(a,b,c):
        if a != b and b!= c and a!=c:
            print("Scalene")
        else:
            print("Isosceles")
    else :
        print("Invalid")

이렇게 작성할 수 있다.

제출해보니 맞았습니다!가 나온다

[파이썬] 백준 23971 - ZOAC 4

개발 편지 — Tue, 23 Apr 2024 03:08:44 +0900

23971번: ZOAC 4

i행 j열 자리를 (i, j)라고 할 때, (1,1)에 참가자가 앉은 경우 다른 참가자는 (1,2), (2,1), (2,2) 자리를 제외한 나머지 자리에 앉을 수 있다. (2,2)의 경우는 (1,1)과 행 번호 및 열 번호의 차가 1보다 크

www.acmicpc.net

문제를 보고 h*w 크기의 0으로 초기화 된 리스트를 만들고 리스트에서 2중 for문으로 n+1, m+1간격의 값을 1로 변경하려고 했다.

그 뒤 총 합을 구하면 정답이라고 생각했다.

h,w,n,m = map(int, input().split())

people = [[0 for _ in range(w)] for _ in range(h)]


for i in range(0, h, n+1):
    for j in range(0, w, m+1):
        if i < h and j < w:
            if people[i][j] == 0:
                people[i][j] = 1


total_sum = sum([sum(row) for row in people])

print(total_sum)

이렇게 하니까 메모리 초과가 떴다.

코드를 살펴보니 문제점이 보였다.

-> total_sum을 나중에 총합 계산하지 않고 미리 선언 후 증가하는 방식으로 구하고자 생각했다.

h,w,n,m = map(int, input().split())

people = [[0 for _ in range(w)] for _ in range(h)]
total_sum = 0

for i in range(0, h, n+1):
    for j in range(0, w, m+1):
        if i < h and j < w:
                total_sum += 1


print(total_sum)

그런데도 메모리 초과가 발생했다.

다시 코드를 보니 초기 people이 사용되지 않음을 깨닫고 지우고 제출하니 시간초과가 떴다.

그래서 이중 for문을 사용하지 않고 코드를 짜려고 했다.

어차피 for문의 역할이 단순 사칙연산의 역할이었으므로

h,w,n,m = map(int, input().split())

row = (h-1) // (n+1) +1
col = (w-1) // (m+1) +1

print(row*col)

이렇게 for문의 역할을 사칙연산으로 나타내었다.

그 결과 맞았습니다!가 떴다.

문제를 보고 어떤 방식으로 풀면 가장 최적화된 방식일지 미리 생각을 더 하고 구현을 해보자!!

그리고 최대한 for문과 자료구조를 쓰지 않는 간결화된 방식을 지향하자.

Chapter 8. API와 서버 통신

개발 편지 — Tue, 9 Apr 2024 16:19:18 +0900

학습 목표

API의 개념에 대해 알고, API를 사용할 수 있다.

API란 무엇이고, 왜 사용하나요?

API는 ‘Application Programing Interface’의 준말로, 여러 프로그램들과 데이터베이스, 그리고 기능들의 상호 통신 방법을 규정하고 도와주는 매개체라는 뜻입니다.

API는 데이터베이스가 아니지만, 엑세스 권한이 있는 앱의 권한 규정과 서비스 요청에 따라 데이터나 서비스 기능을 제공하는 메신저 역할을 합니다.

좀 더 쉽게 한 마디로 설명하자면, 일반적으로 클라이언트와 서버가 주고받는 통신이라고 설명할 수 있습니다.

개발자가 프로그램을 만드는 데 필요한 어떤 기능을 직접 구현하지 않고 API 제공자들이 제공하는 데이터와 모듈 등을 갖다 쓸 수 있게 해주는 것이 바로 API와 API 문서입니다.

API 유형에는 세 가지가 있습니다.

private API

내부 API로, 회사 개발자가 자체 제품과 서비스를 개선하기 위해 내부적으로 발행합니다.

따라서 제 3자에게 노출되지 않습니다.

public API

개방형 API로, 모두에게 공개되고 누구나 제한없이 API를 사용할 수 있습니다.

partner API

기업이 데이터 공유에 동의하는 특정인들만 사용할 수 있습니다.

비즈니스 관계에서 사용되는 편이며, 종종 파트너 회사 간에 소프트웨어를 통합하기 위해 사용됩니다.

API를 사용할 때의 장단점은 무엇인가요?

장점은 다음과 같습니다.

데이터 접속의 표준화와 편의성

API는 모든 접속을 표준화합니다. 따라서 디바이스, 운영체제 등과 상관없이 조건만 맞다면, 누구에게나 동일한 엑세스를 약속합니다.

또 조직에서 애플리케이션을 개발할 때 기능적 API를 사용하면, 필요한 기본 기능들을 매번 자가 개발할 필요없이 손쉽게 이용할 수 있다는 장점이 있습니다.

자동화와 확장성

API를 이용한 CRUD 처리에 따라 관련 데이터와 콘텐츠가 자동으로 생성되고 사용자의 환경에 맞춰서 정보가 전달 되어 개발 워크플로우가 간소화되고 애플리케이션 확장이 용이해 집니다.

예를 들면, API를 활용한 웹 사이트 분석, 프로젝트 및 팀 관리 도구, 온라인 결제 시스템, 기타 여러 운영 솔루션에 필요한 애플리케이션을 쉽게 작성할 수 있습니다.

적용력

API는 변화 예측에도 큰 도움이 되기 때문에 API를 통해 데이터를 수집하고 전달하는 데 있어 유연한 서비스 환경을 구축하고 소프트웨어를 통합하고자 할 때, 그리고 개발자들 간의 협업이 필요할 때 더욱 용이합니다.

API의 단점은 다음과 같습니다.

보안성과 HTTP 방식의 제한

가장 주목할 점은 API의 단일 진입점인 API 게이트웨이는 해커의 타겟 대상이 될 수 있다는 점입니다.

한 마디로, API의 장점인 ‘평범한 HTTP 메서드를 사용하여 엑세스할 수 있다’는 점이 보안성에 관해서는 큰 단점이 됩니다. 또한, HTTP method는 메서드 형태가 다소 제한적이라는 문제점 또한 존재합니다.

표준의 부재와 개발 비용

REST API의 설계에 있어 가장 큰 단점이라고 할 수 있는 점이 공식화된 표준이 존재하지 않는다는 점입니다.

그렇기 때문에 관리가 어렵고 실제로 API 기능을 구현하고 제공하려면 개발 시간, 지속적인 유지 관리 요구 사항 및 지원 제공 측면에서 비용이 많이 들 수 있습니다.

또한 기존 API의 기능을 확장하려고 할 때 광범위한 프로그래밍 지식이 필요합니다.

A P I 사 용 하 기

JSON이란 무엇이며, 어떻게 사용하나요?

JSON은 ‘JavaScript Object Notation’의 약자로, ‘자바 스크립트 객체 표기법’이라는 뜻입니다.

쉽게 말하면 데이터를 쉽게 교환하고 저장하기 위한 텍스트 기반의 데이터 교환 표준입니다.

JSON의 기본적인 형태는 아래와 같습니다.

{
	key : value,
	key2: value2
}

JSON의 형태는 키(key)와 값(value)의 쌍으로 이루어져 있습니다.

그리고 key와 value 사이엔 콜론(:)이 들어갑니다. 여러 데이터를 나열할 경우에는 쉼표를 사용합니다.

그동안 우리가 앞에서 사용했던 JSON 파일들이 바로 API를 통해 받아온 내용입니다!

Movie.json

export const movies = {
  "dates": {
    "maximum": "2023-09-17",
    "minimum": "2023-07-31"
  },
  "page": 1,
  "results": [
    {
      "adult": false,
      "backdrop_path": "/8pjWz2lt29KyVGoq1mXYu6Br7dE.jpg",
      "genre_ids": [
        28,
        878,
        27
      ],
      "id": 615656,
      "original_language": "en",
      "original_title": "Meg 2: The Trench",
      "overview": "전 세계에서 가장 깊은 마리아나 해구, 역사상 가장 거대하고 무자비한 포식자가 도사리는 그곳에서 강철 다이버 ‘조나스’(제이슨 스타뎀)가 더 맹렬하게 돌아온 ‘메가로돈’과 짜릿한 대결을 펼치는 액션 어드벤처",
      "popularity": 2429.447,
      "poster_path": "/cbAHK6Vrt0GClMRUxH8TsgC2JqL.jpg",
      "release_date": "2023-08-15",
      "title": "메가로돈 2",
      "video": false,
      "vote_average": 7,
      "vote_count": 1790
    },
    {
      "adult": false,
      "backdrop_path": "/w2nFc2Rsm93PDkvjY4LTn17ePO0.jpg",
      "genre_ids": [
        16,
        35,
        28
      ],
      "id": 614930,
      "original_language": "en",
      "original_title": "Teenage Mutant Ninja Turtles: Mutant Mayhem",
      "overview": "뉴욕의 하수구로 스며든 미스터리한 녹색 액체, ‘우즈’로 인해 아기 거북이 네 마리와 청년 쥐 스플린터는 사람과 비슷한 모습의 돌연변이가 된다. 15년 후, 10대 청소년이 된 레오나르도, 미켈란젤로, 라파엘, 도나텔로는 하수구에 숨어 사는 생활에서 벗어나 인간 세상에서 평범한 삶을 살고 싶어하고 우연히 만난 학생 기자 에이프릴과 함께 도시를 위협하는 '슈퍼플라이'와 그 일당을 물리치면 뉴욕의 히어로가 되어 당당히 세상에 나갈 수 있을 거라는 꿈을 꾸는데… 인간들을 모두 돌연변이로 만들겠다는 ‘슈퍼플라이’의 음모로 위험에 빠진 뉴욕! 틴에이저 히어로로 다시 태어난 ‘닌자터틀’ 형제들의 스트릿 액션 어드벤처가 펼쳐진다!",
      "popularity": 800.947,
      "poster_path": "/6xORIhe6cP3iM5RYTHs7MTOH1qa.jpg",
      "release_date": "2023-09-14",
      "title": "닌자터틀: 뮤턴트 대소동",
      "video": false,
      "vote_average": 7.3,
      "vote_count": 512
    },
    {
      "adult": false,
      "backdrop_path": "/fm6KqXpk3M2HVveHwCrBSSBaO0V.jpg",
      "genre_ids": [
        18,
        36
      ],
      "id": 872585,
      "original_language": "en",
      "original_title": "Oppenheimer",
      "overview": "세상을 구하기 위해 세상을 파괴할 지도 모르는 선택을 해야 하는 천재 과학자의 핵개발 프로젝트.",
      "popularity": 530.049,
      "poster_path": "/4ZLnVUfiCe3wX8Ut9eyujndpyvA.jpg",
      "release_date": "2023-08-15",
      "title": "오펜하이머",
      "video": false,
      "vote_average": 8.3,
      "vote_count": 3566
    },
    {
      "adult": false,
      "backdrop_path": "/2zzaJ9jzyK1Am8XoS0dFjmP8V0L.jpg",
      "genre_ids": [
        28,
        53,
        27
      ],
      "id": 1135229,
      "original_language": "en",
      "original_title": "I Am Rage",
      "overview": "에린은 새로운 남자친구의 고향인 어느 한적한 시골마을을 방문한다. 그곳에서 비슷하게 여행을 온 커플들을 만나게 되고 그들은 실종이 되어도 누구도 찾지 않은 외로운 사람들이라는 공통점이 있다는 것을 알게 된다. 그들은 인간의 피를 거래하고 마시며 초자연적인 힘을 얻는 사이비 살인마 집단에 납치된 것. 하지만 에린은 위기에 몰리거나 분노하게 되면 극한의 잔인함과 폭력성이 초인적으로 발현되는 특이한 혈통을 가진 체질이다. 에린의 분노가 폭발하고 그녀를 사냥한 악인들에 대한 더욱 잔혹한 사냥이 시작된다.",
      "popularity": 425.756,
      "poster_path": "/z1nFd03qoiCrHlGSxBlumkF9uZh.jpg",
      "release_date": "2023-09-14",
      "title": "론 서바이버 : 아이 엠 리벤지",
      "video": false,
      "vote_average": 6.5,
      "vote_count": 11
    },
    {
      "adult": false,
      "backdrop_path": "/kHlX3oqdD4VGaLpB8O78M25KfdS.jpg",
      "genre_ids": [
        9648,
        18,
        80
      ],
      "id": 945729,
      "original_language": "en",
      "original_title": "A Haunting in Venice",
      "overview": "세계적 명탐정 '에르큘 포와로'는 오랜 탐정 생활에서 은퇴하여 아름다운 도시 베니스에서 평범한 삶을 살아가고 있다. 그런 그에게 오랜 친구이자 베스트셀러 작가인 '아리아드네 올리버'가 찾아와 죽은 영혼을 부를 수 있다고 알려진 영험한 심령술사의 실체를 밝혀달라고 부탁하게 된다.핼러윈 밤, 베니스 운하 위 위치한 고풍스러운 저택의 주인이자 1년 전 사랑하는 딸을 잃고 깊은 상실에 빠진 '로웨나 드레이크'의 초대로 교령회에 참석한 이들은 미스터리한 심령술사 '조이스 레이놀즈'가 죽은 영혼의 목소리를 전하는 광경을 보며 혼란에 빠지게 된다. 갑자기 발생한 끔찍한 살인 사건에 실체 없는 용의자를 쫓던 '에르큘 포와로'는  자신의 모든 믿음이 흔들리는 경험을 하며 충격에 빠지게 되는데....",
      "popularity": 348.761,
      "poster_path": "/dUQdookYulZV9sTIEvAuAu1Ptxv.jpg",
      "release_date": "2023-09-13",
      "title": "베니스 유령 살인사건",
      "video": false,
      "vote_average": 6.8,
      "vote_count": 203
    },
    {
      "adult": false,
      "backdrop_path": "/5Jfk2p3iGrChUKkl0cBD5krr2u8.jpg",
      "genre_ids": [
        16,
        10749
      ],
      "id": 998731,
      "original_language": "ja",
      "original_title": "映画 佐々木と宮野ー卒業編ー",
      "overview": "여성스러운 얼굴이 콤플렉스인 고등학교 2학년 ‘미야노’와 불량해 보이는 3학년 선배 ‘사사키’. BL 만화를 빌려 주면서 시작된 두 사람은 마침내 사랑에 빠진다. 어느덧 계절은 겨울로 바뀌고 ‘사사키’의 졸업이 코 앞으로 다가온다 두 사람은 함께하는 고교 생활을 소중하게 보내지만, 졸업이 다가올수록 애틋한 마음은 커져만 가는데… 고민도 불안도 날려 버리고, 언제나 아껴 주고 싶은 마음을 전하고 싶어!",
      "popularity": 204.668,
      "poster_path": "/4XeVvKoPKl5Mbiu6ZN3esMt51e7.jpg",
      "release_date": "2023-09-06",
      "title": "극장판 사사키와 미야노 - 졸업편",
      "video": false,
      "vote_average": 6.3,
      "vote_count": 15
    },
    {
      "adult": false,
      "backdrop_path": "/urDWNffjwmNi5IQaezw9GwqkUXa.jpg",
      "genre_ids": [
        12,
        14
      ],
      "id": 767,
      "original_language": "en",
      "original_title": "Harry Potter and the Half-Blood Prince",
      "overview": "어둠의 세력이 더욱 강력해져 머글 세계와 호그와트까지 위협해온다. 위험한 기운을 감지한 덤블도어 교수는 다가올 전투에 대비하기 위해 해리 포터와 함께 대장정의 길을 나선다. 볼드모트를 물리칠 수 있는 유일한 단서이자 그의 영혼을 나누어 놓은 7개의 호크룩스를 파괴하는 미션을 수행해야만 하는 것! 또한 덤블도어 교수는 호크룩스를 찾는 기억여행에 결정적 도움을 줄 슬러그혼 교수를 호그와트로 초청한다. 한편 학교에서는 계속된 수업과 함께 로맨스의 기운도 무르익는다. 해리는 자신도 모르게 지니에게 점점 끌리게 되고, 새로운 여자 친구가 생긴 론에게 헤르미온느는 묘한 질투심을 느끼는데...",
      "popularity": 143.657,
      "poster_path": "/yrGlb3HLtjGp39mv4MJ5UuIHcj4.jpg",
      "release_date": "2023-09-06",
      "title": "해리 포터와 혼혈왕자",
      "video": false,
      "vote_average": 7.7,
      "vote_count": 18104
    },
    {
      "adult": false,
      "backdrop_path": "/lUPz9zW0uf0bHfYsRRID8RtBHEU.jpg",
      "genre_ids": [
        18,
        36
      ],
      "id": 457232,
      "original_language": "en",
      "original_title": "Lamborghini: The Man Behind the Legend",
      "overview": "2차 세계대전이 종식된 후 고향으로 돌아온 ‘페루치오 람보르기니’  그는 트랙터 회사를 세워 자신의 이름을 널리 알리겠다는 야망을 품고있다.  타협 없는 노력 끝에 결국 트랙터 개발에 성공하였지만, 그의 꿈은 여기서 멈추지 않는다.  페루치오는 동경하는 자동차 제조사 회장 ‘엔초 페라리’를 찾아가 동업을 제안하지만,  시골 촌놈 취급을 받으며 거절당하는 굴욕을 당한다. 이에 격분한 페루치오는 업계에서 유능하다고 알려진 자동차 엔지니어를 스카우트하며, 황소같이 강력한 차를 만들기위해 의기투합한다. 제네바 모터쇼까지 6개월밖에 남지 않은 상황에서 페루치오는 정말 세상에 선보인 적 없던 최고의 차를 만들어 낼 수 있을까?",
      "popularity": 112.035,
      "poster_path": "/1z6EUqJn07mtfmYGzu8LmHfiOJW.jpg",
      "release_date": "2023-08-23",
      "title": "람보르기니: 전설이 된 남자",
      "video": false,
      "vote_average": 6.3,
      "vote_count": 300
    },
    {
      "adult": false,
      "backdrop_path": "/fIQfdZ6fqf9mIbqBaexbgIEIk5K.jpg",
      "genre_ids": [
        35
      ],
      "id": 864168,
      "original_language": "en",
      "original_title": "Joy Ride",
      "overview": "성공 가도를 달리던 알파걸 변호사 '오드리'(애슐리 박)는 초고속 승진을 위해 어릴 적 헤어진 생모를 찾아오라는 황당한 미션을 받는다.  꽃미남 전문가인 음란마귀 아티스트 '롤로'(셰리 콜라), 흑역사 숨기고 할리우드 진출 앞둔 톱배우 '캣'(스테파니 수), 흐린 눈의 케이팝 광인 '데드아이'(사브리나 우)가 합류하면서 네 친구들의 크레이지한 월드투어가 시작된다!  지구 반 바퀴를 돌고 도는 고생길 끝에 밝혀진 오드리의 출생의 비밀은…",
      "popularity": 102.202,
      "poster_path": "/dY2HZ0yAMhYqwHkuKM5HU7zxoJ9.jpg",
      "release_date": "2023-08-30",
      "title": "조이 라이드",
      "video": false,
      "vote_average": 6.6,
      "vote_count": 160
    },
    {
      "adult": false,
      "backdrop_path": "/dvHKdXijoN1OEzGcPhd0eRvkfMd.jpg",
      "genre_ids": [
        27,
        53,
        28,
        12
      ],
      "id": 960258,
      "original_language": "en",
      "original_title": "Shark Bait",
      "overview": "마지막 봄 방학을 기념하러 해변에서 파티를 벌이던 젊은이들은 우연히 주인 없이 방치된 제트스키 두 대를 발견하고 키를 훔친다. 그들은 제트스키가 처참한 결과를 몰고 올 재앙의 원인이 될지 모른 채 승선한다. 철없는 치킨게임을 하다 고장 난 제트스키는 바다 한 가운데 고립되고 거대한 백상어의 그림자가 서서히 그들 주위를 맴돈다. 상어의 희생자가 한 명씩 늘어가는 가운데 남은 사람들은 해변으로 돌아가기 위해 고군분투한다.",
      "popularity": 69.423,
      "poster_path": "/pxsn8GtNHbN01iWkD2cV8CMuGzm.jpg",
      "release_date": "2023-08-03",
      "title": "47시간: 샤크베이트",
      "video": false,
      "vote_average": 5.8,
      "vote_count": 261
    },
    {
      "adult": false,
      "backdrop_path": "/7TdVWAO7vV9j1OLDq1hQJS3pb4U.jpg",
      "genre_ids": [
        28,
        35,
        12,
        53
      ],
      "id": 739405,
      "original_language": "en",
      "original_title": "Operation Fortune: Ruse de Guerre",
      "overview": "전 세계 검은 무기 거래 왕, 슈퍼 빌런 ‘그렉’  그가 정체를 파악조차 불가능한 ‘핸들’을 거래한다는  첩보 내용이 입수된다. 국가 정보국은 전세계를 붕괴시킬 수도 있는  이것이 무엇인지 대혼돈에 빠지게 되고… 이 혼돈을 해결할 자는 오직 하나! 액션 만랩, 수트 핏과 꿀성대까지! 모든 것이 완벽한 업계 최고의 스파이 ‘포춘’ 무비 스타, 테크 전문가와 샷건 마스터까지 팀 ‘포춘’을 조합한 후 일생일대의 위험한 임무에 나서게 되는데…",
      "popularity": 58.973,
      "poster_path": "/5QXoAgO905YGucMJmeDb4CmjEUT.jpg",
      "release_date": "2023-08-30",
      "title": "스파이 코드명 포춘",
      "video": false,
      "vote_average": 6.6,
      "vote_count": 1031
    },
    {
      "adult": false,
      "backdrop_path": "/63CDysgJZb38ZXdw2yF1UuDJgDN.jpg",
      "genre_ids": [
        53
      ],
      "id": 979924,
      "original_language": "en",
      "original_title": "On the Line",
      "overview": "심야 라디오 '온 더 라인'의 진행자 엘리스가 생방송 중 의문의 전화를 받게 되고, 쇼맨은 그의 온 가족을 죽이겠다고 협박을 한다. 모든 것이 실시간으로 진행되는 라디오에서 사랑하는 사람을 구하기 위한 엘리스의 고군분투 생존게임이 시작되는데...",
      "popularity": 50.437,
      "poster_path": "/o04KUuO9Zoi1L8KxH5Z4jJF7iXb.jpg",
      "release_date": "2023-08-02",
      "title": "온 더 라인",
      "video": false,
      "vote_average": 6.1,
      "vote_count": 382
    },
    {
      "adult": false,
      "backdrop_path": "/qAvou7F5P4VcIR72JzzrnKEQSN3.jpg",
      "genre_ids": [
        12,
        14,
        10751
      ],
      "id": 630,
      "original_language": "en",
      "original_title": "The Wizard of Oz",
      "overview": "회오리 바람에 휩쓸려 오즈의 나라로 내던져진 도로시는 집으로 되돌아갈 수 있는 유일한 길이 위대한 오즈의 마법사를 만나는 것임을 알고 그를 찾아 긴 여정이 시작된다. 도로시는 애견 토토와 함께 노란 길을 따라 오즈의 마법사가 사는 에메랄드 시티로 향한다. 도중에 만난 세 명의 친구들, 지능을 얻고자 하는 허수아비와 심장을 원하는 양철 나뭇꾼, 용기를 가지고 싶어하는 겁장이 사자와 함께 오즈의 마법사에게 자신의 소원이 이루어지도록 부탁하기 위해 도로시와 함께 경쾌한 발걸음을 옮긴다. 그러나 도로시 일행을 방해하기 위해 뒤쫓아오는 서쪽 나라 마녀의 검은 그림자.",
      "popularity": 53.375,
      "poster_path": "/9FzHxca1OybjwOdTmWLfhdD4u0g.jpg",
      "release_date": "2012-05-03",
      "title": "오즈의 마법사",
      "video": false,
      "vote_average": 7.6,
      "vote_count": 5105
    },
    {
      "adult": false,
      "backdrop_path": "/rHnANzYUmV3WZw3n0yWOLiR3pen.jpg",
      "genre_ids": [
        53
      ],
      "id": 976912,
      "original_language": "en",
      "original_title": "Graphic Desires",
      "overview": "친구의 소개로 데이팅 앱에 가입한 '프랭크'  연인 몰래 앱을 통해 만난 여성에게 강한 성적 끌림을 느낀 그는 다시 그녀를 찾지만 여자는 사라지고 계정도 비활성화된다.  현실과 가상을 넘나들며 그녀를 찾아 헤매는 동안 그는 점점 데이팅 앱에 중독되고 결국 예기치 못한 사건에 휘말리고 마는데∙∙∙",
      "popularity": 46.565,
      "poster_path": "/8EHehEMsJVIPp2n2ROhZU8dbpJC.jpg",
      "release_date": "2023-08-31",
      "title": "그래픽 디자이어",
      "video": false,
      "vote_average": 1,
      "vote_count": 1
    },
    {
      "adult": false,
      "backdrop_path": "/wNYUv8u5Z0AI4dkyxGyet7eLEWm.jpg",
      "genre_ids": [
        18
      ],
      "id": 945675,
      "original_language": "zh",
      "original_title": "一周的朋友",
      "overview": "일주일마다 친구에 대한 기억을 잃는 전학생 ‘린샹즈’ 병 때문에 자발적 아싸가 돼버린 그녀에게 성화 재수학원 최고 인싸 3인방 ‘쉬유수’, ‘송샤오난’, ‘장우'가 다가온다.  “일주일만 기억해도 상관없어. 일주일간 친구 하면 되잖아!” 머리가 좋아지는 호박죽, 기억력 증진 댄스, 깜찍한 유수표 엄지 인형까지! 세 사람은 샹즈의 단 하나뿐인 ‘일주일간 친구’가 되기 위해 고군분투하고, 샹즈는 그들과의 추억을 일기장에 채워 나가기 시작한다.",
      "popularity": 51.949,
      "poster_path": "/bCp45FrpSWD0mEx2EGHkvxOs2OK.jpg",
      "release_date": "2023-09-06",
      "title": "일주일간 친구",
      "video": false,
      "vote_average": 5.7,
      "vote_count": 110
    },
    {
      "adult": false,
      "backdrop_path": "/z6GxNP2Z5AyoFfrYKxZWJypfZXJ.jpg",
      "genre_ids": [
        16,
        10751
      ],
      "id": 823609,
      "original_language": "en",
      "original_title": "Monster Family 2",
      "overview": "몬스터에서 인간으로 겨우 돌아온 ‘위시본’ 패밀리!  새 가족이 된 전설 속 몬스터 ‘바바 야가’와 ‘렌필드’의 결혼식 날, 그들은 슈퍼 소녀 ‘밀라’에게 납치당한다. 이들뿐 아니라 드라큘라, 예티, 네시, 그리고 킹 콩가까지!! ‘위시본’ 패밀리는 ‘밀라’에 의해 전 세계 몬스터들이 납치된 것을 알게 되는데…  몬스터들을 구하기 위해 다시 몬스터로 변한 ‘위시본’ 패밀리! 과연 ‘위시본’ 가족은 몬스터들을 구하고 다시 인간으로 돌아갈 수 있을까?",
      "popularity": 21.008,
      "poster_path": "/9kPiLqqWlwCVL0KGJeM4kcZA9q9.jpg",
      "release_date": "2023-08-02",
      "title": "몬스터 패밀리 2",
      "video": false,
      "vote_average": 6.6,
      "vote_count": 63
    },
    {
      "adult": false,
      "backdrop_path": "/6Lqs0Bw2L2ZoVgx9XpmeN7vBcr0.jpg",
      "genre_ids": [
        18
      ],
      "id": 960275,
      "original_language": "fr",
      "original_title": "Maestro(s)",
      "overview": "권위 있는 빅투아르 음악상을 수상하며 차세대 거장으로 자리매김한 지휘자 ‘드니 뒤마르’. 그가 넘어야 할 가장 큰 산은 다름 아닌 같은 지휘자이자 음악계의 거장인 아버지 ‘프랑수아 뒤마르’이다.  한편, 아버지 ‘프랑수아’는 존경받는 최고의 지휘자지만 곧 정상의 위치에서 밀려날지도 모른다는 위기감과 함께, 같은 분야에서 승승장구하는 아들 ‘드니’에게 묘한 경쟁심을 느끼고 있다.  그러던 중 ‘프랑수아’는 평생을 소망하던, 이탈리아 ‘라 스칼라’ 극장의 지휘자 자리를 제안하는 전화를 받고 뛸 듯이 기뻐한다. 하지만 아들 ‘드니’는 자신에게 가야 할 제안이 아버지에게 잘못 전달되었음을 알게 되고, 인생 최대의 고민과 마주한다.  꿈의 무대를 두고 마주한 아버지와 아들! ‘라 스칼라’ 무대에 서게 될 주인공은 과연 누구일까?",
      "popularity": 36.246,
      "poster_path": "/8CNn2HuBMQYOA425MbAoc3oeTNO.jpg",
      "release_date": "2023-08-09",
      "title": "마에스트로",
      "video": false,
      "vote_average": 5.7,
      "vote_count": 36
    },
    {
      "adult": false,
      "backdrop_path": "/8nLiWpgxOfH15FjBgTvvcah3ZUb.jpg",
      "genre_ids": [
        28,
        53,
        80,
        35
      ],
      "id": 1015963,
      "original_language": "en",
      "original_title": "High Heat",
      "overview": "전직 특수요원 출신 스타 셰프 '아나'(올가 쿠릴렌코)가 마피아의 타겟이 된 레스토랑을 구하기 위해 킬러 본능을 다시 일깨운다.",
      "popularity": 24.199,
      "poster_path": "/wIFYnvvdwsjD0Wjeg8MjIIp58rR.jpg",
      "release_date": "2023-08-17",
      "title": "킬러의 레스토랑",
      "video": false,
      "vote_average": 5.6,
      "vote_count": 98
    },
    {
      "adult": false,
      "backdrop_path": "/4hAhZ66n5iasGtSYHTFg6oGdJk0.jpg",
      "genre_ids": [
        53,
        27,
        878
      ],
      "id": 660942,
      "original_language": "no",
      "original_title": "De uskyldige",
      "overview": "이다와 안나는 새로운 아파트로 이사한 직후, 또래인 벤자민, 아이샤와 친구가 된다. 네 명의 아이들은 어른이 개입하지 않는 순간, 특별한 잠재력을 깨워나가기 시작하고 벤자민은 능력을 이용해 사람들을 조정할 수 있게 된다. 단순한 호기심과 장난으로 행해지던 어떤 일들이, 급기야 분노라는 감정과 이어지고 결국 친구들을 비롯해 주변에 위협을 가하기 시작하는 벤자민. 가장 순수하고, 본능적이었던, 그래서 더욱 파괴적이고 잔인할 수 있었던 잔혹한 동심의 세계가 펼쳐진다!",
      "popularity": 22.179,
      "poster_path": "/tNJ2oOuTPHny3x633DwwKDnc5mQ.jpg",
      "release_date": "2023-09-06",
      "title": "이노센트",
      "video": false,
      "vote_average": 7,
      "vote_count": 439
    },
    {
      "adult": false,
      "backdrop_path": "/g8kCHQzfogy1t1dE9nPBtiFkz64.jpg",
      "genre_ids": [
        53,
        878,
        18
      ],
      "id": 729854,
      "original_language": "ko",
      "original_title": "콘크리트 유토피아",
      "overview": "대지진으로 하루아침에 폐허가 된 서울. 모든 것이 무너졌지만 단 한 곳, 황궁 아파트만은 그대로다. 소문을 들은 외부 생존자들이 황궁 아파트로 몰려들자 위협을 느끼기 시작하는 입주민들. 생존을 위해 하나가 된 그들은 새로운 주민 대표 영탁을 중심으로 외부인의 출입을 철저히 막아선 채 아파트 주민만을 위한 새로운 규칙을 만든다. 덕분에 지옥 같은 바깥 세상과 달리 주민들에겐 더 없이 안전하고 평화로운 유토피아 황궁 아파트. 하지만 끝이 없는 생존의 위기 속 그들 사이에서도 예상치 못한 갈등이 시작되는데...",
      "popularity": 22.278,
      "poster_path": "/9dENCKupUckoT1WgOohHMZfVl61.jpg",
      "release_date": "2023-08-09",
      "title": "콘크리트 유토피아",
      "video": false,
      "vote_average": 8,
      "vote_count": 3
    }
  ],
  "total_pages": 5,
  "total_results": 83
}

사용법

API를 통해 정보를 받아오면 JSON 형태로 받아오게 됩니다.

이는 겉보기엔 객체의 형태로 보이더라도, 실제 타입을 확인해보면 문자열 형태라는 것을 알 수 있습니다.

따라서 받아온 JSON 데이터를 객체로 변환해주는 작업이 필요합니다.

JSON을 문자열에서 객체로 바꾸는 방법은 다음과 같습니다.

var str = '{"test": "value"}';
var parsingData = JSON.parse(str)

반대로, 객체를 문자열로 바꾸는 방법은 다음과 같습니다.

var json = {"test": "value"}
var incodingData = JSON.stringfy(json);

API를 요청하는 메소드 종류에는 무엇이 있나요?

API 요청 메소드 중에서, 가장 많이 사용하는 메소드는 다음과 같습니다.

GET: 데이터 조회
POST: 데이터 등록
PUT: 데이터 수정
DELETE: 데이터 제거

fetch 함수에 대해 조사하고, 설명해주세요.

fetch() 함수는 브라우저에 내장된 함수로, API를 요청하는 가장 기본적인 방법입니다.

사용법

fetch() 함수는 첫 번째 인자로 URL, 두 번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환합니다.

반환된 객체는 API 호출이 성공했을 경우에는 응답(response) 객체를 resolve 하고, 실패했을 경우에는 예외(error) 객체를 reject 합니다.

옵션 객체에는 HTTP 방식(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body) 등을 설정해줄 수 있습니다.

응답(response) 객체로 부터는

HTTP 응답 상태(status),

HTTP 응답 헤더(headers),
HTTP 응답 전문(body) 등을 읽어올 수 있습니다.

A P I 데이터 화면에 로딩하기

React에서 API를 통해 받아온 데이터를 화면에 나타나게 하기 위해선 어떻게 해야할까요?

useState, useEffect를 사용하여 실제로 API를 받아오고 화면에 렌더링하는 코드 예시를 찾아봅시다.

리액트에서 API를 사용할 땐 useState, useEffect와 함께 사용하는 것이 일반적입니다.

useEffect를 사용하면 컴포넌트가 최초로 렌더링된 후 mount 될 때 한 번만 데이터를 동적으로 받아올 수 있기 때문입니다.

아래는 API를 연동한 다음, useState와 useEffect를 사용하여 화면에 API를 렌더링하는 코드입니다.

import React, { useState, useEffect } from 'react';

function Users() {
  const [users, setUsers] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

	const getData = async () => {
		try {
			// 요청 시작할 때 error와 users 초기화
			setError(null);
			setUsers(null);
			// loading 상태를 true로 변경하여, 현재 loading 중임을 표시
			setLoading(true);
			const response = await fetch(
          'https://jsonplaceholder.typicode.com/users'
			);
			const body = await response.parse()
			const result = await body.data;
			return result
		} catch (error) {
			setError(error);
		} finally {
			// 성공, 실패에 상관없이 요청이 종료됐으므로 loading 상태를 다시 false로 변경
			setLoading(false);
		}
}

  useEffect(() => {
		getData();
  }, []);

  if (loading) return <div>로딩중..</div>;
  if (error) return <div>에러가 발생했습니다</div>;
  if (!users) return null;
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.username} ({user.name})
        </li>
      ))}
    </ul>
  );
}

export default Users;

Chapter 7. 데이터처리 (List and Keys, Forms)

개발 편지 — Tue, 9 Apr 2024 15:57:43 +0900

학습 목표

List와 Form을 사용해서 데이터를 처리하는 방법을 알 수 있다.
List와 Form을 사용할 때 주의할 점을 알 수 있다.

L i s t a n d K e y s

JavaScript에서 여러 개의 컴포넌트 혹은 리스트를 사용하는 방법에 대해 설명해주세요.

이런 경우 JavaScript에서는 보통 map() 함수를 이용합니다.

map() 함수는 배열을 처리해서 새로운 배열로 반환하기 위한 함수입니다.

이런 특징 덕분에, 여러 개의 컴포넌트나 리스트를 사용할 때 자주 쓰이게 됩니다. 사용하는 방법은 다음과 같습니다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

여러 개의 컴포넌트를 사용할 때도 리스트를 처리할 때와 비슷합니다.

엘리먼트 모음을 만들고 중괄호를 사용해서 JSX에 포함시킵니다. 그런 다음, map() 함수를 사용해 numbers 배열을 반복 실행합니다. 각 항목에 대해 <li> 엘리먼트를 반환하고 배열의 결과를 listItems에 저장합니다.

그러면 <ul> 엘리먼트 안에 전체 listItems 배열을 포함할 수 있습니다.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NumberList numbers={numbers} />);

map()함수를 사용할 때 key를 사용해야 하는 이유는 무엇인가요?

map() 함수가 key를 통해 요소를 식별하기 때문입니다.

key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다.

key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

key를 선택할 때는 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다.

대부분의 경우엔 ID를 key로 사용합니다.

key의 올바른 사용법에 대해 조사하고, 설명해주세요.

key로 컴포넌트를 추출할 때, key는 주변 배열의 context에서만 의미가 있습니다.

예를들어 ListItem 컴포넌트를 추출한 경우 ListItem 안에 있는 <li> 엘리먼트가 아니라 배열의 <ListItem /> 엘리먼트가 key를 가져와야 합니다.

# 잘못된 예

function ListItem(props) {
  // 여기에는 key를 지정할 필요가 없습니다.
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 배열 안에 key를 지정해야 합니다.
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

# 올바른 예

function ListItem(props) {
  // 여기에는 key를 지정할 필요가 없습니다.
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 배열 안에 key를 지정해야 합니다.
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}
```

key는 형제 사이에서만 고유한 값이어야 합니다.

key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없습니다.

두 개의 다른 배열을 만들 때 동일한 Key를 사용할 수 있습니다.

function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Blog posts={posts} />);

F o r m

리액트에서 폼을 사용하는 이유는 무엇인가요?

HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 DOM 엘리먼트와 다르게 동작합니다. 예를 들어, 순수한 HTML에서 이 폼은 name을 입력받습니다.

<form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>

이 폼은 사용자가 폼을 제출하면 새로운 페이지로 이동하는 기본 HTML 폼 동작을 수행합니다.

React에서 동일한 동작을 원한다면 그대로 사용하면 됩니다. 그러나 대부분의 경우, JavaScript 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한 데이터에 접근하도록 하는 것이 편리합니다.

이를 위한 표준 방식은 “제어 컴포넌트 (controlled components)“라고 불리는 기술을 이용하는 것입니다.

제어 컴포넌트란 무엇인가요?

HTML에서 <input>, <textarea>, <select>와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다.

React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다.

우리는 React state를 “신뢰 가능한 단일 출처 (single source of truth)“로 만들어 두 요소를 결합할 수 있습니다.

그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다.

이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다.

예를 들어, 이전 예시가 전송될 때 이름을 기록하길 원한다면 폼을 제어 컴포넌트 (controlled component)로 작성할 수 있습니다.

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

value 어트리뷰트는 폼 엘리먼트에 설정되므로 표시되는 값은 항상 this.state.value가 되고 React state는 신뢰 가능한 단일 출처 (single source of truth)가 됩니다.

React state를 업데이트하기 위해 모든 키 입력에서 handleChange가 동작하기 때문에 사용자가 입력할 때 보여지는 값이 업데이트됩니다.

제어 컴포넌트로 사용하면, input의 값은 항상 React state에 의해 결정됩니다.

코드를 조금 더 작성해야 한다는 의미이지만, 다른 UI 엘리먼트에 input의 값을 전달하거나 다른 이벤트 핸들러에서 값을 재설정할 수 있습니다.

textarea 태그, select 태그의 차이점을 비교하고 각 태그가 하는 역할을 작성해주세요

textarea태그 → HTML에서 <textarea> 엘리먼트는 텍스트를 자식으로 정의합니다.
select태그 → HTML에서 <select>는 드롭 다운 목록을 만듭니다. multiple 옵션을 허용한다면 value attribute에 배열을 전달할 수 있습니다.

폼 태그로 다중입력을 제어하고자 하였을 때 이를 하나로 다루는 방법은 무엇인가요?

여러 input 엘리먼트를 제어해야할 때, 각 엘리먼트에 name 어트리뷰트를 추가하고 event.target.name 값을 통해 핸들러가 어떤 작업을 할 지 선택할 수 있게 해줍니다.

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

주어진 input 태그의 name에 일치하는 state를 업데이트하기 위해 ES6의 computed property name 구문을 사용하고 있습니다.

this.setState({
  [name]: value
});

또한, setState()는 자동적으로 현재 state에 일부 state를 병합하기 때문에 바뀐 부분에 대해서만 호출하면 됩니다.

자바스크립트 map() 함수 – 개념 정리 및 사용 예제 - 코딩에브리바디

map() 함수는 배열을 순회해서 콜백 함수를 사용하여 원하는 조건에 따라 처리한 새로운 배열을 반환하기 위한 함수입니다. 이 함수는 배열 내 각 요소를 변환하는데 사용되며, 변환된 결과를 모

codingeverybody.kr

Chapter 6. LifeCycle & Hook

개발 편지 — Tue, 9 Apr 2024 15:44:12 +0900

학습 목표

State와 LifeCycle에 대해 이해해봅시다.
Hooks의 종류에 대해 배워봅시다.
상태관리 방법에 대해 배워봅시다.

S t a t e

State란 무엇인가요?

state란 리액트에서 이벤트에 의해 변경되는 동적인 값입니다.

버튼을 클릭하는 onClick 이벤트, input 입력으로 인해 발생하는 onChange 이벤트에 의해 입력값이 변경된 경우 사용됩니다.

props는 부모 컴포넌트가 설정하는 값이며 읽기 전용이지만, state는 하위 컴포넌트도 데이터를 변경할 수 있습니다.

함수형 컴포넌트는 'useState'라는 Hook 을 사용하여 state를 다룰 수 있습니다.

State를 정의할 때 중요한 점은 무엇이고, 그 이유는 무엇인가요?

State는 개발자가 정의하게 되는데, 이때 렌더링이나 데이터 흐름에 사용되는 값만 State에 포함시켜야 합니다.

왜냐하면 State가 변경될 경우 Component가 다시 렌더링 되기 때문입니다.

렌더링과 데이터 흐름에 관계없는 값을 State에 포함시키면 불필요한 경우에 Component가 다시 렌더링되어 성능을 저하시킬 수 있습니다.

React Component의 생명주기에 대해 설명해주세요.

React Component의 생명주기는 크게 ‘출생 - 인생 - 사망’으로 이루어져 있습니다.

출생은 컴포넌트가 생성되는 시점으로, 생성자가 실행됩니다. 생성자에서는 Component의 State를 정의하게 됩니다.

Component는 초기 렌더링 이후 State 또는 Props의 변경, 이벤트 처리 등에 따라 여러 번 업데이트 됩니다.

생애 동안 많은 변화를 겪으면서 렌더링되는데, 이런 업데이트 과정을 인생이라고 봅니다.

Component의 사망은 해당 상위 Component에서 현재 Component를 더 이상 화면에 표시하지 않는 시점을 의미합니다.

이때 componentWillUnmout 함수가 호출되며 사망합니다.

H o o k s

Hooks가 개발된 이유는 무엇인가요?

React의 클래스 Component는 생성자에서 State를 정의하고, setState 함수를 통해 State를 업데이트 합니다.

클래스 Component는 State와 관련된 기능들 뿐만 아니라 Component의 생명주기 함수들까지 명확하게 정의되어 있기 때문에 잘 가져다 쓰기만 하면 됩니다.

그러나 기존의 함수 Component는 클래스 Component와 달리 코드도 간결하고 별도로 State를 정의해서 사용하거나 Component의 생명주기에 맞춰 특정 코드가 실행되도록 할 수도 없습니다.

따라서 이런 기능을 지원하기 위해 Hook이 나왔습니다.

Hook을 사용하여 함수 Component에서도 클래스 Component와 동일하게 기능을 구현할 수 있게 됐습니다.

useState에 대한 간단한 설명과 사용법을 설명해주세요.

State를 사용하기 위한 Hook으로, 함수 Component에서는 기본적으로 State를 제공하지 않기 때문에 클래스 Component처럼 State를 사용하기 위해 씁니다.

const[변수명, set함수명] = useState(초기값);

side effect의 사전적 의미와, React에서 사용되는 의미와 함께 React에서는 왜 해당 의미를 갖는지, 그 이유도 함께 설명해주세요.

side effect의 사전적 의미는 부작용으로, 개발자가 의도치 않은 코드가 실행되면서 버그가 발생할 때 주로 side effect가 발생했다고 말합니다.

그러나 React에서 side effect는 효과, 영향을 뜻합니다.

서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 등의 작업을 의미합니다.

이런 작업을 effect라고 부르는 이유는, 이 작업들이 다른 Component에 영향을 미칠 수 있으며 렌더링 중에는 작업이 완료될 수 없기 때문입니다.

렌더링이 끝난 이후에 실행되어야 하는 작업들입니다.

이런 작업들이 사이드에서 실행된다는 의미에서 side effect라고 불립니다.

useEffect에 대한 간단한 설명과 용법, 그리고 useEffect 함수가 실행되는 시점을 설명해주세요.

클래스 Component에서 제공하는 생명주기 함수들과 동일한 기능을 하나로 통합해서 제공합니다.

useEffect 훅 만으로 생명주기 함수와 동일한 기능을 수행할 수 있습니다.

useEffect(이펙트 함수, 의존성 배열);

여기서 의존성 배열은 말 그대로 이펙트 함수가 의존하고 있는 배열입니다.

이 배열 안에 있는 값 중에서 하나라도 값이 변경되었을 때 effect 함수가 실행됩니다.

기본적으로 effect 함수는 처음 Component가 렌더링된 이후와 업데이트로 인한 재 렌더링 이후 실행됩니다.

Effect 함수가 mount, unmount 각각 한 번만 실행되게 하려면 어떻게 해야 하나요?

의존성 배열에 빈 배열을 넣으면 됩니다.

해당 effect가 Props나 State에 있는 어떤 값에도 의존하지 않는 것이 되므로 여러 번 실행되지 않습니다.

의존성 배열을 생략하면 Component가 업데이트 될 때마다 호출됩니다.

Hooks의 규칙들에 대해 설명해주세요.

무조건 최상위 레벨에서만 호출해야 합니다.

여기서 최상위 레벨이란 React 함수 Component의 최상위 레벨을 뜻합니다.

반복문, 조건문, 중첩된 함수 안에서 Hook을 호출하면 안됩니다.

React 함수 Component에서만 Hook을 호출해야 합니다.

일반적인 JavaScript 함수에서 훅을 호출하는 것도 안됩니다.

R e d u x

상태관리는 왜 필요한가요?

React에서의 상태는 State를 말합니다. 그리고 이 State는 Component 안에서 관리됩니다.

Component들 사이에서 정보 공유가 필요한 경우가 있습니다.

이 경우 자식 Component들 간의 다이렉트 데이터 전달은 불가능하기 때문에, 상태를 관리하는 부모 컴포넌트를 통해 주고 받아야 합니다.

그런데 자식이 많아진다면 상태관리가 매우 복잡해집니다.

상태를 관리하는 상위 컴포넌트에서 계속 내려받아야 하기 때문에 Props drilling 이슈가 생길 수 있기 때문에 상태관리가 필요합니다.

상태 관리 툴은 어떤 문제를 해결해 주나요?

전역 상태 저장소를 제공함으로써, Props drilling 이슈를 해결해줍니다.

예를 들어, <A>라는 Component에 상태가 있고, <I>라는 Component가 해당 상태를 사용한다고 하면, 그 중간에 존재하는 <C>, <G> 등은 굳이 name이라는 상태가 필요하지 않음에도 Component에 Props를 만들어 자식 Component에 넘겨주어야 했습니다.

이를 프로퍼티 내려꽂기 문제라고 부릅니다. 그런데 전역 상태 저장소가 있고, 어디서든 해당 저장소에 접근할 수 있다면 이런 문제를 해결할 수 있습니다.

Redux의 기본 개념 세 가지에 대해 설명해주세요

Single source of truth, 동일한 데이터는 항상 같은 곳에서 가지고 온다.

즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미입니다.

state is read-only, React에서는 setState 메소드를 활용해야만 상태 변경이 가능합니다.

Redux에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있습니다.

Changes are made with pure functions, 변경은 순수 함수로만 가능하며 이는 리듀서와 연관되는 개념입니다. (store - action - reducer)

Store, Action, Reducer의 의미와 특징에 대해 설명해주세요.

Store는 상태가 관리되는 오직 하나의 공간입니다. Component와 별개로 Store라는 공간이 있어서 그 Store 안에 앱에서 필요한 상태를 담습니다. Component에서 상태 정보가 필요할 때 Store에 접근합니다.

Action은 앱에서 Store에 운반할 데이터를 말합니다.(주문서) Action은 JavaScript 객체 형식으로 되어있습니다.

Reducer는 Action을 Store에 업데이트할 지 결정하는 역할을 합니다.

Action을 Store에 바로 전달하는 것이 아니라, 우선 Reducer에 전달해서 Reducer가 주문을 보고 Store에 상태 업데이트 여부를 결정하게 됩니다.

Action을 Reducer에 전달하기 위해서는 dispatch() 메소드를 사용해야 합니다.

Redux의 장점을 설명해주세요.

순수 함수를 사용하기 때문에 상태를 예측 가능하게 만듭니다. 그리고 테스트를 붙이기 용이합니다.

복잡한 상태 관리와 비교했을 때 유지 보수에 유리합니다. 또한 디버깅에도 유리합니다.

[React] Link 컴포넌트와 useNavigate의 차이

조건이 있는 이동과 없는 이동의 차이랄까

velog.io

Chapter 5. Handling Event & Conditional Rendering

개발 편지 — Tue, 9 Apr 2024 15:30:46 +0900

학습 목표

Event Handling 함수에 대해 이해하고 활용할 수 있다.
Conditional Rendering과 Inline if문에 대해 이해하고 활용할 수 있다.

React에서 event와 event handler는 무엇을 뜻하나요?

event는 말 그대로 사건이라는 의미로, 특정 사건을 의미합니다.

사용자가 버튼을 클릭한 사건도 하나의 이벤트로, 이런 사건을 버튼 클릭 이벤트라고 합니다.

그리고 event가 발생했을 때 해당 event를 처리하는 함수를 event handler라고 지칭합니다.

event handler는 이벤트가 발생하는 것을 계속 듣고 있는다는 의미로 event listener라고 부르기도 합니다.

DOM의 event와 React의 event 처리 방식을 작성해주세요. 그리고 React의 event, event handler 작성 방식에 대해서도 설명해주세요.

<button onclick="activate()">
	Actiavate
</button>

<button onClick={activate}>
	Activate
</button>

React에서 events 이름은 반드시 camelCase(카멜 케이스, 낙타표기)를 사용해야 합니다.

그리고 event handler는 JSX 형태로 함수를 표기합니다.

Conditional Rendering에 대해 설명해주세요

Conditional Rendering은 말 그대로 조건에 따라 렌더링이 달라지는 것을 의미합니다.

여기서 조건은 프로그래밍에서 사용하는 조건문이라고 이해하면 됩니다.

조건문의 결과는 보통 True or False가 나오는데, 이 결과에 따라 Rendering을 다르게 하는 것을 조건부 렌더링이라고 합니다.

Inline Condition에 대해 설명해주세요

Inline Condition이란 코드를 별도로 분리된 곳에 작성하지 않고 해당 코드가 필요한 곳 안에 직접 넣는 방법입니다.

즉, 조건문을 코드 안에 집어넣는 방법입니다. 해당 방법으로 Inline if문이 있습니다.

Inline if문에 대해 설명해주세요

Inline if문은 if문을 필요한 곳에 직접 넣어서 사용하는 방법입니다.

실제로 if문을 넣는 것은 아니고, 이와 동일한 효과를 얻기 위해 && 연산자를 사용합니다.

Inline if 문은 두 가지 방식으로 작성됩니다.

true && expression
앞의 조건이 true이기 때문에 뒤의 expression은 항상 실행됩니다.
false && expression
앞의 조건이 false라면 뒤의 expression은 평가하지 않고 무시합니다.

추가로, Inline if ~ else 문도 작성할 수 있습니다. condition ? true : false 로 작성할 수 있는데, 삼항 연산자와 같은 형태인 것을 볼 수 있습니다.

Component Rendering을 막기 위해선 어떻게 해야하나요?

Component에 의해 Rendering 될 때 Component 자체를 숨기고 싶을 때가 있습니다.

이 때는 Rendering 결과를 출력하는 대신 null을 반환하면 해결할 수 있습니다.

아래의 예시에서는 <WarningBanner />가 warn prop 값에 의해서 Rendering 됩니다.

prop이 false라면 Component는 Rendering하지 않게 됩니다.

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<Page />);

Component의 render 메서드로부터 null을 반환하는 것은 생명주기 메서드 호출에 영향을 주지 않습니다.

그 예로 componentDidUpdate는 계속해서 호출되게 됩니다.

자바스크립트 bind 메소드 - this의 이해 - SAP Space

자바스크립트 bind 메소드 는 this 키워드에 대해 명시적으로 바인딩 할 때 사용하는 메소드이다. 명시적 바인딩을 할 때 사용하는 bind 메소드는 function의 프로토타입(Prototype)으로 모든 함수에서

sap-learn-more.com

[javascript] this bind, this 바인딩(어렵다 어려워)

* boycoding.tistory.com/22?category=915176 jeonghwan-kim.github.io/2017/10/22/js-context-binding.html 글을 읽고 공부하며 요약정리한 글입니다 this는 함수가 호출되는 패턴에 따라서 다른 객체를 참조(바인딩) 한다 객

haerang94.tistory.com

Chapter 4. CSS 라이브러리

개발 편지 — Mon, 1 Apr 2024 10:28:51 +0900

학습 목표

CSS-in-JS에 대해 이해하고 기존의 CSS를 해당 방식으로 수정할 수 있다.
esLint와 Prettier에 대해 이해하고 활용할 수 있다.

CSS-in-JS

CSS-in-JS에 대해 설명해주세요

CSS-in-JS는 문구가 뜻하는 그대로, JavaScript 코드 내에서 CSS 스타일을 정의하고 관리하는 접근 방식입니다.

이 방식은 React 및 다른 JavaScript 기반 웹 프레임워크 및 라이브러리와 함께 사용되며,

CSS 스타일을 Component와 결합하여 모듈화하고 scope 지역화된 스타일을 생성하는 데 도움을 줍니다.

Styled-Components에 대해 설명해주세요

Styled-Components는 기존 DOM을 만드는 방식인 CSS 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않습니다.

동일한 Component에서 Component 이름을 쓰듯, 스타일을 지정하는 것을 Styled-Component라고 부릅니다.

CSS 파일을 밖에 두지 않고, Component 내부에 넣기 때문에, CSS가 전역으로 중첩되지 않도록 만들어주는 장점이 있습니다.

Styled-Component를 사용하기 위해선 설치를 해줘야합니다.

yarn add styled-components

기존에는 class 이름에 CSS 스타일을 작성해줬다면, Styled-Components에서는 작성한 이름으로 바로 JSX에서 사용할 수 있습니다.

기존에 CSS로 작성한 파일을 Styled-Components 파일로 수정해주세요 (어떤 파일이든 상관없습니다)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./index.js"></script>
    <style>
      .Circle {
        width: 5rem;
        height: 5rem;
        background: black;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div class="Circle"></div>
  </body>
</html>

기존 HTML 파일

import styled from 'styled-components';

const Circle = styled.div`
  width: 5rem;
  height: 5rem;
  background: black;
  border-radius: 50%;
`;

function App() {
  return <Circle />;
}

export default App;

Circle.jsx

Styled-Components로 수정한 파일

Styled-Components의 작성 방법은 다음과 같습니다.

const 컴포넌트명 = styled.태그명`
... 스타일 넣기 ...
`

만들고자 하는 Component의 render 함수 밖에서 작성하며, … 부분에 원하는 스타일을 작성하면 됩니다.

참고로 스타일을 묶을 때는 ‘…‘(작은 따옴표)나 “…”(큰 따옴표)가 아니라 ...(백틱)으로 묶어줍니다.

백틱은 ~ 자리에 있는 문자를 뜻합니다.

Styled-Components를 분리해서 사용하는 방법을 설명해주세요.

우선, Styled-Component를 분리하는 이유는 프로젝트를 진행하다 보면 같은 내용의 style을 여러 곳에서 똑같이 사용하는 경우가 있기 때문입니다.

이때 Styled-Components의 분리를 통해 중복을 방지하고 재사용성을 높여 좀 더 효율적으로 사용할 수 있습니다.

export

Styled-Components를 분리하는 방법은 다음과 같습니다.

먼저 컴포넌트와 분리된 Styled-Components를 모아둘 파일을 만듭니다.

각각의 컴포넌트에 export를 붙여 다른 파일에서도 사용할 수 있도록 만들어줍니다.

import styled from 'styled-components';

export const Circle = styled.div`
  width: 5rem;
  height: 5rem;
  background: black;
  border-radius: 50%;
`;

Circle.style.jsx

import

위에서 만든 파일을 사용하고 싶은 곳에 가져와야 합니다. import를 통해 해당 파일을 불러옵니다.

import { Circle } from './Circle.style';

function App() {
  return <Circle />;
}

export default App;

Circle.jsx

import해서 사용할 때, 컴포넌트를 하나씩 가져오는 방식이 아니라, 별칭을 사용하는 방법도 있습니다.

import * as S from './Circle.style';

function App() {
  return <S.Circle />;
}

export default App;

이번 예시에서는 컴포넌트가 하나 밖에 없어서 크게 와 닿지 않지만, 컴포넌트의 갯수가 늘어나는 프로젝트에서는 별칭을 사용하면 많은 수의 컴포넌트를 모두 호출할 필요가 없이 쉽게 사용할 수 있습니다.

[심화]Styled-Components에 props를 적용하는 방법을 설명해주세요.

Styled-Components를 사용하는 장점 중 하나가 변수에 의해 스타일을 바꿀 수 있다는 점입니다.

import React, { useState } from "react";
import styled from "styled-components";

function Example() {
  const [email, setEmail] = useState("");

  return (
    <ExampleWrap active={email.length}>
      <Button>Hello</Button>
      <NewButton color="blue">Im new Button</NewButton>
    </ExampleWrap>
  );
}

const ExampleWrap = styled.div`
  background: ${({ active }) => {
    if (active) {
      return "white";
    }
    return "#eee";
  }};
  color: black;
`;

const Button = styled.button`
  width: 200px;
  padding: 30px;
`;

// Button 컴포넌트 상속
const NewButton = styled.Button`
  // NewButton 컴포넌트에 color가는 props가 있으면 그 값 사용, 없으면 'red' 사용
  color: ${props => props.color || "red"};
`;

export default Example;

위의 예시를 보면, email이라는 state 값에 따라 ExampleWrap에 prop으로 내려준 active라는 값이 true of false로 바뀌게 됩니다.

Styled-Components는 내부적으로 props를 받을 수 있고, 그 props에 따라 스타일을 변경할 수 있습니다.

반응형 웹 페이지

반응형 디자인에 대해 설명해주세요

반응형 디자인은 웹 페이지가 모든 화면 크기와 해상도에서 잘 렌더링되도록 하면서 사용성을 보장하는 디자인 방식입니다. 멀티 디바이스 웹을 위한 디자인 방식입니다.

즉, 핸드폰이나 데스크탑 등 어떤 기기로 접속해도 화면 구성이 잘 나타나도록 디자인 하는 것을 뜻합니다.

미디어 쿼리에 대해 설명해주세요

미디어 쿼리는 반응형 디자인을 작성할 때 많이 사용하는 방법입니다.

media라는 키워드로 사용하며, 예시는 다음과 같습니다.

.title {
  font-size: 40px;
}

@media (max-width: 550px) {
  .title {
    font-size: 20px;
  }
}

타이틀의 텍스트 크기를 40px로 하되, 550px보다 작은 화면에서는 20px로 줄인다는 내용입니다.

미디어 쿼리는 대부분 CSS 파일 내에 직접 작성합니다.

CSS 단위들에 무엇이 있는지 조사해보고, 각각의 단위에 대해 설명해주세요

CSS의 단위에는 px, em, rem, vw, vh, % 등이 있습니다.

px

px은 절대 길이 단위에 속하며, 다른 요소들의 크기와 상관없이 항상 동일한 값으로 간주됩니다.

한 번 16px이라는 값이 주어졌다면, 주변의 어떤 요소와도 상관없이 고정된 값을 가집니다.

em, rem

em과 rem은 비슷하지만, 어디를 기준으로 하는지가 다릅니다.

em은 자기 자신의 font-size를 기준으로 하고, rem은 root 요소인 <html>의 font-size를 기준으로 합니다.

1em과 1rem의 크기는 기준으로 하는 font-size에 따라 정해집니다.

em의 경우 자기 자신의 font-size가 16px이라면, 1em또한 16px이 됩니다.

rem 또한 root의 font-size가 16px이라면 1rem은 16px이 됩니다.

만약 1.5em이라고 작성한다면 16*1.5=24px이 됩니다.

%

%는 항목에 따라 기준이 다릅니다.

font-size에 %를 줄 경우, 상위 요소의 font-size를 기준으로 합니다.

따라서 test1의 font-size를 20px이라고 설정하고, 하위 요소인 test2의 font-size를 200%라고 하면 20px의 2배인 40px이 되는 것을 확인할 수 있습니다.

padding과 margin의 경우는 상위 요소의 width를 기준으로 합니다.

그래서 test2 클래스의 padding 사이즈를 10%로 해놓으면, 상위 요소인 test1 클래스의 width의 10%만큼 패딩 값이 주어지는 것을 볼 수 있습니다.

vw, vh

vw와 vh는 vertical width, vertical height의 약자입니다.

vw와 vh는 뷰포트 크기의 100분의 1에 해당하는 단위입니다.

예를 들어 브라우저 창의 넓이가 500px일 때 1vw는 5000.01을 한 값인 5px이 됩니다.

vh 또한 브라우저 창의 높이가 500px이라면 1vh는 5000.01을 한 5px이 됩니다.

각각의 단위들이 주로 쓰이는 상황은 어떤 상황일까요?
반응형을 디자인 할 때는 주로 rem을 사용합니다.
px같은 경우는 border나 shadow 값에 얇게 표현할 때, 그리고 positoin:absolute/fixed와 같이 특수한 그림을 표현할 때 쓰입니다.
vw, vh의 경우엔 특수한 디스플레이를 지정해줄 때 사용합니다.
%는 높이와 너비를 특정 비율만큼 채울 때에 사용합니다.
여러가지 단위가 있지만, 우선은 미디어 쿼리를 통해 화면을 정의하여 CSS가 섞이지 않게 격리해둡니다.
그런 다음 화면의 특성에 따라 단위를 적용하면 됩니다!

ESLint

ESLint와 Prettier에 대해 설명해주세요

ESLint와 Prettier 모두 코드 컨벤션을 잡아주는 역할을 합니다.

ESLint는 코드 퀄리티를 보장하도록 해주고, Prettier는 코드 스타일을 깔끔하게 혹은 통일되게 도와줍니다.

특히, 많은 사람들과 협업할 때 에러와 코딩 스타일을 잡아주기 때문에 한 사람이 코딩한 것처럼 합칠 수 있어 많이 쓰입니다.

ESLint

개발 중 특정 기능을 구현할 때, 그 기능을 구현하기 위한 많은 방식이 있습니다.

// function 키워드 사용
function foo() {
 ...
}

// arrow function 사용
const foo = () => {
 ...
}

const Temps = [1,2,3,4,5];

// for문 사용
for(let i = 0; i < Temps.length; i++){
 ...
}

// Array 내장 함수 사용
Temps.forEach((temp) => {
 ...
})

예를 들어 함수를 정의할 때, 일반 function 키워드의 함수로 정의할 수도 있고, arrow function을 쓸 수도 있습니다.

또 배열의 반복문을 돌릴 때 일반 for문을 돌릴 수도 있지만, forEach, map 등 Array 내장 함수를 사용할 수도 있습니다.

이처럼 여러 방식의 코드 작성법이 있는데, 이러한 방식을 일관성있는 방식으로 구현할 수 있도록 잡아주는 것이 ESLint가 하는 역할입니다.

Prettier

Prettier는 ESLint처럼 ‘코드 구현 방식’이 아닌, 줄 바꿈, 공백, 들여쓰기 등 에디터에서 ‘텍스트’를 일관되게 작성되도록 도와줍니다.

const foo = () => {
  const a = [1, 2, 3];  // 스코프 내부 작성 시 두 공백 들여쓰기
}
   // <= 빈 줄이 한 줄 이상 안됨.
foo();

ESLint로 소스 코드에 숨어있는 문제 찾기

Engineering Blog by Dale Seo

www.daleseo.com

ESLint 설정 살펴보기

ESLint 설정을 위한 config에 대해서 살펴봅니다. ESLint Configuration은 eslintrc.* 파일 또는 package.json의eslintConfig 필드에 작성할 수 있습니다. ESLint의 핵심 구성 정보는 세가지 영역으로 나누어져 구성

velog.io

Prettier은 VSCode의 확장으로 설치 가능

3. styled-components · GitBook

03. styled-components 이번에 배워볼 기술은 CSS in JS 라는 기술입니다. 이 문구가 뜻하는 그대로, 이 기술은 JS 안에 CSS 를 작성하는 것을 의미하는데요, 우리는 이번 튜토리얼에서 해당 기술을 사용하

react.vlpt.us

Chapter 3. 리액트 기초 및 기본 요소

개발 편지 — Sun, 31 Mar 2024 20:36:47 +0900

JSX

JSX란 무엇인가요?

JSX는 공식적인 JavaScript 문법은 아니며, JavaScript에 XML을 추가로 확장한 문법입니다.

브라우저에서 실행되기 전에 바벨을 통해 일반적인 JavaScript 코드로 변환됩니다.

리액트에서 JavaScript 대신 JSX를 사용하는 이유는 무엇인가요?

기존에 웹은 HTML,CSS, JavaScript를 기반으로 구축되어 있고 이 파일들은 모두 분리돼서 보관되었습니다.

그러나 점점 웹의 상호작용 기능이 많아지면서 논리적인 구조가 중요해졌습니다.

페이지가 렌더링 될 때 JavaScript와 HTML을 한 번에 불러올 필요가 생겼고, 따라서 둘을 합친 형식의 문법인 JSX를 사용하게 됐습니다.

JSX를 사용하면 어떤 장점이 있나요?

JSX를 사용하면 코드가 간결해지면서 자연스럽게 가독성이 향상됩니다.

가독성이 높아질 수록 코드상의 버그를 발견하기 쉬워서 유지 보수도 좋아집니다. 또한 JavaScript 코드를 확장시킨 것이기 때문에 모든 JavaScript 문법 사용이 가능하고, 추가로 XML/HTML을 섞어서 사용하는 것도 가능합니다.

Virtual DOM

기존 DOM의 문제점은 무엇인가요? (성능 문제를 중심으로 설명해주세요)

기존의 DOM은 업데이트 하는 내용이 생기면 전체 페이지를 모두 리렌더링 해줘야 했습니다.

대규모 또는 복잡한 웹일수록 DOM 조작이 빈번하게 발생하면 성능 문제가 발생할 수 있습니다.

DOM 조작은 비용이 부싸서 성능에 부하를 줄 수 있다는 문제점이 존재했습니다.

Virtual DOM에서는 위의 문제를 어떻게 해결했나요?

Virtual DOM은 실제로 존재하지 않는, 메모리에만 존재하는 가상의 복제본입니다.

실제 돔과 동일한 구조를 가지고 있으며, 어플리케이션의 상태나 데이터 변경에 대한 표현을 저장합니다.

그리고 변경된 부분만 업데이트 함으로써 DOM 조작이 최소화되어 렌더링 성능을 향상시킵니다.

Component & Props

Component에 대해 설명해주세요.

React 어플리케이션은 Component로 구성되어 있습니다. Component는 UI를 작은 조각으로 나눈 것으로, 이러한 컴포넌트들을 조합하여 전체 어플리케이션을 구성합니다.

인프런의 사이트 화면

인프런의 사이트 화면을 잘 보면, 같은 구조가 반복되고 있다는 사실을 알 수 있습니다.

내용은 전부 다르지만 카드 모양 안에 이미지, 강의제목, 강의자 이름 등 구성요소가 들어가 있는 것을 볼 수 있습니다. 이런 요소들을 React에서는 Component라고 부릅니다.

하나의 Component는 또 다른 Component의 조합으로 구성될 수도 있습니다.

React의 Component 기반 구조에 대해 설명해주세요.(Tip 그로 인한 장점까지 함께 설명해주세요)

Component는 다른 Component의 구성 요소가 될 수도 있습니다.

이런 특성 탓에 Component 기반 구조인 React는 재사용성이 높다고 볼 수 있습니다.

한 번 Component를 만들어두면 다양한 곳에서 재사용이 가능하기 때문입니다.

Component 기반 구조라는 특징 덕분에 개발 기간이 단축된다는 점과 유지보수가 쉽다는 장점이 있습니다.

재사용이 가능하다는 뜻은 여러 곳에 쓰일 Component를 한 번만 만들 수 있다는 뜻입니다.

따라서 개발 기간이 단축될 수 있습니다.

또한 재사용성이 높으려면 모듈 간에 의존성이 낮아야 하는데, 이는 버그 수정이 쉽다는 특징을 가지고 있습니다. 따라서 유지 보수에도 유리하다는 특징을 가지고 있습니다.

Component와 Props의 관계에 대해서 설명해주세요.

Component는 붕어빵 틀, Props는 붕어빵의 속재료에 비유할 수 있습니다.

전체적인 틀은 같지만, 안에 어떤 재료가 들어가냐에 따라서 다른 결과물이 나올 수 있습니다.

Props는 Component에 전달할 다양한 정보를 담고 있는 JavaScript 객체 입니다.

Component에 어떤 데이터를 전달하고 전달된 데이터에 따라 다른 내용을 화면에 렌더링하고 싶을 때는 해당 데이터를 Props에 넣어서 전달합니다.

Props의 특징에 대해 설명해주세요.

Props는 읽을 수만 있고, 값을 변경할 수는 없습니다. Props의 값은 React Component가 Element를 생성하기 위해 사용하는 값입니다. 이 값들이 Element를 생성하는 도중에 갑자기 바뀌면 제대로 된 Element를 생성할 수 없습니다. 다른 Props 값으로 Element를 생성하고 싶다면, 새로운 값을 Component에 전달하여 새로 Element를 생성해야 합니다. 또한 키, 값 쌍의 형태로 Component에 Props를 전달할 수 있습니다.

Elements와 Components의 차이점은 무엇인가요?

Component는 붕어빵 틀이고, 이 붕어빵 틀 안에 Props라는 속재료들을 넣어서 나오는 결과물이 바로 Element입니다. Element는 바로 사용되지 않고 Component에서 리턴받아 사용됩니다.

즉, Component는 Props를 받아 Element를 출력하는 함수와 같다고 보셔도 됩니다.

Element

화면에 렌더링된 Element를 새로운 것으로 변경하는 과정과 그 이유를 설명해주세요.

React Element는 불변성이라는 특징을 갖습니다.

따라서 한 번 생성된 이후에는 children이나 attributes를 바꿀 수 없습니다.

만약 화면에 있는 Element를 새로운 것으로 바꾸고 싶다면 기존의 Element를 변경하는 것이 아니라, 새로운 Element를 만드는 과정이 필요합니다.

그런 다음 기존의 것과 바꾼 다음 다시 렌더링하면 됩니다.

[React] 리액트의 폴더 구조

프로젝트를 진행하다 보면 크기가 커질수록 관리해야할 파일은 늘어나고 이에 따라 각 파일들을 용도에 맞게 분류해야할 필요가 생깁니다.

velog.io

Chapter 2-2. 리액트 환경 구축

개발 편지 — Sun, 31 Mar 2024 20:16:01 +0900

Node.js 및 npm 설치
1. node.js를 설치하면 npm은 자동으로 설치가 됩니다.
  1. https://nodejs.org/en
  2. 해당 사이트로 접속해서 다운받아주세요.
  - 터미널 실행 방법
    - 윈도우: “Winodw키 + R”을 누른 후, 나온 실행창에 cmd 입력
    - 맥: 단축키 “cmd + spaceBar”를 누른 후 나온 검색창에 터미널 입력
  - 열린 명령창 혹은 터미널에 npm -v 입력하여 잘 설치되었는지 확인npm이 제대로 다운됐는지 확인해야 합니다. 터미널을 실행해 주세요.
yarn 설치
1. 터미널에서 sudo npm install -g yarn을 입력해주세요.
2. 마찬가지로, 제대로 설치됐는지 yarn -v을 사용하여 제대로 설치됐는지 확인해주세요.
3. react 프로젝트를 설치할 폴더 생성
  - 원하는 경로에 원하는 이름으로 폴더를 만들어주세요.
  - 예시: C:\Workspace\umc-workbook
4. vscode에서 터미널을 열어주세요
5. npx create-react-app <파일 이름>
6. 터미널에 cd ./<파일 이름> 입력
  - 리액트 파일이 우리가 있던 경로 안에 새로운 폴더로 설치되었기 때문에 경로를 이동해줘야 합니다.
7. 터미널에 yarn start 입력