Ideveloper's software blog

ETC:transpile 과 compile의 비교 잘못된 내용이나, 오타 피드백 환영합니다! | 시작하기에 앞서 transpile과 compile 이라는 두 용어를 헷갈린 적이 한두번이 아니고 잘못 사용하고 있는 케이스들을 봐서, 내용을 다시 한번 되짚어 보려합니다. 프론트엔드 개발을 하다보면 자주 babel이나 typescript를 자주 언급하게 됩니다. 또한, 이들을 설명할때는 compile 혹은 transplie이라는 용어를 종종 사용 하게 됩니다. 우선, babel은 javascript transpiler 입니다. 또한 그다음으로, 타입스크립트 역시도 많이 접하실 텐데요, 타입스크립트가 자바스크립트로 컴파일 되는것인가, 트랜스파일 되는것인가는 아래에서 다시 언급하겠습니다. | transpile v..

일상 :1년차 병아리 개발자 2018년 회고 | 회고에 앞서.. 올해 2018년은 병역특례를 시작하면서, 처음 개발자로 발을 내딛은 해였습니다. 또 학교에서 듣는 수업을 듣고 과제를 하는게 아니라, 사회에 나와서 개발자로 일하는 만큼 많은 점들이 낯설었고, 또한 여러 결정들을 하고 책임들을 가져야 하는 부분들을 겪으며 힘들었던 적도 많았고, 또 그러한 만큼 뿌듯했던 적도 많았습니다. 그만큼 제게 많은 일들이 올해 일어났던 것 같습니다. 그리고 처음 개발자로 발을 내딛는 해였던 만큼, 더 알차게 보내고 싶었고, 어떻게 하면 좋은 개발자로써 성장할 수 있을까, 이시점에서 어떠한 공부를 해야 훗날 내게 도움이 될까 등등 유난히 많은 생각을 했던 올 한해였고 이러한 올 한해를 헛되이 보내지 않기 위해 치열하게 ..

Web:시맨틱 웹 낱낱이 파헤치기 + React.Fragment 에 쓰인 시맨틱 개념 | 시작하기에 앞서 팀 버너스리, 차세대 웹 - TED 강연 (웹에서의 데이터) https://www.ted.com/talks/tim_berners_lee_on_the_next_web?language=ko#t-397419 (7분 40초 ~9분 40초) | Semantic web? Semantic Tag? > Definition 시맨틱 웹은 직역하면 의미론적인 웹 입니다. 즉, 문서의 이미에 맞게 어플리케이션의 의미에 맞게 구성 된 웹입니다.컴퓨터가 사람을 대신하여 정보를 읽고, 이해하고 가공하여 새로운 정보를 만들어 낼 수 있도록 이해하기 쉬운 의미를 가진 차세대 지능형 웹. 또한 다른 의미로는 정보를 분석하여 그 정보..

React:Taste the principles of functional programming in React 이 글은 원작자 David Kopal의 허락을 맡고 https://www.codinglawyer.io/posts/taste-the-principles-of-fp-in-react 를 번역한 글입니다. (본인이 의역한것도 있으므로, 잘못된 번역 피드백 주시면 감사하겠습니다! 감사합니다) 지속가능한 컴포넌트 구조는 안정적인 react application을 개발할때, 선행되어야하는 필수요건입니다. 이러한 것은 higher-order-components (HoCs) 고차 컴포넌트를 사용하면서, 즉 함수형으로 코드를 짜면서 이뤄낼수 있습니다. 이러한 아이디어는 당신의 컴포넌트에서 로직을 분리하기 위함입니..

Web:Heading Tag(제목 태그)와 검색엔진 최적화의 연관성 | 들어가기에 앞서, 웹을 개발하다 보면, 웹페이지를 구성할때 heading tag를 자주 사용하게 됩니다. 그러나 heading tag의 역할이나 중요성에 대해서 간과하게 되는 경우가 있는데요. 하지만 heading 태그는 페이지의 내용을 보여주는 것 뿐 아니라 검색엔진 최적화에도 큰 영향을 미친다고 합니다. 이를 위해 heading 태그에 대해서 알아봅시다. | Heading tag란? 책을 생각해보면, 책의 내용중 중요한 내용에는 색이나 굵기의 차이를 두기도 하는데요, 이러한 역할을 하는것이 HTML에서의 제목 태그(Heading tag) 입니다. HTML에서 heading tag 는 H1~H6 까지 총 6개 입니다. 크기에도 차이..

Javascript:싱글톤 패턴 (singletone pattern) "자바스크립트 핵심 가이드 라는 책을 읽던중, 모듈 부분에 대해서 학습중에 모듈 패턴을 사용하면, 전역변수 사용을 없앨 수 있고, 이 패턴을 사용하면, 정보은닉과 그 외 다른 좋은 설계 방식을 따를 수 있게 하고, 애플리케이션이나 다른 싱글톤 패턴들을 효과적으로 캡슐화 할 수 있게 한다" 는 부분이 나왔습니다. 싱글톤 패턴에 대해서는 어렴풋이 알고 있어, 이 기회에 제대로 알아보기 위해 학습을 해보았습니다. | 싱글톤이란? 싱글톤 패턴은 전체 시스템에서의 하나의 인스턴스만 존재하도록 보장하는 객체 생성패턴이라고 합니다.따라서, 객체 리터럴도 모두 싱글톤 패턴이라고 할 수 있다고 합니다.또한 싱글톤은 특정 클래스의 인스턴스를 오직 하나만..

React:리액트에서의 shallow compare부터 React.PureComponent 까지 | 상황 this.state = { someValue: true }; ​ this.setState({ someValue: true });리액트를 사용하여 개발할때, 위와 같은 상황에서는, setState는 무조건적으로 state를 업데이트하게 되고, 그에 따른 불필요한 렌더링을 하게 됩니다. 따라서 이를 방지하기 위해, 아래와 같이 1. React.PureComponent2. shouldComponentUpdate 주기를 기존 클래스컴포넌트에 추가 를 적용시켜 문제를 해결할수 있습니다. | Shallow compare란?shallow compare는 equality를 체크하는것입니다.숫자나 문자열 같은 sca..

Serverless:firebase deploy 시에 410 error 뜰때 해결 방법 > 에러상황 firebase에서 제공하는 deploy를 할때 위와 같이 410 에러가 뜰 때가 있다. > HOW TO SOLVE firebase 사용 커뮤니티에서 아래와 같이 답변을 했다. If you are receiving a 410 error, you will likely need to update your cli version (firebase-tools). Updating to the latest version should fix it. You will need to upgrade your CLI version to at least 4.1.0 (>= 5.1.1 is recommended). 즉, firebas..