너구리의 IT일기

Context context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있습니다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다. 언제 context를 써야하는가? context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다. 그러한 데이..

공식 문서를 보는이유 라이브러리는 만드는 사람이 있다. 그들이 만든 목적과 도구의 사용법을 정리해뒀다. 책에서도 거의 공식문서의 내용을 담는다. (새로운 기술/ 언어에 대한 첫 한국어 책의 경우 대부분임) 친절 할 수도있고, 친절하지않을수도 있다. 한국어 번역이 있을수도있고 없을 수도 있다. Tutorial이 있을수도 있고 없을 수도 있다. 리액트는 친절하고 한국어 번역도 많이 있고 tutorial도 있다. 공식문서를 보는 이유와 방법 이미 여러차례 봐왔는데 MDN과 React Documnet 제각각의 흐름이 있다. 공식문서를 보는 방법은 목적에 따라 나뉜다. 바로 써보는 것과 이해해보는것 써보기만하고 이해하지 않을 수 있다. 써보지않고 이해만 해볼 수도 있다. 써보면서 이해 할수도있다. 이해먼저하고 써..

02JSXBabel 03멀티Element 05js와jsx 06중간복습 08리랜더링 09리랜더링 10이벤트핸들러 the time is? 11이벤트핸들러2 12중간복습 13컴포넌트 14컴포넌트 사이드이펙트 15커스텀훅만들기 16hookflow 17hookflow2

getType.js export default function getType(data){ return Object.prototype.toString.call(data).slice(8,-1); //slice는 대괄호가 들어가게하는것이고 8은 앞에 대괄호를,-1은 뒤에 대괄호를 없앤다 } /*default(기본적인) export(내보내기)해서 getType라는 함수를 밖으로 내보낼수있게 만듦 */ 02데이터타입확인하기 import getType from './getType' console.log(typeof 'hello world'); //string console.log(typeof 123); //number console.log(typeof true); //boolean console.log(typeof..

Starbucks meta는 카카오톡같은 메신저에 공유할때 밑에 나타나는 오픈그래프 오픈그래프 1.웹사이트 2.사이트이름 3.title 4.설명 5.이미지 6.사이트주소 파비콘은 image폴더가 아닌 index.html과 같은 위치에 있어야한다. reset.css 폰트 meterial gsap & scrollToPlugin lodash swiper scrollMagic header Sign In My Starbucks Customer Service & Ideas Find a Store search COFFEE 커피 스타벅스 원두 스타벅스 비아 스타벅스 오리가미 에스프레소 음료 도피오 에스프레소 마키아또 아메리카노 마키아또 카푸치노 라떼 모카 리스트레또 비안코 커피 이야기 스타벅스 로스트 스팩트럼 최상의 ..

The quick brown fox 이문장을 카멜표기법으로 작성하시오 -theQuickBrownFox let fruit = [’apple’, ‘banana’, ‘cherry’]; 위데이터를 활용해 banana를 출력하시오 console.log(fruit[1]); bolean에서 거짓은 ? false let obj = {abc:123); console.log(obj.xyz); 위코드를 통해 콘솔 출력될 값(데이터)는? -undefined 값(데이터) 을 재할당할 수 없는 변수 선언 키워드는? const 함수에서 값(데이터)을 반환하기 위해 사용하는 키워드는? return sum(2,4); 위 함수 호출에서 2,4를 무엇이라 하는가? 인수 function sum(a,b){ return a+b; } 위 함수 ..

2주차 박스모델 html의 기본요소를 만드는데 사용 내부, 외부여백 박스제어 가로 세로가 있는 사각형 글꼴, 문자 글꼴의 크기나 두께 제어 배경 배경에는 이미지를 삽입하거나 색깔을 넣을수 있다 배치 원하는 위치에 가져다 놓을수 있다. 플렉스 일반적으로 위에서 아래에서 쌓이는 특성을 가졋지만 여러 요소를 수평요소로 정렬할때 사용 전환 요소의 전,후상태의 중간을 애니메이션으로 바꿈 변환 2d,3d 변환이 있다, 회전 원근법등의 변화를 구현할수있다. 띄움 요소를 공중으로 띄운다 책에 있는 사진이있고 문단이있는 ex)뉴스기사등 애니메이션 복잡한 애니메이션이 필요할 경우 전환보다는 애니메이션이 적합 그리드 행과 열의 2차열의 레이아웃을 필요할때 사용 다단 신문, 뉴스기사의 글자가 많은 컨텐츠에 사용 필터 흐림처리..

1주차 강의 05 웹 이미지 비트맵(bitmap), 벡터(vector) 비트맵 - Raster(.jpeg, .gif , .png) :픽셀이 모여 만들어진 정보의 집합, 레스터(Raster)이미지라고도 부름) -확대/축소시 계단 현상 , 품질저하(찌그러짐) -정교하고 다양한 색상을 자연스럽게 표현(대부분의 사진) -수학적으로 계산해서 출력하게되면 용량이 굉장히 커짐 벡터 - Vector(.svg) :점,선,면의 위치(좌표), 색상 등 수학적 정보의 형태(shape)로 이루어진 이미지 -확대/축소에서 자유로움, 용량변화가 없음 -정교한이미지(인물, 풍경 사진같은)를 표현하기 어려움 -단순구조 아이콘, 로고등이 관리하기 용이 SVG는 마크업언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷 -해상도의 ..

제목 : 이미지에 마우스 오버시 확대 transform: scale(1.1, 1.1)은 이미지에 마우스 커서를 올리면, 가로로 1.5배 그리고 세로로 1.5배 확대한다. transition-duration: 1s은 1초에 걸쳐서 확대한다. (.post img:hover) transition-duration: 1s은 마우스 커서가 떠나면, 1초에 걸쳐서 원래대로 되돌린다.(.post img) overflow: hidden은 정해진 영역 안에서 확대되도록 한다.

//스크롤 페이지 이동 var currentScroll = 0; var tim; window.onload = function () { var box = document.getElementsByClassName('page');// box클래스 개수만큼 실행 for (var i = 0; i < box.length; i++) { box[i].addEventListener("mousewheel", MouseWheelHandler, false); box[i].addEventListener("DOMMouseScroll", MouseWheelHandler, true); } } function MouseWheelHandler(e) { e.preventDefault(); var delta = 0; if (!e) {e =..