티스토리

JiSoo's Devlog

검색하기

블로그 홈

JiSoo's Devlog

jisoo78.tistory.com/m

지숭숭숭 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[Node.js] 모델 뷰 컨트롤러(MVC) 패턴이란 다른 기능에 따라 코드를 논리적으로 나누는 것을 의미한다 MVC란?MVC는 Model View Controller의 약자로 모델, 뷰, 컨트롤러와 관련되어 있다모델은 객체나 데이터를 나타내는 코드의 한 부분으로 데이터 관련 작업을 할 수 있게 한다뷰는 사용자가 보게 되는 화면을 책임지는데 애플리케이션 코드와 분리되어 있고 뷰를 생성하기 위해 템플릿 엔진에 주입하는 데이터와 아주 조금만 통합되어 있다컨트롤러는 모델과 뷰 사이의 연결점으로 모델과 함께 데이터를 저장하거나 저장 프로세스를 유발하거나 뷰에서 가져온 데이터를 전달한다 라우트는 어떤 경로에 따른 http 메서드에 따라 어떤 컨트롤러 코드를 실행할지 정의한다컨트롤러는 작업할 모델과 렌더링할 뷰를 정의하는 역할을 하는데 이게 바로 패턴! 컨.. 공감수 0 댓글수 1 2024. 11. 4.
[Node.js] 동적 콘텐츠 작업 및 템플릿 엔진 추가 요청 및 사용자 간의 데이터 공유const products = [];// admin/add-product => POSTrouter.post("/add-product", (req, res, next) => { products.push({ title: req.body.title }); res.redirect("/");});exports.routes = router;exports.products = products;객체나 배열 같은 참조 유형을 내보내기 하면 다른 파일에서 변경하면 저절로 업데이트된다→ 데이터 공유 템플릿 엔진html 페이지에 동적 콘텐츠를 넣기 위해 사용한다 · EJS일반 HTML을 사용하고 단순한 JavaScript를 사용할 수 있게 하는 플레이스홀더가 있어 for 루프, if 문 작.. 공감수 3 댓글수 3 2024. 10. 28.
[Node.js] Express.js 작업 Express.jsExpress는 파싱을 대신해 주기 위한 프로젝트 내부에 쉽게 연결하는 다른 패키지를 쉽게 설치하도록 도와준다매우 유연하며 특별한 기능들을 과도하게 추가하지 않는다애플리케이션을 구축하거나 유입되는 요청들을 처리함에 있어 특정 방식을 제공함으로써 높은 확장성을 지닌다Express를 대상으로 구축된 제3자 패키지 수가 수천 가지에 달하고 크게 새로 구성할 필요 없이도 쉽게 Node Express 애플리케이션에 추가할 수 있다 Express.js 설정npm install --save express--save dev가 아닌 --save인 이유는 프로덕션 의존성이기 때문프로덕션은 사용자에게 실제로 제공되는 환경개발환경은 개발자들이 개발하고 테스트하는 환경 프로덕션 의존성: 실제 서비스가 돌아갈 .. 공감수 1 댓글수 1 2024. 10. 22.
[Node.js] 개발 워크플로우 및 디버깅 NPM: 노드 패키지 매니저npm을 사용하면 노드 프로젝트라 불리는 작업의 초기 내용을 설정할 수 있다npm initpackage.json 파일 생성 개별 설정된 이름이 있는 일반 스크립트의 경우 npm run 입력 후에 스크립트 이름을 입력해야 한다"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node app.js", "start-server": "node app.js" },start-server의 경우 npm run start-server라고 입력해야 서버가 시작된다 제3자 패키지 설치직접 작성하지 않은 어떤 기능이나 코드를 사용하고 싶지만 Node.js에도 포함되지 않은 경우 패키지들을 .. 공감수 2 댓글수 2 2024. 10. 21.
[Node.js] 기본 개념 Node.js는 JavaScript를 다른 환경에서 구현한 것Node.js를 사용해 JavaScript를 브라우저 밖에서도 실행할 수 있다 Node를 시작하는 방법 중 하나는 Node.js가 제공하는 대화형 모드로 진입하는 REPL사용자 입력값을 읽고 평가하고 결괏값을 출력하고 돌아가 새로운 입력값을 기다린다$ node이렇게 실행하면 터미널이나 명령 프롬프트의 새로운 모드에 진입 node 다음에 파일명을 추가로 입력하면 대화형 모드에 진입하는 대신 자바스크립트 코드 파일을 Node.js 파일로 실행하게 된다 파일 실행const fs = require('fs')fs.writeFileSync('hello.txt', 'hello from Node.js')임포트한 파일 시스템 기능을 통해 사용 가능한 메서드로.. 공감수 3 댓글수 3 2024. 10. 21.
[Next.js] Deployment CSS ModulesNext.js에서는 어떤 설정을 따로 하지 않아도 바로 CSS 모듈을 사용할 수 있다styled components, tailwind, chakra 등.module.css 확장자를 사용해 CSS 모듈을 기본적으로 지원한다CSS 모듈은 고유한 클래스 이름을 자동 생성해 CSS범위를 로컬로 지정하기 때문에 다른 파일에서 동일한 클래스 이름 사용 가능 global CSS 파일 → 애플리케이션 전체에 적용 import styles from "../styles/navigation.module.css";export default function Navigation() { const path = usePathname(); console.log(path); return ( .nav { .. 공감수 3 댓글수 3 2024. 10. 15.
[Next.js] Data Fetching client에서 모든 것을 fetch 하려면 보안을 위해 항상 API를 중간에 만들어 요청하고 API가 안전한 환경에 있다면 그 뒤에 데이터베이스에 요청을 보낸다useState를 사용하면 metadata도 사용하지 못한다 Server Side어떤 일이 발생하기를 기다리려고 await를 사용할 때 async를 무조건 써야 한다!useEffect, useState를 쓰지 않아도 되고 로딩 상태를 구현하지 않아도 된다export const metadata = { title: "Home",};const URL = "https://nomad-movies.nomadcoders.workers.dev/movies";async function getMovies() { const response = await fet.. 공감수 0 댓글수 0 2024. 10. 14.
[Next.js] Routing Next.js는 app 폴더 안의 page라는 파일을 참조한다컴포넌트 이름은 중요하지 않지만 그 컴포넌트가 default 컴포넌트로 export 되어야 한다는 게 중요!React를 따로 import 하지 않아도 된다 Defining Routesreact-router는 기본적인 리액트 애플리케이션에서 라우팅 하는 방법url을 지정하고 컴포넌트 render를 요청 Next.js는 폴더를 사용해 경로를 정의하는 파일 시스템 기반 라우터를 사용한다중첩된 경로를 만들려면 폴더를 중첩하면 된다 1. 파일 시스템을 통해 경로를 표시2. page파일을 해당 디렉토리 안에 생성 실제로 보여지는 페이지를 만들려면 page.tsx나 page.jsx 파일을 폴더 내부에 생성해야 한다직접적인 page파일이 없는 폴더는 실제 .. 공감수 0 댓글수 0 2024. 8. 4.
[Next.js] Introduction ☆ React는 라이브러리 Next.js는 프레임워크 라이브러리는 코드 내에서 사용하려고 설치하는 것이지만 사용의 주체는 우리우리가 모든 결정을 내리고 필요할 때 사용할 수 있다React는 UI 인터페이스를 빌드하는 데 사용하는 라이브러리 프레임워크에서는 우리의 주도권이 없다프레임워크는 여러 결정을 우리 대신 해주고 자동화하도록 할 수 있다Next.js에서 뭔가를 export하면 Next.js가 그걸 받아와서 모양, 이름이 맞다면 페이지의 title을 바꿔준다 설치 방법수동설치방법npm init -ypackage.json 파일 생성 npm install react@latest next@latest react-dom@latest app 폴더 안에 page 파일 생성page.tsx 혹은 page.jsx.. 공감수 0 댓글수 0 2024. 7. 29.
[Redux] Redux Toolkit Redux Toolkit간단하게 말하면 많은 지름길들이 있는 Package라고 보면 된다적은 양의 Redux 코드로 같은 기능을 하도록 도와주는 것 ! npm install @reduxjs/toolkitoryarn add @reduxjs/toolkit createActionconst ADD = "ADD";const DELETE = "DELETE";const addToDo = text => { return { type: ADD, text };};const deleteToDo = id => { return { type: DELETE, id: parseInt(id) };};↓ ↓ ↓ ↓const addToDo = createAction("ADD");const deleteToDo .. 공감수 0 댓글수 0 2024. 7. 5.
[Redux] React Redux react-router-dom 버전 6부터라면Route를 Routes로 감싸줘야 한다Router > Routes > Route component 속성이 없어졌다대신 element 속성 사용 } /> } /> store은 변경사항을 우리에게 알려줬었다어떤 변화가 일어났을 우리 애플리케이션을 다시 render 하고 싶다면 ProviderReact Redux에는 Provider 컴포넌트를 통해 다른 컴포넌트에서 Redux store를 사용할 수 있다const root = ReactDOM.createRoot(document.getElementById("root"));root.render( );index에 연결 connectconnect는 컴포넌트들을 store에 연결시켜 준.. 공감수 0 댓글수 0 2024. 6. 25.
[Redux] Pure Redux:To Do List Vanilla JS로 ToDoList 만들기 To Dos Add const form = document.querySelector("form");const input = document.querySelector("input");const ul = document.querySelector("ul");const createToDo = (toDo) => { const li = document.createElement("li"); li.innerText = toDo; ul.appendChild(li);};const onSubmit = (e) => { e.preventDefault(); const toDo = input.value; input.value = ""; createTo.. 공감수 0 댓글수 0 2024. 6. 24.
[Redux] Introduction & Pure Redux:Counter ReduxRedux는 기본적으로 JavaScript Application들의 상태를 관리하는 방법Redux가 React와 많이 사용하면서 유명해졌지만 React에 의존하는 라이브러리는 아니다!!Angular, Vue.js, Vanilla JS에서도 모두 쓸 수 있다 Redux 설치npm install reduxoryarn add redux Vanilla JS로 카운터 만들기const add = document.getElementById("add");const minus = document.getElementById("minus");const number = document.querySelector("span");let count = 0;number.innerText = count;const update.. 공감수 0 댓글수 0 2024. 6. 24.
[Udemy React 완벽 가이드] 리액트앱 인증 추가하기 프론트엔드 앱이 특정 백엔드 리소스에 접근하려 할 때 접근 권한이 주어지기 전에 반드시 인증을 받아야 한다어떻게 클라이언트 쪽 리액트 앱이 서버에서 돌아가는 백엔드 앱에서 허가를 받을까?사용자 자격 증명을 가지고 요청을 보내는 것에서 시작!자격 증명이 유효한 것으로 검증되면 서버는 우리에게 보호된 리소스에 접근을 허가한다는 응답을 보내준다서버에서는 단순한 가부가 아니라 검증한 증거를 보내줘야 한다↓ ↓ ↓서버 측 세션 혹은 인증 토큰 사용하기 서버 측 세션서버 측 세션은 대중적인 솔루션으로 특히 프론트와 백엔드가 분리되지 않은 풀스택 앱에서 자주 사용된다리액트는 분리되어 있기 때문에 이상적이지 않다서버측 세션의 원리는 사용자가 로그인하고 인증된 다음 서버에 고유 식별자를 저장하는 것기본적으로 'yes'.. 공감수 0 댓글수 0 2024. 6. 18.
[Udemy React 완벽 가이드] 리액트 라우터가 있는 SPA 다중 페이지 구축 웹사이트를 방문하면 도메인 이름 뒤에 경로를 첨부할 수 있다 ex) /welcome브라우저 주소창에 다른 URL을 입력하거나 URL을 변경하는 링크를 클릭하면 다른 페이지가 로딩된다이게 바로 라우팅이 하는 일! 다른 경로에 대해 다른 콘텐츠를 로딩하게 되면 항상 새 콘텐츠를 가져와야 하기 때문에 새로운 HTTP 요청을 전송하고 새로운 응답을 받는 과정에서 사용자의 흐름이 중단될 수 있다는 단점이 있다그래서 더 복잡한 사용자 인터페이스를 구축할 때 싱글 페이지 애플리케이션을 원한다 라우팅은 URL을 감시하고 다양한 콘텐츠를 로딩하는 기능을 한다npm install react-router-dom 첫 번째 단계에서 URL과 경로, 다양한 경로에 대해 어떤 컴포넌트가 로딩되어야 하는지 정의해야 한다 두 번째 단.. 공감수 0 댓글수 0 2024. 6. 17.
[Udemy React 완벽 가이드] 컨텍스트 API & useReducer Prop driling여러 층의 컴포넌트를 거쳐 공유하고자 하는 데이터를 넘겨주는 것다수의 컴포넌트를 거쳐 속성을 전달하는데 대부분의 컴포넌트가 그 데이터를 직접적으로 필요로 하지는 않는다 prop driling의 해결책 ↓1. Component composition 컴포넌트 합성import { DUMMY_PRODUCTS } from '../dummy-products.js';import Product from './Product.jsx';export default function Shop({ onAddItemToCart }) { return ( Elegant Clothing For Everyone {DUMMY_PRODUCTS.map((product) => ( .. 공감수 0 댓글수 0 2024. 6. 10.
[Udemy React 완벽 가이드] 리액트 + TypeScript 타입스크립트는 자바스크립트의 '슈퍼셋' 언어자바스크립트를 기반으로 하되 더 확장된 프로그래밍 언어 타입스크립트는 리액트와 달리 자바스크립트 라이브러리가 아니기 때문에 자바스크립트의 기존 기능을 기반으로 새로운 기능을 만들거나 기능을 확장하지 않는다가장 중요한 건 정적 타입의 특징을 갖는다는 것 !!런타임에 오류의 원인을 찾을 필요 없이 코드를 작성할 때 바로 오류가 표시된다 TypeScript: JavaScript With Syntax For Types. (typescriptlang.org) JavaScript With Syntax For Types.TypeScript extends JavaScript by adding types to the language. TypeScript speeds up you.. 공감수 0 댓글수 1 2024. 6. 4.
[Udemy React 완벽 가이드] 리액트 쿼리/Tanstack 쿼리 Tanstack 쿼리Tanstack 쿼리는 HTTP 요청을 전송하고 프론트엔드 사용자 인터페이스를 백엔드 데이터와 동기화된 상태로 유지하는 데 이용하는 라이브러리useEffect나 fetch 함수로도 작업이 가능하지만 Tanstack 쿼리를 이용하면 코드가 간결해지고 수월하게 작업이 가능하다 useEffect나 fetch를 사용하는 경우많은 양의 코드를 작성해야 하는 단점이 있다물론 커스텀 훅을 빌드해 재사용할 수 있지만 몇 가지 문제와 누락된 기능이 있다 Tanstack 쿼리를 사용하면 상태 관리를 비롯해 긴 코드를 작성할 필요가 없고 고급 기능을 이용할 수 있다캐시 처리, 자체적으로 처리되는 데이터 가져오기뿐 아니라 앱을 좀 더 효율적으로 만들어 줄 모든 기능을 이용할 수 있다 TanStack | H.. 공감수 0 댓글수 0 2024. 6. 1.
[Udemy React 완벽 가이드] HTTP 요청 보내기 프론트엔드와 백엔드를 연결하기 위해서는 HTTP 요청을 사용해야 한다그래야 리액트 앱 내에서 HTTP 요청을 백엔드로 보내 데이터를 요청하거나 바꾸도록 요청할 수 있다 데이터베이스와 소통해야 한다면 우리는 리액트로 클라이언트 쪽 코드를 쓰는 것Endpoint라고 불리는 백엔드 API를 사용하면 되는데 이건 특정 요청만 받는 URL API는 두 시스템이 상호작용할 수 있게 하는 프로토콜의 총집합Endpoint는 API가 서버에서 리소스에 접근할 수 있도록 가능하게 하는 URL, 즉 요청을 받아 응답을 제공하는 서비스를 사용할 수 있는 지점을 의미한다 절대 데이터베이스와 내부 리액트 코드를 직접적으로 연결하려 하면 안 된다그러면 데이터베이스 인증 정보가 노출된다 백엔드는 어떤 종류의 요청을 허락하고 어떤 요.. 공감수 0 댓글수 0 2024. 5. 30.
[모던 리액트 Deep Dive] 8장 ESLint를 활용한 정적 코드 분석버그와 예기치 못한 작동을 방지하기 위한 방법 중 가장 빠르게 시도해 볼 수 있는 방법은 정적 코드 분석 정적 코드 분석코드의 실행과는 별개로 코드 그 자체만으로 코드 스멜(잠재적으로 버그를 야기할 수 있는 코드)을 찾아내 문제의 소지가 있는 코드를 사전에 수정하는 것을 의미한다자바스크립트에서 가장 많이 사용되는 정적 코드 분석 도구가 바로 ESLint ESLint는 자바스크립트 코드를 정적 분석해 잠재적인 문제를 발견하고 나아가 수정까지 도와주는 도구 ESLint가 코드 분석하는 방법 ↓1. 자바스크립트 코드를 문자열로 읽는다2. 자바스크립트 코드를 분석할 수 있는 파서로 코드를 구조화한다3. 구조화한 트리를 AST라 하며, 이 트리를 기준으로 각종 규칙과 대조한다4.. 공감수 0 댓글수 0 2024. 5. 30.
[React Native] 사용자 인증 모바일 기기에서 앱을 실행하고 인증을 하기 위해서는 백엔드 API가 필요→ 사용자가 입력한 이메일 및 비밀번호의 유효성을 백엔드에서 검사해야 하기 때문에 사용자 데이터는 모바일 기기가 아니라 벡엔드에 있는 데이터베이스에 저장되기 때문에 기기에서 작업 수행 불가사용자가 인증 양식을 작성 후 이메일, 비밀번호를 입력하면 크리덴셜이 HTTP 요청과 함께 백엔드 API로 전송되고백엔드에서 해당 크리덴셜의 유효성이 검사된다 사용자가 처음 생성된 경우 → 유효한 이메일 주소인지, 비밀번호가 최소 길이를 충족하는지 확인 후 사용자 생성이미 생성된 사용자의 경우 → 크리덴셜이 올바른지 확인 크리덴셜이 올바르다면 인증 토큰이 생성된다이 토큰은 문자열로 되어있는데 모바일 기기로 다시 전송된다토큰이 중요한 이유는!토큰이 있.. 공감수 0 댓글수 0 2024. 5. 30.
[모던 리액트 Deep Dive] 7장 크롬 개발자 도구크롬 개발자 도구란 크롬에서 제공하는 개발자용 도구로, 웹페이지에서 일어나는 거의 모든 일을 확인할 수 있다디버깅하고 싶은 페이지 접속 → 메뉴에서 보기 → 개발자 도구or웹페이지에서 마우스 우클릭한 뒤 검사 클릭 웹사이트를 제대로 디버깅하고 싶다면? 시크릿 모드라 불리는 개인정보 보호 모드에서 페이지와 개발자 도구 열기이유는 브라우저에 설치된 각종 확장 프로그램 때문브라우저 확장 프로그램은 웹페이지 방문 시 확장 프로그램의 실행을 위해 전역 변수나 HTML 요소에 실제 웹 애플리케이션이 제공하지 않은 다른 정보를 추가할 수 있다이 정보는 개발자가 추가한 정보도 아니고 다른 사용자에게서는 볼 수 없기에 디버깅에 방해가 될 수 있다개인정보 보호 모드에서는 각종 확장 프로그램이 실행되지 않기.. 공감수 0 댓글수 0 2024. 5. 23.
[모던 리액트 Deep Dive] 6장 리액트 개발 도구 react-dev-tools→ 리액트로 만들어진 다양한 애플리케이션을 디버깅하기 위해 만들어졌고 리액트 웹뿐만 아니라 리액트 네이티브 등 다양한 플랫폼에서도 사용 가능 웹 개발 환경에서 이 개발 도구를 사용하는 가장 편리한 방법은 브라우저 확장 프로그램을 사용하는 것! 리액트 개발 도구 설치크롬, 파이어폭스, 엣지 브라우저를 지원하고 주로 개발하는 브라우저에 설치하면 된다위처럼 리액트 로고가 회색으로 표시되면 리액트 개발 도구가 정상적으로 접근할 수 없는 페이지이거나 리액트로 개발되지 않은 페이지라는 뜻이다리액트 로고가 빨간색으로 표시되면 개발 모드인 웹 애플리케이션에 정상적으로 리액트 개발 도구가 접근할 수 있다는 의미이다개발 모드가 아니더라도 실데 프로덕션에 배포돼 있는 웹 애플리케.. 공감수 0 댓글수 0 2024. 5. 19.
[모던 리액트 Deep Dive] 5장 상태란 어떠한 의미를 지닌 값이며 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값을 의미웹 애플리케이션에서 상태로 분류될 수 있는 것들 ↓- UI- URL- 폼- 서버에서 가져온 값 tearing은 하나의 상태에 따라 서로 다른 결과물을 사용자에게 보여주는 현상을 말한다 Flux 패턴양방향이 아닌 단방향으로 데이터 흐름을 변경하는 것상태와 그 상태의 변경에 대한 흐름과 방식을 단방향으로 채택한 것이 특징 - 액션 : 어떤 작업을 처리할 액션과 그 액션 발생 시 함께 포함시킬 데이터를 의미- 디스패처 : 액션을 스토어에 보내는 역할, 콜백 함수 형태로 타입과 데이터 모두 스토어에 보낸다- 스토어 : 실제 상태에 따른 값과 상태를 변경할 수 있는 메서드를 가진다- 뷰 : 스토어에서 만들어진 데이.. 공감수 0 댓글수 0 2024. 5. 18.
[React Native] 지출 추적 앱 스택 내비게이터npm install @react-navigation/native-stack 하단 탭 패키지 설치npm install @react-navigation/bottom-tabs import { createNativeStackNavigator } from "@react-navigation/native-stack";const Stack = createNativeStackNavigator();Stack 상수는 두 컴포넌트에 대한 액세스를 제공하는 객체를 보유한다→ 내비게이터 컴포넌트와 화면 등록 컴포넌트 화면 순서를 사용해 ExpensesOverview가 앱이 시작될 때 불러오는 기본 컴포넌트가 되도록 설정initialRouteName 설정해 초기에 불러와야 할 경로를 제어해.. 공감수 0 댓글수 0 2024. 5. 13.
[모던 리액트 Deep Dive] 4장 싱글 페이지 애플리케이션렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식최초에 서버에서 최소한의 데이터를 불러온 이후부터는 이미 가지고 있는 자바스크립트 리소스와 브라우저 API를 기반으로 모든 작동이 이뤄진다최초에 로딩해야 할 리소스가 커지는 단점이 있지만 한번 로딩되면 이후 서버를 거쳐 필요한 리소스를 받아올 일이 적어져 사용자에게 훌륭한 UI/UX 제공 가능 전통적인 방식의 애플리케이션과거 서버 사이드에서 작동하던 애플리케이션은 페이지 전환이 발생할 때마다 새롭게 페이지를 요청하고 HTML 페이지를 다운로드해 파싱하는 작업을 거친다 웹페이지의 모든 영역(페이지 렌더링부터 사용자 인터랙션까지)을 담당하며 아우를 수 있는 싱글 페이지 렌더링이 인기를 얻었다과거.. 공감수 1 댓글수 1 2024. 5. 9.
[React Native] React Native 내비게이션 내비게이션이란 여러 화면 간 이동할 수 있도록 해주는 것모바일 앱에서는 URL 대신 버튼을 눌러 한 화면에서 다른 화면으로 이동하거나 이전 화면으로 돌아가는 방식 카테고리들을 출력하기 위해 FlatList 사용항목이 얼마나 많이 포함될지 미리 알 수 없는 동적 목록일 때 FlatList 사용할 수 있다요소를 느리게 렌더링 하기 위해서도 사용 가능고정된 목록에서는 필요 X item.id} />키가 있어야 하는데 키 프로퍼티가 없다면 keyExtractor 함수 설정 필요keyExtractor 함수는 자동으로 item을 매개변수로 받고 FlatList에 의해 렌더링 되는 개별 항목의 키로 사용할 수 있는 값을 반환해야 한다renderItem 프로퍼티로 각 항목에 실행될 함수를 정의해 항목을 렌더링 하는 방법.. 공감수 0 댓글수 0 2024. 5. 8.
[모던 리액트 Deep Dive] 3장 함수 컴포넌트가 상태를 사용하거나 클래스 컴포넌트의 생명주기 메서드를 대체하는 등의 작업을 위해 훅이 추가됐다훅은 state, ref 등 리액트의 핵심 기능을 함수에서도 가능하게 만들었고 클래스 컴포넌트를 간결하게 작성할 수 있게 했다 useState함수 컴포넌트 내부에서 상태를 정의하고 이 상태를 관리할 수 있게 해주는 훅import { useState } from 'react'const [state, setState] = useState(초깃값)useState의 인수로는 state의 초깃값을 넘겨준다아무런 값을 넘겨주지 않으면 초깃값은 undefiend반환 값은 배열이고 첫 번째 원소로 state 값 자체, 두 번째 원소인 setState 함수로 state의 값을 변경할 수 있다 함수 컴포넌트는 매번.. 공감수 1 댓글수 1 2024. 5. 3.
[React Native] 호환 가능한 사용자 인터페이스 구축 maxWidth나 minWidth, maxHeight나 minHeight를 사용해 크기에 따라 너비와 높이가 반응하도록 설정 가능maxWidth를 80%로 설정했다면 최대 80%라는 뜻으로 기기에 따라 차지하는 공간이 달라진다퍼센트 값은 해당 요소를 가진 부모 컨테이너에 대한 퍼센트를 의미한다 Dimensions APIreact-native에 내장된 API로 JSX 코드에서 사용하는 컴포넌트가 아니라 JavaScript 객체라서 styles를 포함한 코드 어디에서나 정보 추출을 위해 사용 가능하다 Dimensions에서 get 메서드를 호출하면 get 메서드가 문자열 타입 인수로서 화면이나 윈도우의 치수를 지니는데iOS는 두 개념이 동일안드로이드에서 화면은 상태 표시줄을 포함한 너비와 높이, 윈도우는 상.. 공감수 0 댓글수 0 2024. 4. 30.
[React Native] 미니 게임 앱 TextInput 컴포넌트는 데이터를 입력할 수 있는 입력 필드 렌더링 리액트 네이티브가 가장 먼저 로딩하는 파일이 App.js 파일이기 때문에 App.js 파일에서 내보낸 컴포넌트가 주요 렌더링 컴포넌트가 된다 커스텀 버튼을 만들려면 리액트 네이티브의 핵심 컴포넌트를 결합하면 된다실제 리액트 네이티브 팀이 버튼을 구축할 때도 소스 코드를 보면 결국 핵심 컴포넌트의 조합으로 만들었다import { View, Text } from "react-native";function PrimaryButton(children) { return ( {children} );}export default PrimaryButton;ResetConfirm 그림자 넣기Android : styles에 el.. 공감수 0 댓글수 0 2024. 4. 29.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.