총 22개의 글
HTML이란? 이는 Hyper Text Markup Language의 약자이다. Hyper Text는 링크를 통해 상호 간의 이동이 가능한 문서를 말한다. Markup은 우리가 HTML에서 사용하는 태그들을 말한다. 따라서 HTML은 상호 간의 이동 가능한 문서들을 태그를 이용하여 만드는 언어라고 생각하면 되겠다. 요소(Element) HTML 요소는 시작 태그와 종료 태그 그리고 태그 사이에 위치한 내용(content)으로 구성된다. 중첩(Nested) <html></html>은 모든 요소들을 포함한다. 중첩관계(부모자식 관계)로 웹페이지의 구조를 표현한다. 2단계 이상 자식 요소로 내려가면 하위(후손) 요소라고 한다. 2단계 이상 부모 요소로 올라가면 상위(조성) 요소라고 한다. 빈 요소(Empty)
위 HTML 기본 양식은 !, Enter로 불러올 수 있다. <!doctype html> 이 document가 html의 형식으로 되어있다는 것을 알려주는 것이다. <head> 태그 안에는 해당 웹페이지의 환경설정과 같은 것들을 작성한다. 이는 메타 데이터(데이터를 위한 데이터)를 포함하기 위한 태그이다. <body> 태그를 읽기 위한 정보를 표기한다. <meta> <meta charset="UTF-8">은 해당 코드들을 UTF-8(유니코드)의 인코딩 방식으로 읽어달라는 이야기이다. 이 코드를 작성하지 않으면 한글이 깨져서 나올 수 있다. <meta>에 http-equiv는 해당 페이지에서 사용하는 HTTP 통신에 대한 정보를 나타낼 때 사용. <meta>에 name과 content는 해당 페이지의 정보가
HTML 태그 정보 (MDN) 브라우저 호환 여부 확인 (Can I use) 태그 타당성 확인 (W3C Markup Validation) <h1~6></h1~6> h1의 h는 heading의 약자 제목이기 때문에 자동 줄 바꿈이 된다. 하나의 HTML 문서에는 하나의 h1 태그를 권장한다. 웹 검색 엔진이 제일 먼저 검색하는 태그이다. block 성질 <p></p> 본문을 뜻하는 paragraph의 약자 본문을 적기 위한 태그 <br /> 줄바꿈을 위한 태그 <pre></pre> 이 태그 안에서는 엔터가 <br />태그 없이도 에디터에 쓴대로 그대로 표현됨. 들여쓰기까지도 표현됨. <a></a> <a>는 Anchor의 약자로, 웹페이지나 이메일 등으로 연결하는 하이퍼링크를 만든다. href 속성에 url을
인라인(inline) 방식 인라인 방식은 요소의 style 속성에 직접 스타일을 작성하는 방식이다. 그러나 이 방식은 불편하다. 내장 Style 방식 <style></style>의 내용(Contents)으로 스타일을 작성하는 방식 그러나 내장 Style의 경우도 스타일이 바뀌면 모든 HTML 문서에서 바꿔줘야 하고 다른 HTML 문서에 적용이 어렵다는 단점이 있다. 링크 방식 모든 Style을 하나의 CSS 파일에 넣고, 필요한 HTML 파일에서 해당 파일을 링크해서 사용하는 방식이다. 재사용, 스타일 변경 등이 모두 가능하다. 다른 CSS 파일의 코드를 가져와야 할 때는 css 파일 안에서 @import 방식을 사용한다. 3가지 방식의 우선 적용 순위 ▶️ (인라인 방식) > (내장 방식) ? (링크 방식
선택자란 HTML 요소의 한 부분을 선택하여 스타일을 바꾸는 등의 작업을 수행할 수 있게 하는 것이다. 선택자의 종류로는 기본 선택자, 복합 선택자, 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자가 있다. 이들은 섞어서 사용할 수 있다. 선택자는 되도록 자세하고 정확하게 지정해주는 것이 좋다. css 선택자의 문법은 다음과 같다. 위 예시에서 선택자를 어떤 것을 쓰느냐에 따라 글자색이 빨간색이 되는 부분이 달라진다. 속성과 속성값을 지정하여 다양한 스타일을 정의할 수 있다. 속성(Property) 사이는 ;(세미콜론)으로 구분한다. 기본 선택자 전체 선택자 : * 태그 선택자 : 해당 태그의 이름(e.g. p) Class 선택자 : .class(클래스 이름) ID 선택자 : #id(아이디 이름) 복합
📦 박스 모델 (display) 요소가 화면에 출력되는 특성이다. 크게 인라인 요소와 블록 요소로 구분된다. 인라인 요소는 글자를 만들기 위한 요소들이고 블록 요소는 레이아웃을 만들기 위한 요소들이다. Inline 요소 <span> 태그는 대표적인 인라인 요소이다. 기본적으로 다른 요소가 같은 줄에 나타난다. 이는 포함한 콘텐츠 크기만큼 자동으로 크기가 결정된다. 이는 style 속성으로 width와 height를 주어도 변하지 않는다. margin은 좌우만 적용되고 상하는 적용되지 않는다. padding은 상하좌우 전부 적용되지만 상하 부분은 배경색만 적용이 가능하다. <span> 태그(inline 요소) 안에 <div> 태그(block 요소)를 넣는 것은 쓰지 않는다. Blcok 요소 <div> 태그는
CSS의 단점을 보완하기 위해 만든 CSS 전처리기 Sass 파일은 SCSS이다. Node.js의 Sass가 SCSS를 읽어서 CSS로 변환해준다. 또는 VSCode의 익스텐션을 이용하여 변환(컴파일)할 수도 있다. CSS와 다르게 틀린 부분을 에러로 띄워준다. 💫 Import 다른 SCSS 파일을 가져와서 Import할 수 있다. CSS 파일도 가능하다. 부분파일의 이름은 보통 언더바(_)를 앞에 붙여준다. 언더바(_)는 따로 적어주지 않아도 인식한다. 예시) 파일이름: _reset.scss, _nav.scss, _section.scss SCSS의 각주는 자바스크립트처럼 // 로 사용할 수 있다. 🐣 Nesting 선택자 안에 하위 요소로 선택자를 넣는 문법이 가능하다. & 선택자 활용 (자기 자신 선
프론트엔드 프레임워크 이미 작성되어있는 프론트 요소들을 가져다 쓰거나 반응형을 쉽게 구현할 수 있다. Class로 컨트롤 하기 클래스명을 이용하여 CSS를 조정할 수 있다. 위처럼 클래스를 주면 아래처럼 CSS를 준 것과 같다. 따라서 위와 같은 CSS를 쓰지 않아도 저러한 클래스명을 준 것만으로 아래와 같은 결과물이 나온다. Grid Container container 클래스를 주면 화면 넓이에 따른 고정폭의 넓이를 제공한다. 기본 container 외에 -sm -md -lg 등의 옵션을 붙여 또 다른 넓이를 가지게 할 수 있다. container-fluid 클래스를 주면 화면 넓이 100%의 폭을 가진다. Row & Col 컨테이너 내부에 배치하는 행, 열의 개념 Col은 12grid를 col-숫자 만큼
BEM (Block Element Modifier) HTML 클래스 속성의 작명법 이러한 기본적 룰을 가지고 통일이 되어야 협업에 도움이 된다. Block 가장 바깥쪽 상위 요소인 독립적 블록 재사용이 가능 블록은 블록을 하위 요소로 가질 수 있음 가장 바깥 상위 요소이므로 바로 클래스 선택자 사용이 가능 (e.g.) header, container Element 블록에 종속되는 하위 요소 소속된 블록에 의존적 (다른 블록에 들어가지 않음) 연걸방식 : __ (e.g.) block__element, header__logo, header__logo__image Modifier 블록에 종속되는 하위 요소 엘리먼트의 모양 또는 속성이 변형된 경우 사용 기능은 같지만 모양이 다른 경우, 모양은 같지만 기능이 다른
🍂 변수 var는 사용 X 상황에 따라 let이나 const를 사용하는 것이 좋다. let 값의 재할당이 가능하다. const 값의 재할당 불가 변수의 호이스팅(hoisting) 호이스팅이란 변수나 함수의 선언을 최상단으로 끌어올리는 것이다. 따라서 아래 코드에서 a가 선언되기 전에 a를 호출하여도 에러가 아닌 undefined를 출력한다. 변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다. 변수 선언과 값의 할당을 하나의 문장으로 축약하여 표현하더라도 자바스크립트 엔진은 이를 2개의 문으로 나누어 각각 실행하므로 결과에는 변함이 없다. let과 const의 호이스팅(hoisting) let과 const 변수
Array.from() 유사 배열 객체나 반복 가능한 객체를 복사해 새로운 배열을 만든다. .charCodeAt() / .charAt() / String.fromCharCode() 해당 변수의 ()안 인덱스 값에 해당하는 문자의 아스키 코드를 출력한다. (인덱스는 띄어쓰기도 센다.) String.fromCharCode()는 해당 아스키코드를 가진 문자를 가져온다. .concat() 두 배열을 합칠 수 있다. .fill() 파라미터 안의 숫자로 배열안의 값을 채운다. .filter() 조건에 부합하는 배열 요소만을 반환한다. map과 문법이 같다. 간단하게 다음처럼 작성할 수 있다. find / findIndex find는 배열에 특정 값이 있는지 찾고 반환한다. findIndex는 배열에 특정 값이 있는지
자바스크립트가 실행되는 환경 실행 컨텍스트의 종류 Global Execution Context: 전역 실행 컨텍스트는 처음으로 자바스크립트 코드가 실행될 때 생성되는 실행 컨텍스트이다. 이 실행 컨텍스트에서는 전역에서 관리되는 값들(함수나, 별도 모듈로 분리되어 있지 않은 값)을 관리한다. Function Execution Context: 함수 실행 컨텍스트는 함수가 호출될 때 마다 생성되는 실행 컨텍스트이다. 각각의 함수 호출은 모두 각자의 실행 컨텍스트를 생성하고 가진다. 그 외에도 Eval Execution Context와 Module Execution Context가 존재한다. 콜스택 자바스크립트 엔진에는 코드 실행순서를 관리하는 콜스택이 존재한다. 자바스크립트는 스택에 실행 컨텍스트를 순차적으로 추
🌟 JS의 문제점 자료형을 넘나드는 계산을 수행한다. 따라서 다음과 같은 코드에서 에러를 보여주지 않는다. 타입스크립트에서는 다음과 같이 에러를 보여준다. TS 컴파일 방법 npx tsc (파일이름).ts tsc -w 그러나 React에서 사용 시 애초에 typescript로 세팅하면 이러한 것들을 해주지 않아도 된다. 🥕 기본 타입 기본 타입 지정 방법 기본적인 JS문법에서 변수명 뒤에 :를 이용하여 타입을 붙여준다. 해당 변수에는 붙여준 타입의 데이터만 할당할 수 있다. 따라서 위 코드에서 week1 배열에 숫자 타입 데이터를 push하면 에러가 난다. 배열의 타입은 데이터타입[] 또는 Array<데이터타입>으로 결정할 수 있다. 튜플 (Tuple) 튜플은 각 요소의 타입이 고정된 배열이다. 튜플은
🍦 리액트 관련 개념 JSX JS에 XML을 추가한 문법 보통 리액트에서만 사용 HTML 문서 구조를 JS에서도 사용 가능. 그러나 이를 읽기 위해서는 Babel이라는 컴파일러가 필요! Babel JS의 컴파일러 과거 ES6가 나오고 몇몇 브라우저가 ES6를 지원하지 않는 것을 ES5 문법으로 변환해주던 기능을 했음 요즘은 이러한 역할은 필요가 없으므로 다른 추가적인 언어들에 대한 컴파일러 역할을 한다. Webpack 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러(Module Bundler) 웹 개발에 여러 기능이 추가되기 시작하니 용량 문제가 생겼다. 이를 해결하기 위해 등장한 것이 Webpack이다. 필요한 기능을 필요한 순간에 모듈 형태로 불러와서 사용을 하고, 배포할 때에는 필요 없는 기능
노마드 코더 강의 (ReactJS로 영화 웹 서비스 만들기) 👋 React, JSX 처음 접하기 실제 리액트를 사용할 때 사용하는 방법은 아니지만 약식으로 리액트에 대한 이해를 돕기 위해 우선 이렇게 진행하는 것 같다. 각주 처리된 코드는 script에 babel을 넣기 전에 작성한 Vanilla JS코드인데, babel이 위 JSX를 각주 처리된 코드로 바꿔준다. Container 안에 <Title />과 <Button />은 html태그가 아니라 컴포넌트이다. 첫번째 글자가 대문자여야 한다. 여기서는 root안에 Container를 표시하고, Container 안에 Title과 Button이 들어있는 형태이다. JSX 문법은 언뜻 보기에는 HTML과 비슷하지만 Button에서 한 것처럼 JS 문법이 통
서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와주는 라이브러리 개요 React-Query가 등장하기 이전에는 서버와의 API 통신과 비동기 데이터 관리에 Redux가 주로 사용되었다. (redux-thunk, redux-saga 등) 그러나 Redux는 Boilerplate 코드가 장황하고, API 요청 수행에 규격화된 방식이 부족한 등의 단점이 있었다. 반면 React-Query는 다음과 같이 장점을 가지고 있다. React-Query는 GET 요청의 경우 useQuery 를 사용하여 처리하고, POST, PUT, DELETE와 같이 서버에 Side Effect를 발생시키는 경우 useMutation 을 사용하여 처리한다. 세팅 useQuery 예제 첫 번째 파라미터:
자바스크립트 웹 어플리케이션 프레임워크 프로젝트 생성 및 개발환경 실행 컴포넌트 import Vue 컴포넌트는 다음과 같은 형태로 구성되어 있으며, 다음처럼 import 할 수 있다. Router 사용 main.js router.js App.vue router-view를 이용하면 해당 위치에 현재 URL에서 routing 되는 컴포넌트를 넣어줄 수 있다. MainHeader.vue router-link를 이용해 다른 URL로 보내줄 수 있다. Data Binding data() {} 안에 return으로 사용할 data들을 넣어준다. methods : {} 안에 메소드들을 선언할 수 있다. {{}}안에 data명을 입력하면 표시된다. input태그의 DOM 컨트롤을 할 때에는 v-model로 해당 data명
모바일 애플리케이션 프레임워크 작동 원리 React Native는 브라우저를 사용하지 않는다. bridge를 통해 JS 코드를 각 운영체제에 맞는 코드로 컴파일하여 보낸다. Native는 Event를 감지하고 이를 JS에 전달한다. JS는 해당 이벤트에 따라 어떤 동작을 해야하는지 전달한다. 컴포넌트 react native는 브라우저에서 동작하는 것이 아니므로 div나 p와 같은 HTML 태그를 사용할 수 없다. 따라서 import { Text, View } from "react-native"; 와 같이 컴포넌트를 import해서 사용한다. <View> : Container (div) <Text> : 모든 text는 text component에 들어가야 한다. 그렇지 않으면 에러가 발생한다. 스타일 기본적으
자바스크립트 웹 프레임워크 개요 Next.js는 자바스크립트 웹 프레임워크이다. 리액트 문법을 사용할 수 있다. 리액트에는 없는 서버 사이드 렌더링(SSR) 기능을 제공한다. 프로젝트 시작 프로젝트 생성 개발 환경으로 실행 프로젝트 파일들 폴더 방식 라우팅 next.js에서는 폴더 이름을 통해 라우팅 주소를 설정해줄 수 있다. 이렇게 하면 http://localhost:3000 에서는 app폴더 바로 아래의 page.js가 보이게 된다. http://localhost:3000/list 에서는 list폴더 바로 아래의 page.js가 보이게 된다. layout.js는 해당 폴더에 있는 page.js를 감싼다. 따라서 navigation bar와 같은 것을 만들고 싶다면 가장 상위의 layout.js에 이를 넣
상태 관리 라이브러리 🥏 개요 Redux 란? 컴포넌트의 상태를 하나하나 Props로 전달하면 코드가 복잡하기 때문에 이를 해결할 수 있는 기능을 제공한다. 컴포넌트의 상태를 각각 컴포넌트 별 State에 따라 관리하는 것이 아닌 하나의 Store라는 곳에서 관리 할 수 있다. React와만 사용할 수 있는 것은 아니고 각각의 프레임 워크에 맞춘 라이브러리가 존재한다. React에는 React-Redux를 사용한다. Redux는 Context API와 달리 전역 상태 관리 외에 다양한 기능을 제공한다. Redux 또한 Context API를 가지고 만든 라이브러리로, 전역 상태 관리 측면에서는 차이점이 거의 없다. Redux를 쓰는 이유는 다음과 같다. Redux의 동작 순서 Dispatch 함수가 실행
테스팅 라이브러리 공식문서 🔦 기본 세팅 설치 package.json Jest는 *.test.* 의 형태를 가진 파일을 테스트 파일로 인식한다. 🍮 테스트 함수 작성하기 calculate.js calculate.test.js 이후 테스트를 실행하려면 npm test 를 해주면 된다. 하나의 test에서 여러 줄의 expect를 사용하는 것도 가능하다. 🍦 toBe, toEqual toBe는 앝은 비교== 이고, toEqual은 깊은 비교=== 이다. toBe로 비교 toEqual로 비교 그러나 아래와 같이 undefined인 key가 있을 때에도 toEqual은 테스트를 패스시킨다. toStrictEqual 이러한 경우에는 toStrictEqual을 사용하면 된다. 🍬 TS에서 사용 설치 → jest
개요 리액트에서는 CRA를 하면 기본적으로 jest 세팅이 되어있다. 어떠한 컴포넌트에서 특정 문자열을 랜더링하고 있는지를 테스트하는 코드는 다음과 같다. 여기서 screen은 말 그대로 현재 렌더링이 진행되고 있는 화면을 의미한다. screen.debug 는 테스트 과정에서 출력된 DOM을 확인하고 싶을 때 사용할 수 있다. 요소를 가져오는 메소드들 getElementBy~ 나 querySelector와 같이 RTL에서도 렌더링된 요소들에게 접근할 수 있는 메소드들이 존재한다. userEvent 실제 DOM상에서의 유저처럼 이벤트를 발생시키기 위해서는 testing-library/user-event 라이브러리를 사용할 수 있다. 아래처럼 userEvent.이벤트명(엘리먼트) 의 형태로 활용할 수 있다. 이
