기획자에서 개발자로

[React] Composition vs Inheritance

Composition : 뜻은 구성이나 React에서는 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것을 의미. 합성과 가까움 여러 컴포넌트들을 어떻게 조합할지. 조합법에 따라 사용 기법이 나뉜다. 1. Containment : 담다, 포함하다. 뜻으로 하위 컴포넌트를 포함하는 형태의 합성 방법. sidebar 나 Dialog 같은 Box형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다. children prop을 사용한다. props의 children 은 제공해주는 것이며 배열형태이다. 여러개의 하위 컴포넌트를 가질 수 있다. 여러개의 childrn 이 필요한 경우에는 ?? 별도의 props를 정의하여 사용한다. 2. Specialization : 전문화, 특수화라는 뜻이고, Welco..

[React] Form

Form : 사용자에게 입력을 받기위해 사용 두 Form의 역할은 같지만 조금 다르다. HTML에서의 Form : Element 내부에 각각의 state가 존재 React에서의 Form : React는 컴포넌트 내부에서 state를 통해 데이터를 관리 Form은 Controlled Components 는 통제를 받는데 값이 리액트의 통제를 받는 Input Formr Element이다. HTML에선 자바스크립트로 값에 접근하기가 쉽지 않지만 React에선 Component에 접근하면 모든 값 Controller이 가능하다. (Class Component 기준 이미지이며, 함수 컴포넌트에선 useState Hook으로 관리 가능하다.) 여러, 단일 모든 입력의 값을 Controllered Component로..

[React] List and Keys

List는 같은 아이템을 모아놓은 것 . 목록 그 것을 위한 자료 구조 Array 배열. Array(배열) :JavaScript의 변수나 객체들을 하나의 변수로 묶어놓은 것이다. key : 열쇠 / 열쇠는 모양이 다 다르고 고유하다. 키는 중복이 없고 고유한 값이다. 값은 중복될 수 있지만 키는 중복이 안된다. React에선 아이템을 구분하기 위한 고유한 문자열을 이야기한다. 여러 개의 Component 렌더링하기 같은 컴포넌트를 화면상에 계속 나타나게 할 때 사용한다. 동적으로 화면이 바뀌는 경우 코드를 하나씩 넣기도 어렵고, 유지보수도 어렵다. 이 때 사용하는 것이 JS의 Map() 이다. 영단어 Mapping 을 떠올리면 쉽다. 값을 짝 지어준다. 어떤 처리를 한 뒤 리턴해준다. Map 예시 con..

[React] 조건부 렌더링(Conditional Rendering)

Condition 은 조건을 의미한다. 조건부 렌더링(Conditional Rendering) : 특정 조건에 따라서 랜더링이 달라지는 것 보통 true / false 로 조건에 따라 다르게 렌더링한다. java script의 truthy / falsy true {} (empty object) [] (empty array) 42 (number, not zero) "0", "false" (string, not empty) // falsy 0, -0 (zero, minus zero) 0n (bogInt zero) '', "", `` (empty string) null undefined NaN (not a number) 개발시 true와 false를 예상하며 해야하기 때문에 구분할 줄 알아야 한다. Eleme..

[백준] Gnome Sequencing - 4589 Java[자바]

[Unrated] Gnome Sequencing - 4589 문제 링크 4589번: Gnome Sequencing In the book All Creatures of Mythology, gnomes are kind, bearded creatures, while goblins tend to be bossy and simple-minded. The goblins like to harass the gnomes by making them line up in groups of three, ordered by the length of their beards. The gnomes www.acmicpc.net 성능 요약 메모리: 17556 KB, 시간: 196 ms 분류 구현 문제 설명 In the book All C..

[React] Event

컴퓨터 프로그램의 Event는 사건을 의미한다. 특정 사건이다. 사용자가 버튼을 클릭한 이벤트 등. 그 때 필요한 동작을 해줘야한다. 이벤트 처리하는 것을 이벤트 핸들링한다고 함. // DOM의 Event Activate // React의 Event Activate // 동일한 동작을 하는 함수이다. // 표기법과 함수 전달의 방법에서 차이가 있다. // React에선 카멜케이스를 쓴다. // ex)camelCase Event Handler : 이벤트 발생시 해당 이벤트를 처리하는 함수. Event Listener로 부르기도 한다. 클래스함수들이 기본적으로 바운딩되지 않는다. bind 없이 this 를 쓰면 글로벌로 호출이 되기 때문에, 함수 이름 뒤 괄호 없이 사용하려면 바인딩 해야한다. 그러지 않기 ..

[React] React Hook

React Hook : 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리라고 할 수 있는데 React 16.8버전에 새로 추가된 기능이다. 1. useState() useState는 state를 사용할 수 있게 하는 Hook 함수입니다. useState는 배열 형태로 반환되며, 첫번째 요소는 현재 state 값, 두번째 요소는 state 값을 변경하는 함수입니다. 기초 문법 Const [변수명, set함수명] = useState(초기값); useState의 사용법 import React, { useState } from 'react'; function Example() { const [count, setCount] = use..

[백준] Hurra! - 26767 Java[자바]

[Unrated] Hurra! - 26767 문제 링크 26767번: Hurra! Mała Bajtynka lubi liczyć, a szczególnie uwielbia liczby 7 i 11. Mimo najlepszych starań nauczycieli, Bajtynka uroczyście celebruje, zarówno w mowie, jak i na piśmie, każdą napotkaną liczbę podzielną przez 7, zamiast jej nazwy wykrzykując (alb www.acmicpc.net 성능 요약 메모리: 97332 KB, 시간: 5456 ms 분류 수학, 구현, 사칙연산 문제 설명 Mała Bajtynka lubi liczyć, a szczegól..

[백준] SASA 모형을 만들어보자 -23825 Java[자바]

[Unrated] SASA 모형을 만들어보자 - 23825 문제 링크 23825번: SASA 모형을 만들어보자 당신은 SASA 연못에서 알파벳 S 모양의 블록 $N$개와 알파벳 A 모양의 블록 $M$개를 건졌다. 태영이는 연못에서 건진 블록을 이용해 학교에 전시할 SASA 모형을 최대한 많이 만들려고 한다. SASA 모형 $ www.acmicpc.net 성능 요약 메모리: 17672 KB, 시간: 208 ms 분류 수학, 사칙연산 문제 설명 당신은 SASA 연못에서 알파벳 S 모양의 블록 N�개와 알파벳 A 모양의 블록 M�개를 건졌다. 태영이는 연못에서 건진 블록을 이용해 학교에 전시할 SASA 모형을 최대한 많이 만들려고 한다. SASA 모형 11개를 만들기 위해서는, 알파벳 S 모양의 블록 22개와..

[백준] Dedupe - 5357 Java[자바]

[Unrated] Dedupe - 5357 문제 링크 5357번: Dedupe Redundancy in this world is pointless. Let’s get rid of all redundancy. For example AAABB is redundant. Why not just use AB? Given a string, remove all consecutive letters that are the same. www.acmicpc.net 성능 요약 메모리: 17728 KB, 시간: 196 ms 분류 구현, 문자열 문제 설명 Redundancy in this world is pointless. Let’s get rid of all redundancy. For example AAABB is redun..

[백준] CAPS - 15000 Java[자바]

[Unrated] CAPS - 15000 문제 링크 15000번: CAPS Earth is under attack! Messages need to be sent to the Earth Defense Force (EDF) that makes clear that the situation is dire. The EDF’s strongest forces consist of mechs (huge bipedal robots) that are piloted by Japanese teenagers. To make sure that the www.acmicpc.net 성능 요약 메모리: 31256 KB, 시간: 520 ms 분류 구현, 문자열 문제 설명 Earth is under attack! Messages need ..

[백준] 사장님 도박은 재미로 하셔야 합니다 - 23795 Java[자바]

[Unrated] 사장님 도박은 재미로 하셔야 합니다 - 23795 문제 링크 23795번: 사장님 도박은 재미로 하셔야 합니다 윤성이가 판마다 배팅한 양의 정수 형태의 돈이 한 줄에 하나씩 입력된다. 입력의 맨 마지막줄에는 윤성이가 자리를 뜨는 순간을 의미하는 수인 -1이 들어온다. 입력된 값은 \(2,000\)개 미만이고, www.acmicpc.net 성능 요약 메모리: 21432 KB, 시간: 288 ms 분류 수학, 구현, 사칙연산 문제 설명 영국에는 스티븐 제라드라는 전설의 야바위꾼이 있다. 영국으로 여행을 떠난 윤성이는 스티븐 제라드를 만나게 되었다. 이 전설의 야바위꾼이 진행하는 야바위는 널리 알려진 방식과 동일하다. 3\(3\)개의 컵과 하나의 공을 사용해 임의의 한 컵에 공을 넣고 무작위..