전체 글 (49) 리스트형 React Img Slider 구현(useRef) 캐럴 슬라이드 구현 프로젝트중 슬라이드를 구현해야해서 찾아보니깐 useRef로 구현가능하다는걸 배웠다. React에서 제공하는 기본 Hook들을 제대로 사용할줄 알면 금방 작성할 수 있다. import React from "react"; import styeld from "styled-components"; import { useState, useRef, useEffect } from "react"; const SlideComponent = () => { const slideRef = useRef(null); const [currentImgOrder, setcCurrentImgOrder] = useState(0); const IMG_WIDTH = 200; const slideRange = currentI.. 53. Maximum Subarray var maxSubArray = function(nums) { let max = -100000000; let current = 0 for(let i = 0; i < nums.length; i++) { current = Math.max(current + nums[i], nums[i]) max = Math.max(max, current) } return max // 이전 누적값과 현재값 더한거랑 현재값이랑 비교해서 max에다가 비교한다 }; 배열내에서 부분집합 배열들중에서 요소들의 총합이 가장 큰값을 구하는 문제이다. 처음에는 이중 for문으로 모든 배열들의 요소들의 합을 비교하는 로직으로 했지만 O(n^2) 시간 복잡도로 인해서 시간초과됐다.. 저 로직으로는 한번의 for문으로 시간 복잡도가 O(n)으로 .. 35. Search Insert Position (leetCode) var searchInsert = function(nums, target) { if (target > nums[nums.length-1]) { return nums.length; } for(let i = 0; i < nums.length; i++){ if(nums[i] === target) { return i } else { if(target < nums[i]) { return i } } } }; target이 nums배열에서 가장 마지막 값보다 크면 배열 길이를 리턴해준다(문제에서 배열이 이미 정렬된 상태라고 나옴). for문을 돌면서 배열의 값과 같으면 해당 index를 리턴하고 아니면 target값이 현재값보다 작다면 현재 index를 리턴해준다. TIL 29 TypeScript 기본 1. TypeScript란? 타입스크립트는 자바스크립트에 타입을 부여한 언어다. 타입스크립트는 에러를 사전에 미리 예방할 수 있고 VSC를 사용하면 코드 및 자동완성 가이드로 생산성이 증가해 프론트엔드라면 타입스크립트는 필수로 자리잡고 있다. 2. TypeScript 기본타입 원시형 let name: string = 'jeon'; // 변수 타입이 문자열 let age: number = 20; // 변수 타입이 숫자 let isLogin: boolean = true; // 타입이 불리언 배열 let numArr: number[] = [1, 2, 3]; // 타입이 배열일때 선언 let numArr: Array = [10, 20, 30]; // 타입이 배열일때 선언 튜플: 배열의 길이가 고정되고 각 요소의.. TIL 28 React Redux기본 1. Redux란? Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다. 쉽게 생각하면 각 컴포넌트마다 관리했던 state값들을 전역에서 관리해주는것이라고 이해하면된다. 프로젝트를 진행하다보면 부모 컴포넌트에서 하위 컴포넌트에다가 state값들을 props로 타고 타고 넘겨주는걸 경험해봤을텐데 이를 하나의 store에다가 관리를 해 어디에서든 접근이 쉽게 만들어준다. 2. 리덕스 프로젝트 구조 └── redux ├── index.js // root reducer ├── counter.js // 기능 1 ├── fetch.js // 기능 2 src파일에다가 redux폴더를 만들어주고 redux의 구성 요소인 Action Type, Action, Reducer 셋을 모두 하나의 파일 안에서 관.. TIL 27 Image Source 변수로 할당 React Native에서 Image를 지정할때 이런식으로 작성을 하는데 require함수 내부에서는 자바스크립트 변수가 적용이 안된다. const myImageUrl = './myProfileImg.png' 위 코드처럼 리액트에서 사용하는 {}을 사용하면 계속해서 오류가 나온다. 그래서 해결책은 찾아보니 require('./myProfileImg.png')을 전체를 변수로 묶어버리면 해결이 가능하다. const item = { title: "Item 1", text: "Text 1", src: require("./event.jpeg"), }, 이런식으로 접근을 해서 할당을 해주면 가능하다 TIL 26 ReactNative BottomSheet 구현 쿠팡같은 커머스 어플을 사용하면 처음들어갔을때 밑에 창에 이벤트 모달같은게 뜨는걸 볼 수 있는데 리액트 네이티브에서는 BottomSheet을 통해서 구현이 가능하다. import BottomSheet from "reanimated-bottom-sheet" npm install react-native-reanimated@2.2.4 로 version 2.2.4로 설치해준다. 굳이 2.2.4로 설치하는 이유는 현재 최신버전인 2.3.1이 안드로이드쪽에서 트러블슈팅이 심각해서 이전버전을 설치하는게 정신건강에 좋다. 최신버전으로 설치해서 하루종일 고통받다가 결국 이전버전을 받는 나와 같은 경험을 안하는걸 추천한다. 속성들을 보면 initialSnap 초기 위치를 설정해주는데 보통 0 이나 1로 선택을 한다. 강조.. TIL 25 ReactNative RNPicker Android 위 사진을 보면 안드로이드에서 RNPicker을 적용한 모습인데 제대로 안된걸 볼 수 있다. 이 문제를 해결하기 위해서는 useNativeAndroidPickerStyle={false}와 style={{inputAndroid:{속성들}}}을 적용해줘야 해결이 된다. 이전 1 2 3 4 ··· 7 다음
