daisylee

1. HTML이란? - 웹문서의 의미와 구조를 표현하는 마크업 언어 - HTML을 기술하기 위해 태그라는 것을 사용합니다. 2. 기본 구조 - HTML로 작성된 웹문서는 기본적으로 다음과 같은 태그로 이루어져 있습니다. //화면에 표시될 내용 2-1. - 해당 웹문서가 html5로 작성되었음을 표시합니다. -웹문서의 최상단에 위치합니다. 2-2. - 웹문서의 시작과 끝을 표시합니다. - 일반적으로 lang="ko"와 같이 특정 언어로 작성되었음을 표시하는 속성을 사용합니다. - 사용하는 이유: 특정 언어로 제한해 검색할 때 검색 엔진이 특정 언어로 작성된 문서를 먼저 보여줍니다. 2-3. - 웹문서의 정보를 표시하며, 브라우저 화면에는 표시되지 않습니다. - 태그 안에는 태그와 태그가 들어갑니다. 2-3..

연산자를 사용해 타입을 정의할 수도 있습니다. | 연산자를 사용하는 유니온 타입과 & 연산자를 사용하는 인터섹션 타입이 있습니다. 각각의 타입이 가지는 장점과 주의점이 있는데, 살펴보았습니다. 1. 유니온 타입 유니온 타입은 마치 자바스크립트의 OR 연산자처저럼 사용됩니다. | 연산자(|| 두 개 아니고 한 개!)를 사용하여 여러 타입을 정의합니다. //1. 유니온 타입 function unionFunc(value: string | number | boolean){ console.log(value); } 1-1. 유니온 타입의 장점 유니온 타입의 장점으로는, 여러 타입을 지정해줄 수 있으므로 타입별 API(메서드)를 자동완성으로 불러올 수 있다는 것입니다. 만약 모든 타입이라는 뜻의 any를 사용했다면,..

인터페이스란? 쉽게 말해 미리 타입을 정의하는 것이라고 할 수 있습니다. 타입을 지정할 값에 정의한 인터페이스 키워드를 마치 변수처럼 사용할 수 있습니다. 특히 함수의 구조를 정의할 때 인터페이스를 많이 사용한다고 합니다.😎 //인터페이스: 미리 타입 정의를 하는 것으로, 타입 별칭과 유사합니다. interface Example { name: string, age: number } 1. 변수에 사용하는인터페이스 변수에 들어가는 데이터의 타입을 미리 정의할 수 있습니다. //1. 변수에 사용하는 인터페이스 interface User { name: string, age: number } var user: User = {name: "hello", age: 25}; 2. 함수의 parameter에 사용하는 인터..

타입스크립트를 프로젝트에 적용하기 전에 몇 가지 설정을 거쳐야 합니다. 1. TSC 2. 설정파일 크게 이렇게 두 가지를 미리 준비해놓고 본격적으로 시작하면 됩니다. 1. TSC 실행 타입스크립트로 작성된 파일은 컴파일 과정을 거쳐 JS 파일로 변환됩니다. 이를 위해서 typescript 라이브러리를 설치하고 TSC(타입스크립 컴파일)을 실행해보겠습니다. 라이브러리를 설치하기 전, node.js가 설치되어있는지 버전을 확인해줍니다. 터미널에 다음과 같이 입력합니다. node -v node.js 버전이 확인되었다면 typescript 라이브러리를 설치합니다. 터미널에 다음과 같이 입력합니다. npm i typescript -g 라이브러리 설치가 완료되면 .ts 확장자를 갖는 index.ts를 생성하고 타입..

타입스크립트란? - 자바스크립트에 타입을 부여한 언어 - 자바스크립트 파일과는 다르게, 컴파일(파일 변환)과정을 거쳐야 합니다. * 컴파일: 어떤 언어의 코드를 다른 언어로 변환하는 것, 그러한 역할을 하는 프로그램을 컴파일러라고 합니다. (컴파일러와 인터프리터의 차이는 이 영상으로 재밌게 익힐 수 있습니다.😎) 왜 타입스크립트를 쓰나요? 타입스크립트는 크게 두 가지 관점에서 자바스크립트로 코드 작성 시 발생하는 문제를 보완해주는 효과적인 언어입니다. 1. 에러를 사전에 방지 2. 코드 자동완성 및 가이드 활용 1. 에러를 사전에 방지합니다. 데이터 타입이 달라지면 반환되는 값도 달라질 수 있습니다. 즉 의도하지 않은 값이 생성될 수 있는데요. 아래에 두 숫자를 더하는 함수를 정의했습니다. 첫 번째 함수..

styled-components는 CSS in JS라는 기술을 사용하는 라이브러리입니다. CSS in JS는 말그대로 CSS 파일을 생성해 스타일링 관련 코드를 분리하는 대신에, JS 안에 CSS를 작성하는 것입니다. 이와 같이 CSS in JS를 적용하는 라이브러리들이 있는데, 가장 대표적인 것이 styled-components입니다. 저는 기초적인 사용법을 익히기 위해 아주 간간한 버튼을 컴포넌트화 한다음 styled-component를 적용해보았습니다. 공부하기 위해 다음과 같은 링크를 참고하여 정리했습니다. styled-component를 공부할 때 꼭 참고하시길 바랍니다😎 https://bit.ly/3mAfpIp [React] Styled Components 사용법 Engineering Blog..