//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..

이미 유명한 핀터레스트,드리블,비핸스는 제외하고 웹디자인할때 유용했던 사이트들을 링크했다. 심미적인 경험을 좋아해서 코딩이나 디자인이 잘 안풀릴때도 사이트에 여러 창의적인 작품을 볼때마다 영감을 받았다. 다시 전진할 의지가 생긴다고할까 많이보면서 감각을 쌓는게 중요!! 😎💻 색상 https://2colors.colorion.co 두개의 컬러조합을 참고할때 보기좋은 사이트. 컬러감을 직관적으로 확인할수있어 자주 봤던 사이트 Two Color Combinations Two color combination palettes 2colors.colorion.co https://color.adobe.com/ko/create/color-wheel 어도비에서 제공하는 컬러휠 사이트 https://color.adobe.c..

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

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