목록전체 글 (13)

집중 맞은 도둑력

[번역] Nextjs 15.4 업데이트 내용 - Next 16 미리보기 🎉

[출처] https://nextjs.org/blog/next-15-4 Next.js 15.4Next.js 15.4 includes updates to performance, stability, and Turbopack compatibility.nextjs.org 본 블로그는 위 Next js 페이지 일부를 번역하였습니다.Next.js 15.4 업데이트Next.js 15.4는 성능, 안정성, 그리고 Turbopack 호환성에 대한 업데이트를 포함합니다. 이번 릴리스의 주요 하이라이트는 다음과 같습니다:Turbopack 빌드: next build --turbopack에 대한 100% 통합 테스트 호환성안정성 개선: Next.js와 Turbopack에 대한 수많은 안정성 및 성능 개선이 블로그 포스트는 또한 ..
카테고리 없음 2025. 7. 15. 10:45
React에서 key 속성은 어떤 역할인가요?

React의 Key 속성의 역할1. Key 속성이란?React에서 key 속성은 리스트의 각 항목을 고유하게 식별하기 위해 사용되는 특별한 속성입니다. React의 Reconciliation(재조정) 과정에서 DOM 요소를 효율적으로 업데이트하는 데 핵심적인 역할을 합니다.// 기본 사용법{items.map((item) => ( {item.name}))}2. Key가 필요한 이유2.1 React의 Diffing 알고리즘React는 가상 DOM을 비교할 때 다음과 같은 규칙을 따릅니다:같은 타입의 엘리먼트: 속성만 업데이트다른 타입의 엘리먼트: 전체 트리 재생성자식 엘리먼트들: 기본적으로 인덱스 기반 비교2.2 Key 없을 때의 문제점// ❌ 문제가 되는 예시function TodoList() { co..
React 2025. 6. 18. 12:32
[번역] Google Map - React 애플리케이션 내에서 Maps JavaScript API의 사용을 간소화하세요.

Google Maps Platform과 vis.gl 팀이 개발한 @vis.gl/react-google-maps 라이브러리는 Google Maps를 React에 통합하는 강력하고 간소화된 방법을 제공합니다. 이 라이브러리는 React의 선언적 특성과 Google Maps의 풍부한 기능을 매력적으로 결합합니다.주요 개발자 혜택원활한 React 통합: Google Maps를 완전히 제어되는 React 컴포넌트로 직접 임베드하여 React 워크플로우에 조화롭게 맞출 수 있습니다.확장성: 사용자 정의 컴포넌트를 활용하고 React 훅과 컨텍스트를 사용하여 라이브러리의 기능을 손쉽게 확장할 수 있습니다.vis.gl powerhouse: 다른 vis.gl 라이브러리(예: deck.gl)와 원활하게 통합하여 Googl..
React 2025. 4. 3. 15:14
데이터베이스 기본 단어 맞추기

단어 맞추기 게임 트랜잭션 제출 정답입니다! 🎉 다음 정답보기
카테고리 없음 2025. 3. 31. 22:28
정보처리기사 단어 맞추기

단어 맞추기 게임 암호화 알고리즘 보안 솔루션 보안 공격 sw 개발 보안을 위한 공격기법 보안 공격 대응 용어 제출 정답입니다! 🎉 다음 정답보기
카테고리 없음 2025. 3. 30. 16:47
React Native - pnpm으로 해도 되긴합니다만...

요즘 정말 많이 쓰고 있는 패키지 매니저 pnpmReact, Next.js 등 프론트 프로젝트에서 큰 문제없이 사용해왔다.당연하게 React native 프로젝트에서 pnpm을 사용하려고 했다.하지만 문제점을 부딪혀버렸다.사건의 발단React native에 Storybook을 설치해보려고 간단한 프로젝트를 진행하려고 했다.npx create-expo-app@latest 일단 프로젝트를 설치해준다.rm -rf node_modulesrm -rf package-lock.json node_modules와 package-lock.json을 삭제해주고 pnpm install을 진행했다.그리고 expo-go로 잘 실행되는지 확인했다.pnpm start!문제없이 expo go의 QR 코드가 떴다. 떳따떴따 비행기 날라..
React Native 2025. 3. 1. 16:48
[번역] React v19 변경점 (forwardRef 안녕~👋)

React 19의 새로운 기능액션 (Actions)React 앱에서 일반적인 사용 사례는 데이터 변형을 수행한 후 상태를 업데이트하는 것입니다. 예를 들어, 사용자가 이름을 변경하기 위해 양식을 제출할 때 API 요청을 하고 응답을 처리합니다. 과거에는 대기 상태, 오류, 낙관적 업데이트 및 순차적 요청을 수동으로 처리해야 했습니다.예를 들어, 대기 상태와 오류 상태를 useState로 처리할 수 있었습니다:// 이전 액션function UpdateName({}) { const [name, setName] = useState(""); const [error, setError] = useState(null); const [isPending, setIsPending] = useState(false); ..
React 2025. 3. 1. 14:22
React Native로 NFC 사용하기 (feat. expo를 곁들인)

안녕하세요. React Native Expo를 활용하여 NFC 기능은 어떻게 개발하는지 살펴보려고 합니다. NFC란NFC(근거리 무선 통신)는 RFID 기술의 한 형태로, 주로 스마트폰과 같은 장치에서 사용됩니다. NFC는 짧은 거리(보통 4cm 이내)에서 작동하며, 양방향 통신을 지원합니다.Native 앱에서 NFC 사용하기정말 간단하게 Native 앱에서 NFC 개발하는 법을 짚어봤습니다.Android 🤖NFC 권한을 AndroidManifest.xml에 추가합니다.NFC Adapter를 가져와 사용합니다.읽기/쓰기 기능을 만듭니다.iOS 🍎NFC 권한을 Info.plist에 추가합니다.Core NFC 프레임워크를 추가합니다.읽기/쓰기 기능을 만듭니다.두 플랫폼 모두 NFC 권한을 추가하고 Nat..
React Native 2025. 2. 23. 15:00
이전 Prev 1 2 Next 다음