Front-End/React + Native8 [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. [React-Native] Splash 화면 / 앱 아이콘 설정하기 (IOS) IOS 환경에서 Splash 화면 과 앱 아이콘을 설정하는 방법을 까먹지 않기 위해 기록하자. Splash 화면 설정하기 1. React-native-splash-screen 설치 검색을 통해 react-native-splash-screen 라이브러리를 설치한다. TS 호환이 되는 아주 좋은 라이브러리고, 주간 다운로드 수도 매우 많아 믿을 수 있는 라이브러니 안심하고 사용해도 될 것 같다. 네이티브 앱 기준으로 설치 후 cd ios + pod install까지 진행하여 Podfile을 업데이트 해준다. // App.tsx const App = () => { ... useEffect(() => { SplashScreen.hide(); }, 2000); }, []); ... } 다음으로 useEffect에.. 2024. 3. 29. 이전 1 2 다음
