728x90 반응형 인강\개인공부/노마드 코더6 [노마드코더] ReactJS로 영화 웹 서비스 만들기 + Router 안녕하세요 꼬바리 입니다. 노마드 코더 에서 무료 강의인 ReactJS로 영화 웹 서비스 만들기를 완료 했다. 리액트를 처음 배우는거라 props state locetion등 어려움이 많았지만 강의 초반 기본 문법을 배우고 들어간다. 작은 app을 만들었지만 사실 이번에 배운 강의에 완전히 이해했다고 하기 어렵다 내가 만든 리액트 app으로 조금더 정리해야겠다. (난 아날로그 인간이므로 공책에 쓰는게 더 쉽게 이해된다.) 결과물 => main home이다. 영화 사이트에서 api이용 json형식으로 영화의 정보를 가져와 출력했다. 왼쪽 상단 작은 네이게이터 추가했다. 영화리스트들중 한 section 서머리의 내용이 길어서 리스트가 깨지는걸 방지하기위해 slice사용하여 180글자씩 잘라냈다. 영화 클릭시.. 2021. 5. 6. [리액트] 움직이는 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. 바닐라 JS로 그림판 만들기 이번엔 바닐라JS로 그림판 만들기 수업을 들었습니다. 좀더 낯선 api 를 사용했으니 쉽고 재밌는 강의였습니다. only JavaScript로 만든 그림판의 기능은 다음과 같습니다. 1. 캔버스에 마우스로 그리기 (8가지 색) 2. paint 뿐 만아니라 Fill 채우기 기능 3. range로 브러쉬 두께 조절 4. 마우스 오른쪽 방지 5. sava 버튼으로 이미지 저장 그림판 디폴트 형태입니다. 아래 기능들로 색을 변경하거나 캔버스를 채우거나 브러쉬의 두께를 조절 할수있습니다. 첫번째와 두번째 선의 두께 차이가 있습니다. SAVA버튼 클릭시 내가 그린 그림이 자동 저장 됩니다. jpg파일보다 png파일이 픽셀이 덜 꺠져서 png파일로 설정했습니다. FILL 과 PAINT 버튼이 스위치 됩니다. 코드 공.. 2021. 4. 14. 바닐라 JS로 크롬 앱 만들기 Vanilla JS를 익히기 위해 찾다가 "노마드코더"라는 강의 사이트를 찾았습니다. 무료 강의가 좋은게 많이 있습니다. 초급 javaScript 를 배우고 싶으신 분들에게 추천 드립니다. (html css 를 전혀 모르는 상태라면 어려울것이라 생각됩니다) only JavaScript만으로 만든 크롬앱의 기능은 1. 시계 기능 2. 비교적 가벼운 데이터인 이름 및 todo 리스트를 브라우저 자체에 저장 3. todo리스트 삭제가능 4. 현재 위치 위도경도 값 받아 외부 날씨 api로 날씨 출력 (오른쪽 상단) 5. 랜덤 배경화면 출력 코드 공유 하겠습니다 clock.css body { background-color: #34495e; color: white; margin: 0; text-shadow: 1p.. 2021. 4. 12. 이전 1 다음 728x90 반응형
