728x90 반응형 인강\개인공부22 [React] 실전 리액트 들어가기 전 , 기본 javascript 문법 es6(ecmascript) 😎리액트란? React 는 UI 를 구현하는 JavaScript 라이브러리 웹 앱(Web App) 또는 네이티브 앱(Native App) 유지보수를 쉽게 , DOM 관리 성능최적화 쉽게 컴포넌트에 집중 대부분 공식 라이브러리가 없음 (높은 자유도) 자바스크립트 친화적 es6 기반로 배우기가 쉽다 😎react 진도 리액트에 필요한 자바스크립트 리액트 작성법 ( state , props ) hooks - useState / useRef / useEffect 스타일 :sass , styeld-component 리액트에서 ajax 요청방법 ( axios / Fetch ) 성능관련 : useMemo / useCallback 상태분리 useReducer Single Page Application: spa -.. 2021. 11. 15. VS Code - 저장 시 자동 줄 정렬 끄기 다른곳에서 소스를 받아와서 복사 후 붙여넣기만 하면 VS CODE가 자동으로 줄 정렬을 해주는데, 이 기능이 굉장히 좋을 때도 있지만 불편하게 만드는 경우도 있다. 예를들면 css는 개인적으로 한줄로 쭉 작성하는것을 선호하는 편이지만 VS CODE에 넣기만 하면 자동으로 단위별로 줄 정렬이 되어버린다. prettier와 같은 플러그인을 설치하여 옵션을 꺼봤지만 저장시 자동 정렬은 별도의 옵션이였다. 아래와 같이 옵션을 끄면 자동 정렬을 끌 수 있다. 저장 시 자동 줄 정렬 끄기🛠 1. 파일 - 기본 설정 - 설정 2. formatOnSave를 입력한다. 체크되어 있는 Format On Save 옵션을 체크를 해제하면 더 이상 저장할 때 자동으로 정렬이 되지 않는다. 2021. 10. 22. Node JS 기초 - nodeMailer / server 만들기 Node JS 는 front-end로 많이 설명하는데, 쉽게 생각하면 서버 프로그래밍 언어 + 자바스크립트 입니다. -> 자바스크립트만 알면, 클라이언트, 서버 개발이 다 가능해 진다. 공부 출처 : 유투브 개발자의품격 - 한 시간만에 끝내는 Node.js 입문 링크 : https://www.youtube.com/watch?v=toLDNN4FQv nodemailer mailtrap.io -> https://mailtrap.io/ nodemailer 사용 -> https://nodemailer.com/about/ npm install nodemailer mailtrap.io 가입후 이렇게 메일을 보낼수 있는 정보가 나옵니다. 복사하여 코드에 붙여넣기 해주시면 됩니다. emailSender.js const .. 2021. 7. 12. [노마드코더] ReactJS로 영화 웹 서비스 만들기 + Router 안녕하세요 꼬바리 입니다. 노마드 코더 에서 무료 강의인 ReactJS로 영화 웹 서비스 만들기를 완료 했다. 리액트를 처음 배우는거라 props state locetion등 어려움이 많았지만 강의 초반 기본 문법을 배우고 들어간다. 작은 app을 만들었지만 사실 이번에 배운 강의에 완전히 이해했다고 하기 어렵다 내가 만든 리액트 app으로 조금더 정리해야겠다. (난 아날로그 인간이므로 공책에 쓰는게 더 쉽게 이해된다.) 결과물 => main home이다. 영화 사이트에서 api이용 json형식으로 영화의 정보를 가져와 출력했다. 왼쪽 상단 작은 네이게이터 추가했다. 영화리스트들중 한 section 서머리의 내용이 길어서 리스트가 깨지는걸 방지하기위해 slice사용하여 180글자씩 잘라냈다. 영화 클릭시.. 2021. 5. 6. [VS Code] 한 번에 여러 개 선택하여 수정하는 법(다중 선택, 다중 수정, 동시 수정) 코드 작성시 비슷한 단어 여러줄의 코드를 수정하게 되는데 컨트롤CV로 한계가 있다. 다중 선택 Ctrl + Shift + L 일단 수정하려는 단어를 드래그해서 선택하고, 이 버튼을 누르면, 선택한 단어와 같은 모든 단어가 동시에 선택이 된다. 이 때 입력을 하게 되면, 동시에 모든 단어가 변경이 된다. 2021. 5. 3. [VS Code] 자동줄맞춤 자동정렬 플러그인 "Beauty" Visual Studio Code에서 자동줄맞춤 하는 방법 ! 기존에 사용했던 방법은, 드래그 + Tab , 우측으로 밀기 드래그 + Shift + Tab , 좌측으로 밀기 등 수작업으로 작업해야 했다. 일일이 이렇게 할 필요없이, 드래그 영역을 한번에 자동으로 줄 맞추고 예쁘게 해주는 플러그인이 뷰티 ! Vscode Beauty VS Code 에디터에서 사용하는 Beauty라는 플러그인 이걸 이용하면, 드레그한 영역을 Ctrl + Shift + B 단축키를 통해서 자동으로 줄맞춤 해줄 수 있다. #결과화면 Before after 2021. 5. 3. [리액트] 움직이는 Component-노마드코더 안녕하세요 꼬바리입니다. app.js import React from 'react'; class App extends React.Component{ state ={ isLoading: true, movies : [] }; componentDidMount(){ setTimeout(() =>{ this.setState({isLoading:false}); },6000 ); } render(){ const { isLoading } = this.state; return ( {isLoading ? "Loading..." : "We are ready"} ); } } export default App; //movies:[] 주석 처리 가능 ^^ setTimeout 으로 6초 후에 loading -> we are rea.. 2021. 5. 3. [리액트] Component State &Life cycle -노마드코더 안녕하세요 꼬바리입니다. public -> index.html src 폴더에 index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(,document.getElementById('root')); // ->componant는 HTML 을 반환하는 함수 src폴더에 App.js import React from 'react'; import PropTypes from 'prop-types'; class App extends React.Component{ constructor(props){ super(props); console.log("hello"); } state={ .. 2021. 5. 3. [리액트] JSX & Prop 정리 -노마드코더 노마드 코드 무료 강의 리액트 공부 중입니다. 개념이나 이론 보다 히스토리를 남기기위해 기본 코드마만 적은것 입니다. 기본 설치후 리액트를 실행후, 필요 없는 파일은 다 지운 상태 (필요없다기 보다 내가 사용하지 않는.) JSX와 Props 개념만 배운 후 중간 정리 단계. 폴더를 다 닫은 상태 public 폴더와 src 폴더 연 상태 Public 폴더 > index.html //여기가 루트 src 폴더 > index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(,document.getElementById('root')); // ->componant는 HTML 을.. 2021. 4. 29. 이전 1 2 3 다음 728x90 반응형
