OCEAN-WARD BOUND

이 책을 선택한 이유는? 본격적인 타입스크립트 학습에 앞서, 타입스크립트의 필요성이 대두된 보다 근본적인 이유가 궁금했습니다. 깊게 배운 언어가 Js뿐이기 때문에 정적 타입 언어가 낯설었고, 기존의 Js만으로도 크게 문제 없이 개발을 할 수 있으니 추가적으로 타입을 명시하는 행위가 크게 와닿지 않았어요. 그러한 궁금증에 답이 될까 싶어서 해당 저서를 선택하게 되었습니다.이 책의 주요한 특징으로는 어떠한 정적 타입 언어의 국한된 기술서와 같은 것이 아닙니다. 정적 타입 언어의 필요성과 특징들을 알기 쉽게 전달하는 개념서에 가까워요. 그래서 정적 타입 언어의 기능(타입 추론, 제네릭 등)들을 다양한 언어로 예시를 들어서 설명합니다. 타입스크립트 만을 위한 저서는 아니지만 타입스크립트의 예시도 많이 등장하기 ..

저는 프론트 엔드 파트에 입문하면서 고민했던 부분들이 많았던 것 같아요. 특히 부트캠프를 고를 때는 더.. 제가 쓰는 글은 광고도 아니고 순전히 제가 느꼈던 부분들을 사실적으로 기록하는 것이기 때문에 혹시 부트캠프를 고르거나 신입으로써 앞으로의 커리어를 고민하고 계신 분이 있다면 제 글을 읽고 미약하게라도 도움이 됐으면 좋겠습니다ㅎㅎ 다들 화이팅 입니다..! :)프론트엔드 개발에 입문하다..대학교 3학년 때 웹 프론트엔드 개발을 입문했어요.평소 영화나 그림, 패션과 같은 시각적인 것을 좋아하는 저에게 프로그래머라는 직업은 딱딱하고 정적이며, 엔지니어적인 성향이 강하다고 생각했어요. (한마디로....노잼..?)그러다가 웹 퍼블리셔라는 직업을 알게 되었고 CSS 강의를 들으면서 개발 쪽에도 이런 심미적인 부..

useReducer는 컴포넌트에 reducer를 추가하는 React Hook입니다.const [state, dispatch] = useReducer(reducer, initialArg, init?) 한 컴포넌트에서 state 업데이트가 여러 이벤트 핸들러로 분산되는 경우가 있습니다.const [tasks, setTasks] = useState(initialTasks); function handleAddTask(text) { setTasks([...tasks, { id: nextId++, text: text, done: false }]); } function handleChangeTask(task) { setTasks(tasks.map(t => { ..

useContext는 컴포넌트에서 context를 읽고 구독할 수 있는 React Hook입니다.const value = useContext(SomeContext) 기본 규칙useContext를 컴포넌트의 최상위 수준에서 호출하여 context를 읽고 구독합니다.import { useContext } from 'react';function MyComponent() { const theme = useContext(ThemeContext); // ... 매개변수1. SomeContext : createContext API로 생성한 context입니다. context 자체는 정보를 담고 있지 않으며, 컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류를 나타냅니다. 반환값useContext는 호출하는 컴포넌..

useMemo는 리렌더링 사이에 결과를 캐싱할 수 있게 해주는 React Hook 입니다.const cachedValue = useMemo(calculateValue, dependencies) 기본 규칙컴포넌트의 최상위 레벨에 있는 'useMemo'를 호출하여 재렌더링 사이의 계산을 캐싱합니다.import { useMemo } from 'react';function TodoList({ todos, tab }) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab] ); // ...} 매개변수1. 캐싱하려는 값을 계산하는 함수 : 캐싱하려는 값을 반환하는 함수를 콜백으로 넘깁니다. 순수해야 하며 인자를 받지 않..

useCallback은 리렌더링 간에 함수 정의를 캐싱해 주는 React Hook입니다.const cachedFn = useCallback(fn, dependencies) 기본 규칙리렌더링 간에 함수 정의를 캐싱하려면 컴포넌트의 최상단에서 useCallback을 호출하세요.import { useCallback } from 'react';export default function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referrer, orderDetails, }); ..

useEffect란?useEffect는 외부 시스템과 컴포넌트를 동기화하는 React Hook입니다. React의 함수형 컴포넌트는 순수 함수를 지향합니다. 여기서 순수 함수란 같은 입력이 주어졌을 때 언제나 같은 출력을 반환하는 함수를 말하며, React의 함수형 컴포넌트의 순수성은 같은 props와 같은 state 일 때, 언제나 같은 출력을 기대하는 것을 말합니다. 컴포넌트를 엄격하게 순수함수로 작성하면 코드베이스가 점점 커지더라도 예상밖의 동작이나 당황케하는 버그를 피할 수 있습니다. 하지만 React의 함수형 컴포넌트도 외부 환경에 영향을 받을 수 있습니다. 예를 들면 서드 파트 라이브러리를 연결하거나, API Request에 따른 데이터를 렌더링하거나, 데이터베이스를 연결하는 동작들이 있을 수..

useRef란?useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook입니다.const ref = useRef(initialValue); 기본 규칙컴포넌트의 최상위 레벨에서 useRef를 호출하여 ref를 선언합니다.import { useRef } from 'react';function MyComponent() { const intervalRef = useRef(0); const inputRef = useRef(null); // ... 매개변수useRef는 단일한 매개변수를 받습니다. 해당 매개변수는 ref 객체의 current 프로퍼티의 초기 설정값입니다. 어떠한 유형의 값이든 지정할 수 있으며, 해당 인자는 초기 렌더링 이후부터는 무시됩니다.반환값useRef는 단일 프로퍼티..

useState란?useState는 컴포넌트에 state 변수를 추가할 수 있는 React Hook입니다.const [state, setState] = useState(initialState); state란 컴포넌트의 기억 저장소라고 합니다. React Component가 Rerendering 될 때, 특정한 상태를 기억해야 하는 경우가 많습니다. 이 때 일반 변수는 컴포넌트 함수가 실행, 즉 Render될 때 기존의 값을 초기화하기 때문에 React에서는 useState란 hook을 제공하여 state라는 개념을 통해서 React가 해당 Component의 state를 기억하게 하여, Component의 Rendering 사이의 데이터를 기억할 수 있게 합니다. 기본 규칙useState는 컴포넌트의 최..

이벤트 버블링 브라우저 내에서 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 이러한 현상을 이벤트 버블링이라고 합니다. 위와 같은 형태를 가진 웹 페이지가 있다고 가정해보겠습니다. 위의 main, section, div, p 태그는 계층관계를 가지고 있습니다. 이 때 해당 요소들의 click 이벤트를 감지하는 리스너를 등록합니다. 이 때 위의 p 태그를 클릭했을 시에 어떤 일이 발생할까요? 위와 같이 콘솔에 clicked!가 4번 출력됩니다. 이렇듯, p 태그의 이벤트가 동작하고 p 태그와 계층 관계에서 부모 관계를 가지고 있는 div, se..