일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 정규표현식
- react
- 웹접근성
- html&css
- TypeScript
- 알고리즘
- 제로베이스 프론트엔드 스쿨
- wai-aria
- 비트연산자
- JavaScript
- 프로그래머스
- programmers
- 디자인
- leetcode
- 카드뉴스
- react-query
- Today
- Total
목록제로베이스 프론트엔드 스쿨 (15)
記錄

01 SPA (Single Page Application) 공식문서 : https://ko.reactjs.org/docs/glossary.html SPA(Single Page Application)는 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JS, CSS 등을 모두 로드(=처음에 모든 리소스를 한 번에 다운로드한다)하는 애플리케이션으로, 서버로부터 새로운 페이지를 불러오지 않아 페이지가 다시 로드되지 않는다. 페이지 간 이동 시(=URL 변경) 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신해 전체적인 트래픽이 감소할 수 있고, 새로고침이 발생하지 않아 네이티브 앱과 비슷한 사용자 경험을 제공할 수 있는 장점이 있다. 위와 같은 장점이 있으나, 그에 따른 구조적 단점 또한 존재한다. 첫..

과제 진행 전에 연습용으로 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 리액트의 탄생 이유? JavaScript를 사용하여 HTML로 구성한 UI를 제어하기 위해서는 DOM의 변경이 필요하다. 브라우저의 DOM Selector API를 사용해 특정 DOM을 선택한 뒤, 특정 이벤트가 발생하면 변화를 주도록 설정해야 하는데, 이를 위해서 DOM 노드를 직접 조작해야 한다. 이런 동작이 크게 발생하지 않는 웹사이트라면 상관 없겠지만, 현대의 웹페이지처럼 다양한 동작이 발생하는 경우에는 코드의 유지보수 및 관리가 어려워진다. 이를 해결하기 위해 프레임워크를 활용해 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결해 업데이트 작업을 간소화하는 방식을 사용했다. 리액트의 경우 위와 다르게 데이터가 바뀔 때 DOM을 어떻게 업데이트 할 지 고민하는 것이 아니라 ..