개발자
-
[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] 좋은 질문을 하는 법핵인싸 개발자의 길 2019. 4. 18. 13:22
개발자에게 좋은 질문을 하는 방법을 공부하는 것은 선택사항이 아닌 필수이다! # 검색 우선 해결을 못하는 사항에 대해 검색을 해야한다. 문제의 에러메세지 전체가 이해가 가지 않더라도 한번쯤은 읽어본다. 에러 메세지의 여러 키워드를 통해 구글링 검색을 해본다. 이 때 내가 원하는 답을 얻지 못하더라도, 내가 무엇 무엇을 찾아 봤는지 정도는 기록, 기억, 트래킹 할 수 있어야 한다. 또한, 답을 얻기 보다는 더 나은 질문 keyword를 얻기 위함을 기억해야한다. # 내가 처한 문제를 상대방에게 설명하기 질문을 못하는 특징 내가 무엇을 모르는지 모를 때 질문하는 것을 번거로워 할 때 내가 상대방에게 질문하는 것에 부담스러움을 느낄 때 질문에는 바보같은 질문은 없지만, 정성을 들이지 않은 질문은 많다. 그러..
-
[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.18] Recase.ly 스프린트를 진행하며핵인싸 개발자의 길/코드스테이츠 Immersive Course 2019. 4. 18. 01:23
현재 React로 youtobe 화면을 만드는 스프린트를 진행하고 있다. # 작업한 Recase.ly 화면 youtube API와 연동해서, 검색창에 검색을 하면 검색 영상과 관련 영상들을 유튜브처럼 화면에 보여주는 작업이다. # 스프린트를 진행하며 감탄한 부분 '실시간 검색 방식' 요즘 넷플릭스 등 서비스의 검색방식은, 검색어를 입력 후 엔터 키나 버튼을 누르는 방식이 아닌, 검색어 입력이 끝나면 바로 검색 내용이 나오도록 하는 방식을 쓴다. 그럼 검색내용을 한 글자 한 글자 쓸 때마다 검색기능을 실행하고 화면에 보여주는 작업을 하게 되지 않나? 라고 생각을 했다. 그래서 처음에는 검색 키워드가, 설정한 글자 수 이상이 되면 그때 검색 기능이 실행이 되도록 하는 것이였다. 하지만 그렇게 되면, 해당 글..
-
[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 = () => ( 헬로월드..