Phot_o_matic Programming

recast.ly는 Youtube API를 이용하여 실제 youtube처럼 검색 및 동영상 시청이 가능하도록 만드는 sprint이다. 실제로 끝마치고 되돌아보니, react를 사용한 첫 sprint로 도전하기에 아주 제격이라는 생각이 들었다. sprint를 진행하기에 앞서, react의 핵심 개념을 짚고 넘어가야만 한다. stateless functional component & stateful classical component의 차이 props flow & state life cycle & life cycle method Component stateful classical component를 사용하는 경우는 명료하다. 어떤 state를 지정해서 관리하는 경우 life cycle method(compo..

Programming/React 2019. 6. 14. 20:32

해당 toy 문제는, 주어진 숫자의 배열 안에서 세 개의 숫자를 뽑을 때, 세 숫자를 곱한 값이 최대가 되는 경우를 찾아서 반환하는 것이었다. test case로는 다양한 조건이 있었다. 양수로만 구성된 배열 : [2, 11, 13, 7, 13, 3, 11, 5], 양수와 음수가 섞인 배열 : [2, 3, -11, 7, 5, -13], [-31, 41, 34, -37, -17, 29] 음수로만 구성된 배열 : [-5,-4,-3,-2,-1] let head = 0; let tail = 0; array.sort((a, b) => a - b); //이 부분에서, 주어졌던 배열이 크기순으로 정렬된다. 작은 것부터 큰 숫자의 오름차순으로 정렬된다. head = array[0] * array[1] * array[a..

Programming/Algorithm 2019. 6. 14. 19:59

리액트란 무엇인가? : Javascript의 라이브러리로써, 선언적인 component와 재사용 가능한 component를 기반으로 구축된다. JSX에서 Javscript의 변수 name이라는 것을 사용하려면? : Hello, {name} props란? : props 원소의 이름을 특정지을 수 있다. state의 특징은? : 자신이 아닌 다른 컴포넌트의 state는 알 수 없다. 만약 다른 컴포넌트의 state에 뭔가 영향을 주고 싶다면, 부모 컴포넌트까지 가서 setState 시킨 값을 내려주어야 한다. 급할수록 돌아가야 한다! functional component와 비교하여 class component의 차이점은? Life Cycle API를 사용할 수 있다. state를 가진다. React.Comp..

Programming/React 2019. 6. 14. 19:38

component를 통하여 UI를 재사용 가능한 별개의 조각조각들로 나누고, 각 조각을 개별적으로 살펴볼 수 있게 된다. 개념적으로 component는 Javascript의 함수와 유사하다. "props" 라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React element를 반환한다. functional components & class components component를 정의하는 가장 간단한 방법은 Javascript 함수를 작성하는 것이다. function Welcome(props) { return &lth1>Hello, {props.name}&lt/h1> } props는 속성을 나타내는 데이터이다. 위의 함수 Welcome은 데이터를 가진 하나의 props 객체 인자..

Programming/React 2019. 6. 11. 15:16

Element란? Element는 React 앱의 가장 작은 단위이다. Element는 화면에 표시할 내용을 기술한다. Component와 혼동하여서는 안 된다. Rendering Elements in DOM HTML 파일 내부에 가 있다고 가정해보자. &ltdiv id="root"&gt&lt/div&gt 이 안에 들어가는 모든 element를 React DOM에서 관리하므로, 이것을 root DOM node 라고 부른다. React로 구현된 앱은 일반적으로 하나의 root DOM node가 있다. React element를 root DOM node에 render하려면 둘 다 ReactDOM.render() 에 전달해주면 된다. const element = &lth1>Hello, world&lt/h1>;..

Programming/React 2019. 6. 11. 14:34

JSX JSX는 javascript의 확장판이라고 생각하면 된다. React 내에서 사용되며, 몇 가지 기본적인 규칙이 있다. 반드시 하나의 element로 감싸야 한다. Javascript 코드를 적용할 땐 {} 안에 작성해야 한다. JSX 내부에선 if 문을 사용할 수 없다! (IIFE or ternary operator 사용) Element에 class를 적용시킬 때에는 className으로 적용시킨다. JSX에 표현식 포함하기 function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Sangwoo', lastName: 'Kim' }; const element = ( &lth..

Programming/React 2019. 6. 11. 14:14

Achievement Goals React 같은 component 기반 라이브러리를 왜 사용해야 하는지 이해할 수 있다 React components를 만들 수 있다 React code에서 JSX와 ES6를 사용할 수 있다 props를 이용할 수 있다 왜 state가 존재하고, 어떻게 state를 업데이트 하는지 설명할 수 있다 React components에서 user events를 handle 할 수 있다 stateless functional components와 class components 사이의 차이점을 설명할 수 있다 3rd party API를 활용할 수 있다 여러 파일에 걸쳐 많은 모듈을 가지고 있는 큰 코드베이스에서도 전체적인 구조를 이해하고 개발할 수 있다 시작하기 전에! React 공식..

Programming/React 2019. 6. 11. 12:58

Ajax는 불필요한 리소스 전달을 최소화하여, 클라이언트 및 서버 간의 작업 속도를 최소화시켜주는 기술 중 하나이다. 수 많은 방법이 있겠지만, 이번에는 Fetch API를 사용하여 구현을 해 보았다. //보내고자 하는 메시지의 형태 var message = { username: 'sangwookim', text: 'hello!', roomname: 'IM13' }; const serverURL = 'http://52.78.213.9:3000/messages' //연결하여 사용할 서버 url window.fetch(serverURL, { method: 'POST', body: JSON.stringify(message), headers: { "Content-Type": "application/json", ..

Programming/Concept 2019. 6. 10. 20:11