공부한 내용 (38) 썸네일형 리스트형 [React JS] array map 기능 사용하여 리스트만들기 이번에는 영화 리스트를 만들어볼 것이다.지난 번에 만든 리스트는 효율적이지 않기때문에..우리는 api를 이용해서 엄청난 양의 영어정보를 가져올것이다. 그러기 위해서 는 일단, array를 만들 것이다. const movies = [ { title: "matrix", poster: "http://www.phildam.net/include/images/data/board/f73a2a2908feb45c6b8fe4c766e5acb3.jpg" }, { title: "Full Metal Jacket", poster: "http://postfiles14.naver.net/MjAxNzA0MjNfNzkg/MDAxNDkyOTU2MDk2MTQ3.60GK7pUyGaxHOUUCrQhrpT2kQgLH-5Pe44iZeMd2li0g.. [React JS] props를 사용해서 데이터를 저장하고 출력해보자. React 에는 2개의 주요 컨셉이 있다. 하나는 state 나머지 하나는 props 이번에는 props를 다뤄볼 것이다. Dataflow with Props 메인 컴포넌트 app는 모든 이미지들을 가져올 것이다. 그리고 그 영화들은 카드형태로 보여줄 것이다. 메인 컴포넌트는 무비리스트가 있다는 뜻이다. 그리고 그 리스트안에 영화카드 그리고 그 안에 영화의 정보가 각각 담긴다. 자 일단 App.js 파일을 연다 그리고 import 다음 구문에 const movies = [ "matrix", "Full Metal Jacket", "Oldboy", "Star Wars" ] 입력한다. 이것은 추후에 movie의 영화 제목이라는 데이터를 얻게 된것이고 이를 아래와 같이 출력할 것이다. 그리고 현재 이 데이터가 .. [React JS] 컴포넌트와 JSX에 대해 알아보자 일단 그림판을 이용해서 컴포넌트를 만들어보겠다. 아참.. 나는 리눅스를 사용하기 때문에 윈도우 그림판과 비슷한 kolourpaint를 사용하였다.kolourpaint 설치방법은 아래링크를 참고하길 바란다. http://ksch93.tistory.com/14 자! 그러면 영화리스트 앱을 만들 것이다. 대략적인 컴포넌트를 만들어보자! 이렇게 되겠다.자! 이제 나는 아톰 에디터를 사용한다. 아톰을 켜서 저번에 만들었던 파일을 열어보자! 자 app.js 를 살펴보면 자바스크립트안에 html 언어가 있지 않는가?? 요것을 jsx라고 부른다. jsx는 리액트 컴포넌트를 만들때 사용하는 언어다. 예를 들면, css의 'class'가 아니라 'className'이라고 쓴다. 그 다음, 이미지의 경우 소스를 보면 10번.. 우분투 리눅스용 그림판 kolourpaint 설치방법 나는 윈도우에서 우분투 리눅스로 바꾼지 벌써 일주일이 지나가고 있다. 윈도우보다 우분투가 훨씬 더 편리하였지만, 결제부분이나 공인인증서 부분은 역시나 까다롭다.. 우분투를 사용하다보니, 개발할때 컴포넌트를 짤 때 간단하면서 쉽게 짤수있는 그림판같은 것이 있으면 참 좋겠다는 생각이 들었다. 그래서, 우분투 리눅스 그림판, 즉!! Kolourpaint를 소개한다. 우분투 리눅스용 그림판들이 있지만, kolourpaint를 선택한 이유는 딱 한가지이다. 윈도우 그림판과 똑같이 생겼기 때문이다. 지금부터 우분투 리눅스용 그림판인 kolourpaint 설치하는 법을 소개하겠다. apt-get install kolourpaint4요 딱 한줄로 설치를 끝냈다. 역시... 우분투가 짱인 것 같다..^^ [React JS] 우분투 node.js와 npm 그리고 facebook create react app 설치하기 React JS 를 배우기 전에, React JS는 자바스크립트로 이루어져있다. 자바스크립트의 정보 또한 엄청나게 많기 때문에, 이용하기가 좋다. 그래서 React JS를 배우게 되면 자바스크립트의 실력이 자연스럽게 늘 것이다. React JS 를 배우기 전에, 웹팩에 대한 소개를 하겠다. 웹팩은 여러 파일을 브라우저가 읽을 수 있게 만들어주는 것이라고 생각하면 된다. React JS의 실습에 들어가기 전에, 우리는 facebook 'create react app'으로 설정 작업없이 한번에 작업을 시작하도록 할것이다. 즉, facebook 'create react app' 내에 웹팩이 들어있다고 생각하면 된다. 실습을 하기전에 node.js와 npm 그리고 facebook 'create react app.. [Git] 명령의 빈도와 메뉴얼 보는 방법 생활코딩을 운영하시는 고잉님께서는 중국어 공부를 하실때, 그 단어의 빈도수를 먼저 파악했다고 합니다. 가장 빈도수가 높은 부품을 가지고 공부하게 된다면, 쉽게 공부할 수 있다고 합니다. git도 이 분야에서 사용되는 여러가지 부품들이 있으며, 빈도수도 다 다릅니다. 그렇다면 어떤 명령어가 많이 사용되는지, 하지만 이 방법은 정확히 데이터가 나와있는 것이 아닙니다. 그래서, 구글에 많이 검색된 것들을 뽑아봤습니다. 사진출처: 생활코딩 opentutorials.org/course/2708/15211 지금까지 우리가 공부해 온 Git은 벌써 40% 이상이 사용되는 것입니다. 앞으로 배울것에 대해서 관심을 갖는것보다 여태까지 배운것을 다시 한번 공부해보는 것이 더 좋습니다. 이제부터 어떻게 정보를 찾아서 스스로.. [GIt] 과거의 버전으로 돌아가기 reset 과 revert 두가지 방법이 있다. 제일 쉬운 방법은 git reset git reset 커밋값 --hard reset은 절대로 공유한 이유에 하면 안된다. 일단 뒤에 --hard를 쓴다. hard는 매우위험한 것이니 추후에 원리를 알고 다른 옵션을 알려주겟다. reset과 revert는 과거의 버전으로 돌아가는거다 라는 것만 알고 지나간다. 분명 reset과 revert를 사용하는 순간, 무언가 큰일이 일어난 거기때문에, 그때 좀 더 많은 공부를 하면 된다. *본 포스팅은 생활코딩을 보고 공부한 내용을 정리한 것 입니다. [Git] GIt 변경사항 확인하기 git log -p 각각의 소스상에 차이점을 확인할 수 있다. git log commitid값이런 형식으로 입력하면 해당 커밋을 확인할 수 있다. git diff 커밋값..다른커밋값이 커밋과 저 커밋의 소스상의 차이점을 보여준다. git diff 이 명령어는 우리가 작업을 할때 커밋을 하기전에 자기가 작업한 내용이 문제가 있는 지 없는지를 마지막으로 확인할 수 있게 도와준다. *본 포스팅은 생활코딩의 공부한 내용을 정리한 것입니다. 이전 1 2 3 4 5 다음
