본문 바로가기

분류 전체보기

 (65)
코드분석(To-do-list) 오늘은 To-do-list를 만들어봤다. 투두리스트는 기본기(CRUD)에 정말 좋은 예제라고 생각한다. 어떤 기능인지 살펴보면 ,인풋창에 데이터를 입력하고 버튼을 누르면 밑에 목록이 생기고 ,체크를 하면 밑줄이 처진다.X를 누르면 해당 컴포넌트가 삭제된 것처럼 보이는 기능이다. (현재 서버 없이 혼자 만드는 것이기 때문에 API에 요청을 보내진 않는다.)  전체적으로 보겠다.투두 리스트를 담은 배열 안에,정보들이 담긴 객체가 한덩이 한덩이 있어야 한다.객체 안엔 {id,text , checked}의 앖이 들어가야 한다.그러니까 최종으로 보면 이런 느낌이다. [ {id : 유니크한 값, text : 내가 쓴 내용, isCompleted : true & false} , {id : 유니크한 값, text ..
조건부 렌더링 조건부 렌더링은 특정 조건에 따라 다른 결과를 보여주는 것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 && "로그인 성공" };}
구조분해할당(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..
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 ( ..
스타터팩(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":..
권한 문제 나는 항상 npm , yarn 등이 설치가 안됐다.꼭 sudo를 붙혀야 됐다."이게 단순히 맥의 버전이 높아짐에 따라 권한을 높게 줘야하는구나?"라고 생각했는데오늘은 세부폴더의 파일변경이 안되는 것이다? ls -al을 쳐봤다.색깔이 다 다른데 뭔지 모르겠더라.drwxr-xr-x@ 이게 아마 읽기쓰기에 대한 권한으로 어렴풋이 알고 있는 상태였다.나는 권한을 다 줬다고 생각했는데 , 왜 문제가 계속 생기는 걸까? 한 10분동안 가만히 생각해봤다.아! 혹시 root,유저이름으로 생성한 게 문제였나? 알고보니 sudo로 프로젝트를 생성하면, root권한으로 생성 되는 것이었다!terminal에 "whoami"를 찍어봤더니 shinminho가 나온다.그렇다. 터미널을 쓰고 있는 나는 root가 아니다. shinm..
리액트 왜 씀? 강력한 커뮤니티와 광범위한 생태계원래 유저 수가 많으면 내가 겪을 문제를 미리 해결하신 분들이 많다는 뜻이다.정보량이 많아 문제해결이 비교적 쉽다. 가상 돔 - 원래 돔 구조 카피한게 가상돔임. 그냥 돔으로만 작업하면 최하단에 있는 놈을 건드렸을 때 ,제일 위부터 최하단 놈을 건드려야 하는데 이게 성능저하가 굉장히 많이 일어남.가상돔을 이용하면 그 부분만 교체할 수 있음.  작동방식초기 렌더링시 - 가상돔 생성 변경 사항 감시 - 상태,props가 변경되면 새로운 가상돔 생성 , 기존 돔과 비교해 차이점을 찾음 실제 dom 업데이트 - 변경된 부분만 실제 dom에 반영    Tip)export default 가 없다면 , import { App } from "./app.tsx" 이렇게 사용해야 한다.ex..
설치(NPM , YARN , NPX) 일단 먼저 짚고 넘어가야 할 게 있다.보통 어떤 설치든, 관리하기 어렵기 때문에 전역으로 설치하면 좋지 않다.근데 node와 npm은 전역으로 설치하는 게 좋다.어떤 것을 사용하더라도 패키지는 버전이 있다.Major , Minor , Patch 라는 것이 있다. Major : 주요 릴리즈 1.패키지에서 엄청난 변화가 있을 경우에 해당 위치의 숫자를 증가시킴2. 주로 이전 버전과 호환성을 깨트릴 정도의 중요한 패치의 경우 변경됨 Minor:새로운 기능1.패키지에서 새로운 기능이 추가 되었을 경우에 해당 위치의 숫자를 증가 시킴2.이전 버전과의 호환성은 유지함 Patch : 버그 수정1.기존에 포함되었던 기능에 대한 버그 수정을 하였을 경우 해당 위치의 숫자를 증가시킴2.이전 버전과의 호환성은 유지함 옵셔널..

티스토리툴바