분류 전체보기 (12) 썸네일형 리스트형 [React] #01 JSX 문법이란? React의 JSX에 대해서 정리해보았다 JSX는 React 공식 홈페이지에서는 아래와 같이 설명하고 있다. JSX는 JavaScript 새로운 문법이라고 생각하는게 심플하다 기본적으로 "Component" 를 담고 있다 파일 확장자가 *.JSX지만 *.JS그대로 사용하기도 한다. 기본적인 문법으로는 변수안에 HTML 코드를 넣어보자 const element = Hello, world!; 이제 위의 문법을 render()를 통해서 DOM Node에 추가한다 브라우저는 JSX를 모른다 JavaScript를 구문으로 React에서 트랜스파일하여 보여준다고 한다 const element = Hello React; ReactDOM.render( element, document.getElementById('roo.. Javascript 안드로이드 회전 이슈 문제 Frontend 에서 안드로이드로 이미지 첨부하고 미리보기를 만들었을때 회전되어서 나오는 이슈가 있다. 해당 부분을 수정하는 방법에 대해서 적어본다 작업 환경은 Chrome / Jquery 사용했다 태그를 HTML 입력하면 간단하게 파일을 첨부할수 있다. 하지만 미리보기는 볼수 없다 이미지 미리보기 코드를 잡아줘야 한다. 먼저 태그를 감지하자 document.getElementById('imageFileList').addEventListener('change',function(){ let files = this.files; }); files변수를 consle.log로 보면 삽입된 파일 리스트를 확인할수 있다. input type="file" ReadOnly다 임의로 수정할 수 없다. files를 Arra.. [React] #00 시작하기전 React 스터디를 시작하기 전 알아야 할 것들은 정리해 보았다 이 글은 굉장히 주관적인 글이다 React는 Front 영역에서 DOM 조작을 보다 용이하게 해준다고 생각이 든다.Frontend 개발은 DOM 조작이 필수적으로 들어간다. React는 단순히 View 컨트롤만 한다고 생각할 수 있지만 그것만으로도 엄청난 개발 효과를 낼 수 있다. React 공식 홈페이지에서는 아래와 같이 설명한다 React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. HTML 삽입 Javascript의 DOM 조작 대해서 먼저 간단하게 확인해보자 const text = '.. React Typescript Webpack 세팅 React와 Typescript Webpack SCSS 를 유연하게 사용하기 위해 프론트 세팅을 해보자 기본적으로 작업하기 위한 세팅을 정리했다 물론 편한 CRA가 있지만 작업하다 보면 프로젝트 성격에 맞게 세팅을 해야하는 경우가 있다 npm install -g create-react-app create-react-app react-test cd react-test 터미널에서 npm start 실행 우선 폴더 구조를 먼저 잡아보자 dist : Webpack에서 빌드가 되면 모아지는 폴더 src : JS, SCSS 작업파일 public : 기본 html server : 백엔드 작업 파일 및 기본 서버 폴더 기본 서버는 Node + Express 로 작업을 했다 먼저 작업할 폴더의 package.json 파.. 이전 1 2 다음
