Typescript 개발팀에 속해서 일을 하는동안 거의 모든 프로젝트에서 Typescript를 사용해왔다. 하지만 프로젝트를 만드는데에만 집중을 하고, 효율적인 언어 사용에는 관심이 많이 부족했다. 더 나은 개발과, 앞으로는 잘 사용할거라는 다짐을 위해 유용한 팁들을

정말 순식간이었다. 더운 날 모두 모여 시작을 했는데, 어느덧 가을도 끝나가고 있다. 코딩이라는 접점으로 모인 사람들과의 시너지 속에서 쉴틈없이 달려온 3개월, 나는 아직도 지금의 내 모습 신기하기만 하다.지금와서 돌이켜보면 시작의 이유가 복잡하지만은 않다.

props-types는 props의 type정보를 정의할 때 사용하는 React 공식 패키지이다. ( npm, yarn 등으로 설치해야 한다.)기본적으로 Javascript는 동적 타입 언어이다.때문에, 매번 type을 정해주지 않아도 되고 간단한 프로그램을 작성할 때

Javascript로 프로젝트를 진행할때, 데이터 통신을 해야하는 경우에는 fetch() 함수를 사용한다.Axios는 fetch() 함수보다 많은 편리성을 제공하는 HTTP통신을 위한 Javascript라이브러리이다.IE8 이상의 모든 브라우저 지원JSON 자동변환re

Typescript는 Javascript의 구문이 허용되는 Javascript의 상위집합언어이다.Typescript는 Type이 무엇이 되어야 하는지 명시 가능한 Javascript 언어의 확장을 지원한다.name과 id를 가진 user객체에서name: string,

이전 블로그에서 간단하게 짚고 넘어갔던 내용 중 Clean-up 함수라는 개념이 있다.Clean-up함수란,useEffect()에서 parameter로 넣은 함수의 return 함수이다.Component의 unmount이전 / update직전에 어떠한 작업을 수행하고

Styled-components는 CSS-in-JS 라이브러리중 많은 인기를 얻고있는 라이브러리이다.CSS-in-JS란,JavaScript를 사용하여 구성 요소의 Style을 지정하는 Styling 기술이다.Inline Style과는 다르게, <style>요소로

React Functional Component에서 Effect Hook을 사용하면, Side effect를 수행할 수 있게된다.Side effect란,React Component가 화면에 render된 이후에, 비동기로 처리되어야하는 효과들을 말한다.useEffect

연휴기간 react-hook, styled-components 연습을 위해 CRA를 사용하여 간단한 Todo app을 만들보았다. TodoGithubuseState()를 사용하여, 초기값으로 비어있는 Object를 선언했다.추가된 항목들의 완료 / 삭제가 원활하게 이루

React Hook을 이용하면 Class를 작성할 필요없이 state와 여러 React의 기능을 사용할 수 있다.그중에서 state hook은 Functional Component속에서 state를 사용할 수 있도록 해주는 hook이다.state hook은 useSta

Optional chaining은 ES2020에서 새롭게 추가된 문법으로, ?.를 사용하여 객체의 속성값에 접근할 수 있게 해주는 문법이다.참조하는 대상이 null / undefined가 아니라면, 속성에 대한 접근이 가능하다.만약 null / undefined라면 u

RESTful API에서 REST란,REpresentational State Transfer의 약자로, HTTP기반으로 필요한 자원에 접근하는 방식을 정해놓은 아키텍쳐이다. 위 정의에서 말하는 자원은 저장된 데이터, 이미지/동영상/문서등의 파일, 서비스를 모두 포함한다

Props React에서는 Component를 다른 Component로 import해서 사용할 수 있다. import하는 Component를 부모라 칭하고, import되는 Component를 자식이라고 칭한다. >2개의 Component사이에는 부모-자식 관계가

API가 나오기 전에 Front-end에서 전송받을 데이터를 미리 가짜로 만들어서 개발을 진행할 수 있다. 미리 가짜데이터를 API로 부터 받을 데이터와 같은 구조로 만들어서 개발을 진행하면, 실제 API가 들어올때 수월하게 작업을 할 수 있다.\--.js / --.j

단축 속성명이란,key, value를 이용해 object를 만들때 미리 선언한 변수로 object를 편리하게 만들 수 있는 JS의 기능이다.미리 생성되어 있는 데이터, 파라미터로 전달받은 데이터를 재사용할 수 있게 된다.object의 속성명을 동적으로 변경하며 사용할

최근에 내가 지나온 시간속에는 항상 코딩이 담겨있다. Wecode라는 곳에서 보낸 시간도 어느덧 한달이 채워졌다. 내 생각을 직접 만들어보고 싶어서 접했던 코딩은, 이제 앞으로의 미래를 만들어줄 큰 부분으로 자리를 잡았다. Bootcamp에서 새로운 사람들과 새로운 과

setState()란, React docs에 따르면state 객체에 대한 업데이트를 실행으로 정의되어 있다.React에는 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값인 state가 존재한다.state를 변경하기 위해서는 반드시 setState()를 사용해야한다.이때

fetch() Front-end에서 Back-end로부터 데이터를 받아오려면 api를 호출하고 해당 데이터를 응답받아야 한다. 이때 사용되는 것이 fetch() 이다. 1. 기본 문법 먼저, fetch()는 호출할 api의 주소를 인자로 받는다. 해당 주소를 인자

Stack이란,제한적으로 접근할 수 있는 나열구조이며, 접근은 언제나 목록의 끝에서만 일어난다.또한, 한 쪽 끝에서만 자료를 넣거나 뺄 수 있는 선형 자료형이다.자료를 넣는 것을 push라고 하고, 반대로 넣어둔 자료를 꺼내는 것을 pop이라고 한다.pop을 할 때 꺼

React-router는 react에서 Routing을 위해 가장 많이 사용되는 라이브러리이다.CRA를 사용하여 react 프로젝트를 진행한다면 Routing을 위한 로직이 들어있지 않기 때문에, Third-party Library를 import해서 사용해야한다.Bro