본문 바로가기

전체 글393

변경사항 없이 강제 push 필요한 경우 로컬과 원격 리포지토리의 차이가 없어 변경사항이 없는데, 아니면 있는데 어떠한 문제로 변경사항이 없다고 나올 때,add commit 후 강제 push를 하면 되지만 변경사항이 없어서 commit을 못 남긴다. 이럴 땐 빈 커밋을 생성하고 강제 push를 하면 push가 된다. 강제 push는 돌이킬 수 없을 수 있으니 최악의 상황에서만 사용한다. // 빈 커밋 생성git commit --allow-empty -m "Triggering a force push"// 강제 pushgit push origin main --force main 부분을 브랜치 이름으로 바꿔주면 된다. Programing/Git 2024. 6. 27.
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.
[코딩애플] 함수와 methods에 type alias 지정하기 함수의 type alias아래 방식은  함수 표현식에서 type alias를 적용하는 예시이다.const addNumber = (x) => { return x + 2;} 위와 같이 변수에 할당해서 쓰는 듯 보이는 함수 방식을 함수 표현식이라 한다. type MathOperation = (a: number) => number;const addNumber: MathOperation = (a) => x + 2; 함수 표현식 작성하는 방법에서 변수 선언 키워드와 함수명만 지우고 type을 붙이면 된다. 그리고 매개 변수와 return 값이 어떤 타입인지 지정해주면 된다.콜백 함수의 type alias함수의 매개 변수로 함수가 전달 되는 것을 call back function이라 한다.const showMess.. Programing/TypeScript 2024. 6. 25.
[코딩애플] literal types, as const Literal type기존의 타입이 변수나 표현식의 자료형을 지정해주는 방법이었다고 하면,literal types는 아예 그 자료형의 값까지 지정해주는 방법이다.// type alias (타입 별칭)type UserID = string;type User = { id: UserID; name: string; age: number; isAdmin: boolean;};const user: User = { id: "12345", name: "장원영", age: 21, isAdmin: true,};// literal typestype Direction = 'north' | 'south' | 'east' | 'west';function move(direction: Direction) { consol.. Programing/TypeScript 2024. 6. 25.
[내배캠] React에서 TypeScript 시작하기 타입스크립트의 기초타입스크립트란?타입스크립트란 자바스크립트에 타입 시스템을 추가한 것. 타입 시스템이란, 프로그램이 실행되기 전(컴파일 타임)에 모든 변수와 표현식의 타입을 확인하고 고정하는 방식이다.자바스크립트의 유연성을 막아주고 엄격하게 검사하기 때문에 프로그램의 에러를 상당 부분 예방해줄 수 있다는 장점이 있다. type Wonyoung = '장원영';const userName: Wonyoung = '안유진'; // 에러타입스크립트를 사용하는 이유1. 에러를 코드 작성 시에 미리 발견할 수 있다.자바스크립트의 경우 타입이 잘못 되더라도 일단 코드는 실행되기 때문에 프로젝트가 커지면 커질 수록 디버깅이 불가능에 가까워질 수 있다. 2. 더 빠른 실행 가능자바스크립트에서 변수나 표현식의 타입은 코드가 .. Programing/TypeScript 2024. 6. 25.
[코딩애플] Type Alias / readonly Type Alias타입의 별칭을 정하는 것이다.타입이 너무 길 때 사용하면 더 좋다. 기본적인 사용법은 아래와 같다.type 파스칼케이스별칭 = 자료형;const 변수명: 파스칼케이스별칭 = 값;일반 변수// 일반 변수type Username = string;type Age = number;let userName: Username = '장원영';let userAge: Age = 25; 객체 타입기본 사용법일반 변수는 짧아서 타입의 별칭을 지어주는 것이 매력적으로 느껴지지 않을 수 있지만 이제부턴 상황이 다르다.먼저 객체 타입은 데칼코마니로 타입을 지정해준다는 것이 기억날 것이다.const user = { name: '장원영', age: 21, job: '가수', isFemale: true} 위와 .. Programing/TypeScript 2024. 6. 25.

티스토리툴바