본문 바로가기
14. 리액트 미니 프로젝트 (챕터 1~2) (실습) 미니 블로그 기획, 프로젝트 생성 및 필요한 패키지 설치가장 베스트는 "프로젝트"를 직접 코드를 만들어가는 것이다. 일단, 오픈 소스에 있는 데이터가 존재한다. 깃허브에 있으며 소플님이 오픈해 두었다. 코드 짤 때 도저히 모르겠으면 다음의 링크를 타고 확인하자.https://github.com/soaple/mini-blog GitHub - soaple/mini-blog: 소플의 처음 만난 리액트 실습 프로젝트소플의 처음 만난 리액트 실습 프로젝트. Contribute to soaple/mini-blog development by creating an account on GitHub.github.com이번에 기획은 미니 블로그이다. 기능은 위와 같이 만들어두면 좋을 거 같다.전체적인 모습은 다음과.. 2024. 8. 22.
12. [11단계] 제목: 시간 복잡도 (1~2챕터) 챕터를 풀기 전에, "시간 복잡도"에 대한 공부가 필요하다. 그래서 시간 복잡도가 무엇인지 먼저 이야기하고자 한다.시간 복잡도는 무엇인가?시간 복잡도란 "입력 크기에 대해 어떤 알고리즘이 실행되는 데 걸리는 시간"을 뜻한다.https://youtu.be/08TB5ZLTPu4?si=R55Fl49-sMovqdlm관련 영상또한 시간 복잡도에서 "빅오 표기법"이라는 것이 존재한다.빅오 표기법이란 입력 범위 n을 기준으로 해서 로직이 몇 번 반복되는지 나타내는 것이다.이런 시간 복잡도가 필요한 이유는 간단하다. 바로 효율적인 코드를 개선하기 위한 척도가 되어주기 때문이다.다음은 시간 복잡도의 속도를 비교한 그래프이다. 그래프의 그림처럼 n의 크기가 커질수록 시간 복잡도는 더욱 커지게 된다. 그래서 우리는 O(n*.. 2024. 8. 22.
13. 리액트 Styling CSS와 selectorCSS란?> 웹 개발 스타일에 많이 쓰이는 "마크업 언어"이다.이때 엘리먼트에 CSS 규칙이 적용되는 것을 Selector라고 부른다. (선택자라는 뜻도 있다.)규칙은 다음과 같이 그림으로 표현이 가능할 듯하다.다음은 Selector의 유형을 알아보겠다.엘리먼트 셀렉터아이디 셀렉터클래스 셀렉터유니버셜 셀렉터그루핑 셀렉터엘리먼트 상태와 관련된 셀렉터이 밖에도 엄청 많은 셀렉터가 존재한다. (MDN 참고)레이아웃과 관련된 CSS 속성레이아웃에 관련된 CSS 속성을 배워보자.레이아웃을 구성할 때 중요한 속성은 "display" 속성이다.대표적 값을 위 그림을 참고하자.그다음은 "visibility" 속성이다.visibility은 화면에서 보이게 하거나 아님 안 보이게 도와주는 속성이다... 2024. 8. 21.
11. [10단계] 제목: 기하: 직사각형과 삼각형 (5~8챕터) 5단계. 위치 N 개가 주어질 때에, 임씨에게 돌아갈 대지의 넓이를 계산하는 프로그램을 작성하시오. 단, 옥구슬의 위치는 2 차원 정수 좌표로 주어지고 옥구슬은 같은 위치에 여러 개가 발견될 수도 있으며, x 축의 양의방향을 동쪽, y 축의 양의방향을 북쪽이라고 가정한다.예를 들어 위와 같이 (2, 1), (3, 2), (5, 2), (3, 4) 네 점에서 옥구슬을 발견하였다면, 임씨에게 돌아갈 대지는 (2, 1), (5, 1), (2, 4), (5, 4)를 네 꼭짓점으로 하는 직사각형이며, 넓이는 (5 - 2) × (4 - 1) = 9 가 된다. 첫째 줄에 N 개의 점을 둘러싸는 최소 크기의 직사각형의 넓이를 출력하시오. 답: n = int(input())X, Y = [], []for i in rang.. 2024. 8. 21.
12. 리액트 Context Context란?리액트에서는 자주 쓰는 데이터를 잘 이용하기 위해 Context를 사용하게 되었다.코드도 깔끔해지고, 디버깅에도 유리해진다.여러 개의 컴포넌트에 데이터를 넣고 싶을 때 Context를 사용하면 된다.로그인 여부 / 로그인 정보 /  UI테마 / 현재 언어 등등.. 자주 쓸 기능을 깔끔하게 사용하기 위함.코드적인 예시는 다음과 같다.물론 Context는 만능이 아니다. 적합한 상황에 써야 좋다.또한 하위 컴포넌트를 여러 개의 변수로 나누어서 전달도 가능하다.결국 상황에 따라서 Context를 사용하거나 혹은 props를 이용해서 리액트를 개발해야 하는 것이다.Context API생성은 다음과 같이 한다.이후 Provider를 사용해야 한다. 이때 Provider 컴포넌트가 재렌더링될 때마다.. 2024. 8. 20.
10. [10단계] 제목: 기하: 직사각형과 삼각형 (1~4챕터) 1단계. 정수 A, B 가 주어진다. 세로 길이가 A cm, 가로 길이가 B cm 인 아래와 같은 직사각형의 넓이를 cm2 단위로 구하시오.답: a=int(input())b=int(input())print(a*b)a와 b를 입력받고 이후 곱하면 된다. (직사각형 넓이는 가로 곱하기 세로다.)2단계. 한수는 지금 (x, y)에 있다. 직사각형은 각 변이 좌표축에 평행하고, 왼쪽 아래 꼭짓점은 (0, 0), 오른쪽 위 꼭짓점은 (w, h)에 있다. 직사각형의 경계선까지 가는 거리의 최솟값을 구하는 프로그램을 작성하시오.답: x,y,w,h=map(int,input().split())print(min(x,y,w-x,h-y))x와 y와 w와 h를 다 받아준다.이후 x와 y 그리고 구하고자 하는 직사각형의 경제선 .. 2024. 8. 20.
11. 리액트 Composition vs Inheritance Composition 방법과 Inheritance Composition이란 리액트에서 "합성"을 뜻한다.컴포넌트를 여러 개 합성해서 화면을 구성하기에 알아두어야 하는 방법이다.이때 여러 방법으로 컴포넌트를 구성할 수 있다.Containment리액트에서 하위 컴포넌트를 포함하는 방식을 말한다.코드를 살짝 보자.앞에서 props 정의할 때 엘리먼트에서 자식 요소를 다룬 적이 있다.자식 요소에 props를 정의해 주면 같이 props를 쓸 수 있다.만일 여러 개의 자식 요소가 필요하다면 props를 여러 개 정의하면 된다.예시로 다음과 같이 사용할 수 있다.Specialization기존의 객체 지향에서는 상속을 이용해서 구현하게 된다. 그러나 리액트에서는 다른 방향으로 구현하게 된다.(단어 뜻은 "전문화"이다.. 2024. 8. 19.
자바스크립트 복습 (심화버전) - bom / dom / this / defer 오랜만에 자바스크립트를 복습하였다.자바스크립트에서는 여러 문법을 지원하지만, 오늘은 다음과 같은 내용을 복습하였다.BOM / DOM / 자바스크립트 파일 효과적으로 가져오기 / ThisBOMBOM이란 브라우저 객체 모델을 뜻한다. 브라우저 객체 모델이란 브라우저를 객체처럼 여기는 것을 말한다.연산자는 " . "이다. 가장 많이 쓰는 것은 document이다.  자세한 부분은 영상을 참고하자.https://youtu.be/3c4xp8U3jjM?si=9DXZHx1Ly6YAWI-A참고로 window가 가장 최상위 객체이다. BOM은 그 밑에 존재하는 객체다. 이 부분을 헷갈려하지 말자.DOMDOM이란 문서 객체 모델을 뜻한다. 문서 객체 모델이란 "문서를 객체화"한 것을 말한다. 스크립트 언어로 브라우저를 해.. 2024. 8. 18.
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.