본문 바로가기

분류 전체보기328

[웹개발/한줄정리] 컴파일(Compile) vs 빌드(Build) 차이점 컴파일(Compile) 사람이 프로그래밍 언어로 작성한 소스코드를 컴퓨터가 이해할 수 있는 바이너리 언어로 작성된 코드로 변경하는 것 컴파일러(Compiler)는 개발자가 작성한 소스코드를 컴퓨터가 이해할 수 있는 코드로 변경해주는 프로그램이다 빌드(Build) 소스코드 파일을 컴퓨터에서 실행할 수 있게 변환하는 과정으로 빌드과정에 컴파일이 포함되어 있다 2022. 5. 13.
[웹개발/한줄정리] dist 폴더란? distribution의 약어로 배포할 수 있는 파일이 들어있는 디렉토리 2022. 5. 13.
[Node.js] npm 명령어 정리 명령어 의미 npm help npm 명령어의 종류와 사용법을 알고 싶을때 사용 npm init 프로젝트를 npm에서 관리하도록 설정 (package.json 파일 생성) 프로젝트 시작시 가장 먼저 해야할일 npm init -y 기본 설정을 위한 질문을 생략한 후 프로젝트를 바로 npm에서 관리하게 설정 (package.json 파일 생성) npm install package.json에 dependencies 맞춰 프로젝트에 필요한 패키지를 모두 설치 npm install 패키지 설치 npm install 패키지를 해당 버전으로 설치 npm i npm install 패키지이름 축약형 npm install —save-dev 패키지를 개발용으로 설치 (개발할때만 필요하고 브라우저에서는 필요없는 패키지를 설치할.. 2022. 5. 13.
[CSS] transition 속성으로 애니메이션 효과 주기 transition 요소의 전환(시작과 끝) 효과를 지정하는 단축속성 div { transition: 속성명, 지속시간(필수), 타이밍함수, 대기시간; } div { transition: transition-property, transition-duration(필수), transition-timing-function, transition-delay; } transition의 속성값 1. transition-property 전환 효과를 사용할 속성 이름을 설정 all: 모든 CSS 속성에 적용 (default) 속성이름: 전환 효과를 사용할 속성 이름 명시 div 요소에 있는 어떤 속성에 변화가 생길때 transition 효과를 1초동안 적용한다 div { transition: all 1s; } div 요.. 2022. 5. 11.
[Bootstrap] Bootstrap을 패키지로 설치할때 사용법 정리 패키지 설치 yarn add bootstrap으로 부트스트랩 설치 node modules에 bootstrap 모듈이 설치된다 스타일 적용 CSS, Sass 둘 중 하나 선택 CSS 파일을 사용할경우: import 'bootstrap/dist/css/bootstrap.min.css';코드로 부트스트랩 스타일 내 프로젝트에 적용하기 Sass 파일을 사용할경우: @import '~bootstrap/scss/bootstrap';코드로 부트스트랩 스타일 내 프로젝트에 적용하기 JS 적용 yarn add @popperjs/core 로 popperjs 라는 패키지 설치 JS 파일에: import * as Popper from '@popperjs/core';와 import { 사용할 컴포넌트 이름 } from '../.. 2022. 5. 10.
[리액트] styled-components로 keyframe 구현하기 1. styled-components 설치하기 yarn add styled-components 2. keyframes import하기 import styled, { keyframes } from 'styled-components'; 3. keyframes 애니메이션 만들기 const 애니메이션이름 = keyframes` 0% { /* 애니메이션이 0% 진행했을때 적용할 스타일 */ } 50% { /* 애니메이션이 50% 진행했을때 적용할 스타일 */ } 100% { /* 애니메이션이 100% 진행했을때 적용할 스타일 */ } `; 4. keyframes로 만든 애니메이션을 속성값으로 넣어주기 const Box = styled.div` animation: ${애니메이션이름} 2s; `; 2022. 5. 10.
[CSS] transform, keyframes로 애니메이션 효과 주기 transform vs keyframes transform: 상태가 한번 바뀔때 사용 (a → b) keyframes: 상태가 여러번 바뀔때 사용 (a → b → a, a → b → c) transform 속성 1. rotate() 플러스는 오른쪽으로 마이너스는 왼쪽으로 회전 div { transform: rotate(90deg); } 2. translate() translateX는 X축 좌표로 translateY는 Y축 좌표로 이동한다 X, Y가 없는 translate()은 X, Y값을 모두 움직일 수 있다 엘리먼트를 움직이는 에니메이션을 줄 경우에는 padding, margin으로 이동하는 것보다 translate()이 더 빨리 움직인다 div { transform: translate(100px, 1.. 2022. 5. 10.
[CSS] flex 속성 정리 display 요소가 화면에 출력되는 특성을 정의해주는 속성이다. display에서 자주 사용하는 속성값 6가지 inline: 글자를 만들기 위한 요소에 부여하는 속성값으로 요소의 크기만큼 차지하며 수평으로 쌓인다 block: 레이아웃을 만들기 위한 요소에 부여하는 속성값으로 한행을 전부 차지하며 수직으로 쌓인다 inline-block: 베이스는 inline 요소지만 block 요소의 몇가지 특징을 가지고 있는 요소 grid: 그리드는 수평선과 수직선으로 이루어진 집합체로 웹페이지를 위한 이차원 레이아웃 모델 table: 행과 열로 이루어진 표를 생성하는 레이아웃 모델 flex: flex 속성을 가진 부모 요소 안에 있는 자식 요소를 자유롭게 제어할수 있도록 도와주는 레이아웃 모델 flex 기본 부모 요.. 2022. 5. 4.
[리액트] import 구문에서 언제 중괄호 { }를 사용할까? (export와 export default의 차이점) 한 파일에 코드가 너무 길어지면 유지, 보수가 힘들기 때문에 기능별로 코드를 나눠 필요할때마다 불러주는 작업을 한다. 이를 모듈화라고 한다. 모듈이란 프로그램을 이루고 있는 독립적이고 재사용할 수 있는 코드의 집합체를 의미하며 하나 또는 여러개의 모듈이 모여서 프로그램이 만들어진다. 이때 기능별로 쪼개진 모듈을 파일에 불러오기 위해 사용하는 키워드가 "import"다. 반대의 개념으로 export가 있는데 import할 수 있는 모든 모듈은 export로 내보내진 모듈이다. 리액트에서 라이브러리나 다른 컴포넌트를 불러올때도 import라는 키워드를 사용한다. 예를들어 App.js라는 컴포넌트에서 About.js라는 컴포넌트를 불러올때 또는 Home.js 컴포넌트에서 react-router-dom 라이브러.. 2022. 5. 4.
[리액트/한줄정리] index.js 있는 ReactDOM.render()란? ReactDOM.render( , document.getElementById('root') ); ReactDOM.render(첫번째 파라미터, 두번째 파라미터) 첫번째 파라미터: 무엇을 렌더시킬까 → 최상위 컴포넌트 두번째 파라미터: 어디에 렌더시킬까 → id가 root인 element 즉 public > index.html에 있는 id가 root인 요소 2022. 4. 30.
[CSS] position 속성 static, relative, absolute, fixed 정리 position position 속성은 요소의 위치 지정 기준을 설정한다. position에는 5가지 값(static, relative, fixed, absolute, sticky)이 있는데 static은 default 값으로 요소의 위치 지정 기준이 없어 위치 설정을 할 수가 없다. position 값이 설정되면 top, bottom, left, right의 속성으로 요소의 위치를 이동시킬 수 있다. position의 속성 static: 요소의 위치 지정 기준이 없다 (default) relative: 자신을 기준으로 요소의 위치를 설정한다 absolute: 위치상 부모 요소를 기준으로 요소의 위치를 설정한다 fixed: 브라우저의 뷰포트를 기준으로 요소의 위치를 설정한다 position 사용시 주의점.. 2022. 4. 25.
[CSS] inline-block의 문제점과 해결방법 (태그사이의 공백과 baseline) inline-block의 특징 베이스는 inline 요소지만 block 요소의 몇가지 특징을 가지고 있는 요소 요소가 수평으로 쌓인다 (inline의 특성) 태그 사이에 공백이 있으면 (요소 사이에 스페이스, 요소 사이에 한줄 띄우기) 화면에 공백이 나타난다 (inline의 특성) width와 height를 가질수 있다 (block의 특성) margin, padding으로 사방에 공백을 만들 수 있다 (block의 특성) inline-block으로 레이아웃을 만들때 문제점 2가지 1. 태그 사이에 공백이 있으면 요소에 공백이 나타난다 1) 태그 사이에 공백이 없을때 요소 사이에 공백이 나타나지 않는다 LeftRight div { width: 100px; height: 300px; color: white;.. 2022. 4. 24.
[CSS/한줄정리] tabindex 속성으로 focus가 될 수 있는 요소 만들기 tabindex: -1 속성을 부여하면 해당 요소에 focus가 가능해진다. div { tabindex: -1; } 2022. 4. 24.
[CSS] display 속성 inline, block, inline-block 정리 display 요소가 화면에 출력되는 특성 각 요소에 이미 지정되어 있는 display의 속성 2가지 1. inline 글자를 만들기 위한 요소 요소의 크기만큼 차지한다 요소가 수평으로 쌓인다 width와 height를 가질 수 없다 margin, padding으로 왼쪽, 오른쪽 공백을 만들 수 있지만 위, 아래 공백을 만들 수 없다 인라인 요소 안에 블록 요소를 자식 태그로 가질 수 없다 (인라인 요소는 인라인 요소만 자식 태그로 가질 수 있다) , , , , , , , inline 요소 사용시 주의점 inline 속성을 가진 태그 사이에 공백이 있으면 (요소 사이에 스페이스, 요소 사이에 한줄 띄우기) 화면에 공백이 나타난다 inline 속성을 가진 span 태그를 붙여 사용할 경우 화면에 AB로 출.. 2022. 4. 24.
[CSS] overflow 속성 정리 overflow 요소의 크기 이상으로 내용이 넘쳤을때 보여짐을 제어하는 단축 속성 overflow-x를 사용하면 x축(가로)만 개별적으로 제어할 수 있다 overflow-y를 사용하면 y축(세로)만 개별적으로 제어할 수 있다 overflow의 속성 1. visible (기본값) 넘친 내용을 그대로 보여줌 .parent { width: 200px; height: 150px; background-color: royalblue; margin: 20px; padding: 20px; overflow: visible; } .child { width: 300px; height: 100px; background-color: orange; } 2. hidden 넘친 내용을 잘라냄 .parent { width: 200px.. 2022. 4. 24.
[CSS] content box와 border box의 차이 box-sizing box-sizing 속성은 요소의 크기 계산 기준을 지정한다. 1. content-box 요소의 내용(content) + padding + border로 크기 계산 padding, border의 너비와 높이를 요소의 사이즈에 포함시키는 방법 예제 box 클래스를 가진 요소는 width가 100px (width) + 10px (padding-left) + 10px (padding-right) + 5px (border-left) + 5px (border-right)인 130px이 된다. .box { box-sizing: content-box; width: 100px; height: 100px; /* 아래의 속성이 최종 사이즈에 포함된다 */ padding: 10px; border: 5px.. 2022. 4. 24.
[CSS] CSS에서 사용하는 유닛 정리 (px, em, rem, vw, vh, %) ⚠️ 이 포스팅은 드림코딩의 프론트엔드 필수 반응형 CSS 단위 em 과 rem과 프론트엔드 필수 반응형 CSS 단위 총정리 (EM과 REM)을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 1. 절대적인 유닛 (Absolute length units) 절대적인 유닛은 크기가 항상 일정하다. 절대적인 유닛의 종류로는 cm, mm, in, px 등이 있지만 컴퓨터 화면에서는 px만 유일하게 사용할 수 있다. 1.1 px (pixel) 픽셀은 화면의 점을 세는 단위로 모니터 위에서 나타낼수 있는 가장 작은 단위 값이다. 픽셀의 문제점은 값이 고정이 되어 있다는 것이다. 예를 들어 픽셀을 사용해 폰트사이즈를 지정하면 사용자가 브라우저에서 폰트 사이즈를 커스터마이즈해도 폰트사이즈가 변하지 않는다. 2. 상대적인 유.. 2022. 4. 24.
[리액트] 리덕스에서 Provider, useSelector, useDispatch 사용하기 1. Provider, useSelector, useDispatch 역할 Provider (컴포넌트) Provider 컴포넌트는 "State를 어떤 컴포넌트에게 제공할것인가"에 대한 가장 바깥쪽의 울타리를 정의하는 것을 말한다. 즉, Provider로 감싸고 있는 리액트 컴포넌트가 Store에 저장되어 있는 State에 접근이 가능하도록 해준다. useSelector (Hook) useSelector 훅은 Store에 저장된 state를 가지고와 사용할 수 있게 해준다. 저장소에 있는 어떤 state를 쓰고 싶은지 선택할때 사용. useDispatch (Hook) useDispatch 훅은 Store에 저장된 state의 업데이트를 요청해준다. 저장소에 있는 어떤 state를 업데이트하고싶을때 사용. 2.. 2022. 4. 23.
[CSS] CSS 선택자 우선순위 (CSS Specificity) 우선순위란 같은 요소가 여러 선언의 대상이 된 경우 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법 1. 점수가 높은 선언이 우선함 2. 점수가 같으면 가장 마지막에 해석된 선언이 우선함 우선순위 순서대로 1. !important 2. inline style 선언 3. id 선택자 4. class, 가상 클래스, 속성 선택자 5. tag 선택자, 가상 요소 6. 전체 선택자 2022. 4. 23.
[CSS] CSS 선택자 종류 5가지 정리 1. 기본 1.1 전체 선택자 (Universal Selector) 모든 요소를 선택 (*) * { color: royalblue; } 1.2 태그 선택자 (Type Selector) 태그 이름으로 선택 (태그이름) li { color: royalblue; } 1.3 클래스 선택자 (Class Selector) 클래스 속성 값으로 선택 (.클래스이름) .box { color: royalblue; } 1.4 아이디 선택자 (ID Selector) 아이디 속성 값으로 선택 (#아이디이름) #profile { color: royalblue; } 2. 복합 (Combinator) 2.1 일치 선택자 (Basic Combinator) 선택자 두개 이상을 동시에 만족하는 요소 선택 (선택자선택자) maple spa.. 2022. 4. 23.

티스토리툴바