개몽가

JSX이란 ? 자바스크립트 확장문법이며 XML과 유사함 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환 ko.reactjs.org/docs/introducing-jsx.html#why-jsx JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org JSX 구조 리액트 프로젝트 생성 시, node_modules 디렉토리도 함께 생성됨. 이 디렉토리에 react모듈이 설치되어 위와 같이 import를 통해 리액트를 불러와서 사용가능함 JSX 코드 변환 1) JSX코드 2) 변환된 코드 JSX 기본문법 DOM요소 렌더링 1) 컴포넌트에 여러 요소 존재 시 반드시 부모..

현업에서 프론트엔드단에 로직이 많았지만, javascript와 jQuery로 DOM을 제어하고 상태값 관리를 하기 위해 코드가 난잡해지는 것을 경험한 뒤, 프론트엔드 프레임워크 또는 라이브러리 기술을 하나 공부하기로 마음먹었다. 리액트에서 velopert로 유명하신 김민준님의 '리액트를 다루는 기술' 책으로 예제를 하나씩 따라가면서 학습 한 뒤 토이 프로젝트를 진행할 예정이다. 그래서 학습해서 정리하는 글은 김민준님의 '리액트를 다루는 기술' 책의 내용에 기반한 것임! 먼저, 리액트 개념 및 등장배경, 추구하는 사상에 대해서 간단히 작성! [UI 프레임워크/라이브러리 등장 배경] 전체가 로드된 한 화면에서 사용자 이벤트 발생으로 서버에서 데이터를 가져와(ajax 방식 등) DOM 태그 일부분을 제어해야 ..

프로젝트에서 JavaScript에 함수를 하나 추가했는데 이상한 현상을 발견했다. var exam = function(){ ....}; 이런식으로 함수를 밑에다가 추가했고, 위의 또다른 함수에서 exam함수를 호출했다. 실행해보고 나니 화면이 멈췄고, console창에는 exam 함수를 찾을 수 없다는 오류가 났다. 주 언어가 Java이다 보니, public인 클래스 안의 어디에서나 만들고 호출해도 호출이 됐느데, JavaScript는 그렇지 않으니까 당황스러웠다... 구글링을 해보았고, 변수에 함수를 담는 것의 차이가 있다는 것을 알았다. 내가 만든 함수는 이름없는 함수 즉, 익명함수였고 익명함수를 사용하기 위해 exam 변수 함수를 넣어주는 작업을 했던 것이다. 자바처럼 함수를 만드는 것은 분명 함수..