Type assertion(타입 단언)
2022. 5. 13. 16:10
dev-log/TS
타입 단언이란? 타입스크립트 핸드북에서는 타입 단언에 대해 대략 이렇게 이야기하고 있다. : 가끔은 타입스크립트보다 코드 작성자 자신이 어떤 값에 대해 더 정확하게 파악하고 있는 상황이 생길 수 있다. 예를 들어 document.getElementById를 사용할 경우, 타입스크립트는 이게 어떤 HTMLElement를 반환할 거라는 것 정도만 알 수 있다. 개발자가 지정한 특정 아이디를 가진 요소는 늘 HTMLCanvasElement일 수 있는데 타입스크립트는 이것까지는 알 수 없다. 따라서 이런 상황에서는 타입을 좀 더 구체적으로 잡고 가기 위해 다음과 같이 타입 단언을 사용할 수 있다. const myCanvas = document.getElementById("main_canvas") as HTMLC..
Luhn algorithm(룬 알고리즘)으로 유효한 카드 번호인지 확인하기
2022. 5. 10. 23:57
dev-log/Front-End
룬 알고리즘이란? 참고: 위키백과 Luhn algorithm IBM 과학자인 Hans Peter Luhn이 만든 알고리즘으로, 그의 이름을 따서 룬 알고리즘이라 이름 지어졌다. mod(modulus) 10 알고리즘이라고도 한다. 신용카드 번호 등 다양한 식별 번호를 검증하는 데 사용되는 공식이다. *** 2022.07.20 업데이트 *** 삼성카드 법인카드의 카드 번호는 룬 알고리즘을 따르지 않고 있어 룬 알고리즘으로 유효성을 판별할 수 없습니다!! 프론트엔드에서 어떤 경우에 사용하는지? 결제 수단을 등록하거나 결제를 하기 위해 신용카드 정보를 입력하는 폼을 만들 때, 사용자가 입력한 카드 번호가 (1차적으로) 유효한 카드 번호인지 확인하고 싶을 때 사용할 수 있다. 유효한 카드 번호인지 확인할 수 있는..
22.05.03
2022. 5. 3. 02:02
끄적끄적/일상
우아한스터디 멤버가 되었다 .. 행복하다 .. 저번에 불합격한 경험이 있어서 이번에 선발된 게 더 감사하게 느껴진다 ㅠ 불합격 했을 때는 신청 이유를 두 문장..? 정도 적었던 것 같다; 1400명이 지원했던 저번 스터디에서 당당하게 탈락해버렸다 후후 이번 시즌에는 몇 명이 지원했는지는 모르겠으나, 정말 너무나 선발되고 싶어서 간절한 마음으로 공백 포함 958자를 적었다. 다행히 선발이 되었다🤤 7월부터 시작이라 아직 두 달 정도 남았으니, 남은 기간동안에는 파이썬 기초를 공부해보는 걸로...😓
아이폰에서 로컬호스트 테스트하는 방법 (준비물: 맥북)
2022. 5. 3. 00:58
dev-log/기타기타🎸
1. 아이폰을 맥북에 연결해주세요. 2. 맥북과 아이폰 모두 동일한 와이파이에 연결해주세요. (예: 맥북이 ID가 FASTFIVE_HQ인 와이파이에 연결 중이라면 아이폰도 FASTFIVE_HQ 와이파이에 연결) 3. 아이폰에서 사파리를 열어주세요. 사파리 주소창에는 다음 주소를 입력해주세요. http://컴퓨터IP주소:포트번호 (예: http://10.1.2.345:80) => 컴퓨터 IP 주소 찾는 방법: 맥북의 환경설정 > 네트워크 > 와이파이 4. 맥북에서 사파리를 열어주세요. 상단 메뉴바의 메뉴 중 '개발자용'을 클릭하면 메뉴 중 현재 연결되어있는 아이폰이 뜨는데, 이를 클릭해주세요. => 상단 메뉴에서 '개발자용'이 보이지 않을 경우: https://kimdevel.tistory.com/2 맥북..
제네릭 컴포넌트(generic component)
2022. 4. 3. 00:41
dev-log/TS
원글: Creating a generic component with React TypeScript. * 오역 있을 수 있습니다. 댓글이나 이메일로 말씀 부탁드립니다. 정의 타입스크립트 제네릭은 재사용 가능한 컴포넌트를 생성하는 방법을 제공하는 툴이다. 사용하면 좋은 점 제네릭을 사용하면 하나의 데이터 타입이 아니라 다양한 타입의 데이터를 받을 수 있는 컴포넌트를 생성할 수 있으며, 개발자는 각자의 타입을 가지고 이러한 제네릭 컴포넌트를 사용할 수 있다. 제네릭은 프로그램의 유연성과 장기적인 확장 가능성을 지니고 있음을 보장한다. 제네릭 컴포넌트를 만들어 두면, 데이터를 표시할 때마다 매번 배열에 대한 map을 돌리는 작업을 하지 않아도 된다. 예제 1. 먼저, 대상 컴포넌트가 props로 받을 것들에 대..
[이미지 갤러리 만들기] 02. 이미지 최적화하기
2022. 4. 3. 00:13
dev-log/Project
원글: 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..
[이미지 갤러리 만들기] 01. 프로젝트 시작하기
2022. 3. 30. 23:30
dev-log/Project
최근 Tailwind CSS로 작업한 프로젝트를 보고 한번 사용해보고 싶다는 생각이 들었는데, 마침 Tailwind CSS로 간단하게 만들어 볼 수 있는 애플리케이션에 대한 따끈따근한(!!) 튜토리얼 포스팅이 올라왔습니다. 따라서 해보는 김에 새로 알게 된 내용 정리도 할 겸 번역해서 공유해보려고 합니다. 화자를 구분하기 위해서, 본문 내용과 관련하여 추가로 학습한 부분이나 기타 덧붙이는 말은 반말로 작성하고(죄송합니다ㅠ), 원글 내용은 존댓말로 작성하도록 하겠습니다. 원글: Building an Image Gallery with Next.js, Supabase, and Tailwind CSS (Lee Robinson / 2022년 3월 28일) * 오역 있을 수 있습니다. 댓글이나 이메일로 말씀 부탁드..
[숫자 맞히기 게임 만들기] 정답 맞힐 때까지 다중 입력 지원하기 + 올바르지 않은 입력 처리하기
2022. 3. 9. 15:06
dev-log/Rust
사용자가 정답을 맞힐 때까지 재도전(!) 할 수 있또록 다중 입력 기능을 추가해보자. 무한 반복을 실행하는 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:..