記錄

과제 진행 전에 연습용으로 JS로 기능 구현해본 것을 정리해보았다. .dark 클래스가 body에 추가되면 body에 다크 모드로 지정한 css가 적용되도록 했고, 클릭 시 버튼 아이콘이 회전하도록 했다. localStorage를 이용해 새로고침을 해도 이전에 설정한 상태가 유지되도록 했다. HTML JS Shop 패션 액세서리 디지털 0 JS const DarkModeToggle=()=>{ const body=document.body const mode=document.querySelector('.mode') const icon=mode.querySelector('i') //dark/light mode localStorage if (localStorage.getItem('darkMode')===null..

* Type Annotation 대상의 타입을 명시적으로 알려주는 것으로, 변수나 함수, 객체 속성명 뒤에 :type을 써서 데이터 타입을 지정할 수 있다. 이 Type annotation을 사용하여 type 검사를 수행한다. 필수사항은 아니라 타입을 직접 지정하지 않으면 타입스크립트가 타입을 추론해준다. const val: number = 123 //변수 val의 type을 number로 지정해줌 원시 타입:: String, Number, Boolean string(문자열) - JS에서 나타나는 문자열과 거의 동일하게 활용 가능(백틱을 이용한 표현식 등) number(숫자) boolean(true, false) const str: string = 'STRING' //문자열 const num: numbe..

00 TypeScript -자바스크립트는 동적 타입 언어 또는 느슨한 타입의 언어라는 태생적 한계를 지님 -자바스크립트의 태생적 문제를 극복하고자 AltJS(자바스크립트의 대체 언어)가 등장, TypeScript 역시 이 중 하나 -마이크로소프트에서 구현한 자바스크립트(ES5)의 Superset(상위확장) -단순히 설명하면 타입 구문이 있는 JavaScript -정적 타이핑을 지원하며 ES6(ECMAScript 2015)의 클래스, 모듈 등과 ES7의 Decorator 등을 지원 -기존의 자바스크립트(ES5) 문법을 그대로 사용할 수 있으며, 별도의 트랜스파일러(Transpiler)를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진(브라우저 또는 Node.js)에서 실행할 수 있음 01 ..

This 자바스크립트에서 this는 상당히 어려운 개념인데, 다른 언어와 다른 동작 방식을 가지고 있기 때문이다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있어 이걸 가리킬 줄 알았는데 그게 아니네? 하는 상황이 발생할 수 있다. this 값은 런타임에 결정된다. 즉, this의 값은 컨텍스트에 따라 달라지기 때문에 동일한 함수라도 다른 객체에서 호출했다면 'this’가 참조하는 값이 달라진다. let user = { name: "John" }; let admin = { name: "Admin" }; function sayHi() { alert( this.name ); } // 별개의 객체에서 동일한 함수를 사용함 user.f = sayHi; admin.f = sayHi; // 'this'는 '점..

00. Intl API 란 Intl 객체는 각 언어에 맞는 문자비교, 숫자, 시간, 날짜비교를 제공하는, ECMAScript 국제화 API를 위한 이름공간이다. 여러 가지 언어로 서비스를 할 수 있도록(국제화, internalization) 웹페이지 상에 사용된 문구와 데이터를 언어나 지역별로 다른 형식으로 보여줄 수 있게 해준다. 외부 라이브러리를 사용하지 않고도 자바스크립트에서 제공하는 Intl API를 사용해 다국어 지원을 하는 서비스에서 데이터를 하나 하나 번역하지 않고도 언어 처리를 할 수 있어 유용하게 사용할 수 있다. 기본적인 사용 방법 기본 형태에 locales 매개변수를 추가해 적절한 언어를 제공할 수 있다. navigator.language 를 이용해 사용자가 설정한 언어 자동으로 읽어..

00 Cookie 쿠키 쿠키는 웹사이트 접속시 접속자의 개인장치에 다운로드 되고 브라우저에 저장되는 작은 텍스트 파일이다. 웹사이트는 쿠키를 통해 접속자의 장치를 인식하고, 접속자의 설정과 과거 이용내역에 대한 일부 데이터를 저장한다. 즉, 쿠키는 서버를 대신해 웹 브라우저에 정보를 저장하고 요청할 때 그 정보를 서버에 보내 사용자를 식별할 수 있게 한다. 쿠키는 주로 아래 세 가지 목적을 위해 사용된다. 세션 관리(Session management) : 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리 개인화(Personalization) : 사용자 선호, 테마 등의 세팅 트래킹(Tracking) : 사용자 행동을 기록하고 분석하는 용도 쿠키의 구성 document.cookie="us..

00 정규표현식이란 정규표현식(regular expression, regex), 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. 프로그래밍 전반에서 문자열의 검색과 치환을 위해 사용되며, JavaScript에서는 정규 표현식도 객체로서 RegExp객체와 문자열 메서드를 조합해 정규표현식을 사용할 수 있다. 정규표현식은 다음과 같은 상황에서 유용하게 사용된다. 각각 다른 포맷으로 저장된 엄청나게 많은 전화번호 데이터를 추출해야 할 때 사용자가 입력한 이메일, 휴대폰 번호, IP 주소 등이 올바른지 검증하고 싶을 때 코드에서 특정 변수의 이름을 치환하고 싶지만, 해당 변수의 이름을 포함하고 있는 함수는 제외하고 싶을 때 특정 조건과 위치에 따라서 문자열에 포함된 공백이나 특수문자를 제거하고 ..

1. JavaScript 기본문법 2. JavaScript 함수/조건문/반복문 09 함수 Function 다수의 명령문을 코드 블록으로 감싸고 하나의 실행 단위로 만든 코드의 집합으로, 유사한 동작을 하는 코드를 하나로 묶어 범용성을 확대시킨(=모듈화) 블록 코드이다. 함수는 가급적 한 가지 일만 수행해야 하며, 매개 변수는 최대 3개 이내로 작성하는 것을 권장한다. 09-1. 함수 선언 (function declaration) 함수 선언문 function showMessage() { alert( '안녕하세요!' ); } function name(parameter1, parameter2, ... parameterN) { // 함수 본문 return param1 + param2 ... } //함수 호출 s..