본문 바로가기

반응형

전체 글

(73)
[Git] remote 명령어로 GitHub 올리기(원격저장소 연결 및 끊기) GitHub에 프로젝트를 연결해서 올리려면 remote 명령어를 이용하면 된다. - 원격 저장소 연결 : git remote add origin 주소 ex) git remote add origin https://github.com/carrotdy/test.git - 원격 저장소 끊기 : git remote remove origin - 원격 저장소 버전 확인 : git remote -v 이 다음부터 git push origin main -> git add . -> git commit -m "bottom tabs" -> git push origin main 차례대로 명령어 입력해서 원격 저장소에 올린다.
객체에 객체를 병합하는 Object.assign 메서드 객체를 병합하는 메서드인 Object.assign 메서드에 대해서 알아보겠다. Object.assign(target, ...sources) target: 목표 객체, 속성을 복사해 반영한 후 반환 할 객체 sources: 출처 객체, 반영하고자 하는 속성들을 갖고 있는 객체들 Object.assign()은 값을 복사하기 때문에, 깊은 복사를 사용하려면 다른 방법을 사용해야한다. * 얕은 복사 - 해당 객체만 복사하여 새 객체를 생성함 - 복사된 객체의 인스턴스 변수는 원본 객체의 인스턴스 변수와 같은 메모리 주소를 참조함 - 해당 메모리 주소의 값이 변경되면 원본 객체 및 복사 객체의 인스턴스 변수 값은 같이 변경됨 * 깊은 복사 - 해당 객체와 인스턴스 변수까지 복사 - 전부를 복사하여 새 주소를 담기..
kakao is not defined at eval 에러 해결 카카오 지도를 붙이려고 하는데 "kakao is not defined at eval" 이라는 에러 문구가 떴다. 카카오 지도와 연결을 하지 못해서 생기는 에러인데 1. kakao developer 앱키를 제대로 입력하지 않았을 경우, 2. kakao developer 사이트 도메인에 등록하지 않았을 경우, 에 다음과 같은 오류가 발생할 수 있다. 하지만 난 저 두가지 외 에서 발생하는 오류였다...ㅠㅠ webpack plugins - template 에 등록되어있는 home.hbs에 script 부분을 수정을 해봐도 개발자도구에서 header 부분이 변경되지 않았다..!!!! hbs를 html로 변환해야 동작하는데 변환해주지 못해서 생기는 오류였다. (변환해주지 않으면 html코드가 그대로 나옴) htm..
[React] 게시판 수정 - 첨부파일 삭제하기 (firebase, map, filter, spread) firebase, map, filter을 이용하여 첨부파일 삭제하는 기능을 구현하였다. 삭제 버튼을 누르면 Modal창이 나오면서 '파일을 삭제하겠습니까?' 라는 문구가 나오고, ok 버튼을 누르면 해당 파일이 삭제가 된다. # firebase collectionRef -> notice라는 컬렉션에서 해당 게시물의 userId(uid)를 가져와 collectionRef에 저장한다. const userId = useParams().id; const collectionRef = doc(db,"notice",userId); updateDoc -> 파이어베이스에서 전체 문서를 업데이트를 하지 않고 일부 필드를 업데이트 하려면 updateDoc() 메서드를 사용한다. fileName에 filter을 ..
[React] Recoil 사용법 Recoil atoms(공유상태) -> selectors(순수함수) -> React컴포넌트 Recoil은 Context API를 기반으로 구현되어 있으며, 함수형 컴포넌트에서만 사용할 수 있다. ContextAPI에서는 API를 사용할 컴포넌트는 반드시 Context의 공급자(Provider) 안에 있어야 한다. -> RecoilRoot로 감싸져야 한다. 한 애플리케이션에서 여러 개를 사용할 수도 있고 중첩도 가능하다. 이 때 Recoil API는 가장 가까운 조상 RecoilRoot에 접근한다. import logo from './logo.svg'; import './App.css'; import { RecoilRoot } from 'recoil'; import Counter from './Counte..
[React] Redux란? https://velog.io/@minkim/Redux%EB%9E%80-%EC%BD%94%EB%94%A9%EC%95%A0%ED%94%8C Redux란? - 코딩애플 : 안쪽 컴포넌트에 props를 전달하는 과정이 너무 복잡해서 나오게 된 redux→ 모든 component에 props없이 state를 꺼내 쓸 수 있음상태관리 용이 : state관리가 용이함component 가 모여있는 index.html에서는 s velog.io
reduce() 사용법 reduce * 배열의 각 요소에 대해 주어진 함수(=reducer)를 실행하고, 단 하나의 결과값을 반환함 * map, filter 등의 다양한 메서드를 구현 * 대부분 배열에 있는 인자들을 꺼내서 사용할때 forEach문을 사용한다. 하지만 reduce를 알아두면 다양한 곳에서 사용할 수 있다. arr.reduce((acc,cur,idx,src)->{ return 결과 },초기값); acc : 누적 값 cur : 현재 값 idx : 현재 인덱스(초기값을 제공하면 0, 아니면 1부터 시작) src : reduce()를 호출한 배열 예제. 덧셈 (초기값 설정) input.reduce((acc, cur, idx) => { console.log(acc, cur, idx); return acc + cur; }..
[React] useContext 사용법 및 예제 useContext useContext를 사용하지 않으면, 부모 컴포넌트에서 자식 컴포넌트로 props를 통해서 데이터를 전달한다. 이런식으로 여러개의 컴포넌트가 있다고 가정하면 루트 컴포넌트에서 최하위 컴포넌트로 순차적으로 전달할 때 엄청난 노가다가 될 수 있다. 하지만 context를 사용하면 전역적으로 데이터를 공유하기 때문에 루트에서 최하위 컴포넌트로 다이렉트로 데이터를 한번에 전달할 수 있다. useContext 예제 ex1) AuthContext.ts useContext를 사용하기 위해 ThemeContext에 초기값 null을 설정하였다. useState를 사용하여 isDark 초기값 false로 설정하고, ThemContext.Provider 을 이용하여 value값 isDark와 setI..

반응형