본문 바로가기

전체 글

 (188)
React - 6 State [setState(), life cycle method] function component - 쉽게 말해 함수형태의 컴포넌트이다. function APP(){ } 이렇게 정의된 컴포넌트들은 전부 함수형 컴포넌트이다. return 형태로서 반환하고 스크린에 모양을 넘길수 있다. Class component - 클래스 형태의 컴포넌트이다. - return 형태가 없어도 된다. class App extends React.Component{ render(){ return I am a class component } } 이러한 형태로서 React.Component을 상속받는다. React.component는 render()함수를 갖고 있기 때문에 APP class도 render 함수를 사용할 수 있다. 그리고 render함수가 class안에 있다면 react는 자동적으..
ESLint 와 Prettier ESLint ESLint는 다양한 버전의 자바스크립트 문법을 잡아주는 확장 프로그램이다. VSCODE에서 사용가능하다. 재밌는 점은 코딩과정에서 여러가지 IDE에서 지원 할 것 같은 문법 체크를 해준다. 사실 React뿐만이 아니라 javascript로 사용되는 언어들은 전부 되는 것같다. Prettier - 아는 사람은 모두아는 코드 폼 펙터이다. - ctrl + s만 하면 알아서 코드가 보기 좋게 정렬된다. 혹은 몇까지 빠진 마침표나 사소한 문법실수들을 자동으로 보완해준다. 이 두개만있으면 사실 왠만한 IDE부럽지 않다. 이조합을 사용하기 위해서 VSCODE를 사용하는사람이 많을 거라고 생각한다. 매우 좋음 👍 가끔 두개가 안먹을 때가 있는데 그렇다면 위 사진에서Disable했다가 다시 Requrie..
WSL2 - 윈도우안에서 리눅스를?? 윈도우 visual studio에서 React를 공부하다가 여러 패키지를 설치 할때가 있다. npm i props-types라거나 npx 패키지 매니저라거나 등등.. 하지만 윈도우 cmd 명령어에서 설치하다보면 명령어가 안먹거나 안되거나.. 그리고 git으로 react -app을 올렸는데 clone 해서 다른 저장소에서 불러다 쓸때 npm start가 안된다. 아직까지 이유를 모르겠지만.. 리눅스라면 다를 까했다. 해서 원래는 듀얼부팅으로 우분투와 window를 같이 깔려고했다. 하지만 진짜 깔기전에 리눅스 체험판으로 쓰려고 했다. WSL은 윈도우가 윈도우 환경안에서 리눅스 환경을 구현하기 위해 만든 리눅스 환경의 POWERSHELL이다. 이러한 형태로서 윈도우 안에서 설정된 개발환경은 리눅스에서 동작하..
React - 5 [웹사이트에 동적 데이터 추가하기] 동적데이터 - 변화하는 데이터를 넣음으로서 웹페이지가 항상 같은 내용이 아닌 변화되는 데이터에 따라 달라지는 동적 변화가 일어나는 웹사이트를 만들수 있다. 웹사이트에 동적 데이터 추가하기 const onepiece = [ { name : "루피", image : "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.aladin.co.kr%2Fshop%2Fwproduct.aspx%3FItemId%3D218911203&psig=AOvVaw0g6yWi-7xweZ40-2DwCq0R&ust=1605342401333000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKjh786M_-wCFQAAAAAdAAAAABAD" }, { name : "상디"..
React - 4 [component 사용 , JSX] component - 기본적으로 component는 HTML을 반환하는 함수이다. - 아래 경우에서 "" 와 같은 형태를 component라고 한다. - component는 javascript로 HTML 형태를 반환한다. (JSX : javascript와 HTML의 조합) - React는 모든 부분이 component라고 생각하면 된다. JSX - html in javascript - React uses an HTML-in-JavaScript syntax called JSX (JavaScript and XML). Familiarity with both HTML and JavaScript will help you to learn JSX, and better identify whether bugs in yo..
React - 3 [React 구동원리] 기초 리액트 설명 강의 중에 간단히하기 위해서 이렇게 css파일들을 없애고 APP.js 와 index.js 파일의 코드 내용을 간소화 시켰습니다. 현재 동작중이지만 아무것도 안보입니다. App.js 코드를 위와 같이 바꾸면 웹을 재실행 하지 않아도 알아서 refresh해주며 값이 바뀝니다. 해당하는 div의 위치를 살펴보면 body안에 div id = "root" 인 박스안에 div가 들어있음을 알수 있다. 하지만 index.html을 들어가보면 그런 코드는 존재하지 않는다. 즉, react는 빈 웹페이지에서 돌아가는 즉시 필요한 모든 요소들을 구성해낸다. JS로 그러한 요소들을 만들고 html에 요소들을 밀어넣는다. react는 div id="root"라는 박스안에 모든것을 밀어넣는다. 보다 시피 Re..
React - 2 [create-react-app] npx create-react-app [project app name] - npx는 npm의 레지스트리 과정을 압축시켜주는 명령어인데, create-react-app 이라는 명령어 또한 마찬가지이다. 2016년도 이전에는 react앱을 만들기 위해서 다양한 과정을 겪어야 했다. react는 굉장히 멋진 코드를 만들어 냈지만 웹브라우저가 이를 이해하지 못했던 것으로 react코드를 webpack, babel 을 다운로드 해서 컴파일하고 다른파일에 넣고 과정이 길었다. 하지만 이러한 지저분한 과정을 단 하나의 명령어로 끝냈다. create-react-app 내가 앱을 만들 부모 디렉토리에서 위 명령어를 실행하면된다. 시간이 약간 소모가 된다. 시간이 걸린다음 react app이 성공했다는 소리가 들린다. 이..
React - 1 개발환경구성 [VScode, node js, npm, yarn, npx] React - JS 기반으로 돌아가는 라이브러리이다. 즉, js로 돌아가는 라이브러리 모음인 것이다. - 주로 사용자 인터페이스를 만드는 프론트 분야에서 쓰인다. - 사용자는 약 66퍼센트로서 매우 많은 서비스가 React로 만들어졌다. - React를 사용하면 js실력이 는다. React 개발환경 설정하기 React를 사용하기 전에 깔아야 하는 것들 있다. - node js window기반에서는 리눅스언어로 까는 게 편하기 때문에 git bash를 깔아서 설치하길 바란다. Node JS - 일종의 JS 런타임 구동 환경이다. 구글 Chrome V8버전 JS엔진을 사용하여 만들어졌으며 JS구동 플렛폼이라고 정의한다. JS로 돌아가는 구동 플렛폼이다. From. Wiki Node.js는 확장성 있는 네트워..

티스토리툴바