본문 바로가기

분류 전체보기94

GatsbyJS 맛보기라 쓰고 찍먹하는 글 굉장히 오랜만에 글을 쓴다. GatsbyJS가 어떤거지? Gatsby is a React-based open-source framework for creating websites and apps. It's great whether you're building a portfolio site or blog, or a high-traffic e-commerce store or company homepage. 공홈에서 Gatsby를 소개하는 말이다. React 기반의 웹사이트, 앱 제작을 위한 오픈소스 프레임워크이다. 어떤 웹사이트를 빌드하던지 이건 짱이다! 이런 내용이다. 모르겠고 일단 해보자 튜토리얼 npm install -g gatsby-cli gatsby-cli를 글로벌하게 사용할 수 있도록 해준다. d.. 2021. 5. 19.
왜 개발자가 되고싶었는지 요즘 블로그 활동이 뜸한 이유는 인턴십을 진행하고 있어서 잠시 쉬어갔었다. 9월부터 12월까지 진행하는 ICT학점연계 인턴십을 진행하고 있는데, 처음 사회생활을 시작하면서 이런저런 생각이 많아졌다. 와중에 학교 교수님이 다른 학교로 가시게 되면서 연구실에 들어오라는 말씀을 하셔서 더 생각이 깊어졌다. 학비도 주고, 연구비도 괜찮게 주어서 좋은 조건이었다고 생각한다. 문제는 내가 관심 있는 분야가 아니라는 것이었다. 그럼에도 내가 고민했었던 건, 한 분야를 깊게 공부해보고 싶었기 때문이다. 물론 돈 때문도 있었다. 원래는 대학원에 진학하려고 했는데, 말도 안 되는 등록금을 보고 포기했다. 거의 한 달 가까이 고민했었다. 결론은 지금 공부하고 있는 웹을 계속해서 공부하자 였다. 웹이 재밌기도 하고, 내가 대.. 2020. 10. 12.
[Javascript] - Predicate Predicate filter(users, function(user){return user.id === 3}) 위와 같이 썻을때 filter 함수가 어떤 것일까. 위와 같이 함수를 작성했을때, 두번째 인자로 오는 function 을 predicate 라고 한다. 보통 함수는 일정한 로직을 거쳐 답을 내게 된다. 그 안에서 사용하는 조건이나 판별식은 동일 할 수 밖에 없다. 하지만 함수형 프로그래밍 에서 predicate 를 사용한다면 이야기가 달라진다. 함수는 흐름 만을 제공할 뿐 결과를 도출해 내는 판별식은 전적으로 predicate 에게 일임한다. 이렇게 우리는 조금 유연하게 함수를 작성할 수 있고 재사용성을 높일 수 있다. //예시 함수 function filter(arr, predicate){ l.. 2020. 9. 26.
[JavaScript] - for...of 본문은 inflearn의 모던 자바스크립트(javascript) 개발을 위한 ES6 강좌 를 공부하면서 정리한 내용입니다. for of - 순회 하기 var data = [1,2,undefined, NaN, null, ""] //for each data.forEach(function(value){ console.log(value); }); // for-in // for-in 은 Array.prototype.getIndex = function(){} 으로 array에 prototype을 추가하게 되면 이 값 또한 data에서 인식하여 function이 출력되게 된다. for(let idx in data){ console.log(data[idx]) } //for-of //따라서 for-in이 아닌 for-o.. 2020. 8. 21.
[React]-React로 사고하기 본문은 React Document 를 바탕으로 작성하였다. React로 사고하기 1단계 : UI를 컴포넌트 계층 구조로 나누기 어떤 것이 컴포넌트가 되어야 할지 어떻게 알 수 있을까? 새로운 함수나 객체를 만들 때 처럼 만들면 된다. 한 가지 테크닉은 단일 책임 원칙이다. 이는 하나의 컴포넌트는 한 가지 일을 하는게 이상적 이라는 원칙이다. 2단계 : React로 정적인 버전 만들기 컴포넌트 계층 구조가 만들어 졌으니 앱을 실제로 구현해 볼 시간이다. 가장 쉬운 방법은 데이터 모델을 가지고 UI만 렌더링 하고 아무런 동작도 없는 버전을 만들어 보는 것 이다. 정적 버전을 만드는 것은 생각은 적게 필요하지만 타이핑은 많이 필요로 하고, 동작들이 수행되는 상호작용을 만드는 것은 생각은 많이 필요하지만 타이핑.. 2020. 8. 18.
[React]-리스트와 Key 본문 내용은 React Document 를 바탕으로 작성 되었다. 리스트와 Key function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => {number} ); return ( {listItems} ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('root') );위와 같이 number list 를 표현 할 수 있다. 다만, 주의 해야 할 점은 위의 를 나타내는 부분에서 ... {number} ...위 와 같이 key값이 없이 작성을 하게 되면 각 항목에 key 를 넣어야.. 2020. 8. 18.

티스토리툴바