[카테캠 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 키워드는 코드내 최상단에서 사용할 수 있다. ..

[카테캠 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 함수는 내부에 비동기 로직이 존재한다..

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

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

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

모듈화 JS 파일이 커지면 언젠가 파일을 여러개로 분리해야한다. 이렇게 각각 분리된 파일을 모듈이라 하는데, 이렇게 모듈로 나눠진 파일을 import, export 하기 위해선 script 태그에 type 을 module 로 선언해주어야한다. 템플릿 리터럴 흔히 백틱을 사용해서 문자열을 나타내는 것을 템플릿 리터럴 이라고 부른다. 템플릿 리터럴을 사용하면 문자열 안에 변수를 사용할 수 있는 문자열 보간을 사용할 수 있다. const hello = `Hello ${myName}!`; NaN 데이터 타입은 숫자지만 숫자로 표현할 수 없을 때 사용된다. console.log(0.1 + undefined) 부동 소수점 오류 컴퓨터가 10진수를 2진수로 표현하면서 생기는 무한 소수를 유한한 값으로 나타내면서 세부..

[카테캠 4주차] 오버워치 캐릭터 선택 예제

lang="ko" 의 의미 margin 을 사용한 중앙 정렬 레이아웃 잡을때 max-width 로 잡는게 반응형 대응하기 더 편한 것 같다. width 로 css 를 주면 잘려버리기 때문이다. width 값이 있는 요소에 margin: 0 auto 를 주게 되면 중앙 정렬이 된다. .heroes { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; max-width: 700px; margin: 0 auto; } 캐릭터 image 다음처럼 url 함수를 사용하여 캐릭터 이미지를 넣어주었을 때 이미지가 나오지 않는 경우에는 어떻게 해야할까. .hero:nth-child(1) .image { background-image: url("htt..

[카테캠 4주차] CSS 속성

투명도 opacity의 정수 0은 생략이 가능하다. Q) opacity 속성의 기본값은? 1 글꼴 font-style font-weight font-size line-height 와우~ line-height 에 다음처럼 2 또는 200%로 지정하면 자동으로 font-size 에 맞춰 2배수로 line-height 가 할당된다. 이때 까지 나는 아래 예시처럼 line-height 에 px 를 명시했는데, 이제는 배수를 사용해야겠다. 아래 예시를 보면 line-height 가 32px로 할당 되어있고 글씨는 그 중앙에 위치하는 것을 알 수 있다. 따라서 글씨는 line-height의 중앙에 배치된다. font-family 글씨체는 font-family 속성으로 변경한다. 글꼴계열은 내장되어있는 글꼴을 명시해..

[카테캠 3주차] CSS 속성

개요 속성 HTML 속성 (Attributes) CSS 속성 (Properties) JS 속성 (Properties) HTML 이랑 CSS, JS의 속성 영어 용어가 다르구나~ 정도로 알아두면 좋을 듯. 구분하면 유식해 보일 수도.. 너비(width, height) width 와 height 의 기본값은 auto 이다. 직접적으로 값을 주고 싶다면 px, em, rem, vw, vh 를 사용하면 된다. 인라인 요소의 auto 값 인라인 요소의 auto 값은 width , heigth 모두 요소의 콘텐츠 크기만큼 자동으로 할당된다. 블록 요소의 auto 값 블록 요소의 auto 값은 width 의 경우 부모 요소의 크기 만큼 자동으로 늘어난다. height 같은 경우 콘텐츠의 크기 만큼 자동으로 줄어든다...