본문 바로가기

프론트엔드14

[자바스크립트 프로젝트] 일정 관리 웹페이지 💁‍♀️프롤로그 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스자바스크립트의 개념만 공부하지 않고 실제 프로젝트를 만들어 보는 것이 실력을 향상시키는 데 더 좋다고 생각했습니다. 그래서 만든 일정 관리 웹페이지! 완성하기까지 우여곡절이 많았지만 결과론적으로 만족! 어떻게 만들었는지, 무슨 문법을 썼는지 최대한 자세히 기록해보겠습니다.  📋소개 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스기능을 구현하는 것도 좋지만 디자인적인 부분도 함께 보여줘야 사용자들이 만족할거라 생각했습니다. 그래서 프로젝트를 구현하면서 디자인도 기능 못지 않게 관심을 기울였는데요. 현재 유행에 맞는 디자인을 적용하고 싶어 곰곰히 생각하다 레트로라는 키워.. 2024. 8. 2.
[typescript] 타입 별칭 📝타입 별칭 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스타입 별칭이란?특정 타입이나 인터페이스 등을 참조할 수 있는 타입 변수를 의미한다. 자바스크립트에서 변수를 선언할 때 변수 이름을 짓듯이 타입에 별칭을 부여하고 선언하는 것을 의미한다. 타입 별칭을 선언하는 방법은 type 키워드를 적고 별칭 = 데이터 타입; 형태로 적으면 된다.type 별칭 이름 = 데이터 타입;// 예시type Age = number;   타입 별칭의 장점타입 별칭의 장점은 코드의 중복을 피하게 해준다. 개발자라면 지켜야하는 원칙인 DRY(Don't Repeat Yourself) 원칙을 지킬 수 있게 해준다. 아래 코드를 보자. 첫번째 코드의 경우 코드가 중복되고 가독성이 떨어질뿐더러 함수를 .. 2024. 7. 13.
[typescript] 연산자를 사용한 타입 정의 📝연산자 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스타입스크립트에서 변수나 파라미터 반환값등의 타입을 정의할 때 연산자 기호를 이용하여 타입을 정의할 수 있다. 자바스크립트의 AND 와 OR 연산자를 이용하여 타입을 정의하는 것이다. 유니언 타입(union type)여러 개의 타입 중 한개만 쓰고 싶을 때 사용하는 문법이다. 자바스크립트에서 OR 연산자는 여러개의 조건 중 하나만 만족하면 true를 반환한다. 마찬가지로 유니언 타입도 여러 개의 타입 중 하나만 만족하면 된다. 유니언 타입을 사용하려면 타입 다음에 | 를 써서 나열하면 된다.function 함수명(파라미터: 타입 | 타입) { // 실행할 코드}// 예시function introduce(text: st.. 2024. 7. 12.
[typescript] 인터페이스(Interface) 📝인터페이스 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스인터페이스란?타입스크립트에서 인터페이스란 '객체 타입을 정의할 때 사용하는 문법'이라고 볼 수 있다. 자바스크립트에서 클래스를 이용하여 객체(인스턴스)를 생성한다. 이때 클래스 안에 객체가 어떤 속성을 가지고 있는지 정의한다. 인터페이스의 역할도 클래스와 동일하다. 객체를 생성하는데 해당 객체가 어떤 속성을 가지고 있는지, 각 속성은 어떤 타입인지 정의해주는 역할이라고 생각하면 쉽다! 인터페이스를 정의 및 인터페이스를 통한 객체 타입 정의 1) 인터페이스 정의interface라는 키워드를 사용한다. 이때 인터페이스 이름의 첫글자는 대문자로 해준다.// 인터페이스 정의interface 이름 { 속성: 값; 속성:.. 2024. 7. 11.