본문 바로가기
10. 리액트 Lifting State Up Shared State Shared State이란?공유되는 state를 말한다. 다르게 표현하면 state에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통으로 사용된다고 말할 수 있다.즉, 공통된 하위 컴포넌트가 상위 컴포넌트인 부모 컴포넌트의 state를 공유하여 쓴다.하위 컴포넌트에서 State 공유하기다음은 물의 끓음 온도를 표현해 주는 코드 예시다.이를 기반으로 Shared State를 사용해보자.참고로 Lifting State Up이란 하위 컴포넌트의 state를 공통 상위 컴포넌트로 올리는 것을 말한다.코드를 전체적으로 구현하면 다음과 같을 것이다.그림으로 표현하면 다음과 같다.상위 컴포넌트 안에 값을 하위 컴포넌트가 받아서 공유한다. (온도는 25 , 스케일은 c)(실습) 섭씨온도와 화씨온.. 2024. 8. 17.
9. [9단계] 제목: 약수, 배수와 소수 단계 1단계. 4 × 3 = 12이다.이 식을 통해 다음과 같은 사실을 알 수 있다.3은 12의 약수이고, 12는 3의 배수이다.4도 12의 약수이고, 12는 4의 배수이다.두 수가 주어졌을 때, 다음 3가지 중 어떤 관계인지 구하는 프로그램을 작성하시오.1. 첫 번째 숫자가 두 번째 숫자의 약수이다.2. 첫 번째 숫자가 두 번째 숫자의 배수이다.3. 첫 번째 숫자가 두 번째 숫자의 약수와 배수 모두 아니다. 입력은 여러 테스트 케이스로 이루어져 있다. 각 테스트 케이스는 10,000이 넘지 않는 두 자연수로 이루어져 있다.마지막 줄에는 0이 2개 주어진다. 두 수가 같은 경우는 없다.테스트 케이스마다 첫 번째 숫자가 두 번째 숫자의 약수라면 factor를, 배수라면 multiple을, 둘 다 아니라면 nei.. 2024. 8. 17.
9. 리액트 Forms Form과 Controlled ComponentForm과 Controlled Component이 무엇일까?Form은 양식이라는 뜻이다. 보통 회원가입이나 체크 박스 등.. 사용자의 입력을 받을 수 있는 양식이다. 문법은 HTML 태그에서 form으로 써주면 된다. Controlled Component은 통제 받는 컴포넌트이다. 통제는 당연히 리액트가 한다.함수 컴포넌트는 useState를 이용해서 관리함.예시 코드는 다음과 같다.value를 정의하고 input 태그에 넣어준다. 이벤트 컨트롤도 비슷하게 실행한다.Controlled Component을 이용해서 사용자의 입력을 직접적으로 제어할 수 있다.예를 들어 입력값을 대문자로 바꾸는 컴포넌트를 만들고 싶다고 치자. 그럼 다음과 같은 코드를 작성하면 된.. 2024. 8. 16.
8. [8단계] 제목: 일반 수학 1 1단계. B진법 수 N이 주어진다. 이 수를 10진법으로 바꿔 출력하는 프로그램을 작성하시오.10진법을 넘어가는 진법은 숫자로 표시할 수 없는 자리가 있다. 이런 경우에는 다음과 같이 알파벳 대문자를 사용한다.A: 10, B: 11, ..., F: 15, ..., Y: 34, Z: 35첫째 줄에 N과 B가 주어진다.첫째 줄에 B진법 수 N을 10진법으로 출력한다.답: n,b=input().split() print(int(n,int(b)))n과 b를 문자열로 입력받는다.int(n, int(b))는 문자열 n을 b 진수로 해석하여 10진수로 변환하는 코드다. 예를 들어 '1010 2'를 입력하면 n='1010', b='2'1010을 2진수로 해석하여 10진수로 변환하고 출력하게 된다. (결과: 10) 파이썬.. 2024. 8. 16.
8. 리액트 List and Keys List와 KeyList Key 여러 개의 Component 렌더링 하기map 함수를 이용해서 여러 개의 컴포넌트를 렌더링 할 수 있다.예시 코드 >실제로 리액트에서는 다음과 같이 쓰일 수 있다.List의 KeyKey 키의 값은 같은 리스트에 있는 엘리먼트 사이에서만 고유한 값이면 된다. 사진으로 생각하자면 다음과 같을 것이다. 대학교로 치면, "학번" 자체가 같아도, 어차피 대학교가 다르니 상관없는 것처럼, key도 똑같다. 키는 두 개의 리스트에서 같아도 상관없다. 왜냐하면 리스트 자체가 다르기 때문이다.키로 값 , 아이디 , 인덱스를 사용할 수 있다. 보통은 아이디로 키 값을 써준다.또한 map함수 안에 있는 엘리먼트에는 꼭 키가 필요하다. 이 부분에서 꽤 많은 실수가 일어난다.(실습) 리스트 만들.. 2024. 8. 15.
7. [7단계] 제목: 2차원 배열 https://infinitt.tistory.com/106 파이썬 (Python) 2중 리스트, 2차원 배열 선언 및 출력https://infinitt.tistory.com/17 파이썬(Python) 기초 (6) 데이터 타입(Data Type) - 리스트 (list) 와 튜플 (tuple) 그리고 관련 함수(sort reverse insert remove pop append extend 등.. ) 리스트와 튜플은 모두 데이터를 한번에infinitt.tistory.com(2차원 배열 선언 및 관리)1단계. N*M크기의 두 행렬 A와 B가 주어졌을 때, 두 행렬을 더하는 프로그램을 작성하시오.첫째 줄에 행렬의 크기 N과 M이 주어진다. 둘째 줄부터 N개의 줄에 행렬 A의 원소 M개가 차례대로 주어진다. 이어.. 2024. 8. 15.
API가 뭘까? https://youtu.be/ckSdPNKM2pY?si=xS4cIt-5GQYixcyz 쉽게 말하자면 "메뉴판"이다.예를 들어 네이버라고 치자. 네이버에 날씨 부분이 있다. 네이버는 기상청의 API를 가져와서 화면에 띄울 것이다. 물론 하루마다 직접 수정해 버리는 짓을 할 수는 있지만... 굉장히 비효율적일 것이다.https://youtu.be/ogT267HvNuQ?si=vRjx2vlXAtv2I4U7https://youtu.be/pLBJgvC_ZUA?si=MGVBH4vwUL0mHr56 많이 쓰이는 API는 RESTful  API가 있다. 그래서 API를 배울 거면 먼저 배우는 것을 추천한다. 2024. 8. 14.
7. 리액트 Conditional Rendering (조건부 렌더링) Conditional Rendering의 정의와 Inline ConditionsConditional Rendering이 무엇인가?"조건에 따른 렌더링" 즉, "조건부 렌더링"이라고 불린다. 여기서 조건은 "if"문이다.예를 들어 True이면 버튼을 띄우고 아니면 버튼을 안 띄우는 것. 이런 것들을 조건부 렌더링이라고 부른다.예를 들어 코드는 다음과 같을 것이다.이에 기반, "Boolean" 자료형이 있다. 불린 자료형엔 "진실" / "거짓"이 있는데 리액트에서는 falsy 값이 또 있다. 이건 false는 아니지만 false로 여겨지는 값이다. (???) 마찬가지로 truthy라는 것도 있다.예를 들어서 저렇게 표현이 가능하다.엘리먼트 엘리먼트를 변수처럼 취급할 수 있다. 이것을 Element Varia.. 2024. 8. 14.
6. [6단계] 제목: 심화 1단계 1단계. 새싹을 출력한다.답: print("         ,r\'\"7")print("r`-_   ,\'  ,/")print(" \\. \". L_r\'")print("   `~\\/")print("      |")print("      |")' 이나 " 을 출력하고 싶으면 " \ " 을 기입해 주자.2단계. 체스는 총 16개의 피스를 사용하며, 킹 1개, 퀸 1개, 룩 2개, 비숍 2개, 나이트 2개, 폰 8개로 구성되어 있다. 검은색 피스는 모두 있었으나, 흰색 피스는 개수가 올바르지 않았다. 동혁이가 발견한 흰색 피스의 개수가 주어졌을 때, 몇 개를 더하거나 빼야 올바른 세트가 되는지 구하는 프로그램을 작성하시오.첫째 줄에 동혁이가 찾은 흰색 킹, 퀸, 룩, 비숍, 나이트, 폰의 개수가 주어진다... 2024. 8. 14.
6. 리액트 Handling Events Handling Events이벤트란 "사건"이다. 예를 들어 사용자가 특정 버튼을 클릭한 "사건"을 말할 수 있다. 이런 것을 이벤트라고 볼 수 있다. 이런 이벤트를 처리하는 것을 "이벤트 핸들링"이라고 부른다.예시 코드는 다음과 같다.컴퓨터 프로그래밍에서는 "카멜" 표기법을 흔히 쓰인다.이벤트 헨들러사건을 처리하는 함수 (핸들링 함수)예시 코드 >어차피 이젠 클래스 컴포넌트가 없어서 "이런게 있구나"하고 넘어가면 된다. (bind)이벤트 다루기이벤트는 다음과 같이 다룬다.함수형 컴포넌트에서 "매개변수"를 컨트롤하는 코드는 다음과 같다.매개변수의 순서는 바꾸어도 상관 없다.(실습) 클릭 이벤트 처리하기먼저 바인드를 이용한 클래스 컴포넌트에서의 클릭 이벤트 코드이다코드는 다음과 같다.처음 isConfirm.. 2024. 8. 13.
5. [5단계] 제목: 문자열 1단계.단어 S와 정수 i가 주어졌을 때, S의 i번째 글자를 출력하는 프로그램을 작성하시오.답: s = input()i = int(input())print(s[i-1])따로 인 풋을 정하지 않으면 그냥 문자로 입력이 된다. 그리고 파이썬은 "놀랍게도" 문자열을 배열로 접근할 수 있다. (배열 인덱스)2단계. 알파벳으로만 이루어진 단어를 입력받아, 그 길이를 출력하는 프로그램을 작성하시오.답: print(len(input()))len 함수는 길이를 출력하는 함수이다.3단계. 문자열을 입력으로 주면 문자열의 첫 글자와 마지막 글자를 출력하는 프로그램을 작성하시오.입력의 첫 줄에는 테스트 케이스의 개수 T(1 ≤ T ≤ 10)가 주어진다.답: x = int(input())for i in range(x):  .. 2024. 8. 13.
5. 리액트 Hooks Hooks리액트가 처음 만들어질 때부터 있던 개념은 아니지만, 새로 생긴 중요 개념이라고 생각하자.앞서서 컴포넌트는 함수형 컴포넌트, 클래스형 컴포넌트로 나뉜다고 하였다. (사진 참고)이 상태에서 함수형 컴포넌트의 단점을 극복하기 위해 "Hooks"이라는 기술이 탄생하게 되었다.훅은 "갈고리"라는 뜻을 가지고 있다. 훅은 state 관련 함수, 생명 주기 관련 함수, 최적화 관련 함수 등.. 여러 함수가 존재한다.useStateState을 사용하기 위한 훅.예시 코드 >useEffectside Effect을 수행하기 위한 훅. 사이드 이펙트는 사전적 정의로 "부작용"을 뜻한다.예시 코드 >이때 의존성 배열을 생략할 수 있음. (컴포넌트가 업데이트될 때마다 호출됨)useEffect 에 대한 사용 방법 및 .. 2024. 8. 12.
1~4단계 백준 복습 1단계: 입출력과 사칙연산입출력에 대한 문제, 그리고 사칙연산을 계산시키는 문제가 주요 문제였다. 이 1단계는 쉬우니깐 그냥 넘어가겠다. (한 줄 입력은 map 함수에 spilt 함수로 공백 자르기가 키 포인트)2단계: 조건문if문에 대한 문제이다. "분별점"을 파악하고 그 부분에 if문을 이용하면 된다. if문을 축약해서 코딩이 가능하나, 일단 처음에는 공간 복잡도나 시간 복잡도를 생각하지 않고 짜는 것이 중요해 보인다. 그래야 이후 축약이 가능하기 때문3단계: 반복문for문에 대한 문제이다. 기본적으로 for i in range(~~) 가 기본 문법이 되어 준다. 이때 조건식엔 항상 "끝 숫자 - 1"이라는 점을 조심해야 한다.4단계: 1차원 배열배열이란 데이터를 리스트처럼 저장하기 위한 수단이다. .. 2024. 8. 12.
개발자 포트폴리오. 어떻게 써야 할까. 개발자의 포트폴리오는 진짜 중요하다.핵심을 말하자면 "강점"을 강조하고, "약점"은 최대한 적지 말자. 그리고 "숫자"로 이야기하자.라고 말할 수 있을 거 같다.이에 대한 자세한 사항은 밑의 영상을 참고하자.https://youtu.be/prpW7bZZoUg?si=VPdF-o-i2qVG7PLQ1. 사진은 무조건 1인 (자신)만 나와야 하며, 정면이어야 함. (이상한 고양이 같이 찍은 사진 금지...)2. 불필요한 정보는 제거하기.3. 기술 설정에 대한 고민 적기.4. 장문 금지 (간결하게 가자.)5. 난이도가 낮은 활동 삭제. 전략적으로 중요한 부분만 남겨두자.6. 프로젝트는 웬만해서는 "최신 순"으로 배열해주자.7. 프로젝트 기간은 명확하게 명시.8. 맞춤법 검사 꼼꼼히. (중요함)9. 강점 우선 순서.. 2024. 8. 12.
처음 만난 리액트 V2 (로드맵) 카카오 구름 EDU에서의 "처음 만난 리액트 V2"이다. 소플님이 진행하신 강의이다. 이 강의는 버전 1 / 버전 2가 존재한다. 버전 1은 2020년이고 버전 2는 2022년에 나왔다. 그래서 최신 버전으로 진행하게 되었다.이 글은 한 번 로드맵을 정리할 겸해서 작성하게 되었다.로드맵은 위의 사진과 같다. 물론 리액트의 "전체"는 아니지만, 그래도 많은 부분을 내포하고 있다.특히 컴포넌트와 렌더링, JSX , 엘리먼트 등등... 중요 개념들은 무조건 배우고 넘어간다고 보면 된다.배우면서 느낀 점.새로운 개념들이기는 하지만, 어디까지나 리액트는 "자바스크립트"을 좀 더 잘 다루기 위한 라이브러리이기 때문에, 어느 정도 친숙한 부분도 존재한다. 본질적으로 볼 때에는 똑같다. ("객체" / "함수"라는 본질.. 2024. 8. 11.
4. 리액트 State and Lifecycle state는 중요하다.-코딩 애플-코딩에서 "이거 왜 쓰는 거예요? 이 개념은 무엇인가요?"에 대한 질문이 중요하다. 단순 코드 따라치기로는 코드를 해석할 수 없기 때문이다. state도 마찬가지이다. 이게 왜 쓰이는 거고 무엇인지, 개념을 설명할 수 있어야 한다.State정의로는 "상태"이다. 리액트에서는 컴포넌트의 변경 가능한 데이터라고 볼 수 있다. 그리고 state는 각각의 개발자가 함수 내에 따로 따로 정의한다. 이때 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함해야 한다. 쉽게 말해서 State는 자바스크립트의 객체라고 여기면 된다.예시 코드를 보자 > 저기 네모 박스를 친 부분이 state 코드이다. (이때 클래스 컴포넌트는 constructor(생성자)를 가지게 된다.)다시 말하.. 2024. 8. 10.
4. [4단계] 제목: 1차원 배열 배열은 1차원도 있고 2차원도 있고 3차원도 있고 ~이런 식으로 N차원으로 커진다. 1차원은 그냥 "행"만 존재. 2차원은 "행" / "열"이 존재. 3차원은 "행 , 열 , 면" ~~ 이렇고 배열은 거의 3차까지만 쓰이는 듯하다.https://velog.io/@soyoun9798/%ED%8C%8C%EC%9D%B4%EC%8D%AC-%EC%9E%90%EB%A3%8C%EA%B5%AC%EC%A1%B0-1.-%EB%B0%B0%EC%97%B4-Array1단계. 총 N개의 정수가 주어졌을 때, 정수 v가 몇 개인지 구하는 프로그램을 작성하시오.첫째 줄에 정수의 개수 N(1 ≤ N ≤ 100)이 주어진다. 둘째 줄에는 정수가 공백으로 구분되어 있다. 셋째 줄에는 찾으려고 하는 정수 v가 주어진다. 입력으로 주어지는 .. 2024. 8. 10.
3. 리액트 Components and Props 리액트에서의 Components 그리고 Props매우 매우 매우 중요한 개념이라고 한다.....다시 말하지만, 리액트는 컴포넌트를 레고 조립하듯 코드를 작성한다. (컴포넌트 기반 언어) 이 작은 컴포넌트가 모여서  큰 컴포넌트가 모이고 이게 모여서 하나의 웹사이트 화면이 되어준다.컴포넌트는 일종의 함수라고 생각하면 편한데, 입력은 props(프랍스)인 거고 출력은 리액트 엘리먼트인 셈. 컴포넌트만 있다면 붕어빵(엘리먼트)을 계속 찍어낼 수 있다! (실제로 컴포넌트 만들 때 "function"이라고 정의함)Props(프랍스)가 무엇인가?Props는 Prop의 복수형태를 뜻한다. 그리고 이건 리액트에서 "속성"이라는 뜻으로 사용된다.그리고 이 속성은 리액트 컴포넌트의 속성을 뜻한다.예시를 들어서 설명하자면 .. 2024. 8. 9.
3. [3단계] 제목: 반복문 https://easyjwork.tistory.com/10 1단계.N을 입력받은 뒤, 구구단 N단을 출력하는 프로그램을 작성하시오. 출력 형식에 맞춰서 출력하면 된다.출력형식과 같게 N*1부터 N*9까지 출력한다답: n = int(input())for i in range(1,10):  # 1~9    print(n, '*', i, '=', n*i)반복문 하면 for 문이다. 파이썬에서는 for문을 range를 이용해서 단축해서 사용 가능하다. (문법이라 외워야 함) i가 1부터 10-1번 반복되는 for문이라고 생각하면 된다.2단계.두 정수 A와 B를 입력받은 다음, A+B를 출력하는 프로그램을 작성하시오. 첫째 줄에 테스트 케이스의 개수 T가 주어진다.각 테스트 케이스는 한 줄로 이루어져 있으며, 각 .. 2024. 8. 9.
리액트 삽질 < 매우 중요 (이 삽질은 카카오 구름 강의를 들으면서 생기게 되었는데..)npm start로 리액트 앱을 가져오는데... 이때 호완성, 버전 등 여러 문제 때문에 에러가 나고 있다. 처음엔 내가 친 코드가 문제인 줄 알고 있었지만,"챗 지피"을 노동 착취한 결과 몇 가지 힌트를 얻게 되었다.이게 오류가 나고 있는 문법인데... 문제는 "챗지피"에 의거하면  현재 코드를 보면, React 18에서 ReactDOM.createRoot를 사용하지 않고 ReactDOM.render를 사용하고 있기 때문에 오류가 발생하고 있습니다. ReactDOM.render는 React 18에서 제거되었고, 대신 ReactDOM.createRoot를 사용해야 합니다.- 챗 지피티-이게 맞다면 이미 제거된 문법을 나는 배우고 있다는 셈이 되.. 2024. 8. 8.