배운 것 (29) 썸네일형 리스트형 [js] filter filter 함수를 활용해 배열에서 조건에 해당하는 값만 추출해 낼 수 있다. (function test(){ const testArray = [1,2,3,4]; function getThreeUnder(value){ return value [react] axios, yts api 목표: yts api 가 제공하는 최신 영화 데이터를 axios로 받아 화면에 그려줄 것이다. import React from "react"; import './App.css'; class App extends React.Component { state = { isLoading : true, movies : [] }; componentDidMount(){ }; render(){ const {isLoading } = this.state; return {isLoading ? "Loading..." : "we are reay"} }; }; export default App; 이전 게시글 소스에 이어서 yts api 가 제공하는 최신 영화 데이터를 axios로 받아 화면에 그려줄 것이다. (*https://yt.. [git] github 기존 저장소 변경 https://mollang.herokuapp.com/ React App mollang.herokuapp.com 위 링크에 연동되어 있는 git 저장소 명칭을 바꾸고 싶다. 기존 저장소는 https://github.com/ksy8230/aaa 바꾸고 싶은 저장소 https://github.com/ksy8230/bbb (1) cmd 창에서 해당 프로젝트 로컬 경로로 이동한다. (git remote -v 라는 명령어로 현재 (바뀌기 전) 기존 저장소 명을 체크할 수 있다) (2) git remote set-url 명령어를 사용하여 저장소 url 변경 (ex git remote set-url origin https://github.com/ksy8230/bbb) [js] promise 이해하기 + 객체 프라미스를 쓰는 이유 : 비동기 처리를 순차적으로 실행할 필요가 있는 경우 비동기 처리를 중첩해서 표현하므로 ex. 1초 뒤에 'a' 2 초 뒤에 'b' 3 초 뒤에 'c'... setTimeout(function(){ console.log('a') setTimeout(function(){ console.log('b') setTimeout(function(){ console.log('c') },1000) },1000) },1000) 에러, 예외처리가 어렵고 중첩으로 인한 가독성이 떨어진다. 그래서 생겨난 것이 프라미스. "비동기에서 성공과 실패를 분리해서 메서드를 수행한다" var loading = function (path) { return new Promise (function (resolve, re.. [js] callback 함수 이해하기 callback 함수를 쓰는 이유 : 비동기 처리를 위해 동기와 비동기의 차이 : 동기란 파일 조작이 완전히 끝난 후 다음 동작이 이루어지는 방식이고, 비동기란 다음 코드를 진행하면서 파일 조작을 하는 방식이다. : 어떤 루틴을 완전히 끝내고 제어를 반납하면 동기식, 동작이 안 끝났어도 일단 제어권을 반납한 후 지 할일 계속하면 비동기식. 일상 예제 중 이런 게 있는데 이해가 갔다. ex) 1. 남자가 여자에게 10 분에 한번씩, "준비 다 됐음?" 하고 물어보고 준비 다 됐을 때 데이트를 하러 가는 것 2. 남자가 여자에게 "준비 다 되면 문자해" 하고 근처 피시방에서 게임하고 있다가 문자가 오면 데이트 하러 가는 것 비동기 프로그래밍을 하는 이유 : 속도 때문에 동기 프로그래밍은 기능을 요청한 후, .. [react] state, componentDidMount 목표: loading 텍스트가 3초 뒤에 we are ready 로 바뀌는 화면 리액트를 시작할 때 보이는 기본적인 코드 구조는 아래와 같다. import React, { Component } from 'react'; import './App.css'; class App extends Component { render(){ return {isLoading ? "Loading..." : "we are ready"} } } export default App; 리액트는 자바스크립트 기반의 모듈이기에 div 속 { } 에 함수를 넣어줄 수 있다. { isLoading ? "Loading..." : "we are ready" } isLoading 이 true 이면 Loading... 을 화면에 찍어주고, fals.. [heroku] nodejs로 만든 페이지 (Heroku)헤로쿠에 올리기 * 우선 express란 무엇인가? Express.js는 nodejs의 핵심 모듈로 http 와 connect컴포넌트(?) 를 기반으로 하는 웹 프레임워크이다. 일단 큰 맥락으로 내가 하고 싶었던 건 nodejs를 이용해 heroku라는 클라우드 서비스에 배포하는 것. (로컬 서버가 아니라 외부에 공유가 가능하다는 점에서, 단기 프로젝트에 유용하다는 점에서 좋다고 한다. 매월 550시간 가능. 히로쿠를 쓰는 용도는 좀 더 검색을 해볼 것.) 1. 히로쿠에 가입 http://www.heroku.com Cloud Application Platform | Heroku Heroku is a platform as a service (PaaS) that enables developers to build, run, .. [css] 올바른 css 네이밍 css 네이밍은 기본적으로 하이픈(-)으로 구분된 문자열을 사용한다. 하이픈 규칙의 올바른 예 .red-box { border: 1px solid red; } 체계적인 css 네이밍 규칙을 쓰면 class 이름만 보고 무엇을 하는지 / 어디서 사용하는지 / class 들과의 관계를 알 수 있다. BEM 네이밍 규칙 B : BLOCK E : ELEMENTS M : MODIFIERS B 라는 큰 그룹 아래로 E 라는 요소들이 있고, 이 요소가 갖고 있는 수식을 M이 지정했을 때 .stick-man__head--small { } .stick-man__head--big { } 큰 그룹인 .stick-man 이라는 클래스는 하이픈 형식으로 stick-man 이 갖고 있는 하위 요소인 head, leg, arm 등.. 이전 1 2 3 4 다음
