프로그래밍 언어 (19) 썸네일형 리스트형 프론트엔드 개발자의 최고의 협업 도구, AI AI가 소프트웨어 개발에 미치는 영향은 실로 크고, 특히 프론트엔드 개발에서는 ChatGPT나 GitHub Copilot 같은 AI 도구들이 큰 도움이 되고 있습니다. 하지만 AI가 개발자를 대체할 수 있을까? 라는 질문은 여전히 많은 개발자들의 고민 중 하나일 것입니다. 그보다는 AI가 개발자의 부족한 부분을 채워주고, 함께 더 나은 결과를 만들어갈 수 있을까?를 생각해 보는 것이 더 의미가 있습니다. 그렇다면 AI가 개발자의 효율성을 어떻게 높이고, 개발자가 더 창의적인 작업에 집중할 수 있게 돕는 협업 도구로서 어떤 역할을 할 수 있을까요?! AI가 코드 작성에 미치는 영향프론트엔드 개발에서 AI 도구들은 코드 작성 과정에서 개발자들의 생산성을 크게 높여줄 뿐만 아니라, 오류 상황에서 빠르게 오류.. [React] 환경 변수 파일 .env란? env란? 어플리케이션 및 웹 개발 중 외부에 공개되면 안되는 정보 (예: 포트 번호, 데이터베이스 관련 정보, 토큰, API 키 등)가 존재하게 될텐데, 이러한 정보가 하드 코딩으로 구성 파일에 포함되면 깃허브나 기타 오픈소스에서 관련 정보들이 노출될 위험이 있습니다. 또한, 서버나 토큰 정보가 수정될 경우 하드코딩을 하였기 때문에 코드를 다시 수정하여 배포해야 하는 문제점도 발생합니다. 이때 이러한 문제를 해결하기 위해 env 파일을 사용합니다. env 파일을 사용하게 되면 외부에 공개되면 안되는 정보들을 구성 파일에 하드코딩하지 않고 사용할 수 있게 됩니다. 외부 파일(.env)에 환경 변수를 정의하여 변수로 받아오는 이유는 보안성과 유지보수성을 높이기 위함입니다. React에서 .env 파일 생성.. [Swift] Swift의 정의와 특징 Swift 란? https://developer.apple.com/kr/swift Swift - Apple Developer Swift는 iOS, iPadOS, macOS, tvOS 및 watchOS를 위한 강력하고 직관적인 프로그래밍 언어입니다. Swift 코드 작성은 대화식으로 재미있고, 구문은 간결하면서도 표현력이 풍부하며, Swift에는 개발자들이 좋 developer.apple.com Swift는 Apple에서 개발한 프로그래밍 언어로, iOS, macOS, watchOS 및 tvOS 앱을 개발하는 데 사용된다. Swift는 C 및 Objective-C와 호환되며, 안전하고 빠른 코드 작성을 위해 설계되었다. Swift의 특징 안전 중심 설계(SAFE) 안전하게 코드를 작성할 수 있는 기능 제공.. MobX 상태 관리 라이브러리 MobX란? 전역 상태 라이브러리 모든 상태 변화가 일어나는 부분을 자동으로 추적해주는 역할 유지보수가 쉬워지도록 상태 로직을 분리하여 모듈화할 수 있음 상태 관리의 단계를 간결하게 해줌 MobX 특징 React에 종속적인 라이브러리가 아님 redux와 다르게 store에 제한이 없음 절대적으로 필요한 경우에만 state 변경 Typescript를 기반으로 만들어짐 기본 동작 원리 및 개념 상태를 변경하기 위한 action이 발생하면 observable(상태)가 update되고, 상태가 변경되었음을 notify해서 필요에 따라 연산된 값(compute values)을 계산하거나 적절한 reaction(반응)을 수행한다. action이 state를 변경하는 단방향 데이터 흐름을 사용 영향을 받는 모든 vi.. [RN] React Native의 작동 원리 [RN] React Native의 정의와 장단점 React Naitve란? 2015년 3월 페이스북에 의해 공개된 오픈소스 모바일 어플리케이션 프레임 워크 사용자 인터페이스를 만드는 React에 기반을 두고 제작 웹 브라우저가 아닌, iOS와 Android에서 동작하는 suji-sw.tistory.com 위의 포스팅을 통해 React Native의 정의와 장점, 단점 등을 알아보았다. React Native 개발자라면 해당 프레임워크가 어떻게 작동 하는지 알 필요성이 있기 때문에 해당 포스팅을 작성하도록 하겠다. React Native의 작동 방식 React Naitve는 크로스 플랫폼 앱 (Cross-Platform App)으로, javascript 언어로 iOS와 Android 플랫폼을 동시에 개발할.. [RN] 상태관리 라이브러리 Redux란 ? Redux(리덕스)란? Redux는 Javascript 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 상태를 관리할 수 있다. 예를 들어 회원가입 시 사용자가 입력한 정보를 가지고 다른 화면으로 이동해야 한다고 가정했을 때 이를 props로 넘기는 것은 매우 비효율적이다. 따라서 상태 관리 라이브러리인 Redux를 사용하여 쉽게 상태 값을 전달하거나 업데이트 할 수 있다는 것이다. 즉 전역 상태를 관리할 때 굉장히 효과적이다. Redux의 특징 1. Single source of truth Redux는 한 곳에서 데이터를 전역적으로 관리하고, 관리하는 이곳을 store라고 부른다. 즉, 하나뿐인 데이터 공간이 있다. 2. State.. [RN] React Query 기초 지식 React Query란? 리액트 쿼리는 API 연동에 특화된 라이브러리 Hook을 기반으로 데이터 로딩을 편하게 구현하도록 도와줌 서버의 값을 클라이언트에 가져오거나, 캐싱, 값, 업데이트, 에러 핸들링 등 비동기 과정을 더욱 편하게 하는데 사용됨 사용하는 이유 API 호출을 통해 받아온 데이터를 useState를 사용하여 저장하였다고 가정하자. 해당 화면에서 머무르는 동안은 Hooks 함수로 인하여 변화하는 값을 계속해서 저장이 가능하다. 그러나 요청하는 API의 수가 많아질수록 그 과정은 더욱 복잡하고 귀찮아질 것이다. 컴포넌트 내부에 선언된 useState이기 때문에 사용자가 다른 화면으로 넘어가면 해당 변수에 저장된 값도 역시 사라진다. 따라서 나중에 다시 컴포넌트를 생성할 때 기존에 받아온 응답.. [RN] Hooks (useState, useEffect, useRef) Hooks React 16.8 버전에서 새롭게 추가된 기능이다. 이전에는 컴포넌트의 상태를 관리하거나 생명 주기에 따라 특정 작업을 수행하려면 클래스형 컴포넌트를 사용해야 했지만, Hooks를 이용할 수 있게 되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었고 컴포넌트의 생명 주기에 맞춰 특정 작업을 수행할 수 있게 되었음. 컴포넌트의 생명 주기 모든 컴포넌트는 생성 → 업데이트 → 제거 의 생명주기를 갖는다. 생명주기의 때에 따라 어떤 작업을 처리해야 하는지 지정해주어야 불필요한 업데이트를 방지할 수 있다. 따라서 Hooks를 써서 컴포넌트의 생명 주기에 맞춰 원하는 작업을 제때 실행시킬 수 있게 해야 한다. 1. useState const [state, setState] = useState(i.. 이전 1 2 3 다음
