분류 전체보기 (13) 썸네일형 리스트형 [react]컴포넌트에서 props 사용 방법정리 props는 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 정보를 전달하는 방법이다props는 properties의 줄임말로 컴포넌트에 전달되는 속성값이다다만, props를 너무 별생각 없이 남발하면 props drilling이 일어나 상태관리에 문제가 생길 수 있으므로 useContext 혹은 Redux 등 전역 상태 관리 방식을 사용해야된다 1. 예제(기본 props 전달 예제)//부모컴포넌트import React from "react";import Welcome from "./Welcome";function App() { return ( );}export default App;import React from "react";function Welcome(props) { r.. 1. TypeScript 기초입문) 변수,함수,배열 사용하는 방법 요즘 프론트엔드 강의를 보면 타입스크립트를 안 쓰는 곳이 거의 없을 지경이라고 할 정도로 많이 쓴다. Next.js 설치할 때 매번 타입스크립트 쓸 거냐는 말에 찔려 공부해서 정리할 겸 포스팅하게 되었다.타입스크립트는 마이크로소프트에서 개발한 언어로 자바스크립트에 타입이 추가되었다고 생각하면 된다. 문자랑 숫자를 더해도 에러 안 뜨는 자바스크립트의 자유분방한 체계를 타입스크립트로 잡아주어 대규모 프로젝트에서는 코드의 구조화와 유지보수를 용이하게 할 수 있다고 한다.나온 지는 10년이 이미 넘었고 최근에는 타입스크립트 컴파일러와 도구를 Go 언어로 포팅하여 개선했다고 하네요 1. 타입스크립트 웹 에디터기본적인 문법을 간단히 익히거나 처음 사용하는거라면 간편하게 타입스크립트가 공식적으로 지원해 주는 것 같.. React Native와 웹의 차이: View, Text, css(주의 할 점) 오늘은 일반적인 기본 웹과 react native 의 차이점에 대해 간략히 적어 놓았다react native를 잠시 셨다가 다시 해야된다면 다시 꼭 읽어 봐야 된다view, text 와 css 짜는 방법에 대한 내용이다1. view와 text 컴포넌트react native에서는 기존의 웹에서 쓰던 태그인 div,article,section 대신에 View컴포넌트를 사용하고 p,h1,h2 등 같이 글씨를 써야 될 때는 Text컴포넌트를 사용한다View는 중첩해서 View태그 안에 View태그를 또 사용할 수 있다View , Text는 display flex을 가진다 2.react native에서 css 사용법 1 (border, margin 등등)rn에서는 일반 css랑 다르게 작성해야 되는 게 생각보.. react native 설치(시작) 하는방법 자주 안 하다 보면 까먹을 수도 있으니 프로젝트 만드는 법에 대해 정리하려고 한다당연 노드js,안드로이드 스튜디오 등 깔려있어야 된다https://docs.expo.dev/get-started/create-a-project/ Create a projectLearn how to create a new Expo project.docs.expo.dev이거 보고 설치함1. 초기 세팅 명령어 npx create-expo-app@latest첫 번째로 위에 명령어 입력하면 만들 앱이름을 정하라고 한다그런 다음에 my-app이라는 폴더가 생긴다 (근데 이렇게 했을 경우엔 일반적으로 typescript를 기반으로 설정되기 때문에 옵션을 정해주려고 한다)-타입스크립트 익숙 해지면 옵션 안설정하고 이거하면될 듯 -templ.. cors와 sop 그리고 origin이 무엇인지? cors와 sop에 대해 정리하려고 한다cors와 sop는 보안등에 문제로 생긴 브라우저 정책이며 둘은 반대 대는 개념이다 1. SOP(Same-Origin Policy, 동일 출처 정책)과 origin이란?sop는 프론트엔드가 동일한 오리진 끼리만 리소스를 공유하는 것을 말한다악성 사이트에서 사용자의 쿠키, 세션 정보 탈취등 보안상 문제점때메 있는 정책 같다 그렇다면 origin은 뭐냐면.. url중에 이미지에 하늘색으로 칠해진 부분 (프로토콜 + 호스트 + 포트로 이루어진 부분)을 오리진이라고 합니다 바로 sop는 브라우저에서 이 오리진이 다른 거를 불러오지 못하게 된다고 생각하면 됩니다예를 들어 naver.com에 로그인했다 했을 때 hack.com(위험한 주소)로 요청을 보내면 로그인 정보 등이 .. nodemon 사용법!(자동으로 서버 재 실행) 노드몬은 express 백엔드를 개발할 때 소스코드의 변경을 자동으로 감지하여 서버를 재실행해주는 도구입니다. 이를 통해 코드를 수정한 뒤에 서버를 재시작하는 번거로움이 줄어들었다고 합니다-백엔드가 뛰우고 있는 웹페이지는 live server처럼 자동으로 새로고침 되지는 않으니 새로고침 해야 됩니다(암튼.. 백엔드 재실행해주는 거임)1. 노드 몬 설치방법npm install -g nodemon글로벌로 설치됩니다 2. package.json으로 설정"scripts": { "start": "node index.js", "dev": "nodemon index.js"} package.json에 start와 dev 넣어줍니다그냥도 "nodemon index.js" 하면 실행됩니다 그래도 적어주는 게 나으니 설.. react hooks 중에 기본 usestate 사용방법 정리 usestate는 리액트 훅 중에 기본적으로 알아야 될 훅이다상태관리를 하기 위해 사용하며 상태를 저장하고 변경해준다1. usestate 기본 사용법const [state, setState] = useState(0);usestate는 구조분해 할당문법을 사용한다배열에 첫 번째 state는 현재 상태값을 뜻하며 상태값은 usestate()안에 적은 0이 현재 초기 상태값이다그리고 두 번째 값으로 현재 상태값을 바꿔준다function App() { const [count, setCount] = useState(0) function count_click(){ setCount(count + 1 ) } return ( 번호 카운트: {count} click .. 2025년 vite로 리액트 설치하는 방법!(npm사용) 리액트는 메타에서 개발한 오픈소스 라이브러리로 현 시점 웹에서 많이 사용하는 라이브러리입니다spa(single page application)방식으로 작동하며 당연히 사전에 노드가 설치 되있어야 사용가능하다기존의 create-react-app 방식은 지원이 종료 됬다는 이야기도 있다보니 vite로 설치 하겠다vite란? 빠르고 간결하게 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구라고 한다 -설치방법 npm create vite@latest위에 명령어를 입력하고 실행 해주면 여러 설정이 나오는데요 project name은 현재폴더에 만들 프로젝트 네임입니다 적어주신대로 폴더 내부에 리액트 환경이 만들어집니다select a framework는 vite로 사용할 프레임 워크를 선택 해야됩니다 리액트.. 이전 1 2 다음
