선호:하다

2주차 과제: 지도 구현주요 기능1. 지도 불러오기: 웹뷰를 이용하여 앱에서 지도를 띄웁니다. ✅2. 지도 상호 작용: 확대, 축소 및 드래그 이동 기능을 구현합니다. ✅3. 현재 위치 표시: 사용자의 현재 위치를 지도에 표시합니다. ✅4. 즐겨찾기 기능: 즐겨찾기 위치를 추가하고, 해당 목록을 관리합니다. ✅ 시연 영상폴더 구조1. appapp├── assets| ├── HomeSvg.tsx| ├── StarBtnSvg.tsx| ├── StarSvg.tsx| └── TrashCanSvg.tsx├── components| ├── BottomNavigator.tsx| ├── StackNavigator.tsx| └── StarItem.tsx├── constants| └── palette.ts├..

학습목표환경세팅네비게이션스타일링 익숙해지기환경세팅 (윈도우 환경)오라클 jdk17 설치JAVA_HOME 환경변수 설정안드로이드 스튜디오 설치 Android SDK Platform 31 Intel x86 Atom_64 System ImageGoogle APIs Intel x86 Atom System ImageANDROID_HOME 환경변수 설정애뮬레이터 설정※ 안드로이드 스튜디오 실행 없이 애뮬레이터 실행하기관리자 권한으로 cmd 실행 후cd C:\Users\USER\AppData\Local\Android\Sdk\emulator  // 애뮬레이터가 설치된 폴더로 이동 emulator -avd Pixel_2_API_31(애뮬레이터 이름) // 애뮬레이터 실행 명령어React-Native cli 프로젝트 생성..

Zustand란Zustand란 간소화된 Flux 원칙을 사용하는 상태관리 라이브러리이다.점점 인기가 많아지고 있는 라이브러리라 이번 기회에 공부하고 사용해보고자 하였다. Zustand의 특징한 개의 store를 사용하여 중앙 집중식으로 상태관리가 이루어진다.코드 양이 절대적으로 적고 쉽다.특정 라이브러리에 엮이지 않는다.provider와 같은 context를 제공하지 않고도 사용가능하다.한 개의 store를 사용한다는 점에서 redux와 비슷하지만 개발자가 reducer, action등을 직접 만들어줘야하는 redux에 비해서 zustand는 Hooks를 사용하여 상태를 이용하기 때문에 코드 양이 훨씬 적고 간결하여 러닝커브가 낮다. Zustand 사용하기zustand 설치npm install zusta..

css 작업 중 position: absolute를 사용하다보니 100%를 채워야하는 div의 width가 inline 요소 마냥 줄어드는 것을 목격하게 되었다. 해당 문제를 해결하기위해 찾아보니 다음과 같은 글을 발견할 수 있었다. position: absolute가 inline-block로 바꾼다? div 태그 안에 span 태그를 어떻게 가운데로 정렬 할지 고민중 position을 사용하기로 결정했습니다.보시다시피 span태그에 block속성도 주지 않았는데 width값이 정상적으로 적용됩니다.처음에 어> span velog.io position 속성의 absolute와 fixed는 해당 요소의 display 값을 inline-block으로 변경한다는 특징이 있다는 것이다. position 속성을 ..

any 아무 타입이나 될 수 있다는 뜻으로 타입의 보호를 받지 않기를 원할 때 사용 비어있는 값을 쓰면 기본적으로 any가 됨 자주 사용하는 것은 권장되지 않음 let a = [] // a는 any 타입 const a: any[] = [1, 2, 3] const b: any = true a + b // 오류가 나지 않는다. unknown 변수의 타입을 미리 알지 못할 때 사용 어떠한 작업을 할 경우 해당 변수의 타입을 먼저 확인한 뒤 사용해야함 let a: unknown let b = a + 1 // 에러 발생 (타입확인 필요하다.) // 사용할 때 마다 변수 타입을 지정해야한다. if(typeof a === 'number'){ let b = a + 1 } if(typeof a === 'string'){..

타입스크립트를 사용해서 객체 프로퍼티의 타입을 지정할 때 쓸 수 있는 특이한 기능들에 대해 알아보자. ? (Optional) ?는 선택적인 프로퍼티의 타입을 정의하는 단축어로 해당 타입이거나 undefined라고 해주는 것과 동일한 의미이다. type Player = { name: string, age?: number, } const jieun : Player = { name: ‘jieun’, } const coll : Player = { name: ‘coll’, age: 20, }​ age?: number는 age: number | undefined와 같은 의미이며 따라서 위와 같이 age 값을 갖지 않는 객체를 만들 수 있는 것이다. readonly readonly는 요소들을 읽기 전용으로 만들 때 ..

순수 CSS는 프로젝트의 규모가 커질수록 요수보수가 어려워진다는 한계때문에 CSS-In-JS나 SCSS와 같은 기술의 사용이 대세가 되었다. 이 글을 통해 기존 CSS의 문제점을 개선한 SAAS와 SCSS에 대해서 알아보고 그중 더 많이 사용하는 SCSS에 대해 더 자세히 정리해볼 것이다. Sass Sass란 CSS 전처리기로써, 변수, 상속, 중첩 등의 다양한 기능을 제공한다. Sass로 작성한 코드는 CSS로 컴파일을 거친 뒤 실행된다. SCSS SCSS란 Sass의 일종으로 Sass의 모든 기능을 지원하며, 기존 CSS와 비슷한 문법을 사용한다는 점이 특징이다. 이러한 특징때문에 Sass보다 SCSS를 더 많이 선호하는 추세이다. ※ Sass와 SCSS 문법 비교 Sass: 중괄호가 아닌 들여쓰기 ..

Attribute selector (속성 선택자) 특정 속성 값을 갖는 요소를 선택할 때 사용한다. 정규표현식의 일부 기호인 *, ^, $, | 등을 사용하여 다양한 표현이 가능하다. 태그종류[속성표현]의 기본 형태를 가진다. 예시들을 통해 사용 방법을 알아보자 a[href] { color: green; } href 속성을 갖는 모든 a태그를 선택한다. a[target="_blank"] { color: red; } target 속성 값이 _blank인 모든 a태그를 선택한다. div[class*="test"] { color: red; } class에 test라는 글자를 포함하는 모든 div태그를 선택한다. ex) class="mytest", class="tests" ... a[href^="https://..

State Batch Update란? 리액트는 컴포넌트의 렌더링 횟수를 최소화하기 위해서 State Batch Update를 사용한다. 이는 리액트의 이벤트 핸들러를 사용하여 여러 번의 setState를 호출할 때 이를 하나의 업데이트로 일괄 처리하여 리렌더링이 한 번만 발생하도록 하는 것이다. ※ 특징 state값의 업데이트는 16ms 단위로 이루어진다. 16ms 내 변경된 state값은 한 번에 업데이트된다. import { useState, useEffect } from "react"; export default function App() { const [num, setNum] = useState(0); const handlePlus = () => { setNum(num + 1); setNum(nu..

자바스크립트의 클래스 자바스크립트의 클래스는 객체와 관련이 있다. 객체를 직접 작성하여 정의하고 생성할 수 있지만, 클래스를 사용하면 여러 객체를 더 쉽고 빠르게 만들 수 있다. 즉, 클래스는 객체를 생성하기 위한 템플릿이다. 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이기 때문에 클래스란 개념이 존재하지 않았다. 그동안은 프로토타입을 이용하여 클래스를 비슷하게 표현해왔지만 ES6로 업데이트 되면서 클래스 문법이 문법이 추가되었고, 자바스러운 객체지향 프로그래밍을 표현할 수 있게되었다. 다만 생김새만 클래스 구조이지, 엔진 내부적으로는 프로토타입 방식으로 동작한다. 프로토타입 문법 // 생성자 function Person({name, age}) { this.name = name; this.a..