본문 바로가기

개발/HTML, CSS, JS34

autoprefixer 여러 개발 서버들에서 개발자 도구(F12)를 사용해서 적용된 css를 보면 줄이 그어져 있는 속성들을 확인할 수 있다. 즉, 현재 내가 보고 있는 화면에 해당 속성이 적용이 되지 않고 있다는 뜻인데, 그럼 왜 작성을 해두었을까?? 값이 -webkit-box와 -ms-flexbox 해당 속성들은 일종의 스타일 보험이라고 볼 수 있다. 우리가 작성한 스타일이 구형 브라우저에서는 제대로 동작하지 않을 수가 있는데 이때를 대비해서 미리 보험을 들어두는 것이다. 만약 특정 브라우저에서 동작할 수 없다면 autoprefixer가 자동으로 동작할 수 있게끔 변환을 해준다. 어떻게 적용할까?? 일단 npm i -D postcss autoprefixer 명령을 통해 postcss, autoprefixer 패키지를 개발 .. 2023. 2. 14.

정적 파일 연결 지난 스타벅스 예제에서 루트 폴더에 favicon.ico 라는 icon 파일이 존재하면 따로 link 태그를 통해 연결해주지 않아도 자동적으로 favicon으로 인식을 한다고 배웠다. 하지만 새로운 프로젝트를 만들어 npm run dev를 통해 개발 서버를 열어서 확인해본 결과 루트 폴더에 favicon.ico 파일이 존재함에도 favicon으로 인식되지가 않았다. vs code에서 제공하는 기능인 open with live server를 통해 서버를 열어서 확인했을 때는 잘 인식이 됐었는데 num run dev를 통해 확인 한 결과는 왜 다를까?? parcel bundler를 통해 개발 서버를 열거나 제품화를 시키게 되면 우리가 작성한 html, css, sass, js 파일 등을 기본으로 dist라는.. 2023. 2. 13.

번들러 개요 Bundler를 사용하는 이유 웹에서는 HTML, CSS, JS 3가지 언어가 동작을 하는데, 이 3가지 언어만을 가지고 작을 하기에는 비효율적인 면이 있다. TS, SASS, REACT 등의 패키지를 고도화된 기능을 사용하여 프로젝트를 작성할 수 있고, 이렇게 작성된 프로젝트를 웹에서 동작시키기 위해 다양한 번들러를 사용한다. parcel bundler VS webpack bundler parcel bundler 구성이 없는 단순한 자동 번들링 대부분 자동으로 처리해준다는 장점 그러나 비효율적 따라서 소/중형 프로젝트에 적합 _______________________________________________ webpack bundler 매우 꼼꼼한 구성 너무 디테일한 구성으로 인해 번거러움이 있음. .. 2023. 2. 13.

JavaScript Essentials import { random } from './getRandom' import _ from 'lodash' import getType from './getType' import * as R from './export_practice' import myData from './myData.json' import axios from 'axios' // 산술 연산자(arithmetic operator) + - * / % // 할당 연산자(assignment operator) = // 논리 연산자(logical operator) // 삼항 연산자(ternary operator) ? // var 변수는 let, const 변수와 다르게 블록 레벌의 범위가 아닌 함수 레벨 범위 내에서 유효하다. function su.. 2023. 2. 5.

Type annotation javascript는 Dynamic type들을 사용하는 반면 typescirpt는 Static type들을 사용한다. Static type은 개발하는 중간에 type을 체크한다. Dynamic type은 개발하는 도중에는 알 수 없고 runtime에 돌입해야지만 잘못된 것을 알 수 있다. 1 2 3 let a: number // 변수가 어떤 타입인지를 지정해주는 것을 type annotation이라고 한다. // typescript에서는 javascript와 다르게 타입을 지정할 수 있다. cs typecript에서는 let a = 'Hello'와 같이 변수 생성시 초기값을 할당해주면 변수의 type이 정해지게 되고 해당 type이 아닌 다른 type의 값을 재할당하려고 하면 에러가 발생한다. let .. 2023. 2. 4.

BEM 예제를 만들면서 class 이름을 contents__name, contents__texture와 같이 _ 기호를 2개 붙여서 사용하는 것을 볼 수 있었는데, 왜 언더바 2개를 붙여 사용하는 것이 무슨 의미일까?? BEM은 HTML 클래스 속성의 작명법이다. 작명법에는 2가지가 있는데, 하나는 요소의 일부분을 표시하는 방법이고 하나는 요소의 상태를 표시하는 방법이다. 요소의 일부분을 표시할 때에는 언더바 2개를 붙여서 일부분을 의미함을 나타내고 요소의 상태를 표시할 때에는 하이픈 2개를 붙여서 상태를 의미함을 나타낸다. 왼쪽과 같이 클래스 속성을 정의하면 문제가 발생한다. container 클래스의 name 클래스를 선택하기 위해 우리는 CSS에서 .container .name 이렇게 띄워쓰기를 이용한 하.. 2023. 1. 13.

메소드 체이닝(Method Chaining) 메소드들을 붙여서 작성하여 사용할 수 있다. 메소드를 체인처럼 연결하여 사용한다고 하여 메소드 체이닝이라고 한다. split 메소드 : a라는 변수의 내용을 인수로 받은 문자를 기준으로 쪼개서 배열로 반환한다. => 즉, 문자 데이터를 배열 데이터로 변환하여 반환하는 역할을 한다. reverse 메소드 : 배열을 뒤집는다. join 메소드 : a라는 변수에 저장된 배열을 인수로 받은 문자를 기준으로 병합하여 반환한다. 아직 각각의 메소드가 무슨 역할을 하는지는 중요하지 않고, 메소드들을 붙여서 사용할 수 있다는 것을 알아 두자. 각각의 메소드를 분리해서 사용하면 코드가 길어지고 복잡해지므로 메소드 체이닝을 사용할 수 있다. 그렇다고 모든 메소드들을 순서없이 연결해서 사용할 수 있는 것은 아니다. 메소드 .. 2023. 1. 12.

DOM API DOM API 란? Document(DOM)는 HTML을 뜻하고 Object Model은 HTML의 span, div, input 요소들을 뜻한다. 즉, DOM API는 자바 스크립트에서 HTML을 제어하는 여러가지 명령들이라고 의역할 수 있다. 자바 스크립트에서 document 객체에 있는 querySelector 메소드를 통해 HTML의 box 클래스를 가진 요소를 찾은 다음 콘솔에 출력하는 코드를 작성해 보았다. 브라우저는 코드를 위에서 아래로 읽어나가기 때문에 자바 스크립트에 작성된 코드가 먼저 실행이 된다. 그 후에 body부분에서 div요소를 작성하기 때문에 null값이 출력된 것이다. 이를 해결하기 위해서 script 태그를 body의 div 태그 아래 부분으로 옮겨주면 정상적으로 작동한다... 2023. 1. 12.

함수 함수 자바 스크립트로 만들 수 있는 여러 가지 특정한 동작(기능)을 수행할 수 있는 코드의 집합. 함수를 선언하는 방법 function이라는 키워드를 사용하여 선언을 시작하며 function 키워드 뒤에는 함수의 이름을 넣는다. 그리고 함수의 이름을 통해서 함수를 호출할 수 있고, 호출된 함수는 내용에 작성된 코드를 순차적으로 실행한다. 함수 안에서 특정한 값을 반환하도록 할 수도 있다. 함수의 재사용, 인수와 매개변수 sum이라는 함수는 매개변수 a와 b에 저장된 데이터를 더해서 반환하는 함수이다. 함수가 호출되는 부분에서 데이터를 인수로 집어넣을 수 있고, 그 데이터를 받아줄 변수를 매개변수라고 부른다. 매개변수에 저장된 데이터는 함수 내에서만 사용할 수 있다. 한 번 선언된 함수는 여러 번 재사용될.. 2023. 1. 11.

이전 1 2 3 4 다음

티스토리툴바