profile
정리하는 공간
post-thumbnail

CSS이벤트제어 pointer-events

pointer-events 는 CSS 속성 중에서 강제로 이벤트를 제어 할 수 있는 방법이다. 작업을 하다보면 z-index 우선순위가 높고낮음에 따라 마우스이벤트가 안먹을때가 있다. 이럴경우 z-index값을 각각 조정해도되지만, 이벤트를 주고싶지않은 항목에 poi

2022년 8월 3일
·
0개의 댓글
·
post-thumbnail

mac m1 홈브루로 깃설치

홈브루 접속터미널에 해당 코드 복붙/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"passward가 뜨면 해당컴퓨터 비밀번호 입력 후 엔터

2022년 7월 29일
·
0개의 댓글
·
post-thumbnail

특정문자를 Clipboard에 복사붙여넣기

입력이 가능한 element를 생성복사할 값을 변수에 넣는다.변수를 element.value에 담는다.body 에 element를 자식노드로 추가한다. (나중에 삭제할거라 body 가 아니여도됨)select() 후 execCommand("copy")로 복사한다.복사를

2022년 7월 21일
·
0개의 댓글
·
post-thumbnail

Grid

CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공한다. flex는 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아웃을 위해 CSS Grid를 사용한다. grid도 flex와 동일하게 container와 item으로 구분한다. cont

2022년 5월 8일
·
0개의 댓글
·
post-thumbnail

조건부렌더링

특정 조건이 참인지 거짓인지에 따라 다른 결과물을 렌더링하는것 렌더링이란, html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것이다. 삼항연산자 > 조건 ? true일때 : false일때 조건부렌더링은 보통 삼항연산자

2022년 4월 29일
·
0개의 댓글
·
post-thumbnail

내가 보려고 만든 CSS정리

css기본구조 selector(선택자) { property(속성) : value(값) } 선언 외부선언 `` 내부선언 `` css파일에서 css나 내부파일 불러올때 @import url(); 선택자 * 전체선택자 div 전역선택자 . 클래스선택자 # id선택자 E

2022년 4월 29일
·
0개의 댓글
·
post-thumbnail

props를 통해 컴포넌트에게 값 전달하기

props 는 properties의 줄임말이다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때 props를 사용한다. props 기본사용법 App.js hello.js name값을 입력한 후, 컴포넌트에 props를 매개변수로 넣어주고 {props.name}으로 사용

2022년 4월 27일
·
0개의 댓글
·
post-thumbnail

JSX 기본규칙

리액트 컴포넌트를 작성할때 지켜야 할 규칙에 대해 알아보자 JSX 는 리액트에서 생김새를 정의할 때 사용하는 문법이다. 얼핏보면 HTML 같이 생겼지만 실제로는 JavaScript 이다. 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel 이 JSX

2022년 4월 26일
·
0개의 댓글
·
post-thumbnail

React 컴포넌트 만들기

컴포넌트를 만드는 2가지 방법 1.함수형 컴포넌트 2.클래스로 컴포넌트만들기 일단 먼저 함수형 컴포넌트로 만들어보자 vscode에서 함수형 컴포넌트 만들기 vscode에서 해당파일 열기 src에 새파일 추가 hello.js Hello라는 간단한 컴포넌트를 만들어보

2022년 4월 26일
·
0개의 댓글
·
post-thumbnail

React 작업환경 구성하기

작업환경준비 우선 프로그램을 3개 설치해야함 (혹은codesandbox) Node.js : 브라우저환경이 아닌곳에서도 javascript를 실행할수있게해주는 javascript런타임 Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 를 기

2022년 4월 26일
·
0개의 댓글
·
post-thumbnail

React란?

리액트는 어쩌다 만들어졌을까? 기존에 js를 사용한 DOM변형을 하면 (이벤트핸들러로 DOM업데이트를하면) 유지보수하기가 어려운 코드가 만들어지기 쉽다. 어떠한 상태가 바뀌었을때 상태에따라 DOM을 어떻게 업데이트할지 규칙정하는게아니라 아예다 날리고 새로운걸 만들어

2022년 4월 26일
·
0개의 댓글
·
post-thumbnail

npm vs yarn

npm과 yarn은 자바스크립트 패키지매니저이다. 여기서 패키지란 npm에 업로드 된 모듈을 말한다. 다양한 자바스크립트 프로그램이 패키지라는 이름으로 npm에 등록되어 있고, 패키지가 다른 패키지를 사용할 경우 의존 관계를 가지기도 한다. 이러한 패키지들을 사용하기

2022년 4월 26일
·
0개의 댓글
·
post-thumbnail

NVM으로 Windows환경에서 Node버전 관리하기

NVM을 사용하여 Windows 환경에서도 Node.js의 버전을 관리하고, 개발 환경에 따라 Node.js 버전을 변경하는 방법을 배워보자. nvm이란? NVM은 Node Version Manager로 Node.js의 하나의 도구이며, 개발환경에 여러개의 Node

2022년 4월 21일
·
0개의 댓글
·
post-thumbnail

Node.js

Node.js란? 공식문서에는 이렇게 나와있다. >Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임입니다. 이는 늘 그렇듯 번지르르한 말뿐인것 찰떡같이 이해가 되진 않는다. Node.js는 서버가 아니다. Node.js

2022년 4월 20일
·
0개의 댓글
·
post-thumbnail

타이머

호출스케일링 함수를 명시적으로 호출하면 함수가 즉시 실행된다. 즉시 실행하지않고 일정시간이 경과된 후 호출하기 위해서는 타이머함수를 사용한다. 이를 호출 스케줄링(scheduling a call)이라고 한다. 타이머를 생성할 수 있는 타이머함수 setTimeout :

2022년 4월 5일
·
0개의 댓글
·
post-thumbnail

이벤트

만약 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임한다. 이 때 이벤트가 발생했을 때 호출 될 함수를 이벤트핸들러(event handler)라 하고, 이벤트가

2022년 3월 17일
·
0개의 댓글
·
post-thumbnail

DOM

DOM이란? DOM ( Document Object Model )은 HTML문서의 계층적구조와 정보를 표현하며 이를 제어할수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리자료구조다. 각기다른 문서(html,javascript등)를 제어할수있는 자료구조라고 생각하

2022년 3월 11일
·
0개의 댓글
·
post-thumbnail

브라우저의 렌더링 과정

브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 파싱 ( 해석 ) 하여 브라우저에 렌더링하는지 알아보자. 파싱 : 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것 렌더링 : HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에

2022년 3월 5일
·
0개의 댓글
·
post-thumbnail

비동기처리연습

JSONPlaceholder 에서 제공하는 todos 와 users 를 이용해 아래 사진과 같은 결과물을 만들 것이다. https://jsonplaceholder.typicode.com/todos https://jsonplaceholder.typicode.com/us

2022년 3월 4일
·
0개의 댓글
·
post-thumbnail

부트스트랩 콤포넌트 - 버튼

버튼태그는 <a> <button> <input> 요소에 버튼 클래스를 사용한다.간편하게 스타일 버튼을 만들기 위해 사용이 가능하다.다음과 같이 class = "btn btn-default" 이 부분을 바꿔주면 간단하게 사용 가능하다.기본값 : btn-d

2022년 2월 28일
·
0개의 댓글
·