본문 바로가기

분류 전체보기

 (138)
Vercel 배포 + git error : 연결 후에도 pull, push 안됨 1. git error 깃이 pull, push 모두 되지 않는 오류가 발생했다. 'git remote rm origin'으로 원격 레포지토리의 연결을 지우고 'git remote -v'로 확인하였다. 잘 지워졌다. 'git remote add origin main' 입력하여 레포지토리로 재연결을 시켰다. remote -v로 origin 저장소가 연결되어 있음을 확인한다. 연결은 성공이었으나 pull, push 모두 되지 않았다. 'git pull origin main --rebase'로 git에서 pull한다. 제대로 작동하였다. 2. Vercel 배포하기 1) 개발 서버에서 오류 없이 작동하는지 확인한다. yarn build / npm run build : 입력하여 빌드한다 yarn add serve..
currentTarget 배너에서 이름이 적힌 부분을 클릭하면 색이 바뀌게 하고 싶다. 그러나 이름이 적히지 않은 부분은 간섭하지 않는 것을 원했다. 선택한 이름을 리스트에 할당되어 있는 이름과 비교하고, 동일하면 색을 변화시킨다. 선택한 이름이 계속 바뀌고, 바뀐 값을 적용시켜야 하므로 useState를 사용한다. 클릭 후 일어난 이벤트이기 때문에 event를 가진 함수를 하나 추가한다.
[TIL] React-Router 1. Router란 무엇인가? 앱 또는 웹에서 작성되는 페이지들은 근간이 되는 페이지의 URL 경로 이름을 공통적으로 가지고 있다. Router는 앱의 다른 부분들을 서로 연결하는 기능을 제공한다. 즉 어떤 페이지를 근간으로 하는 페이지들을 서로 연결하거나 버튼을 클릭하면 이동하는 것이 가능하다. 부분적으로 랜더링 되는 부분 또는 여러 경로로 유입될 수 있는 경우 유용하게 사용될 수 있다. 2. Route로 페이지 이동 1) Router를 선언한다. BrowserRouter, Routes, Route를 순서대로 선언한다. Route path는 근간이 되는 페이지의 URL 경로 이름 뒤에 올 수 있는 주소에 해당된다. 이 주소는 대소문자를 구분하지 않는다. 2) App.jsx에 선언하여 생성한 Router..
[TIL] React-4, rem 1. rem 단위와 rm 단위 두 단위 모두 상대적인 크기 값이다. rem : 최상위요소(root)에 대한 상대적인 값이다. 기기 종류 등에 의해 정해진다. rm : 상위요소에 대한 상대적인 값이다. * 파일에서는 div값 등 여러 요소가 사용되므로 rm을 사용하면 의도와 다르게 나타날 확률이 크다. 따라서 rem 사용을 더 권장하고 있다. 2. React에서의 useRef 사용. 변경되어도 랜더링되지 않게 하기 위한 상황에서 사용한다. useState와 useRef를 사용하여 비교해 보았다. 둘 모두 button을 넣고 누르면 값이 하나씩 증가하게 하였다. -useState는 누르자 바로 숫자가 증가하였다. -useRef는 누르면 숫자가 변하지 않다가, useState를 한번 누르면 갱신된다. useS..
[TIL] React-3, git error 1. yarn을 통해 리엑트 파일을 생성하려고 할 때 오류가 발생했다. Couldn't find a package.json file 이 오류는 기본 설정된 파일이 아닌 새로운 워크 스페이스에서 리엑트를 만들려고 하면 생기는 오류라 한다. yarn init 입력 후 질문에 대답하면 생성할 수 있다. 파일 생성이 완료되었다. 2. 생성한 리엑트 파일을 깃의 레포지토리에 올리는 과정에서 에러가 발생했다. fatal: 'origin' does not appear to be a git repository fatal: Could not read from remote repository. 연결된 레포지토리가 없으므로 연결을 해주었다. git remote add origin main 입력. remote -v로 orig..
[TIL] React-2 리엑트로 입력된 데이터를 리스트로 받아오기 구조분해할당한다. setContext를 변화시켜 context의 값을 업데이트 할 수 있다. input 등을 이용하여 입력 값을 넣는다. 입력된 값은 event로 발생되어 event.target.value로 저장된다. 이 값을 setContext를 통해 변화시키면 값은 context에 저장된다. 버튼을 눌러 새로운 리스트를 기존 리스트에 추가하도록 한다. 추가된 후에는 입력창의 값을 없애주어야 하므로 빈칸을 각각 context와 project에 넣어준다. 새로 추가되는 데이터를 기존 형식에 맞게 표시한다. isDone이 false인 이유는 새로 생성되는 데이터는 미완성을 가정하고 있기 때문이다. 이 항목에서 list마다 구분하기 위해서 index값을 주었는데, ..
[TIL] React-1 리엑트 강의를 들으면서 기본적인 개념에 대해 배웠다. 1. CRA란? 한번에 프로젝트에 필요한 요소를 구성하는 방법이다. 보일러플레이트라고도 한다. 2. CRA의 실행 방법은? 맥의 터미널을 연다. -> cd desktop부터 생성한 파일로 들어간다. -> yarn create react-app 폴더이름 으로 새로운 폴더를 생성한다. *VSCode의 터미널이 아니다. 한참 고민했던 부분이다. 3. 리엑트 컴포넌트란 무엇인가? 리엑트 환경에서 일정한 기능을 하는 것을 묶어놓은 단위. 함수와 유사하다. 즉 독립적이다. 작은 단위로 개발할 수 있기 때문에 대규모 프로젝트에서도 잘 사용된다. 컴포넌트의 이름은 첫글자가 대문자가 되는 것으로 암묵적으로 정해져 있다. 4. JSX의 문법이란 무엇인가? Javascr..
[TIL] Javascript-7 1. 코드카타 : 두번의 for을 사용하여 두번 순회하는 경우, 함수의 선언 위치도 중요하다. var sum=[]; 을 var answer=[]; 뒤에 선언할 경우 결과값이 두번 반복해서 나오게 된다. function solution(arr1, arr2) { var answer = []; for (i=0; i
[TIL] Javascript-6, git, github 1. github 문서 병합 Git switch 병합 원본 파일 : 합치는 배경이 되는 곳으로 이동 Git merge 병합 대상 파일 : 합치는 대상 파일과 병합 수정 후 git add . Git commit -m “변경내용저장” git push origin 브랜치명 : 수정 완료된 파일을 다시 브랜치에 업로드 한다. *발생한 에러와 처리 방법 Git file error 발생 -> git reset —merge로 끝낼 수 있다. 로컬의 git이 최신 파일이 아님에도 최신 파일이라 pull되지 않음 -> 로컬의 git을 무시하고 다시 github에서 내려받기 git reset —hard origin/파일명 이후 git pull origin 파일명으로 다시 다운받았다. 2. 깊은 복사와 재귀용법 var co..
[git, github] 협업 관리하기 [2024.01.11목요일] 협업에 좀 더 능숙하게 대처하기 위해 깃과 깃허브를 정리해보자. 1. gitVScode에서 대상 폴더를 연다.현재 위치는 pwd를 입력하면 알 수 있다.파일을 저장할 때는 올바른 위치에서 저장해야 하기 때문에 위치를 정확히 아는 것은 중요하다.cd .. 는 상위파일로, cd 파일이름 은 하위파일로 이동한다. 붙여쓰지 않도록 주의한다.ls 는 폴더 안의 폴더, 파일 내역을 보여준다. *mkdir 폴더명 : 현재 경로에서 폴더 생성*touch 파일명 : 현재 경로에서 파일 생성 2. 처음 프로젝트를 시작할 때폴더를 하나 지정하고 VScode에서 폴더를 연다.git init : .git 파일이 생기며 코드 추적을 시작한다.코드 수정git add 파일명 : git에 변경사항을 저장한..

티스토리툴바