당 떨어질 땐 초코딩

Hooks : 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 하게 해 줌 - useState : 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줌 - useEffect : 리액트 컴포넌트가 랜더링 될 때마다 특정 작업을 수행하도록 설정할 수 있게 해줌 -> componentDidMount + componentDidUpdate - useConext : 함수형 컴포넌트에서 Context를 보다 쉽게 사용 가능 - useReducer : useState보다 컴포넌트에서 더 다양한 상황에 따라 다양한 상태를 다른 값으로 업데이트 할 때 사용 - useMemo : 함수형 컴포넌트 내부에서 발행하는 연산을 최적화 할 수 있게 해줌 - useCallback : 이벤트 핸들러 함수를 필요할 때만..

Snapshot Docs Jest · 🃏 Delightful JavaScript Testing 🃏 Delightful JavaScript Testing jestjs.io Snapshot Test : UI가 의도치 않게 변하는것을 막기위해 사용할 때 유용함 - 두개의 snapshot을 비교를 하는데, 맞지 않으면 Fail이 뜨기 때문에 의도치 않은 변경이 일어나는 것을 방지함 React에서의 활용 - 전체 App을 구성하는 UI를 랜더링 하는 대신, 테스트 랜더링을 통해 React tree에 대한 일련의 값들을 빨리 생성 가능 - react-test.js import React from 'react'; import Link from '../Link.react'; import renderer from 're..

Router (경로기) 설치 npm install react-router-dom npm install query-string BrowserRouter : 라우터 장비로 사용하겠다고 선언 - 'App를 라우터로 사용한다' import React, { Component } from 'react'; import { BrowserRouter } from 'react-router-dom'; class Root extends Component { render() { return ( ); } }; const App = () => { return ( 안녕 난 App야 ); }; export default Root; Route : 경로 매핑 - exact : 정확하게 주소가 매칭이 될 때 컴포넌트를 가져오게 함 - :p..

HTML : Hyper Text Markup Language - HyperText : 웹페이지를 이동할 수 있도록 만들어진 문장 CSS : Cascading Style Sheet - HTML 문서의 모든 요소에 대해 스타일을 적용할 수 있는 표준 규격 - 디자인을 목적으로 쓰임 - 편리성, 일관성 제공 Java Script : 객체 기반의 스크립트 언어 - 장점 : DOM 탐색 등 문법이 간단하고, 여러 브라우저에서 같은 결과물을 내줌 - 단점 : 새로운 API를 배워야하는 부담감이 있음 jQuery : 자바스크립트 라이브러리 - 웹 사이트에서 자바스크립트를 사용하는 것이 훨씬 쉬워지도록 하는 것 Java Script ES6 : ECMAScript version6 Type Script : 자바스크립트의 ..

Component Component 파일 안에서 선언한 다른 Component를 import / export - class 앞에 export 키워드 작성 - Bpp.js 안에 Cpp.js, Dpp.js 선언 import React, { Component } from 'react'; class Bpp extends Component { render() { return ( Bpp ); } } // 다른 파일에서 Bpp안에 있는 Cpp를 사용하고 싶을 때, 앞에 export 작성 // 아니면 'Cpp' is not exported from './components/bpp.js' 오류 뜸 export class Cpp extends Component { render() { return ( Cpp ); } } e..

컴포넌트 스타일링 방법 1. CSS Module : CSS를 모듈화하여 사용하는 방식 - 고유한 클래스네임을 생성하여 스코프를 지역적으로 제안하는 방식 - classnames 라이브러리를 사용하면 더욱 편지 지정 가능 classNames - 설치 yarn add classnames - bind 기능 : 클래스네임을 입력할 때 styles. 생략 가능 import React from 'react'; import classNames from 'classnames/bind'; import styles from './App.css'; const cx = classNames.bind(styles); function App() { return ( ); } export default App; 2. Sass (Synt..

함수형 컴포넌트 class 문법 사용 - 컴포넌트에서 라이프사이클 API나 state를 사용할 때 사용하는 형식 import React, {Component} from 'react'; class Hello extends Component { state = { name: "Hello" } render(){ return( Hello {this.props.name} ); } } export default Hello; 함수형 컴포넌트 - 오로지 props를 전달받아 뷰를 랜더링하는 역할만 수행 mport React from 'react'; function Hello(props){ return( Hello {props.name} ) } export default Hello; - ES6의 화살표 함수와 비구조화 할..

Life Cycle - 컴포넌트 상태에 변화가 있을 때 마다 실행하는 메소드 - Third Party 라이브러리를 사용하거나, DOM을 직접 건드려야 하는 상황에서 유용 1. 마운트 : DOM이 생성되고 웹 브라우저상에 나타내는 것 constructor 메소드 - 컴포넌트의 생성자 메소드로 컴포넌트를 만들 대 처음으로 실행 - 초기 state 정의 getDerivedStateFromProps( ) - props에 있는 값을 state에 동기화하는 메소드 - 컴포넌트를 마운트하거나 props를 변경할 때 호출 render( ) 함수 - 컴포넌트 모양새 정의 - this.props와 this.state에 접근 가능 - 리액트 요소 반환 (아무것도 보여주지 않고싶으면 null값이나 false값 반환) - 절대..

속성 window.name : 창의 이름에 접근할 수 있는 객체 속성 window.history : 현재 창에서 열었던 URL을 저장 window.document : 현재 문서의 내용을 가리킴 window.onfocus : 클릭이나 키보드 입력, 기타 사용자가 입력하는 행위를 감지 window.onblur : 현재 창이 포커스를 잃었음을 감지 window.onblur = blurResponse; function blurResponse(){ //함수 정의 } 메소드 window.setTimeout( ) : 함수나 문장을 실행하기 전에 일정 시간 기다리도록 함 setTimeout(myFunction, 4000); window.clearTimeout( ) : 기다리도록 예약한 타이머를 취소할 때 사용 wind..

내장 이펙트 : 요소의 CSS 속성을 변화시키면서 움직이게 만듦 .hide( ) : 선택한 요소의 display 속성을 none으로 바꾸고 레이아웃에서 없앰 .show( ) : 선택한 요소의 display 속성을 바꿔서 보이게 만듦 .toggle( ) : 요소가 숨겨진 상태라면 그 요소를 보이게 만들고, 보이는 상태면 숨김 .fadeIn( ) : 선택한 요소의 CSS opacity(불투명도) 속성을 0에서 100으로 바꿈 .fadeTo( ) : 요소를 지정한 불투명도 퍼센트까지 애니메이트 가능 .fadeOut( ) : 선택한 요소의 CSS opacity(불투명도) 속성을 100에서 0으로 바꿈 요소가 보이지는 않지만 그 자리는 유지됨 .slideUp( ) : DOM이 선택한 요소의 높이를 0으로 바꾼 다..

DOM TREE 이동 메소드 .parent( ) : 해당 요소 위에 있는 요소 선택 $('p').parent() //body .children( ) : 해당 요소 아래에 있는 요소 선택 $('ul').children() //li .prev( ) : 해당 요소 왼쪽에 있는 형제 요소 선택 $('p').prev() //h1 .next( ) : 해동 요소 오른쪽에 있는 형제 요서 선택 $('title').next() //meta 메소드 체인 사용 - 더 높이, 더 낮게, 더 깊이 이동할 때 사용 - 더 효율적으로 이동하고 수정 가능 - 메소드를 추가하너가 여러개를 조합하여 사용 가능 $('a').parent().parent() //body $('title').parent().next(.parent() //ht..

타이포그래피 : 활자 서체의 배열, 즉 글자를 활용한 모든 디자인을 가리키는 말 폰트 : 문자와 숫자, 특수 기호 및 서체와 굵기 등이 완벽하게 구현된 글자 디자인 모음 사용 이유 1. 크기와 색상 조절이 자유로움 2. 읽기 쉬움 - '나눔고딕' 폰트를 많이 사용 구글 웹 폰트 - 자세한 사용방법 : https://cho-coding.tistory.com/171 [CSS] FONT - 글꼴 font-family : 글꼴 지정 - 두 개 이상의 글꼴 이름윽ㄹ 지정할 때에는 쉼표(,)로 구분 body { font-family : "맑은 고딕", 돋움, 굴림 } 위와 같을 때, 맑은 고딕이 없으면 돋움을, 돋움이 없으면 굴림을 적용하.. cho-coding.tistory.com 빅 타이포그래피 : 방문자의 시..

One Page Site 원 페이지 사이트 : 웹 사이트를 한 페이지로 만드는 것 - 한 페이지 안에 모든 내용이 다 들어있기 때문에 따로 메뉴를 선택하지 않아도 화면을 스크롤하면서 내용을 볼 수 있음 - 스크롤을 할 때 마다 새로운 내용을 볼 수 있으므로 사용자의 호기심을 자극할 수 있음 - 예시 : http://thus.co.kr/ https://datacenter.navercorp.com/ko/index.html 데이터센터 ‘각’ 2013년도 전력 사용량 15,933MWh 2014년도 전력 사용량 52,718MWh 2015년도 전력 사용량 72,629MWh 2016년도 전력 사용량 84,317MWh 2017년도 전력 사용량 105,948MWh 2018년도 전력 사용량 139,109MWh 데이터센터 ..

풀 스크린 배경 : 이미지나 동영상을 화면 전체에 가득 채워서 풀 스크린으로 보여주는 기법 - 사이트에 접속하자마자 방문자의 시선을 한눈에 사로잡을 수 있음 - 주로 원 페이지 사이트에서 주로 사용하지만, 첫 화면에만 사용할 수 있음 기대 효과 - 기존 사이트를 그대로 사용하면서도 사이트 방문자들에게 사이트의 주제나 분위기를 단번에 전달함 장점 - 내용이 한 화면씩 바뀌는 경우에 적합 - 바뀌는 화면마다 풀 스크린 배경을 사용하면 더욱 효과적 단점 - 처음 사이트를 로딩하는 데 어느 정도 시간이 걸림 - 사용자들이 많거나 모던 브라우저 사용자들이 많이 접속한다면 풀 스크린 배경 사용을 자제하는것이 좋음 - 화면에 표시할 내용이 많은 경우에도 풀 스크린 배경은 적합하지 않음 풀 스크린 배경 : 이미지 - ..

카드 UI : 담고 있는 정보의 양에 따라 자유롭게 크기가 조절되는 카드 형태 - 사용자들이 콘텐츠에 집중할 수 있도록 초점을 맞춘 디자인 방식 - 단조로운 화면 구성을 개선할 수 있는 디자인 - 보통 한 화면에 여러 개의 카드가 표시되기 때문에 카드에 테두리를 둘러 콘텐츠를 감싸거나 색상을 달리함 - 대표적인 예시 : https://www.pinterest.co.kr/ Pinterest - 핀터레스트 계정을 만들거나 Pinterest에 로그인하세요. 레시피, 집 꾸미기 아이디어, 스타일 관련 아이디어 등 시도해 볼 만한 다른 아이디어를 찾아보세요. www.pinterest.co.kr 기대효과 - 선과 카드 색상, 배경 색상이 확실하게 구분되고 콘텐츠에 신경을 집중할 수 있음 - 사용자가 콘텐츠 정보를 ..

이벤트 : 페이지에서 어떤 일이 일어 났을 때 코드를 실행하는 매커니즘 - 이벤트가 일어났을 때 실행되는 코드가 함수인데, 이를 사용하면 jQuery를 더 효율적으로 만들고 코드 재활용 가능 bind : 이벤트 묶기 - 이벤트 리스너는 자바스크립트 해석기에 어떤 함수를 넘겨줘야 할지 알게 됨 - .bind( ) 메소드 사용 1. 단축 메소드 - DOM 요소가 이미 존재 할 때만 사용 가능 $("#myElement").click(function() { alert($(this).text()); } 2. DOM 요소를 새로 만들었을 때처럼, 페이지를 불러온 뒤에 추가된 요소에도 이벤트 리스너 등록 가능 $("#myElement").bind("click", function() { alert($(this).tex..

플랫 디자인 : 웹 요소에서 입체감을 주는 효과들을 제고하고 단순하게 표현하는 기법 - '평평'하고 '납작'한 디자인 - 납작하다 : 깊이를 제거해 입체감을 없앴다는 의미 #깊이 : 그림자와 경사, 그라데이션 등 웹 요소를 입체적으로 보이기 위해 사용하는 여러가지 효과 장점 - 사용자의 시선을 분산시킬 수 있는 복잡한 요소들을 빼고, 중요한 것만 남기기 때문에 콘텐츠에 집중할 수 있음 직관성 - 디자인적인 부연 설명을 하지 않아도 사용자가 직관적으로 이해해서 클릭하거나 탭할 수 있도록 유도 - 화려하게 보이기 위한 그림자나 입체적으로 보이기 위한 깊이, 반사 효과 등의 추가적은 효과들은 배제 - 단순히 사각 형태로 삽입하거나 텍스트와 이미지를 같이 겹쳐놓는 오버레이 형태로 배치에 시각적인 효과를 줌 - ..

유동형 패턴 - 모바일 화면을 제외한 대부분의 화면 사이트의 레이아웃을 그대로 유지하면서 브라우저 창 너비에 따라 콘텐트의 크기만 조절 - 아주 큰 화면에서는 콘텐츠 영역의 넓이를 일정하게 유지하기 위해 좌우여백을 남겨둠 - 모바일 화면에서는 콘텐츠가 수직으로 쌓여 표시 - 레이아웃이 똑같이 유지되면서 화면 안의 이미지나 동영상 등의 콘텐츠 크기가 달라짐 칼럼 드롭 패턴 - 여러 칼럼으로 구성된 레이아웃에서 흔히 사용하는 패턴 - 화면 넓이가 좁아지면 칼럼들이 아래로 떨어지도록 구성 - 모바일 기기 화면 크기가 되면 모든 칼럼이 하나씩 수직으로 배치 - 화면 넓이를 줄였을 때, 화면을 벗어나는 콘텐츠 칼럼이 라래로 옮겨지면서 레이아웃이 바뀜 레이아웃 이동 패턴 - 칼럼 드롭 패턴과 유사하게 화면 크기에 ..

객체 : 데이터명과 값을 설정하여 저장할 때 사용 { 데이터명1 : 값1, 데이터명2 : 값2, 데이터명3 : 값3 } 변수 : 하나의 데이터를 저장 var 변수명 = 데이터; - 프로그램에서 데이터를 유지 - 메소드 밖에서는 사용 불가 배열 : 데이터를 순차적으로 저장 var 변수명 = [ 데이터1, 데이터2, 데이터3 ]; - 객체 선언 방법과 비슷하지만 '데이터명'을 지정하지 않는다는 차이 this : 데이터 수집 전용 변수 - this에 저장되는 데이터는 JavaScript의 실행 내용에 따라 자동으로 변환 - 사용 이유 1. 처리 성능 향상 2. 같은 코드 여러번 사용 가능 3. $( ) 함수에 여러 선택자를 지정한 경우, 처리 시점을 나눌 수 있음 - on( ) 메소드안에서 this를 지정하면..

animate( ) : 처리 대상에 애니메이션 효과를 줄 때 사용하는 메소드 .anmaite({ /* 첫 번째 매개 변수 */ 'CSS 속성 1' : '값 1', 'CSS 속성 2' : '값 2', 'CSS 속성 3' : '값 3' }, /* 애니메이션 실행 시간 */, /* 이징 종류 */, function() { //이벤트 } ); - 첫 번째 매개 변수 : 애니메이션 효과 실행 완료 시, 외형을 표현하는 CSS 속성과 값을 전달 - 애니메이션 실행 시간 : 얼마만큼 시간이 지난 후에 애니메이션 효과를 적용하는지 지정 - 이징 종류 : 애니메이션 효과의 변화 속도 - linear : 같은 속도, 완급 조절 없이 일정한 속도로 움직임 - swing : 가벼운 완급 조절, 애니메이션 효과의 속도가 약간 ..

on( ) : 특정 사건이 발생하는 시점에 실행할 명령을 설정하는 메소드 - on( ) 메소드의 첫 번째 매개변수는 이벤트 타입을, 두 번째 매개 변수는 이벤트 핸들러를 전달 on('이벤트 타입' . '이벤트 핸들러'); - 이벤트 : 특정 사건 - 이벤트 타입 : 이벤트 유형 - 이벤트 핸들러: 실행하려는 명령(함수) 주요 이벤트 타입 이벤트 타입 해당 시점 mouseover 요소에 마우스 포인터를 올려놓았을 때 mouseout 요소에서 마우스 포인터가 벗어날 때 mousedown 요소에 마우스 포인터를 올려놓은 상태에서 해당 요소를 클릭할 때 mouseup 요소에 마우스 포인터를 올려놓은 상태에서 해당 요소를 클릭했다가 땔 때 mousemove 요소 안에서 마우스 포인터를 움직일 대 click 요소를..

CSS 스타일 변경 $(function(){ $('선택자').css('속성', '값'); } - 선택자 : CSS와 같은 선택자를 지정 - 속성 : CSS 속성 지정 - 값 : 속성에 설정할 값을 지정 - 명령 대상 : $('선택자') - 명령 내용 : css('속성', '값') -> '명령대상에 명령 내용을 보낸다' 라고 해석 명령 대상 id="hello" //HTML $('#hello') // jQuery - css( ) 메소드의 명령 대상이 되는 것은 id의 값이 정의된 HTML 요소 - $( ) 의미 : 'HTML 요소를 기반에 두고 jQuery의 고유 요소를 생성한다' - jQuery 객체 : $( ) 함수를 통해 jQuery 고유의 형식으로 변횐된 요소 명령 내용 - 의미 : CSS의 '속성'..

플렉서블 박스 레이아웃 : 그리드 레이아웃을 기본으로 해 플렉스 박스를 원하는 위치에 배치 display : 플렉스 컨테이너 지정 - flex 속성 : 플렉스 박스를 박스 레벨 요소로 정의 - inline-flex 속성 : 플렉스 박스를 인라인 레벨 요소로 정의 flex-direction : 플렉스 방향 지정 속성 값 설명 row 주축을 가로로 교차축을 세로로 지정 플렉스 항목은 주축 시작점에서 끝점으로(왼쪽에서 오른쪽으로) 배치 row-inverse 주축을 가로로 교차축을 세로로 지정 플렉스 항목은 주축 끝점에서 시작점으로(오른쪽에서 왼쪽으로) 배치 column 주축을 세로로 교차축을 가로로 지정 플렉스 항목은 주축 시작점에서 끝점으로(위쪽에서 아래쪽으로) 배치 column-inverse 주축을 세로로..

@keyframes : 애니메이션 지점 설정 - 브라우저 접두사를 붙여서 사용 @keyframes { { } } animation-name : 애니메이션 이름 지정 animation-name : | none animation-duration : 애니메이션 실행 시간 설정 animation-direction : 애니메이션 방향 지정 - normal 속성 : 애니메이션을 끝까지 실행하면 원래 있던 위치로 돌아감 - alternate 속성 : 애니메이션을 끝까지 실행하면 왔던 방향으로 되돌아가면서 애니메이션을 실행 animation-iteration-count : 반복 횟수 지정 animation-iteration-count : | infinite - : 입력한 숫자만큼 반복 (기본 값은 1) - infini..