웹개발
-
[2019.04.17] ES6 문법 - default parameter개발 블로깅/Modern script 2019. 4. 17. 12:27
함수에서 매개변수를 호출할 때 넣어주는 데이터가 없으면, 함수에서는 해당 매개변수가 undefined가 된다. function testFunc(argu1, argu2){ console.log(argu1); // 1 console.log(argu2); // undefined } testFunc(1); 그런데 ES6 문법에서는 매개변수가 선언이 되었는데, 호출 시 값이 들어오지 않으면 초기화 해줄 수 있다. function testFunc(argu1, argu2 = 2){ console.log(argu1); // 1 console.log(argu2); // 2 } testFunc(1); 위와 같이 매개변수에 들어오는 값이 없으면 초기화 해 줄 수 있다. # Default parameter 활용법 functi..
-
[2019.04.15] React의 개념 - LifeCycle API개발 블로깅/React 개념 2019. 4. 15. 20:32
lifeCycle 즉, 나타나기 전, 나타난 직후, 나타난 후, 사라지기 전 등등, 어떠한 것에 대해 나타나기 전부터 나타난 후 사라지기까지의 모든 과정을 말한다. 모든 컴포넌트는 이러한 lifeCycle 동안 발생할 수 있는 함수들을가지고 있다. -- [2019.04.17] 수정사항 -- 현재 리액트 버전 16.4에 들어서면서 왠만한 라이프사이클이 불필요하게 되었다. 현재 공식문서에 나오는 라이프사이클 API componentDidMount : 초기 컴포넌트가 생성될 때 componentDidUpdate : 중간에 컴포넌트가 변경사항이 있을 때 componentWillUnmount : 컴포넌트가 삭제될 때 ------- # 브라우저에 나타나기 전 호출되는 API constructor constructo..
-
[2019.04.15] React의 개념 - state개발 블로깅/React 개념 2019. 4. 15. 18:44
내가 이해한 대로 적는 설명 state는 해당 컴포넌트가 가지고 있는 상태, 즉 데이터를 말한다. 각 컴포넌트들은 자신의 데이터들을 가지고 있을 수 있다. (함수형의 컴포넌트는 state를 가지지 않는다! 오로지 class 방식만!) # state를 선언하는 법 class Hello2 extends React.Component{ constructor(props){ super(props); this.state = { //여기에 Object 방식으로 state를 저장 name : 'inyong', age : 27 } } render = () => ( Hello {this.props.todo} ) } constructor 생성자에서 state변수를 만든다. 그리고 그 안에 object 방식으로 데이터를 추가해..
-
[2019.04.15] React의 개념 - props개발 블로깅/React 개념 2019. 4. 15. 16:50
내가 이해한 대로 적는 개념 설명 기존의 자바스크립트와는 다르게 react에는 클래스나 함수 하나하나가 컴포넌트로 볼 수 있다. 컴포넌드는 여러 html요소가 구현되어 있는 하나의 html구성(?) # 함수 방식으로 컴포넌트를 생성하는 방법 const HelloWorld = () => { return ( 헬로월드 ); }; ReactDOM.render(, document.getElementById("root")); 컴포넌트 생성 방법은 두가지가 있다. 위 코드처럼 함수 형태로 생성하는 방법. return 괄호 안의 태그들이 호출되는 곳에 렌더될 부분이다. 이 방법은 따로 state를 가지지않고 짜여진 틀만 가져와서 사용하면 될 때 쓰면 될 듯하다. const HelloWorld = () => ( 헬로월드..
-
[2019.04.14] fetch API의 개념, 그리고 다시 정리해본 Promise개발 블로깅/Modern script 2019. 4. 14. 18:05
서버와의 비동기 요청방식 fetch라는 것이 있다. 오잉? 비동기 요청방식은 Ajax 아니야? 맞다. fetch는 Ajax의 방식 중 하나이다. 그것도 최신 방식! 나는 지금까지 Ajax라는 것이 있는 건 줄 알았고, 그냥 써보기만 했다. 근데 사실 비동기 방식의 유래도 있었다. # 비동기 서버 요청의 초기 방식 XML Http Request 왠지 자바에서 서버 통신할 때 많이 본 듯한... 초기에 비동기 요청방식을 사용하려면 저렇게 많은 코드의 틀이 필요로 했다. 그러나 그 코드를 줄이고 간편하게 사용하고자 해서 이후에 나온 것이 Ajax이다. # 비동기 방식 Ajax란? 그리고 Ajax 방식 중 최신기술인 fetch API 이 틀에서 바로 사용 가능! 참고로 fetch API는 promise 방식의 ..
-
[2019.03.27] 전개 연산자 개념개발 블로깅/Modern script 2019. 3. 27. 11:50
배열을 조금 더 직관적으로 사용할 수 있는 방식인 전개 연산자라는 개념이 있다. # 전개연산자123456const add = (a, b, c) => { return a + b + c;} var arr = [1, 2, 3];console.log(add(...arr)); // 6cs위와 같이 배열 변수를 분해하지 않고 그냥 할당해버리는 방식이다. 1234var arr1 = [3, 4, 5];var arr2 = [1, 2, ...arr1, 6, 7]; console.log(arr2); // [1,2,3,4,5,6,7]cs이렇게 값을 순차적으로 하나씩 넣는 작업을 쉽게 할 수도 있다. 그냥 괄호 [] 껍데기를 벗겨서 넣어버린다는 개념으로 생각하면 이해가 쉽다. ... 키워드가 구조분해할당 방식에서도 쓰이므로 헷..
-
[2019.03.27] 구조분해할당 개념개발 블로깅/Modern script 2019. 3. 27. 11:42
ES6로 넘어오면서, 배열과 object를 조금 더 쉽게 다루는 방식이 있다.구조분해 연산자, 전개연산자, 각 배열에 들어가 있는 데이터를 하나씩 가져와서 처리해야 되는 상황을 한번에 처리할 수 있도록 해준다. # 구조분해할당 - 배열 구조 분해12345var a, b, rest;[a, b] = [10, 20]; console.log(a); // 10console.log(b); // 20cs 12345var x = [1, 2, 3, 4, 5];var [y, z] = x; console.log(y); // 1console.log(z); // 2cs 위와 같이 변수 초기화 선언할 때 표현하면, 배열을 분해하여 순서대로 각 자리에 들어가게 된다.12345var a, b;[a = 5, b = 7] = [1]; ..
-
[2019.02.22] React로 Twittler 작업 완성..(하루만에..대박!)핵인싸 개발자의 길/코드스테이츠 Pre Course 2019. 3. 23. 01:07
대박...오늘 아침까지 리액트 첫번째 프로젝트 작업한거 개념 정리하고, preCoure 과제로 진행했던 트위틀러를 똑같이 리액트 방식으로 구현해 보았다.솔직히 내일까지는 걸릴 줄 알았는데, 오늘 점심부터 작업해서 방금 구현을 다 끝냈다! # 기존의 과제 때 구현했던 페이스북 형식의 twittler를 React 방식으로 구현한 모습 외관 상으로는 변경된 점이 당연히 없다. 정말 많이 변한 부분은 안의 소스코드 내용이다. # 리액트로 작성한 소스코드 기존의 html, css, javascript로만 작성했던 것을 거의 뒤집어 엎었다. 리액트 방식으로 작업을 하니 코드 구조가 전체 다 바뀌고, 데이터를 주고받는 형식, 렌더링 방식 등이 전부 달라서...작업 중에 정말 많이 헷갈렸다. 그래도 첫번째 작업한 전화..