리액트 Conext API에 대해 배웠던 내용을 기록하고자 하는 포스트입니다. 해당 포스트는 다음과 같은 목차로 진행됩니다. 목차 들어가기 전 Context API는 상태관리 도구가 아니다? 의존성 주입이란? Context API로 의존성 주입하기 의존성은 교체 가능해야 한다. Context API로 암시적 종속성을 명시적으로 만들자 마무리 레퍼런스 들어가기 전 해당 포스트는 Context API의 기초적인 부분을 다루지 않기 때문에 Context API에 대해 기초적인 지식이 필요합니다. 추가적으로 리액트 쿼리에 대한 내용이 있으므로 리액트 쿼리에 대한 배경 지식도 있으면 더욱 좋습니다. 아직 Context API를 모르신다면 아래의 링크를 통해 리액트 공식문서 보며 Context API를 배워보세요🙂..
개발자의 협업에 관해 좁은 견해를 가지고 있던 나를 반성하며 최근 협업에 대해 얻었던 인사이트를 기록해 두려고 해요. 글을 읽어보면 어떤 분들은 당연한 이야기를 한다고 하시겠지만 아직 현업에 종사하지 않는 취업 준비생인 저한테는 굉장히 좁은 견해를 넓혀주는 계기가 되었어요. 부트캠프 메인 프로젝트를 진행할 때 멘토링 시간을 가졌었는데, 멘토님께서 일하시는 회사의 업무에 대해 잠깐 얘기해 주셨던 적이 있었어요. 정확히 어떤 이야기였는지 잘 기억은 나지 않지만, 대략적으로 웹앱을 개발하면서 안드로이드 개발 팀과의 의사소통 문제, RN에서 관리되는 상태를 어떻게 리액트에게 알려줄 것인가 이런 느낌의 이야기를 했던 것 같아요. 멘토님 말씀을 들어보니, 제가 너무 협업에 대해 디자이너, 백엔드와의 협업에만 생각한..
프로젝트 회고 7월 29일 데모데이를 끝으로 부트캠프의 꽃인 메인프로젝트가 끝이 났습니다. 2월부터 시작해 길게만 느껴졌었던 6개월의 부트캠프 과정도 곧 수료하네요. 많은 것을 배웠고 좋은 사람들을 만나 새로운 인연도 생기고 함께 재밌는 시간도 보내며 2023년 상반기는 많은 추억을 남기고 가네요. 이번 포스팅에서는 메인 프로젝트에 대한 회고를 해볼까해요. 저는 이번 프로젝트에서 프론트엔드 팀 리더이자 부팀장을 맡았었는데요, 부트캠프에서 팀을 결정하는 방식이 크게 2가지가 있는데, 한 팀당 최대 6명 최소 4명씩 팀을 구성하며, 사전에 미리 팀을 구성하거나, 주어진 팀 빌딩 시간이 따로 있는데 해당 시간에 팀을 구성하는 방법이 있었어요. 팀 빌딩 시간에서 조차 팀을 구성하지 못하였다면 랜덤으로 인원이 부..
이전 포스트 [TS] 1. TypeScript 환경설정 TypeScript란? TypeScript는 마이크로소프트에서 개발한 JavaScript를 포함하는 상위 집합(Superset) 언어로 브라우저, 운영체제 상관없이 이용가능한 오픈소스입니다. TypeScript는 왜 등장하게 되었을까요? 22yuu.tistory.com Enum 열거형(Enum)은 특정 값의 집합을 정의할 때 사용합니다. JavaScript에서는 기본적으로 열거형을 지원하지 않지만, TypeScript에서는 문자형 열거형과 숫자형 열거형을 지원합니다. 열거형은 문자형, 숫자형 이 둘의 조합으로도 정의 가능합니다. 열거형은 일반적으로 상수값을 대신하여 사용합니다. 코드의 가독성과 개발자의 오타와 같은 실수를 방지할 수 있습니다. 숫자형..
TypeScript란? TypeScript는 마이크로소프트에서 개발한 JavaScript를 포함하는 상위 집합(Superset) 언어로 브라우저, 운영체제 상관없이 이용가능한 오픈소스입니다. TypeScript는 왜 등장하게 되었을까요? 우선 JavaScript의 불편함에 대해 이야기해보겠습니다. JavaScript 언어는 동적 타입 언어로 매우 유연하고 편리하게 코드 작성이 가능합니다. 하지만 이러한 유연함 때문에 불편함을 경험해보신 적 없으신가요? JavaScript 프로그래머들이 작성하는 가장 흔한 오류는 타입 오류입니다. 다른 종류의 값이 예상되는 곳에 특정한 값이 사용된 경우라던지, 단순한 오타, 라이브러리 API를 이해하지 못하거나 런타임 동작에대한 잘못된 가정 또는 기타 다른 오류가 발생하죠..
클로저의 의미와 원리 이해 클로저(Closure)는 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성으로 자바스크립트 고유의 개념은 아닙니다. 몇몇 언어에서는 구현이 불가능하거나 특수한 방식으로 구현해야 합니다. 하지만 자바스크립트에서는 생성자 함수를 제외한 대부분의 함수는 자연스럽게 클로저가 됩니다. 우선 다양한 문헌에서 클로저를 제각각 다르게 다루고 있는데요. 한 번 살펴볼까요? "자신을 내포하는 함수의 컨텍스트에 접근할 수 있는 함수" - 더글라스 크록포드, "함수가 특정 스코프에 접근할 수 있도록 의도적으로 그 스코프에 정의하는 것" - 에단 브라운, "함수를 선언할 때 만들어지는 유효범위가 사라진 후에도 호출할 수 있는 함수 - 존 레식, "이미 생명 주기상 끝난 외부 함수의 변수를 참조하..
상태 관리 라이브러리의 필요성 리액트에서 컴포넌트 간 데이터를 주고 받을 때 상위 컴포넌트에서 하위 컴포넌트로 “props”를 전달받습니다. 하지만 이렇게 “props”를 전달하는 방법은 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 여러 컴포넌트를 거치게 되면서 특정 컴포넌트는 해당 데이터를 필요하지 않아 “props”를 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들이 생기게 됩니다. 이러한 현상을 “Props Drilling”이라고 합니다. 그림으로 살펴보면 더 명확하게 이해하실 수 있을 겁니다. 위의 이미지를 보면 색이 칠해져 있는 요소는 데이터가 필요한 컴포넌트입니다. 색이 칠해져 있지 않은 요소는 데이터가 필요 없는 컴포넌트입니다. 즉, 색이 칠해져 있지 않은 컴포넌트는 데이터가 필..
실행 컨텍스트란? 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 가장 중요한 핵심 개념 중 하나로 클로저를 지원하는 대부분의 언어에서는 이와 유사하거나 동일한 개념이 적용되어 있습니다. 실행 컨텍스트를 바르게 이해하면 다음과 같은 자바스크립트의 동작 방식을 이해하는데 큰 도움이 됩니다. 스코프 기반 변수와 값을 관리하는 방식 호이스팅이 발생하는 이유 클로저의 동작 방식 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식 this 바인딩 우선 들어가기 전 ECMAScript 사양에서 정의한 4가지 소스코드 타입에 관해서 알아보고 갑시다. 소스코드의 타입 설명 전역 코드 전역에 존재하는 소스코드를 말합니다. 전역..