본문 바로가기

전체 글100

조건부 렌더링 조건부 렌더링은 특정 조건에 따라 다른 결과를 보여주는 것if문 , 삼항 연산자 , 논리 연산자(&&) if문 if (isLoggedin) { return 로그인 성공; } return ( 실패! );} 삼항 연산자 true false에 따라 결과를 다르게 보여주는 것export default function App() { const isLoggedin = false; return {isLoggedin ? "로그인 성공" : "로그인 실패"};}  논리연산자(&&)해당 조건이 참일때만 보여주는 것export default function App() { const isLoggedin = false; return {isLoggedin && "로그인 성공" };} 2024. 7. 24.
구조분해할당(Destructuring) {...rest} 비구조화할당이라고도 불린다. 구조분해 할당 정의"구조화된 배열을 파괴해 1개 이상의 변수에 할당하는 방법" 두가지를 주로 쓰게 될 것이다.1. 받은 값의 이름 그대로 현재 컴포넌트의 변수로 저장2. [...rest],{...rest}   예를 들어 유저정보를 api로 받는다고 하자.근데 값이 뭐가 들어오는지 , 서버에서 딱히 정의가 되지 않았다면?타입명시를 제대로 못할 때 쓰는 팁이다.  1. 받은 이름 그대로 변수저장하기1. 객체const obj = {name : Alice , age : 30 ,email: 'alice@example.com'}//이게 구조분해할당const{name, age , email} = objconsole.log(name) //Aliceconsole.log(age) //30con.. 2024. 7. 24.
children props는 값을 내려주는 건데, 칠드런은 뭐하는 놈인가..props만 있으면 되는거 아닌가? 라고 생각을 했다. 말그대로 자식이라 생각하면 편하다. app.tsx내에서 , props는 내려주면   이렇게 썼다. children은 (자식)   이 사이에 있는 자식이 ! (자식) = 어떤 것이던 다 해당 컴포넌트로 내려준다는 거다. 예제를 보겠다.//Container.tsx (Children 컴포넌트)import { ReactNode } from "react";interface TChildren { children: ReactNode; id: string;}export default function Container({ children, id }: TChildren) { return ( .. 2024. 7. 23.
스타터팩(npm,vite,ts,tailwind) git clone 하고 해당 루트 폴더에 이 명령어 하나 입력 하고 실행하면 된다.npm install -D tailwindcss postcss autoprefixernpm run dev    version{ "name": "final", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies":.. 2024. 7. 23.
권한 문제 나는 항상 npm , yarn 등이 설치가 안됐다.꼭 sudo를 붙혀야 됐다."이게 단순히 맥의 버전이 높아짐에 따라 권한을 높게 줘야하는구나?"라고 생각했는데오늘은 세부폴더의 파일변경이 안되는 것이다? ls -al을 쳐봤다.색깔이 다 다른데 뭔지 모르겠더라.drwxr-xr-x@ 이게 아마 읽기쓰기에 대한 권한으로 어렴풋이 알고 있는 상태였다.나는 권한을 다 줬다고 생각했는데 , 왜 문제가 계속 생기는 걸까? 한 10분동안 가만히 생각해봤다.아! 혹시 root,유저이름으로 생성한 게 문제였나? 알고보니 sudo로 프로젝트를 생성하면, root권한으로 생성 되는 것이었다!terminal에 "whoami"를 찍어봤더니 shinminho가 나온다.그렇다. 터미널을 쓰고 있는 나는 root가 아니다. shinm.. 2024. 7. 22.
리액트 왜 씀? 강력한 커뮤니티와 광범위한 생태계원래 유저 수가 많으면 내가 겪을 문제를 미리 해결하신 분들이 많다는 뜻이다.정보량이 많아 문제해결이 비교적 쉽다. 가상 돔 - 원래 돔 구조 카피한게 가상돔임. 그냥 돔으로만 작업하면 최하단에 있는 놈을 건드렸을 때 ,제일 위부터 최하단 놈을 건드려야 하는데 이게 성능저하가 굉장히 많이 일어남.가상돔을 이용하면 그 부분만 교체할 수 있음.  작동방식초기 렌더링시 - 가상돔 생성 변경 사항 감시 - 상태,props가 변경되면 새로운 가상돔 생성 , 기존 돔과 비교해 차이점을 찾음 실제 dom 업데이트 - 변경된 부분만 실제 dom에 반영    Tip)export default 가 없다면 , import { App } from "./app.tsx" 이렇게 사용해야 한다.ex.. 2024. 7. 22.

티스토리툴바