[카테캠 8주차] 리액트

리액트에 대한 개요 2022 stackoverflow web trend 를 살펴보면, React 의 사용비율이 흔히 알려진 프론트엔드 4대장(React, Vue, Angular, Svelte)중에서 압도적으로 높다고 할 수 있다. 이렇게 많이 사용된다는 것은 그 만큼의 생태계가 발달되었음을 의미하고, 개발시에 정보들을 빠르게 얻을 수 있음을 의미한다. 라이브러리 vs 프레임워크 라이브러리 개발 편의를 위한 도구의 모음이다. 공구에 비유를 할 수 있다. 즉, 라이브러리는 그냥 함수들이나 기능 모음을 가져다 쓰는 것이다. 프레임워크 프레임 워크는 뼈대나 기반 구조를 뜻한다. 프로그래밍을 진행할 때 필수적인 구조를 제공해주기 때문에 프레임워크를 사용하는 프로그래머는 이 프레임 워크의 뼈대 위에서 코드를 작성하..

[카테캠 7주차] JS 기초 모듈

모듈 모듈이란? 특정 데이터들의 집합을 의미한다. import 와 export 키워드를 사용하기 위해서는 script 에 type 프로퍼티를 module 값을 주어야한다. 기본 내보내기 export default 는 파일내에 한번만 사용할 수 있다. 이름 내보내기 여러개의 데이터를 export 할 수 있으며, import 할때 중괄호를 사용한다. import 이름 변경 as 키워드를 사용하여 변경할 수 있다. 와일드 카드를 사용하여 한번에 import 하기 와일드카드(*) 를 사용하여 abc 라는 이름으로 export 된 데이터들을 한번에 import 할 수 있다. abc.default, abc.arr 로 접근이 가능하다. 동적으로 모듈 가져오기 import 키워드는 코드내 최상단에서 사용할 수 있다. ..

[카테캠 선택강의] 정규표현식

정규표현식(RegExp, Regular Expression) 문자 검색(Search) 문자 대체(Replace) 문자 추출(Extract) 문자 검색, 문자 대체, 문자 추출을 하는 패턴이다. 생성 방법 // 생성자 // new RegExp('표현', '옵션') // new RegExp('[a-z]', 'gi') // 리터럴 // /표현/옵션 // /[a-z]/gi const str = ` 010-1234-5678 thesecon@gmail.com Hello world! https://www.omdbapi.com/?apikey=7035c60c&s=frozen The quick brown fox jumps over the lazy dog. hello@naver.com http://localhost:1234..

[카테캠 7주차] JS 기초 Events

Events 이벤트 추가 및 제거 addEventListener 대상에 이벤트 청취(Listen)을 등록한다. 대상에 지정한 이벤트가 발생했을 때 지정한 함수(Handler)가 호출된다. removeEventListener 대상에 등록했던 이벤트 청취(Listen)을 제거한다. 메모리 관리를 위해 등록한 이벤트를 제거하는 과정이 필요할 수 있다. removeEventListener를 사용하기 위해서는 핸들러를 함수로 분리하여 사용해야한다. 이벤트 객체 이벤트 객체는 대상에서 발생한 이벤트 정보를 담고 있다. event.currentTarget 이벤트가 등록된 요소를 의미한다. event.target .이벤트가 발생한 요소를 의미한다 event 객체의 프로토타입을 살펴보면 mouseEvent로 부터 상속된..

[카테캠 7주차] JS 기초 DOM

DOM DOM 이란 HTML 문서를 객체로 표현한 것으로, JS 에서 HTML을 제어할 수 있게 해준다. DOM API 는 JS 로 HTML 를 제어할 때 사용하는 메서드이다. Node vs Element 노드(Node): HTML 요소, 텍스트, 주석 등 모든 것을 의미한다. 요소(Element): HTML 요소를 의미한다. HTML 코드는 다음과 같다. childNodes 를 사용하면 해당 요소의 자식 노드를 모두 얻을 수 있다. 참고로 text 의 data가 \n 되어 있는 것은 줄바꿈을 의미한다. children 을 사용하면 하위 HTML 요소만 얻을 수 있다. console.dir 를 사용하여 [[Prototype]] 을 따라가 보면 HTML 요소가 어떠한 상속관계가 있는지 알 수 있다. Nod..

[카테캠 7주차] JS 기초 비동기

비동기 동기: 순차적으로 코드 실행 된다. 비동기: 순차적으로 코드가 실행되지 않는다. 콜백 패턴 다음 코드를 보자. 출력된 결과값은 2, 1 의 순서일 것이다. 만약 1 , 2 의 순서로 출력을 하고싶다면 어떻게 해야할까? 콜백패턴을 사용하여 원하는대로 출력을 할 수 있다. const a = (callback) => { setTimeout(()=> { console.log(1) callback() },1000) } const b = () => console.log(2) a(b) 다음 코드에서 1 , 2 ,3, 4 의 순서대로 출력이 되게 하려면 어떻게 해야할까? 다음과 같은 콜백 패턴을 사용하면 된다. 콜백패턴을 사용하는 또 다른 예시를 살펴보자. getMovies 함수는 내부에 비동기 로직이 존재한다..

[카테캠 선택강의] JS 심화학습

Symbol 변경이 불가한 데이터로, 유일한 식별자를 만들어 데이터를 보호하는 용도로 사용할 수 있습니다. const sKey = Symbol("Hello"); const user = { key: "일반 정보", [sKey]: "민감한 정보", // 대괄호 표기법 }; console.log(user.key); // "일반 정보" console.log(user["key"]); // "일반 정보" console.log(user[sKey]); // "민감한 정보" // 심볼은 유일한 식별자를 만들어 낸다. // 따라서 sKey !== Symbol("Hello") 이다. console.log(user[Symbol("Hello")]); // undefined Symbol을 사용하는 예제 const birthKey..

[카테캠 선택강의] 기타 Web APIs

콘솔 메서드의 종류 console.log 일반적인 콘솔 메세지이다. HTML 트리구조를 볼 수 있다. console.dir 객체가 어떠한 속성으로 구성되어있는지 확인할 수 있다. console.count 콘솔이 몇번 호출되었는지 카운트한다. 함수에 적용하면 해당 함수가 몇번 호출되는지 확인이 가능하다. const f = () => { console.count('호출되었습니다.') } for(let i=0; i item.includes(name)); return cookie ? cookie.split("=")[1] : null; } Storage(스토리지) 도메인 단위로 저장 5MB 제한 세션 혹은 영구 저장 가능 세션 스토리지: 브라우저 세션이 유지되는 동안에만 데이터 저장 localStorage: 따로..

[카테캠 6주차] 자바스크립트 기초

함수 함수 선언문 function hello() {} 함수 표현식 const hello = function () {} 함수선언문에서 호이스팅 함수 선언이 호출 아래에 있음에도 콘솔이 출력된다. * 호이스팅이란? 함수(변수)의 선언이 유효한 범위내에서 최상위로 끌어올리지는 것을 의미한다. 함수 표현식에서 호이스팅 함수 표현식에서는 호출 아래 선언이 있는 경우 에러를 발생시킨다. 반환 및 종료 return 키워드 뒤에 값을 지정하지 않으면 undefined가 자동으로 반환된다. 매개 변수 패턴 매개 변수에 디폴트 value 를 설정할 수 있다. user 라는 객체를 매개변수로 받아서 구조분해 하는 방법도 있지만 매개변수에서 바로 구조분해 할당하는 방법도 있다. 또한 매개변수에서 바로 구조분해하는 것에도 de..

[카테캠 선택강의] 반응형 적용

미디어 쿼리 미디어 쿼리를 사용할 때 나는 흔히 다음과 같이 많이 사용한다. 이게 실은 all and 가 생략되어있었다는 것을 알게되었다. /* @media 타입 and (기능) { 스타일 } */ @media (min-width: 360px) { } @media all and (min-width: 360px) { } 흔히 사용되는 것은 screen 타입이다. 조금 신기했던게 print 타입을 이용하면 프린트 출력되는 화면에 웹사이트가 어떤 UI 로 보일지도 고려할 수 있다. 전혀 몰랐던 것이 있는데 다음처럼 breakPoint 에 대해 CSS 파일을 나누어 import 할 수도 있다는 것을 알게 되었다. 어쩌면 사용할 수도 있을 것 같다. 타입 또한 같이 명시할 수 있음을 상기하자. transition..