px, em, rem 차이를 알아보자. 글꼴과 화면 등의 크기를 다룰때는 크기의 단위가 무엇보다 중요하며, 크기의 단위는 절대 단위와 상대 단위 두가지로 구분할 수 있다. 절대 단위 : px, pt 등 상대 단위 : %, em, rem, ch, vw, vh 등 절대 단위는 언제 사용 되나? 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 : px 사용 반응형 웹에서 기준점을 만들 때 : 디바이스 크기를 나누는 기준을 보통 px로 정함 상대 단위는 언제 사용 되나? 반응형 웹 단위 선택시 : 주로 rem 사용 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 : vw,vh 사용 정리 px : 고정된 크기를 나타내며, 사용자 설정에 따라 확대/축소되지 않는 고정 크기의 ..
레이아웃 리셋은 왜 필요하며, 언제 해야 할까 ? 요소가 가진 기본 스타일에 약간의 여백이 있을 때 width,height 계산이 여백을 포함하지 않아 계산에 어려움이 있을 때 브라우저(크롬, 사파리 등)마다 여백이나 글꼴과 같은 기본 스타일이 조금씩 다를 때 기본 스타일링을 제거하는 CSS 코드 예시 * { box-sizing: border-box; } body { margin: 0; padding: 0; }
SWC는 Rust로 작성된 JavaScript 및 TypeScript의 상위 호환 컴파일러이다. SWC는 JavaScript와 TypeScript 코드를 빠르게 컴파일하는 도구로서, 특히 바이트 코드 다운로딩과 빌드 성능을 개선하고자 하는 프로젝트에서 많이 사용됨 Rust 언어로 작성되어 있어 안정성과 성능에 중점을 둠 코드 컴파일 및 변환 과정에서 최적화를 수행하여 빌드 시간과 실행 시간을 단축시킴 요약 => SWC는 빠르고 효율적인 JavaScript 및 TypeScript 컴파일을 위한 컴파일러이며, 특히 Vite와 같은 도구와 함께 사용하여 개발 속도와 성능을 개선하는 데 도움을 준다.
Proxy에 대해 알아보자 Proxy는 CORS 정책을 우회할 수 있는 React 라이브러리, 혹은 Webpack Dev Server에서 제공하는 기능입니다. 이 기능이 필요한 이유를 알려면 CORS 정책이 필요한 이유를 먼저 알아야 합니다. CORS 정책이 필요한 이유가 뭘까요 ? 브라우저에서 API를 요청할 때는 브라우저의 현재 주소와 API 주소의 도메인이 일치해야만 데이터를 접근할 수 있습니다. 만약 다른 도메인에서 API를 요청해서 사용할 수 있게 하려면 CORS 설정이 필요합니다. 로컬 환경에서 개발한 앱은 기본적으로 localhost:3000 으로 시작합니다. 그러나, 나중에 로컬 환경에서 개발한 실제 서비스 및 프로젝트의 클라이언트에서 서버의 API로 요청하게 되면,이 포트로 요청하는 것이..
CI/CD 알아보기 CI/CD란 ? CI/CD의 "CI"는 개발자를 위한 자동화 프로세스인 지속적인 통합을 의미한다. CI/CD의 "CD"는 지속적인 서비스 제공 및/또는 지속적인 배포를 의미한다. 즉, CI/CD는 소프트웨어 개발 및 배포 프로세스를 자동화하여 개발자들이 소프트웨어를 더 빠르고 안정적으로 제공할 수 있게 해주는 방법이다. 지속적 통합(Continuous Integration, CI) 지속적 통합으로 보안 이슈, 에러 등을 쉽게 파악할 수 있어 해당 이슈를 빠르게 개선할 수 있다. Code - Build - Test 단계 Code : 개발자가 코드를 원격 코드 저장소에 push하는 단계 Build : 원격 코드 저장소로부터 코드를 가져와 유닛 테스트 후 빌드하는 단계 Test : 코드 빌..
타입스크립트의 타입 별칭 & 타입 추론에 대해 알아봅시다~! 타입 별칭 새로운 이름으로 기존의 타입을 참조하는 것을 의미한다. 타입 별칭을 이용하여 타입의 새로운 이름을 만들 때 키워드 type을 이용하여 작성한다. type MyString = string; let str1: string = 'hello!'; // string 타입처럼 사용할 수 있다. // myString과 string은 동일한 의미 let str2: MyString = 'hello world!'; 타입 별칭 장점 인터페이스나 다른 변수를 정의할 때 타입 별칭으로 정의한 타입을 참조하게 됨으로써 코드를 더 간결하고 가독성 좋게 만들 수 있다. 타입 별칭 단점 타입 별칭은 말 그대로 타입에 새로운 이름을 부여하는 것에서 그치기 때문에 확..
타입스크립트의 인터페이스에 대해 알아봅시다~! 타입스크립트 인터페이스 인터페이스(Interface)는 일반적으로 타입 체크를 위해 사용된다. 인터페이스는 변수, 함수, 클래스에 사용할 수 있다. 인터페이스에 선언된 프로퍼티 또는 메서드의 구현을 강제하여 일관성을 유지하도록 한다. TypeScript의 예약어인 interface를 사용하여 TypeScript 인터페이스를 생성할 수 있다. 변수와 인터페이스 // 인터페이스 정의 interface User { name: string; age: number; } // 변수 user의 타입으로 User 인터페이스를 선언하였다. // 변수 user는 User 인터페이스를 준수하여야 한다. let user : User; // 정상적으로 선언됩니다. user: Use..
타입스크립트의 열거형에 대해 알아봅시다~! TypeScript 열거형 열거형(Enum)은 특정 값의 집합을 정의할 때 사용된다. TypeScript는 문자형 열거형 & 숫자형 열거형이 지원된다. 열거형 정의 방식 enum Color { Red, Green, Blue, } 숫자형 열거형(Enum) 디폴트 값으로 숫자형을 사용 각 값은 자동으로 0부터 시작하여 1씩 증가 수동으로도 값 지정 가능 열거형 값에 대해 산술 연산 수행도 가능 일반적으로 상수 값을 대신하여 사용 enum Color { Red = 1, Green = 2, Blue = 4, } let c: Color = Color.Green; let greenValue: number = Color.Green; let blueValue: number =..
