Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘은 변수에 선언된 타입을 다른 타입의 값으로 변경하면 타입스크립트에서는 어떻게 반응하는지 알아봅시다! Variable Type Annotations 저번 시간에 변수를 타입 any로 선언하고 변수에 다른 타입의 값을 넣으니까 아무 에러가 없이 컴파일링 된 모습을 확인했습니다. 오늘은 변수에 타입만 선언하고 변수를 다른 타입으로 변경 했을 때 어떤 에러가 뜨는지 알아보도록 합시다. 해봅시다! 변수를 문자 타입으로 선언하고 숫자를 넣는 경우 ※ 변수에 타입을 선언 할 때 = (equal) 이 아니라 반드시 : (colon)을 넣어주셔야 합니다. let enigma : string; //

안녕하세요 동기 여러분! 오늘은 타입 Any에 대해 타입스크립트가 어떻게 반응하는지 알아봅시다! Any 변수가 다른 타입으로 바뀌었음에도 불구하고 타입스크립트에서 자바스크립트로 컴파일링 할 때 에러가 안 뜨는 경우가 있는데 그 경우가 바로 변수의 타입이 any인 경우입니다. 해봅시다. let iWant; iWant= 'banana'; iWant= true; iWant= 10000; 변수 선언을 하되 아무런 값을 넣지 않으면 iWant의 타입은 any로 설정됩니다. 이런 경우 컴파일링을 실행하면 아래와 같은 결과가 나옵니다. 아무런 에러 없이 컴파일링이 되었습니다. iWant에 빨간 웨이브형 밑줄이 있는데 거기에 마우스를 올려보겠습니다. 노랑 형광펜 칠한 부분이 우리가 봐야할 부분입니다. 변수 'iWant..

안녕하세요 동기 여러분! 오늘은 타입 셰이프에 대해 알아봅시다! Type Shapes 이전 시간에 알아봤듯이 타입스크립트는 우리가 설정한 객체가 어떤 타입인지 알고 있습니다. 또한 우리가 설정한 객체가 어떠한 모습(Shape)이어야 하는지도 알고 있습니다.

안녕하세요 동기 여러분! 오늘은 타입스크립트의 타입 추론에 대해 알아봅시다! Type Inferences 타입스크립트는 자바스크립트의 주요 데이터 타입인 불린(Boolean), 숫자(Number), 눌(Null), 문자(String), 언디파인드(Undefined)를 알아차리는 능력이 있습니다. 오류를 찾아주는 고마운 친구 타입스크립트 아래의 타입스크립트 코드를 보겠습니다. TypeScript let dongi = 'dongi' dongi = 3; dongi라는 변수에 'dongi'라는 문자를 넣고 아래에 dongi라는 변수에 숫자를 넣으면 타입스크립트에서는 아래와 같이 오류가 있다고 알려줍니다. "타입 '숫자'는 '문자'에 선언할 수 없다."라고 친절히 알려줍니다. 자바스크립트의 버그를 알려주는 고마운..

안녕하세요 동기 여러분! 오늘은 TypeScript에 첫 번째 시간입니다! What is TypeScript? 타입스크립트는 마이크로소프트에서 만든 전통 자바스크립트의 슈퍼셋(Superset) 프로그래밍 언어입니다. -> 자바스크립트의 모든 기능이 들어있고 그밖에 새로운 기능들도 들어가 있습니다. 확장자명은 'ts'로 파일명 뒤에 '.ts'를 붙여서 타입스크립트 파일로 만들 수 있습니다! npm이 설치되어 있는 상황이라면 터미널에서 아래와 같이 입력하면 tsc 파일명(.ts는 제외) 파일명.js 파일이 같은 폴더에 생성됩니다. 어떤일이 벌어지는지 해봅시다. 타입스크립트에 코드를 넣었습니다. 터미널에서 tsc prectice를 적고 엔터를 누르니까 뭔가 움찔했습니다. practice.js 파일로 가보니 c..

안녕하세요 동기 여러분! 오늘은 폰트 당겨오기 두 번째 시간입니다. 갑시다~ Web Fonts Using @font-face 저번 시간에 사용한 태그 말고도 폰트를 스타일 시트에 넣는 방법이 있는데 그것이 바로 @font-face를 이용하는 것입니다. @font-face의 장점은 개발자가 의도하여 넣은 글꼴을 사용자가 컴퓨터에 가지고 있지 않아도 다운로드되어 자동으로 보입니다. 폰트는 아래의 형식(format)의 파일로 나타나게 되는데 OTF (OpenType Font) TTF (TrueType Font) WOFF (Web Open Font Format) WOFF2 (Web Open Font Fotmat2) 왜 이렇게 파일 형식이 다르냐면 브라우저마다 지원하는 폰트 형식이 다르기 때문입니다. 아래의 링크..

안녕하세요 동기 여러분! 오늘은 온라인 폰트 서비스에서 폰트를 가져와 사용하는 방법에 대해 알아봅시다! Web Fonts Using 온라인 폰트 서비스를 이용해서 내 컴퓨터에 없는 폰트를 사용할 수 있는데요. 이 방법에 대해 알아봅시다. 구글 폰트 : https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 구글 폰츠에 들어가시면 엄청나게 많고 다양한 폰트들을 만나볼 수 있습니다. 폰트 가져오는 방법 1. 링크로 접속을 한다. 2. 원하는 폰트를 찾습니다. 저는 'Bungee'라는 폰트를 찾아보겠습니다. 그리고 클릭합니다. (뭔가 클래식..

안녕하세요 동기 여러분! 오늘은 글자 사이의 간격(자간)과 단어 사이의 간격, 줄 높이를 바꾸는 방법에 대해 알아봅시다! Text Layout Letter Spacing 글자 사이의 간격(자간) 글자 사이의 간격을 정하는 방법은 간단합니다. p { letter-spacing: 2px; } 네 ~ 이게 다입니닼ㅋㅋ 물론 mm, in, em 등등 다양한 단위로도 가능합니다. 아래는 예입니다. HTML Wraith awaiting launch orders. - Starcaft Wraith CSS p { letter-spacing: 5px; } Word Spacing 단어 사이의 간격 p { word-spacing: 3px; } 역시 다양한 단위로 설정 가능합니다. (mm, in, em 등등) 아래는 예입니다...

안녕하세요 동기 여러분! 오늘은 대문자, 소문자에 바꾸는 방법에 대해 알아봅시다! Text Transformation 영어를 소문자와 대문자로 바꾸어 주는 방법입니다. 대문자로 바꾸는 방법과 예 state the nature of your medical emergency. - starcaft medic p { text-transform: uppercase; } 소문자로 바꾸는 방법과 예 p { text-transform: lowercase; } 단어의 맨 앞글자만 대문자로 바꾸는 방법과 예 p { text-transform: capitalize; } 오늘의 느낌 느낌적인 느낌

안녕하세요 동기 여러분! 오늘은 색의 투명도를 설정하는 방법에 대해 알아봅시다. Opacity and Alpha 투명도를 조절하는 방법에 대해 알아봅시다. p { background-color: hsla(77, 100%, 50%, 0.1); } hsl에 a가 붙었습니다. 네~ 바로 이친구가 alpha입니다. alpha는 투명도를 조절하는 값인데 0부터 1까지의 소수점 숫자로 표현할 수 있습니다. 숫자가 낮을 수록 투명해지고 높을 수록 진해집니다. rgb로도 설정이 가능한데 그냥 rgb 뒤에 a를 붙여주면 됩니다. -> rgba(55, 55, 55, 0.5) 해봅시다. HTML CSS body { background-color: hsla(34, 100%, 50%, 0.1); } #a1 { backgroun..