반응형 분류 전체보기202 파이썬의 입력 값 받기 입력값 분리해 받기 A,B = map( int, input().split("")) 입력 처리 hello bye A : hello B : bye 입력 문자 배열로 받기 arr = list(input()) 입력 처리 hi [ 'h' , 'i' ] 여러 줄 입력 이중배열로 받기 arr = [ list(input()) for _ in range (width) ] 입력 처리 1110 1101 [ ['1', '1', '1', '0'], ['1','1','0','1'] ] 2021. 3. 20. [React] 리액트의 Hooks 예제로 정복하기 React Hooks functional component에서 state를 가질 수 있게 만듦 class component, componentdidMount, render() 할 필요가 없음 -> 하나의 funciton 이 됨 이것은 함수평 프로그래밍 이라는 뜻이기도 함! recompose + react = 리액트 훅! 📌Class component를 이용한 react (기존 방식) 버튼 클릭시 count 가 하나씩 증가하는 기능 import React from "react"; import './App.css'; class App extends React.Component{ state = { count: 0 }; modify = (n) => { const { count } = this.state; // .. 2021. 3. 18. [React ] React Router를 이용하여 component간에 props 넘겨주기 ( (Link & props) react 를 이용하여 navigation bar를 간단하게 만들어보자 navigation bar를 만들어보면서 reactd에서는 페이지 간에 data를 어떻게 연결하고 공유하는지 공부해 볼 것이다. 1) react-router-dom 설치 * npm 으로 설치 npm install react-router-dom * yarn 으로 설치 yarn add react-router-dom 2) Routes 폴더 생성 routes 폴더에는 내가 만들고 싶은(이동할) 페이지 개수만큼 만든다 routes에 3개의 페이지 생성 - Home.js : 메인 영화설명 (영화를 보여주는 페이지 ) - About.js : 웹페이지 소개글 (자기소개 넣을 예정) - Datail.js : 영화 상세 설명 (영화 클릭시 상세설명 페.. 2021. 3. 18. [React] 프로젝트 GitHub Pages 배포하기 + Axios 를통해 json data 가져오기 AXIOS fetch위에 있는 작은 layer // asios 설치 npm i axios data fetch하기 보통 Fetch 를 사용하여 data를 load 하디만 asios를 사용해보자 class App extends React.Component{ state={ isLoading: true, movies:[] }; getMovies = async() =>{ const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json"); console.log(movies); }; componentDidMount(){ this.getMovies(); } render(){ const {isLoading} = this.state; return ( {.. 2021. 3. 17. [github 에러 ]The requested URL returned error: 403 (fatal: unable to access) git은 레포 끌어올 때마다 오류가 꼭 생겨야 하나보다! 오늘은 또 새로운 오류! The requested URL returned error: 403 당시 상황 github 공동 repository 의 내 branch 를 fork 해왔고 그 branch를 local 로 clone한 후 local 에 step1 branch를 만들고 작업함 git add . git commit -m " ~~~~" git push origin step1 //오류 발생 ( 첫 push) git push origin step1 하는데 error 발생 !! remote: Permission to codesquad-members-2021/fe-w6-free-style.git denied to ink-0 fatal: unable to.. 2021. 3. 16. [React] setState and Lifecycle function component //function component function App() { return ( ) ; } return 한 값을 screen 에 표시 class component React class component 에서 가져온 APP component //App은 react component class App extends React.Component{ render( return () ) ; } React component에서 확장한 것들을 screen에 표시 react가 render() 메서드를 자동으로 실행 class component를 사용하는 이융 state : object ,data를 넣을 공간이 있음 data는 항상 변하기 때문에 state와 같은 공간 이 필요 sta.. 2021. 3. 16. [ React ] JSX 이해하기 & Proptypes component HTML 을 반환하는 함수 component를 사용해서 ReactDOM.render( , document.getElementById('root') ); JSX javascrtip 안의 HTML Component를 만들고 어떻게 사용하는지 javascript + HTML의 조합 React 의 component 생성 흐름 react application은 오직 하나의 component만 rendering 따라서 -> 모든 것은 apapplication(API) 안에 들어가야함 구현하고싶은 component 파일들을 만들어 API.js에 import 하고 API.js를 index 에 렌더링하는 방식 REACT의 속성을 이용하여 component 불러오기 ❖ 정적데이터 설정 (직접 넣어준 데이.. 2021. 3. 16. React 리액트란, 리액트 작업환경 설정 사람들이 좋아하고, 인기있고 , 간편한 프레임워크! 자바스크립트 기반이기때문에 배우는데도 부담이 없다. 리액트를 익혀보고 직접 사용해보기 위해 노마드코더의 ReactJS 로 영화 웹서비스 만들기를 해볼 예정! 오예~ 원래 리액트를 웹브라우저에서 실행하기 위해서는 브라우저는 리액트 코드를 제대로 이해하지 못하기(?) 때문에 원시코드로 변경해야 함 webpack , Babel 다운로드 -> 리액트 코드 컴파일 과정을 거쳐야 함 하지만, create react app 하나의 명령을 실행해서 React Web App 을 실행 1) createreact app을 통해 리액트 환경 구성 ex) 한단계 밖 A 디렉토리에서 생성 -> movie_app 이라는 프로젝트 폴더 생성 //npx create-react-app.. 2021. 3. 16. javascript 과 Promise 와 async await 원본 코드 (callback 지옥에 빠질랑 말랑) url의 json 데이터와 json 중 title 데이터를 비동기적으로 출력시키는 code 1초 후 json 출력 그로부터 2초 후 json.title 출력 fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then( (json)=> { setTimeout(() => { console.log(json); setTimeout( () => { console.log(json.title); },2000); },1000); }) 콜백 함수 분리와 then 사용 Promise를 사용해보자 const delay = (data,ms) =>new Promise(.. 2021. 3. 15. 이전 1 ··· 13 14 15 16 17 18 19 ··· 23 다음 반응형
