본문 바로가기

분류 전체보기

 (7)
[React] Prettier 설정 → package.json 입력후, npm i{ "name": "react_practice", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "lint": "eslint ." }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", "@vitejs/plugin-react": "^3.1.0", "eslint": "..
[React] 함수형 컴포넌트 단축키 플러그인 함수형 컴포넌트로 개발을 하는게 좋다.→ ES7+ React/Redux/React-Native snippets [ 함수형 컴포넌트 생성 단축키 ]1. rfce (React Funtion Component)→ 표준 함수 선언을 사용하여 컴포넌트를 정의한다.→ 함수 내부에서 this 를 사용할 수 있으므로, 클래스 컴포넌트와 유사한 방식으로 자체 상태(state)를 관리할 수 있다.→ 더 복잡한 컴포넌트나 생명주기 메서드가 필요한 경우, 함수 컴포넌트에 추가적인 로직을 더 쉽게 통합할 수 있다.import React from 'react' function ToDoList() { return ( ToDoList ) } export default ToDoList 2. rafce(React Arrow Functi..
[React Native] Install 1. Project 생성npx create-expo-app AwesomeProject cd AwesomeProject yarn add expo // expo 있다면 생략 npx expo start 2. app store 에 가서 Expo Go 앱을 다운로드 받는다.→ 터미널에 출력되는 QR 코드 실행 실행이 안된다면 추가 설치1. Expo install npm install -g expo-cli 2. Watchman intallbrew update brew install watchman Uploaded by N2T
[React] Hook Hook : 컴포넌트에서 상태(state) 나 생명주기 메서드 등의 기능을 사용할 수 있게 해주는 함수 [ useState : 컴포넌트 상태 추가 ]→ 컴포넌트에서 상태를 추가할때 사용. → ‘state’는 현재 상태를 나타내고, setState 는 상태를 업데이트 한다.→ React 에서 상태를 변경할 때는 상태를 직접 수정하는 것이 아니라, 해당 상태를 업데이트 하는 함수를 통해 변경해야 한다. 이렇게 하는 이유는 React 컴포넌트가 상태 변경을 감지하고 적절한 시점에 렌더링을 다시 할 수 있도록 하기 위해서 이다.const [state, setState] = useState(initialState);removeList 예시const [todos, setTodos] = useState([]) // ..
[Javascript] 자바스크립트 원리 & 이벤트 루프 동작(순회) 구조 이벤트 루프는 브라우저 동작을 제어하는 관리자 : 브라우저의 동작 타이밍을 제어하는 관리자마치 순회(loop) 하는듯하여 이벤트 루프라 부르는 것이다 [ 자바스크립트 엔진 구동 환경] 자바스크립트를 실행하는 소프트웨어로는 우리가 잘 알고 있는 웹브라우저와 런타임인 Node.js 가 있다.싱글 스레드인 자바스크립트 엔진이 어느 곳을 거쳐 비동기 작업을 수행하는지 우선 이 둘의 내부 구성도를 눈에 익혀보자. [ 브라우저 내부 구성도 ]구성 요소로는 Web APIs, Event Table, Callback Queue, Event Loop 등이 있다.﹡ Call Stack : 자바스크립트 엔진이 코드 실행을 위해 사용하는 메모리 구조﹡ Heap : 동적으로 생성된 자바스크립트 객체가 저장되는 공간﹡ Web AP..
[Javascript] 배열(Array) 반환 함수 & 메서드 [ Map (함수) : 결과를 반환 ] → 배열의 각 요소를 순회하며 해당 요소에 대한 변환 함수를 적용한 배열을 생성 한다. → 기존 배열은 변경되지 않으며 , 변환된 결과만을 포함 하는 새 배열을 반환한다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((num) => num * 2); // doubled는 [2, 4, 6, 8, 10]을 포함하는 배열입니다. [ Filter (함수) : 조건을 만족하는 요소를 반환 ] → filter 함수는 주어진 조건을 만족하는 배열의 요소 만을 남기고 나머지 요소를 제거, 새로운 배열을 생성. → 조건을 만족하지 않는 요소는 새 배열에 포함되지 않는다. → 즉 , 조건을 만족하는 요소만 새 배열에 포..
[Javascript] 배열(Array) 과 객체(Object) [ Array [ ] ]﹡ Array는 일련의 값들을 저장하는데 사용되며, 이 값들은 일련의 숫자 인덱스를 통해 액세스할 수 있다. ﹡ Array는 [] 대괄호 를 사용하여 정의하며, 각 항목은 쉼표로 구분된다.let fruits = ["apple", "banana", "orange"]; console.log(fruits[0]); // "apple" [ Array 안에 Object 정의하기 ]let students = [ { name: "John", age: 20 }, { name: "Jane", age: 22 }, { name: "Bob", age: 21 } ]; [ Object { } ]﹡ Object 는 키(key)와 값(value)을 쌍으로 가지는 데이터를 저장하는 데 사용된다. ﹡ 키를 사용하여..

티스토리툴바