전체 글 (73) 썸네일형 리스트형 [React] 데이터 추가, 삭제, 수정 Test1 import React, { useState } from 'react'; import Test1Sub from './Test1Sub'; const dataList = [ {id:1, name:'김철수'}, {id:2, name:'김다미'}, {id:3, name:'최진수'}, ] const Test1 = () => { const [data, setData] = useState(dataList) //추가 const onAdd1 = (name) => { setData( data.concat({id:4, name:name}) ) } const onAdd2 = (text) => { setData([ ...data, { id:5, name:text } ]) } //삭제 const onDel1 = (nu.. [React] useRef 사용해서 input 값 비워지고 커서 깜빡거리게 구현 useRef 문법 const refContainer = useRef(initialValue); useRef 특징 1. 리렌더링 하지 않는다. 2. 컴포넌트의 속성만 조회, 수정이 가능하다. useRef 사용 1. No. 1씩 증가하도록 구현 초기값을 1로 설정해 변수 no에 저장해주고, onAdd에서 id값을 no.current++로 설정하여 숫자가 하나씩 증가하도록 해준다. 2. input 값이 비워지고, 커서 깜빡거리게 구현 setText('') input 값이 비워지도록 설정해주고, textRef 초기값을 null로 설정해주어 textRef.current.focus() input에 커서가 깜빡거리게 구현하였다. Ref객체의 current값은 우리가 선택하고자 하는 DOM을 가르키고 포커싱 해주는 D.. [Git] 터미널에서 Git 명령어 사용하기(+깃허브) 최초연결 https://0ver-grow.tistory.com/888 [VSCODE] Visual studio code에서 git 허브와 연동하기 / git 허브 커밋하기 깃허브 연동하기 1. 깃허브와 연동하기 VSCODE에서 F1키 누르기 git clone 입력 Git : Clone 메뉴 선택 만약, git clone을 입력했음에도 No matching commands라고 뜬다면? git-scm.com/에서 깃허브를 설치해야된다. 0ver-grow.tistory.com 브랜치 작업 관리하는 폴더를 git 초기화 설정으로 git 버전관리 상태로 만들기 : git init -> 터미널에 명령어를 입력하면 지정한 git 폴더가 생성된다 (이 폴더에서 관리) 브랜치 목록 : git branch 브랜치 생성 :.. sh: vite: command not found 프로젝트 실행되지 않았을 때 npm install 명령어 dayoung@dayeong-ui-MacBookPro test-project % npm start > test-project@0.0.0 start > vite sh: vite: command not found npm start를 입력해도 실행되지 않고 command not found 찾을 수 없다고 나온다... 이때 npm install 명령어를 사용하고 다시 npm start를 하면 해결완료!!! npm install 명령어는? 현재 프로젝트에서 참조하도록 한 npm 모듈들을 빌드하는 것이다. [Git] git init 입력하면 Using 'master' as the name for the initial branch 에러 메세지 git을 초기화하면 아래와 에러가 뜨는데 왜 뜨는걸까? //git init 입력 hint: Using 'master' as the name for the initial branch. This default branch name hint: is subject to change. To configure the initial branch name to use in all hint: of your new repositories, which will suppress this warning, call: hint: hint: git config --global init.defaultBranch hint: hint: Names commonly chosen instead of 'master' are 'main', 'tr.. [React] find 활용하여 첫 번째 요소의 값 반환하기 find() find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다. 만약 그런 요소가 없다면 undefind를 반환함. find()구문 arr.find(callback[, thisArg]) 매개변수 callback 배열의 각 값에 대해 실행할 함수. element 콜백함수에서 처리할 현재 요소. indexOptional 콜백함수에서 처리할 현재 요소의 인덱스. arrayOptionalfind 함수를 호출한 배열. thisArg선택 항목. 콜백이 호출될 때 this로 사용할 객체. 예제1 ) 바뀌는 값을 객체화시켜 inventory라는 변수명으로 배열을 정의해주고, inventory에 있는 name의 이름이 cherries라면 해당하는 배열을 출력해준다. const invento.. vite로 react 프로젝트 생성 (vite 세팅방법) 프로젝트에서 vite로 선택한 이유? 번들링이 빠르기 때문이다. 빠른 이유는 이유는? (코딩애플 참고) 1. 빠른 esbuid 쓰기 때문에 2. 라이브러리 설치하자마자 bundle 만들어놓음 3. 소스코드는 필요한것만 건드림 파일 하나가 수정되면 다시 재번들링 하는데 vite는 hmr 변경사항만 반영. vite 셋팅방법 npm init vite 를 실행하면 프로젝트 이름, 프레임워크 설정(react 선택), typescript 여부 이렇게 3가지만 선택하면 기본셋팅이 완료된다! 해당 프로젝트 폴더로가서 npm i 입력 후, npm run dev 만 실행시켜주면 http://localhost:3000 으로 확인이 가능하다. 설치 및 확인사항 (설치) Vite - typescript(vite에서는 설치 시 .. [Git] clone명령어로 GitHub 로컬에 가져오기 GitHub에 있는 프로젝트를 로컬에 가져오고 싶다면 clone을 활용하면 된다. GitHub Desktop을 이용하는 방법도 있지만 터미널을 이용하는 방법으로 정리해보았다. 1. cd ~ : 홈 디렉토리 이동 2. pwd : 현재 디렉토리 3. ls : 현재 위치한 경로 안의 내용 출력 4. cd test : test 폴더 (폴더경로) 5. git clone + 주소입력 주소는 깃허브 홈페이지 -> code -> clone -> HTTPS : 주소 복사해서 붙여넣기 git을 사용하다 브랜치 전체를 clone하지 않고 특정 브랜치 하나만 clone하는 것이 가능하다. git clone -b {branch_name} --single-branch {저장소 URL} ex) git clone -b 다영 --si.. 이전 1 2 3 4 5 6 7 ··· 10 다음 목록 더보기
