//log my lifestyle

React 완벽가이드 섹션4 - 리액트 State 및 이벤트 다루기 1. 이벤트 핸들러 써보기 const ExpenseItem =(props) => { function clickHandler(){ } // 함수로 쓰거나 const clickHandler = () => { // 화살표함수로 쓰거나 상관없음 console.log('clicked!') } return ( Change Title ); } 이벤트리스너를 추가할때 on으로 시작하는 props를 괄호안에 함수이름만 적어주면 된다. 함수이름뒤에 괄호를 추가하면 jsx코드가 리턴될때 코드가 실행된다. 그래서 함수만 지정하고 onClick을 위한 값으로 이 포인터를 전달하고 클릭할때 함수를 실행! 2. State 컴포넌트 함수는 처음 렌더링 된 이후로 다..

React 완벽가이드 섹션3 - 리액트 기초 및 실습 컴포넌트 1.리액트 - 컴포넌트란? 리액트는 사용자 인터페이스를 구축하는 자바스크립트 라이브러리 애플리케이션의 각 상태에 대한 간단한 뷰만 설계, React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링 리액트의 중요한개념은 컴포넌트 이고, 여기서 모든 UI는 컴포넌트로 구성되어 있다. - 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줌. - 재사용이 가능,코드를 우려사항을 분리 2.선언적 방식 html과 javascript를 결합한 방식으로 컴포넌트를 만든다. 리액트는 선언적 접근방식으로 작성한다. 리액트는 최종상태를 정의하고, 화면에 불러오기위한 지시사항들을 뒷단에 생성 - 명령형 접근방식(imperative appr..

React 완벽가이드 섹션2 - 자바스크립트 새로고침 udemy 강의 스타트 :) 섹션1은 강의OT로 기록은 따로 하지 않음 ​ 1. let & const let : 변수를 선언할때 사용 const : 상수(한번 지정하면 절대 변하지않는 값)를 선언할때 사용, 값 재할당 불가 var : 변수를 선언 (강의에서는 사용안함) 2.Arrow Function function printMyName(name) { console.log(name); } printMyname('Max'); // "Max" // 화살표 함수 const printMyName =(name) => { console.log(name); } printMyname('Max'); // "Max" 인자를 전달하지않으면 빈괄호쌍으로 입력 const pr..

AJAX (Asynchronous Javascript And Xml) 웹페이지에서 동적으로 서버에게 데이터를 주고받을수잇는 기술을 의미 대표적인 예로 XHR 오브젝트가있다. 브라우저 api에서제공하는 오브젝트로, 간단하게 서버에게 데이터를 요청하고받아올수있다. 장점 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다. 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있다. 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있다. 백그라운드 영역에서 서버로 데이터를 보낼 수 있다. 단점 Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없다. Ajax로는 바이너리 데이터를 보내거나 받을 수 ..

img태그와 CSS: background-image: url()의차이는뭘까? 두개를 반복해서 쓰다보니 쓰임새가 다를것같아 검색해보았다. 이미지첨부에도 여러경우가 있지만 크게 나누자면 콘텐츠의 기능인지, 심미적인 기능인지로 태그를 쓰는 용도를 구분할 수있다. 검색엔진에서 이미지를 인덱싱해야하는 경우 콘텐츠의 의미가 큰 경우 기능적디자인(카드,썸네일,프로필이미지, 클릭할수있는것) vs 사이트에 주로 사용되는 미적인 디자인 여부를 판단하여 전자일때 프린트필요한 경우 백그라운드 이미지는 출력시 포함안된다 background- image: url() 디자인에만 사용되는 이미지, 콘텐츠와 관련없는 경우 이미지 위에 마우스를 올려놓았을 때 이미지를 변경하고 싶을 때. (hover) 반복되는 이미지일때 -ex 아이콘 ..

Event mouse click 클릭할때 keyboard 키를 누를때 resizing window 화면사이즈 재조정할때 close window 화면을닫을때 page loading 페이지 로딩할때 form submission 양식을 제출할때 video is being played 영상이 재생될때 error 에러시 Bubbling 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. Capturing 이벤트가 하위 요소로 전파되는 단계를 말함 event.target 과 this의 차이 event.target은 실제 이벤트가 시작된 ‘타깃’ 요소 버블링이 진..