개발이 하고싶은, 첼시를 좋아하는

프로그래머스/데브코스 프론트엔드

[TIL] 2022-06-23 / Day 69 (타입스크립트 기본 문법)

중간 프로젝트(SNS 만들기)가 끝나고 오랜만에 강의를 다시 듣게 되었다. 처음 접하게 된 타입스크립트에 대해 간략하게나마 정리를 했다. 프로젝트 회고도 곧 정리해서 작성할 계획이다. 오늘 배운 내용 타입스크립트 타입 + 자바스크립트. 타입이 적용된 자바스크립트이다. 장점 안정성 가독성 명시적으로 타입을 지정해 사용하기 때문에 안정성이 높아진다. 컴파일 단계에서 미리 오류를 감지할 수 있기 때문이다. 자바스크립트는 타입 없이 사용하기 때문에 높은 자유도가 있지만, 직접 실행해보고 테스트하기 전까지는 오류를 감지하기 어렵다. 타입을 명시적으로 지정했기 때문에 실수를 줄일 수 있다. 타입을 명시적으로 작성했기 때문에 타입을 보고 무엇인지 알아보기가 쉽다. 네이밍만으로 유추하기 힘들다거나 다른 사람이 작성한 ..

프로그래머스/데브코스 프론트엔드

[TIL] 2022-06-01 / 53일차 (React - Hook 3)

오늘 배운 내용 useMemo Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org useMemo는 최적화를 위해 사용하는 Hook이다. 컴포넌트가 리 렌더링 된다는 것은 Function 컴포넌트를 호출하는 것과 동일하다. 만약 리 렌더링이 여러 번 일어난다는 것은 함수가 매번 다시 실행되고 내부의 선언된 변수와 함수가 그때마다 다시 선언되고 실행된다는 의미다. 그렇다면 리 렌더링(re-rendering)은 언제 발생하는가? 함수 컴포넌트는 자신의 state가 변경될 때 re-rendering 한다. 부모 컴포넌트로부터 받는 props가 변경될 때 re-rendering 한다. 부모 컴포넌트의..

프로그래머스/데브코스 프론트엔드

[TIL] 2022-05-28 / (React - Hook 2)

오늘 배운 내용 useRef useRef는 언제 사용하는가? Javascript에서 DOM Selector 함수를 사용하여 DOM에 직접적인 접근을 하는 것처럼, React에서는 이 기능을 useRef가 대체하고 있다. 간단한 예제를 살펴보자. import { useRef } from 'react'; function App() { const inputRef = useRef(null); return ( inputRef.current.focus()}>Click Here! ); } export default App; input 태그가 있고, button 태그가 있는 기본적인 구조다. button을 클릭하게 되면, input 태그에 focus를 주는 구조이다. Javascript에서 DOM에 접근하기 위해서는 ..

프로그래머스/데브코스 프론트엔드

[TIL] 2022-05-27 / 50일차(React - Hook 1)

오늘 배운 내용 Day 50의 강의는 여러 컴포넌트를 생성하는 방법(Storybook을 이용한)이었다. 재사용이 가능한 컴포넌트를 생성하고, Storybook에서 결과를 확인하는 식의 방식이었다. Text, Header, Spacer, Image, Spinner 등 자주 사용될 만한 컴포넌트를 생성하는 내용이었고, 각 컴포넌트를 생성하는 함수 내부에서 Hook을 종종 사용했었다. 이전 강의(Day 48, 49)에서 '분기와 반복' 그리고 '상태와 이벤트 바인딩'에 대한 내용을 다루면서 Hook을 사용하기 시작했다. 그때 당시에는 대략적인 이해만을 하고 넘어갔었다. 사용 사례 강의나 재사용이 될만한 여러 컴포넌트를 생성하는 것에 대한 강의를 보면서 Hook에 대한 이해가 없이는 무의미하다 싶어 Hook에 ..

프로그래머스/데브코스 프론트엔드

[TIL] 2022-05-25 / 48일차(React)

오늘 배운 내용 React를 공부하는 방법? 라이브러리는 개발을 돕기 위해 여러 기능을 모아둔 모듈이다. 라이브러리, 프레임워크를 사용할 때 깊은 depth까지 제대로 파고들어야 잘 활용하거나 제대로 활용할 수 있다는 생각에 깊게 공부하는 바람에 어렵게 느껴질 수 있다고 한다. 기능의 구체적 원리, 코드를 알기 위해 깊게 파고들기보다는(나중에 천천히 공부하는 방향성을 갖고) 천천히 공부해 가는 것을 추천한다고 한다. 파일 구조 – React A JavaScript library for building user interfaces ko.reactjs.org 우선 '컴포넌트 자체만'을 열심히 생각하는 자세로 첫 시작을 해야 한다고 한다. 재사용성, 확장성을 미리 생각하고 개발을 하는 것은 쉬운 일이 아니라고..