본문 바로가기

학습 내용74

제네릭 컴포넌트(generic component) 원글: Creating a generic component with React TypeScript. * 오역 있을 수 있습니다. 댓글이나 이메일로 말씀 부탁드립니다. 정의 타입스크립트 제네릭은 재사용 가능한 컴포넌트를 생성하는 방법을 제공하는 툴이다. 사용하면 좋은 점 제네릭을 사용하면 하나의 데이터 타입이 아니라 다양한 타입의 데이터를 받을 수 있는 컴포넌트를 생성할 수 있으며, 개발자는 각자의 타입을 가지고 이러한 제네릭 컴포넌트를 사용할 수 있다. 제네릭은 프로그램의 유연성과 장기적인 확장 가능성을 지니고 있음을 보장한다. 제네릭 컴포넌트를 만들어 두면, 데이터를 표시할 때마다 매번 배열에 대한 map을 돌리는 작업을 하지 않아도 된다. 예제 1. 먼저, 대상 컴포넌트가 props로 받을 것들에 대.. 2022. 4. 3.
[이미지 갤러리 만들기] 02. 이미지 최적화하기 원글: Building an Image Gallery with Next.js, Supabase, and Tailwind CSS (Lee Robinson / 2022년 3월 28일) * 오역 있을 수 있습니다. 댓글이나 이메일로 말씀 부탁드립니다. 이미지 갤러리 스타일링 Tailwind가 구성되었으니 이제 이미지 갤러리를 스타일링할 컴포넌트를 생성할 수 있습니다. 우리 애플리케이션의 진입점인 pages/index.tsx 안에서, 이미지를 위한 컨테이너가 필요하니 CSS Grid를 사용합시다. (원래 작성되어있던 코드는 모두 지워주세요!) 뷰포트에 따라 조정되는 padding과 그리드 간격(grid spacing)도 추가합시다. // pages/index.tsx export default function G.. 2022. 4. 3.
[이미지 갤러리 만들기] 01. 프로젝트 시작하기 최근 Tailwind CSS로 작업한 프로젝트를 보고 한번 사용해보고 싶다는 생각이 들었는데, 마침 Tailwind CSS로 간단하게 만들어 볼 수 있는 애플리케이션에 대한 따끈따근한(!!) 튜토리얼 포스팅이 올라왔습니다. 따라서 해보는 김에 새로 알게 된 내용 정리도 할 겸 번역해서 공유해보려고 합니다. 화자를 구분하기 위해서, 본문 내용과 관련하여 추가로 학습한 부분이나 기타 덧붙이는 말은 반말로 작성하고(죄송합니다ㅠ), 원글 내용은 존댓말로 작성하도록 하겠습니다. 원글: Building an Image Gallery with Next.js, Supabase, and Tailwind CSS (Lee Robinson / 2022년 3월 28일) * 오역 있을 수 있습니다. 댓글이나 이메일로 말씀 부탁드.. 2022. 3. 30.
[숫자 맞히기 게임 만들기] 정답 맞힐 때까지 다중 입력 지원하기 + 올바르지 않은 입력 처리하기 사용자가 정답을 맞힐 때까지 재도전(!) 할 수 있또록 다중 입력 기능을 추가해보자. 무한 반복을 실행하는 loop 키워드를 사용하여 다음과 같이 입력 안내 멘트부터 match 표현식까지를 반복문 안으로 옮기자. use rand::Rng; use std::cmp::Ordering; use std::io; fn main() { println!("숫자를 맞혀봅시다!"); let secret_number = rand::thread_rng().gen_range(1..101); println!("사용자가 맞혀야 할 숫자: {}", secret_number); // TODO: 테스트 후 제거할 코드 loop { println!("정답이라고 생각하는 숫자를 입력하세요."); let mut guess = String:.. 2022. 3. 9.
[React] 리액트 면접 질문 (기초 개념) 질문 출처: https://intellipaat.com/blog/interview-question/react-interview-questions/ 1. DOM과 가상 DOM(Virtual DOM)의 차이 (답변 참고: https://velopert.com/3236) 가상 DOM을 이용하면 실제 DOM에 변화를 바로 적용하는 것보다 전체적인 프로세스를 효율적으로 수행할 수 있다. "효율적이다" = 전체적인 프로세스에 드는 비용이 비교적 적다. 속도 차원의 문제라기 보다는, 연산 횟수 차원의 문제라고 할 수 있다. 우선 각각의 DOM 조작은 레이아웃 변화, 트리 변화 및 렌더링을 일으킨다. 가상 DOM을 이용하지 않으면 변화가 있을 때마다 DOM 조작이 일어나고 이에 대한 연산이 수행되며 렌더링되기 때문에 .. 2022. 3. 8.
[숫자 맞히기 게임 만들기] 난수와 사용자 입력 비교하기 이전 시간에 rand 크레이트를 이용하여 생성한 난수와, 사용자가 입력한 값을 비교하고 비교 결과에 대해 출력하는 코드를 작성해보자. 먼저, 이전까지 작성해둔 코드에 표준 라이브러리로부터 std::cmp::Ordering 타입을 가져오고, match 표현식을 추가해준다. use rand::Rng; use std::cmp::Ordering; use std::io; fn main() { println!("숫자를 맞혀봅시다!"); let secret_number = rand::thread_rng().gen_range(1..101); println!("사용자가 맞혀야 할 숫자: {}", secret_number); // TODO: 테스트 후 제거할 코드 println!("정답이라고 생각하는 숫자를 입력하세요.".. 2022. 2. 15.

티스토리툴바