개발지식

[Error] Expected an assignment or function call and instead saw an expression

{ e.key === "Enter" ? handleSubmit : null; }} onChange={(e) => { setContent(e.target.value); }} /> input에서 엔터를 누르면 이벤트를 주고 싶어 코드를 작성하던 도중 에러가 발생하였다. 에러가 발생한 이유 화살표 함수 메서드를 사용할 때의 주의사항을 지키지 않아서 발생했다. return 을 꼭 적어주자 // 사용 1 () => {return something}; // {} 제외 () => (something); 추가로 mdn에서 화살표 함수 사용 방법이다. var elements = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium' ]; // 이 문장은 배열을 반환함: [8, 6, 7, 9]..

JSX가 뭐야

JSX는 React.createElement(component, props, ...chilred) 함수에 대한 문법적으로 도와줄 뿐 이다. JSX 타입 1. JSX 타입을 위한 점 표기법 사용 import React from 'react'; const MyComponents = { DatePicker: function DatePicker(props) { return Imagine a {props.color} datepicker here.; } } function BlueDatePicker() { return ; } 만약 하나의 모듈에서 여러 개의 컴포넌트들을 export한 경우 점 표기법을 편리하게 사용할 수 있다. 2.사용자 정의 컴포넌트는 반드시 대문자로 시작해야한다. 소문자로 시작하는..

nvm 설치 (Node.js 버전관리) [for mac]

nvm Node.js 의 버전을 편하게 관리할 수 있게 해주는 도구입니다. 설치하기 1. curl을 설치해줍니다. $ sudo apt-get install -y curl2. curl 명령어를 이용하여 nvm 설치 스크립트를 다운받아 설치합니다. $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash3. nvm 스크립트를 사용하기 위해 .bashrc 파일을 수정한 값을 적용되도록 합니다. $ source ~/.bashrc4. 설치 가능한 노드 버전을 조회하며 설치 확인! $ nvm list-remote

왜 리액트를 사용할까?

1. 컴포넌트화 방식 컴포넌트화 방식을 사용하며 중복되는 코드를 줄여 유지보수가 용이해진다. 2. 선언형 프로그래밍 대표적인 명령형 프로그래밍의 예시로 jQuery 선언형 프로그래밍 예시는 리액트 명령형 프로그래밍은 절차를 하나하나 다 나열해야하지만 선언형 프로그래밍은 목적을 바로 말한다. 명령형 프로그래밍은 과정에 집중한다면 선언형 프로그래밍은 무엇에 집중여 프로그래밍 하는 것을 말한다. 3. Virtual DOM 브라우저가 DOM의 상태가 변경될대마다 전체를 바꾸는 것은 많은 자원을 낭비하는 일이다. 이를 리액트는 virtual DOM을 이용해 이를 해결했다. 가상의 DOM에서 업데이트할 수 있는 부분을 모아서 한번에 리렌더링한다. 이는 다섯번 업데이트(리렌더링)할 것을 한번으로 줄여준다.

[CSS] 모양바꾸기! - transtion, animation

html 요소의 모양을 바꿔보자. See the Pen 애니메이션 by jw (@jinux) on CodePen. /* 입력한 각도만큼 회전, 음수 가능 */ transform: rotate(30deg); /* width 2배, heigth 3배 */ transform: scale(2,3); /* x,y축 기준 각도 비틂 */ transform: skew(10deg,20deg); /* 좌표 변경 */ transform: translate(100px, 200px); transform은 css3의 최신 언어이므로 구형 브라우저에 지원을 하고 싶다면 prefix를 붙여줘야한다. /* prefix 접두사 필요할 경우 */ /* -webkit- 크롬, 사파리*/ /* -moz- 파이어폭스*/ /* -ms- 익스플..