본문 바로가기

전체 글

CSR vs SSR 보호되어 있는 글입니다. 더보기
[TYPE SCRIPT] 기본 타입 Number const num: number = 1; String const str: string = 'hello world'; Array const numbers: number[] = [1, 2, 3]; const numbers2: Array = [1, 2, 3]; function printArray(array: readonly number[]){}; // ⭕ function printArray2(array: readonly Array){}; // ❌ array 타입은 두 가지 형태로 나타낼 수 있는데, readonly 속성을 할당해 줄 땐 Array 방식은 에러가 발생한다. readonly는 자주 쓰이기 때문에 좀 더 일관성 있는 코드를 작성하려면 첫 번째 방식을 추천한다. Boolean const .. 더보기
[JAVA SCRIPT] DOM 간단 정리 Document Object Model - 문서 객체 모델 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 브라우저에서는 HTML 파일을 읽어서 이용자에게 보여준다. 이때 HTML Tag를 JavaScript Node(Object)로 변환해서 읽게 된다. Node 오브젝트는 EventTarget 오브젝트를 상속한다. 그래서 EventTarget 안에 있는 모든 함수들을 Node에서 사용할 수 있다. 모든 Node는 Event가 발생할 수 있고, addEventListener 함수를 이용할 수 있다. HTML 문서를 다 읽게 되면 DOM Tree로 변환 된다. 더보기
[JAVA SCRIPT] this 자바 스크립트에서의 this는 누가 호출했는지(호출한 문맥)에 따라서 동적으로 변경된다. 먼저 그냥 this를 콘솔로 출력해보면 브라우저 환경에서의 글로벌 객체인 Window가 나온다. this를 콘솔로 출력하는 간단한 함수를 만들어서 다시 출력해 보자. function simpleFunc() { console.log(this); } simpleFunc(); this를 콘솔로 출력하는 이 함수도 Window를 가르키고 있다. 글로벌 환경에서 simpleFunc() 함수를 호출하는것은 window에서 호출하는것과 동일하기 때문이다. 이번엔 Counter 클래스를 만들고 멤버 변수에 increase() 함수를 만들어 this를 콘솔로 출력해 보자. class Counter { count = 0; increa.. 더보기
[CSS] - 구글 스타일의 로그인폼 만들기 태그를 focus하면 placeholder가 위로 이동하는것처럼 보여지는 form을 만들어 보자. HTML EMAIL NAME CSS .input__wrapper { width: 400px; height: 300px; margin: 40% auto; .input-box { margin: 10px 0; input { width: 100%; height: 50px; padding: 0 15px; background-color: rgb(30, 30, 30); border: 1px solid rgb(49, 172, 110); border-radius: 5px; color: rgb(49, 172, 110); } .input-label { color: rgb(49, 172, 110); } } } scss를 사용해 .. 더보기
[TYPE SCRIPT] 타입 스크립트란 타입 스크립트란 자바 스크립트에 타입을 더함으로써 확장한 언어이다. 타입 스크립트를 사용하면 런타임 단계에서 에러를 알려주는 동적인 언어에서 코드를 실행하기 전에 에러를 잡아주는 정적인 언어로 변환된다. 타입 스크립트 컴파일러나 바벨(Babel)을 통해서 자바 스크립트로 변환된다. https://academy.dream-coding.com/courses/typescript 타입스크립트 객체지향 프로그래밍 강의 (실전 프로젝트로 완성하는 강의) 타입스크립트 기본부터 시작해서 심화 내용까지 모든것을 다루고, 객체지향 프로그래밍 기본과 중요 원칙들에 대해 실전 예제들을 통해 연습하면서 코딩 실력을 향상 할 수 있는 강의입니다 academy.dream-coding.com 강의 수강 start! 더보기
[HTML] 시맨틱 태그 (Semantic Tag) 시맨틱 태그는 말그대로 브라우저와 개발자에게 요소의 의미를 명확하게 전달해 준다. 우리가 쉽게 남발하게 될 수 있는 와 태그는 무슨 내용을 전달하는지 정확히 알 수 없다. 하지만 , , 등 시맨틱 태그들은 어떤 내용이 들어갈지 명확히 전달해 준다. 대표적인 장점 1. SEO (Search Engine Optimization, 검색 엔진 최적화) 시맨틱 태그로 잘 마크업 된 웹사이트는 검색 시 중요한 부분을 잘 파악하고 알맞게 추천해 주게 된다. 2. Accessibility (웹 접근성) 웹사이트를 음성으로 읽어주는 '스크린 리더'를 이용하거나 키보드만을 이용해서 웹사이트를 이용하는 경우 문제없이 잘 동작할 수 있다. 3.Maintainability (유지 보수성) 개발자 입장에서 한눈에 구조를 파악하기.. 더보기
[REACT] 리액트에서 EmailJS 사용하기 https://www.emailjs.com/ Send email from Javascript - no server code required | EmailJS Send email directly from your client-side Javascript code – no server side code required. Add static or dynamic attachments, dynamic parameters, captcha code and more. Start with our free tier! www.emailjs.com 사이트에 접속해서 로그인 후 'Add New Service' 클릭 한다. 사용할 메일 선택을 선택한다. 'Name'에는 원하는 이름을 넣으면 되고, 'Service ID'는 자동 .. 더보기

티스토리툴바