본문 바로가기

Programing371

2024-06-26 TypeScript로 국가 선택 앱 만들기 (2) CountryList.tsx 컴포넌트 구현기본 레이아웃 구성// src/components/CountryList.tsximport styled from 'styled-components';import CountryCard from './CountryCard';const CardSection = styled.div` display: flex; flex-wrap: wrap; gap: 20px;`;const CountryList = () => { return ( 내가 고른 카드 국가 목록 .. Programing/TIL 2024. 6. 26.
호버 시 자연스럽게 커지는 애니메이션 div나 텍스트, 버튼 등에 마우스를 hover 했을 때 자연스럽게 커지는 애니메이션을 넣으면 사용자가 '이 아이템을 클릭했을 때 어떤 이벤트가 있겠구나'라는 생각이 들어 사용자 경험을 증대시킬 수 있다. 필요한 CSS를 열심히 작성하고 아래와 같이 호버 이벤트를 추가한다.cursor: pointer; /* 마우스 호버 시 커서를 클릭 커서로 바꿈 */transition: transform 0.3s ease, box-shadow 0.3s ease; /* 호버 이벤트를 천천히 만듦 *//* 마우스 호버 시 크게 카드를 천천히 키우고 그림자를 만듦 */&:hover { transform: scale(1.05); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); Programing/CSS 2024. 6. 26.
2024-06-25 TypeScript로 국가 선택 앱 만들기 (1) 과제를 처음부터 끝까지 자세히 기록해보고자 한다. 따라서 글이 길어질 수 있고 여러 편으로 나눠서 작성할 수 있다. 과제 요구사항 확인하기사용 기술 스택패키지 매니저 : vite라이브러리 : react언어 : typescript필수 구현 사항제공된 API를 호출하여 응답값을 useState를 통한 상태 관리적절한 타입이 꼭 명시되어 있어야 함useState로 상태 관리 되고 있는 값들을 화면에 렌더링사용자와 인터렉션(선택/해제)가 가능하여야 함이 모든 과정에서 사용하는 함수에는 타입이 적절하게 명시되어 있어야 함.과제 구현 순서프로젝트 셋업 (vtie + react + typescript)API 호출 설정API URL : https://restcountries.com/v3.1/all요청 : GETAPI .. Programing/TIL 2024. 6. 26.
한 줄 이상 텍스트가 길어지면 ... 으로 표기하기 const StyledTitle = styled.div` font-size: 25px; font-weight: 800; margin-top: 10px; // 이 아래 설정 참고 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;`; Programing/CSS 2024. 6. 25.
[코딩애플] interface interface객체의 type을 지정하는 방법이다. type alias 사용법과는 type이냐 interface냐 키워드 차이와 type alias에는 등호가 들어간다는 것 외에 전체적인 구조는 유사하다. type alias로도 객체 타입이 지정이 가능한데, 이 점에서는 중복되지만 약간의 기능 차이는 있다. const user = { name: '장원영', age: 21, isFemale: true,}  위외 같은 속성이 있다고 가정하자. 이것을 interface와 type alias로 타입을 지정하면 아래와 같다. 그리고 사용하는 건 type명(파스칼케이스)를 사용하면 돼서 같다. // interfaceinterface User { name: string; age: number; isFem.. Programing/TypeScript 2024. 6. 25.

티스토리툴바