자바스크립트
-
[2019.04.21] WebPack 사용법 #1 - webpack 설치개발 블로깅/Modern script 2019. 4. 21. 22:25
# webPack이 왜 필요한가? 우선 webPack이란것을 왜 사용하는지부터 정리해보면, https://helloinyong.tistory.com/75 (이전에 작성한 내용) 에 나와 있는 것 처럼 여러 파일을 한꺼번에 묶어서 하나의 .js파일로 사용하기 위한 것도 있다. 무엇보다 파일 간 dependency를 위해서 modern script에서는 import, export, require을 사용하는데, 브라우저가 이를 호환하지 않는다. 그래서 modern script 방식의 dependency를 브라우저에서 사용할 수 있도록 브라우저 방식에 맞게 하나의 js파일로 bunddling(묶음)하여 script src로 선언하는 것! # webPack 설치법 npm install -g webpack webp..
-
[2019.04.18] Recursion 함수 작성 시 주의할 점!핵인싸 개발자의 길/코드스테이츠 Immersive Course 2019. 4. 18. 10:53
오늘 아침 toy문제를 풀다가 멘붕에 빠지게 한 코드가 있었다. # 문제의 코드 내용 (실제 toy문제의 코드가 아닌 예시임) 첫번째 코드 function test(count){ if(count > 5) return; console.log(count); test(count++); } test(0); 두번째 코드 function test(count){ if(count > 5) return; console.log(count); test(count + 1); } test(0); 위 두 코드는 test라는 함수에 count를 1씩 증가시키면서 recursion호출을 하다가, count가 5 이상이 되면 recursion을 끝내는 함수이다. 보다시피 두 코드의 차이는, 단지 함수 내 에서 test를 호출을 할 때..
-
[2019.04.17] CommonJS란?개발 블로깅/Modern script 2019. 4. 17. 16:26
개념은 간단하다. '.js' 파일 간의 어떻게 의존성을 가지게 할지 정해주는 것이다. 우선 commonJS라는 개념이 존재하는 이유는, 자바스크립트를 범용적으로 모듈화를 높이기 위함! ES6 리액트 기준으로만 설명 // test1.js function MSG1(){ console.log('1'); } function MSG2(){ console.log('2'); } export {MSG1, MSG2} 위 코드를 보면, test1.js에서 MSG1, MSG2의 함수를 export 한다. export는 다른 곳에서 쓸 수 있게 내보내 주는 것. export 키워드 뒤에는 내 보낼 함수 혹은 변수명을 {}괄호로 묶어줘서 보낸다. 이름을 꼭 맞춰주어야 한다. // test2.js import {MSG1, MSG..
-
[2019.04.17] 웹팩(webpack)이란?개발 블로깅/Modern script 2019. 4. 17. 15:53
요즘 웹 서비스를 하나 개발한다고 하면, 엄청난 양의 코드로 인해 많은 js파일이 생긴다. 양이 많아지는 만큼 js파일 관리가 힘들어지고, 하나하나 스크립트 선언해서 가져오게 되면 그만큼 자원도 엄청나게 소비되게 된다. 그래서 이 많은 양의 파일을 하나로 묶어줌으로써 자원 관리를 쉽게 해주는 기능을 하는 것이 웹팩(webpack)이다. 특히 리액트에서 하나의 컴포넌트마다 하나의 js파일을 생성하고, 뿐만 아니라 여러개의 수많은 이미지 파일, css파일 등등을 가지고 있는데, 이를 하나의 bundle.js 파일로 묶어줘서 웹 브라우저에 올림으로써 웹브라우저가 가지게 될 수고를 덜어준다. 위 사진은 스프린트 진행 중 만든 리액트 프로젝트 파일인데, 개발자도구에서 보면bundle.js파일을 가지고 있고, in..
-
[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 방식의 ..