본문 바로가기

전체 글

 (134)
2021-04-12 :: 컴포넌트 스타일링 이 장에서 배워볼 스타일링 방식은 다음과 같다. 일반 CSS: 컴포넌트를 스타일링 하는 가장 기본적인 방식 Sass: 자주 사용되는 CSS전처리기 중 하나로 확장된 CSS문법을 사용하여 CSS문법을 더욱 쉽게 작성할 수 있다. CSS Module: 스타일을 작성할 때 CSS클래스가 다른 CSS클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션이다. styled-component: 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다. 9.1 일반 CSS CSS를 작성할 때 가장 중요한 점은 CSS 클래스를 중복되지 않게 만드는 것이다. 이를 위해서는 이름을 지을 때 특별한 규칙을 사용하거나 CSS ..
2020-04-08 :: ref: DOM에 이름 달기 다음과 같이 요소에 id 프로퍼티를 달 수 있다. 이를 통해 css를 적용하거나 DOM 요소에 작업을 할 수 있다. 이렇게 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. ref가 그 방법이다. 리액트 컴포넌트 안에서 id를 사용하면 안되는가? 사용은 가능하다. 실제로 DOM에서 컴포넌트를 랜더링할 때 id가 그대로 전달이 된다. 하지만 컴포넌트를 여러 번 사용하는 경우를 생각 해보자. HTML에서 id는 유일해야하지만, 이 경우에는 DOM의 id가 중복되므로 잘못된 사용이 된다. 반면 ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 위와 같은 문제가 발생하지 않는다. 5.1 ref는 어떤 상황에서 사용해야 할까?..
2021-04-05 :: Hooks2 8.4 use Memo useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다. 숫자를 등록할 때뿐만 아니라 인풋 내용이 수정될 때도 우리가 만든 getAverage 함수가 호출되는 것을 확인 할 수 있다. useMemo를 사용하면 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식이다. import React, {useState, useMemo} from 'react'; const getAverage = numbers => { console.log('계산중..'); if(numbers.length === 0) return 0; const sum = numbers.reduce((a, b)=> ..
2021-04-05 :: Hooks1 Hooks는 리액트 v16.8에 새로 도입되어 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 8.1 useState useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. 기존 클래스형 컴포넌트의 this.state와 같은 기능을 한다고 볼 수 있다. useState는 다음과 같이 사용한다. const [value, setValue] = useState(0); useState 함수의 파라미터에는 state의 기본값을 넣어 준다. 위의 경우에는 기본값을 0으로 두겠다는 의미가 된다. 이 함수는 배..
HW.2.3 트리미노 퍼즐 처음 문제를 봤을 때 2차원 배열에 재귀로 패턴을 찍어낸다는 점에서 백준 별찍기 문제가 떠올랐다. 그 문제 역시실버 1난이도의 문제였음에도 재귀 동작의 복잡성 떄문에 제대로 이해하기 어려웠다. 풀이에 앞서 먼저 문제를 분석해봤다. 앞서 말했듯이 이 문제는 재귀함수를 통해 풀이한다. 기본 동작은 다음과 같다. 1. 이미 채워져 있는 점의 위치를 고려해 트리미노 하나를 놓는다. 2. 재귀의 depth를 검사한다. 3. 2번 step이 참이라면 1, 2, 3, 4분면을 분할정복한다. 1. 트리미노 하나를 놓을 수 있는 범위는 2x2이다. 이 2x2의 공간을 4분면의 축소라고 생각해보자. 채워져 있는 점 역시 2x2의 공간 안에 축소 시켜 표현할 때, 채워져 있는 점은 어디에 위치 하는지를 구해야한다. 그리고 ..
기수변환 알고리즘 #include using namespace std; char dchar[] = "0123456789ABCDEFGHIJKSLMNOPQRSTUVWXYZ"; string ans; int card_conv(int n, int dn) { int cnt = 0; while(n) { ans[cnt++] = dchar[n % dn]; n /= dn; } return cnt; } int main(void) { puts("10진수를 기수변환 합니다."); int n; int dn; coutn; coutdn; int cnt = card_conv(n, dn); cout
[MacOs] VS Code에서 C/C++ 초기 세팅하기 //lldb Redirection config csdiary.tistory.com/2 Mac에서 VSCode C/C++ 세팅 오늘은 C/C++ 공부에 앞서 VSCode를 기반으로한 개발환경 세팅을 해보려고 합니다. 우선 맥에 VSCode를 깔아주세요. VSCode 설치 주소 https://code.visualstudio.com Visual Studio Code - Code Editing. Redefin.. csdiary.tistory.com task.json type: 명령어의 종류. shell 또는 process로 설정. 본인은 shell타입 label: 명령어의 이름. 임의로 설정이 가능하다 command: 빌드를 실행할 컴파일러 presentaion: 터미널에 추가로 입력할 내용 macOs VSCode에서 redirect 설정하기 launch...
2020-12-07 :: Event Handling 리액트의 이벤트 시스템 이벤트를 사용할 때 주의 사항 이벤트 이름은 카멜 표기법으로 작성한다. 이벤트 실행을 지정할 때 자바스크립트 코드가 아닌 함수 형태의 값을 전달한다. DOM요소에만 이벤트를 적용할 수 있다. ⇒ 컴포넌트에 자체적으로 이벤트를 설정할 수는 없다. 하지만 전달받은 props를 컴포넌트 내부의 DOM이벤트로 설정할 수는 있다. 예제로 이벤트 핸들링 익히기 **onChange = { (e) => { console.log(e.target.value); } }** e 객체는 SyntheticEvent로 웹 브러우저의 네이티브 이벤트를 감싸는 개체이다. 입력값을 추출하고 싶다면 e.target.value를 통해 접근하도록 하자. state에 input 담기 & 버튼을 누를 때 message 값..

티스토리툴바