Front-End33 [TypeScript]타입스크립트 컴파일러(tsc)는 어떻게 작동하는가? (feat. AST란?) 최근 직장 동료들과 주 1회 스터디를 통해 "우아한 타입스크립트 with React" 책을 완독 했다. 이후 스터디 내용들을 복습하고 다시 정리할 기회를 가질 예정이지만, 그에 앞서 왜 타입스크립트를 사용하는지, 그리고 타입스크립트가 어떻게 작동하고 있는지에 대한 포스팅을 먼저 작성해보려고 한다. 왜 타입스크립트를 쓰게 되었는가?자바스크립트(JS)가 웹 브라우저에서 실행되는 동적 프로그래밍 언어로, HTML 및 CSS와 함께 웹 개발의 핵심 요소 중 하나인 것은 널리 알려져 있는 사실이다. 덕분에 개발자들은 웹 환경에서 문서 객체 모달(DOM, Document Object Model)을 조작하여 사용자 상호 작용을 처리하고 비동기적으로 서버와 데이터를 주고받는 등의 다양한 기능을 구현할 수 있었다. 문제.. 2024. 11. 10. [React]React 16 버전에서의 주요 변화점과 동작 원리 프론트엔드 개발자라면 리액트는 너무나도 친숙한 기술 스택이다. 언제부터 리액트는 이렇게 인기가 많아지게 되었을까? 그리고 웹 개발자들은 왜 리액트를 선호하게 되었을까? 리액트의 중요한 분기점이 되었을 16 버전의 주요 업데이트와 동작 원리, 그리고 역사를 간단히 알아보도록 하자. Why use React? (왜 리액트를 쓰는가?) 2023년에 스택오버플로우에서 개발자들을 대상으로 진행한 설문에서 "웹 프레임워크 및 기술" 부문에서 위와 같은 결과가 집계되었다. 웹 개발, 특히 프론트엔드 분야에서는 현재 가장 많이 사용되는 기술 스택이라고 보아도 될 것이다. 하지만 의문이 든다. 왜 사람들은 리액트를 주요 기술 스택으로 채용하여 개발하게 되었을까? 그냥 너도나도 써서 리액트를 썼을리는 없는데, 무엇이 리.. 2024. 10. 13. [React-Query]리액트 쿼리 기본 문법 리액트 쿼리를 왜 써야 하는지 지난 포스팅에서 언급했으니, 이제 기본 문법들을 정리해 보자. 해당 문법들에 대한 설명은 udemy에서 내돈내산한 강의 React Query / TanStack Query: React Server State Management의 내용을 기반으로 하고 있다.QueryClientProvider리액트 쿼리를 사용하기 위한 기본 공급자(Provider) 컴포넌트이다. 비슷한 예시로 ThemeProvider, RouterProvider를 생각하면 될 것 같다. 상위 컴포넌트에서 한 번 감싸서 사용하면 되고, 보통 queryClient라고 선언하는 인스턴스를 client 속성에 할당해주어야 한다. 아래와 같은 형식으로 생성한다. import { QueryClient, QueryClie.. 2024. 6. 24. [React-Query]리액트 쿼리 Intro 최근 프로젝트들에서 계속 리액트 쿼리(React-Query)를 쓰고 있다. 리액트 쿼리를 써본 적이 없어서 처음 썼을 때 너무 어려웠고, 이후에도 필요에 따른 문법만 띄엄띄엄 대충 보고 작업을 하다보니 관련된 지식이 많이 모자라다는 생각이 자주 들었다. 이에 따라 강의를 듣고 좀 더 제대로 배울 필요가 있다는 생각이 들어 강의들을 찾아 보았다. TanStack Query 공식 문서에서도 정식 강의가 있는데, 가격이 덜덜해서 포기하고 Udemy에 올라와 있는 리액트 쿼리 강의를 선택했다. 디테일한 설명과 미리 준비되어있는 코드들로 필요한 부분들만 code-along 하면서 공부할 수 있어 쾌적하고, 재밌었다. 아직 배웠던 지식을 실무에 많이 적용해보진 않았지만, 강의를 들어면서 흥미롭게 들었던 내용들과 정.. 2024. 6. 21. [React-Typescript] 프로젝트 기본 설정 및 DaisyUI 드롭다운 구현하기 개발을 업으로 삼은지 8개월이 지난 어느 날. 회사에서 신입 개발자들을 뽑는다는 소식을 들었다. 새로 뽑는 사원의 경우 업무 능력을 보기 위해 라이브 코딩 테스트를 본다고 한다. 주제는, 30분 안에 TODO 리스트 만들기 였다. 수많은 개발자들이 거쳐왔을 너무나도 익숙한 주제였지만, 프로젝트 설정부터 구현까지 30분이라는 조건이 마냥 쉬울 것 같지는 않았다. 시험을 보니 이게 왠걸, 생각보다 더 어려웠다. 나름 경력이 쌓이고 다양한 프로젝트를 했다고 생각한 내게 현실을 깨닫게 해주는 시험이었다. 시작부터 설정에서 실수해서 프로젝트를 지우고 다시 시작하는 희대의 삽질과 함께 30분이 빛의 속도로 지나갔다. 시험의 요구사항 절반도 채우지 못한 내가 그곳에 앉아 있었다. 응시자였다면 떨어질 수 있는 점수를.. 2024. 6. 8. [React-Native]앱에서 권한 요청 후 카메라 앱 띄우기 앱을 개발하다 보면 카메라 앱을 통해 사진이나 동영상 촬영 기능을 필요로 하는 경우가 있다. 이때, 카메라 앱 구동에 앞서 해당 앱에 대한 권한 설정이 필요하고, 권한이 설정되었을 때 카메라 앱을 구동시켜야 한다. 앱 권한 설정하기 앞서 언급한 대로 앱에서 카메라 앱에 접근하려면 접근 권한을 허용받아야 한다. 이를 위해 react-native-permission 라이브러리를 사용하면 보다 편하게 권한 설정을 요청하고 확인할 수 있다. 카메라 앱 외에도 다양한 권한을 설정하고 추가할 수 있기 때문에 많은 사람들이 사용하고 있다. 1. Dependency 설치 먼저 개발 환경의 build package에 따라 설치를 해준다. $ npm install --save react-native-permissions .. 2024. 4. 20. 이전 1 2 3 4 5 6 다음
