프론트엔드

사용자의 선택권을 해치지 않으려고 상대단위로 설정하는 것이다. 62.5%로 설정해야 개발자의 의도를 전달하면서도 사용자의 선택권을 해치지 않는다.

px -> vw(px값 / viewport px값) x 100px -> rem(rem을 기반으로 적용할 부분의 px값 / 최상위 루트 폰트에 설정된 px값)

가장 기본적인 레이아웃인, 두 개의 영역 나란히 배치하기다.하단처럼 하나의 html로, 6가지 CSS를 소개해보도록 하겠다.첫번째는display: inline-block을 사용한 영역 배치다.나란히 배치할 영역을 감싸고 있는 부모에게 display: block; fon

Flex Froggy 정답 모음

Grid Garden 정답 모음

Node.js : 자바스크립트 엔진 위에서 동작하는 이벤트 처리 입출력 프레임워크, 클라이언트 및 서버측 자바스크립트gulp : node 위에서 동작, CSS 및 HTML 단순화, 라이브러리 단일화, SCSS 컴파일을 도와주는 유틸리티npm : 노드 패키지 매니저, n

번들링 도구를 통해 스타터를 만들 때 고민했던 부분이 하단과 같다. webpack은 처음 해보는거고 접하지도 않았어서 러닝커브가 있고, gulp는 구축 프로젝트 할 때 직접 만들지는 않고, 써봤다는 정도였다. 더불어, 참고할 파일도 있었다. 그런 부분들과 차이점이 gu

radio 타입의 인풋에서 name값이 grp_use_poa인 경우 && value값이 Y인 경우 찾기

시간 변환 함수 금액 변환 함수

async와 defer 속성은 script 요소의 논리 속성으로 HTML5부터 추가된 속성이다. 둘 다 src 속성을 가진 script에 적용할 수 있지만 인라인 스크립트에는 사용할 수 없다. 이들 속성을 사용하면 자바스크립트 코드를 실행할 때 HTML 구문 분석을 막

HEX 코드를 RGB로 바꾸는 함수 RGB를 HEX 코드로 바꾸는 함수

siblings 함수 사용법

node.js 설치 / 설치돼있는 지 여부 알려면 터미널에서 node -v 실행해준다. 가능한 한, Node.js 홈페이지에서 LTS 버전으로 새로 받는 것이 좋다. 설치돼있으면 npm install --global yarn 으로 yarn 설치해준다. 프로젝트 폴더위치

우선, 프로젝트 폴더안에 client라는 리액트 프로젝트는 이전글에서 만들어준 걸로 사용한다.client와 형제 관계에 server라는 폴더 생성, 하단 그림과 같이 만들면 된다.프로젝트 폴더 위치에서 cmd를 열어준 뒤, 하단 명령어를 입력해 모두 설치해준다.설

document.styleSheets

메소드는 전달된 파라미터 객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 리턴한다.

Array.isArray() 메서드는 인자가 Array인지 판별한다.

한 요소 셀렉트 여러 요소 셀렉트 한 요소 한 개의 이벤트 바인딩 여러 요소 여러 개의 이벤트 바인딩 객체 형식으로 이벤트 바인딩 요소 안에 있는 요소에 이벤트 바인딩

yarn add react-table 로 react-table 설치yarn add @types/react-table 로 typescript 버전으로도 설치src 폴더 내 components란 폴더 생성해준다.테스트를 위해서 components 폴더 안에 더미데이터 파일

forEach Array의 prototype을 상속받은 객체가 사용할 수 있는 함수이다. 인자로 함수를 받아 각 배열의 요소에 해당 함수를 적용한다. 엄밀히 따지자면 반복문은 아니고, 함수이다. for ... in (객체 탐색) Object에 있는 key에 차례로 접

sort() sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 결과값이 좀 이상하다. 작은 수에서 큰 수로 이루어져야 하는거 아닌가? 상식적으로 생각한다면 작은 수에서 큰 수로 array가 정렬되어야 하는 것이 맞다. 하지만, sort

누가 URL을 통해 HTML을 요청하면 해당 HTML을 보여주는 간단한 프로그램React와 Node 서버 간에 데이터를 주고받기 위해서 필요한 모듈이며, Proxy는 대신이라는 사전적 의미를 가지고 있고 클라이언트와 서버 사이에 네트워크 통신을 대리로 수행하는 미들웨어

변수 선언할 때 원래는 var만 있었으나 ES6 부터 let과 const가 추가되었다. 쓰려고 보니 용어마다 미묘한 차이점이 있어 정리하고자 한다.var 변수는 중복해서 선언이 가능하다. 똑같은 변수명일 경우 마지막에 할당된 값이 저장된다.var 변수는 선언 및 초기화

position 속성은 CSS에서 문서 상에 요소를 배치하는 속성으로, static, relative, absolute, sticky, fixed 이렇게 총 5가지 값이 있다. 하나씩 소개해보도록 하겠다.요소를 일반적인 문서 흐름에 따라 배치한다. top, right,

this를 바깥에서 쓰거나 일반 함수 안에서 쓰면 Window {}를 호출한다. 함수나 변수를 전역 공간에서 만들면 Window {}라는 Object에 보관한다. 따라서, Window {}는 JavaScript의 기본 함수들 수납공간이라고 할 수 있다. 이러한 이유로,

먼저, 일반 함수를 만드는 방법은 두 가지가 있다. 첫번째는 다음과 같다.두번째는 다음과 같다.코드들을 기능으로 묶기 위해서소괄호에 뭔가 집어넣으면(input) return을 이용해 뭔가 뱉어내는(output) 기능 = 즉 입출력 기능을 만들기 위해서나중에 재사용 하기

ES6는 템플릿 리터럴(Template literal)이라고 불리는 새로운 문자열 표기법을 도입하였다. 이는 일반적인 홑따옴표, 쌍따옴표 사용 대신에 백틱(backtick) 문자 \` 을 사용한다. 일반적인 문자열에서 줄바꿈은 허용되지 않으며 공백(white-space

nvm 설치vi 에디터 열어줌원래 nvm install lts 먹어야 되는데 안 먹는 관계로 사이트 들어가서 lts 버전 확인해주고 직접 설치해야 함

function 활용법

function 활용법

기존 노드 다음에 새 노드를 하위 노드로 삽입하려면 다음 방법을 사용할 수 있다.먼저 기존 노드의 다음 형제 노드를 선택한다.그런 다음 기존 노드의 부모 노드를 선택하고 부모 노드에서 메서드를 호출하여 바로 형제 노드 앞에 새 노드를 삽입한다.다음과 같은 항목이 있다고

클래스 하나 추가 클래스 여러개 추가

사용법

이 코드는 객체 item 안에 있는 숫자 값들 중에서 가장 큰 값을 찾아내는 것입니다.먼저 list 변수에 item을 할당하고, Object.keys() 함수를 사용하여 list 객체 안에 있는 키(key) 값을 배열로 반환하여 keys 변수에 할당합니다.그리고 max

http://yoonbumtae.com/?p=2977

https://simpleicons.org/ 에서 아이콘 컬러와 로고를 받을 수 있다. 이걸 복사해서 <img src="https://img.shields.io/badge/보여지고자하는는이름-컬러코드?style=flat-square&logo=로고

CSS를 같은 폴더에 넣어두고 처리한다.

https://github.com/aaa/abc.git예) https://aaa.github.io/abc"react build 전package.json 에서 수정하고{ "homepage": "https://aaa.github.io/abc",