배경이번에 회사에서 리액트로 리팩토링을 하게 되는데 컴포넌트를 편리하게 관리할 수 있는 방법이 있을까 고민하다 스토리북을 알게 되었다. 스토리북?🤔공식홈페이지(https://storybook.js.org/)를 들어가서 쭉 읽어보니 스토리북을 사용하면 아래와 같은 장점들이 있다고 소개 된다! (두구두구) 📝 Develop UIs that are more durableIsolate components and pages and track their use cases as stories. Verify hard-to-reach edge cases of UI. Use addons to mock everything a component needs—context, API requests, device featur..
⭐FE
💡Typescript는 Javascript에 type을 입힌 언어이며 Typescript로 작성한 code를 javascript로 compile해 그 결과물을 프로젝트에서 사용한다. compile할 때 compile 옵션을 설정해야 하며 이런 option은 tsconfig.json이라는 파일에서 설정이 가능하다. 🚀지금부터 기본적인 Typescript 환경을 구성해보려고 한다. 1. 타입 스크립트를 설치한다. -> npm install typescript [ --save or --save-dev or -g ] 2. tsconfig.json 생성 및 compile 옵션 설정 ( ts -> js 로 compile시 옵션을 tsconfig.json에 작성 )-> 참고 ) 프로젝트 최상단에 tsco..
💡 우리는 import, export를 통해 다른 js파일에 정의된 함수, 변수등을 가져와 사용할 수 있다. 그때 사용되는 import와 export에 대해 알아보고자 한다. ※ 참고사항) node 환경에서 module의 import, export를 test하고자 한다면 반드시 package.json에서 하단과 같은 옵션을 설정해야 됩니다. "type": "module" 본격적으로 import와 export의 사용 예제를 확인해보자! 예시 1)// b.jsfunction f1(){ console.log("f1 호출") }let variable = "variable"export {variable, f1} //a.jsimport {variable, f1} from './b.js'console.log(va..
결론 부터 말하자면 Prototype과 __proto__가 지칭하는 객체는 동일하며 ( 글쓴이가 가정한 상황 속에서는 ) prototype은 생성자 함수의 property에서 그리고 __proto__ 는 생성자 함수를 통해 생성된 새로운 객체의 property에서 확인 할 수 있다. function car(brand,price){ this.brand=brand this.price=price} 위와 같이 car라는 function을 정의하는 순간 자바스크립트 내에서는 car라는 객체가 생성되는 동시에 ( 자바스크립트 에서 함수도 객체 ) car.prototype이라는 객체도 생성됩니다. 그리고 그 prototype 객체에는 constructor라는 property가 있고 그 property값은..
왜 Formik library를 사용할까?React에서 많이 쓰는 Form library인 Formik을 학습하려고 한다. 학습하기에 앞서 공식 Formik Hompage에서 왜 Formik library를 사용하는지 알아 보았는데 그 이유는 React에서 form은 매우 장황( 사용하기 덜 직관적인으로 해석하면 되려나 .. )하고 비용( 무겁다고 해석 하면 될듯 ?)이 많이 들기 때문이라고 한다. 즉 Formik LIbrary를 사용하면 react에서 Form을 좀 더 쉽고 정돈된 형태로 사용 할 수 있다고 한다. 더군다나 이 libarary는 매우 가볍다고 나와 있다 ( 아래에 내용이 나와 있다. - 하단 참고 ) https://formik.org/docs/overview Overview | F..
