본문 바로가기

전체 글89

[Git] fatal: repository 'https://github.com/.../' not found 안녕하세요. 새로운 repository 에 푸시할 때 봤던 오류라 적어놨는데도 깜빡해서 블로그에 적어둡니다 ✔ 환경 MacBook VScode ✔ 문제 remote 까지는 문제 없다가 push 하려고 하면 아래와 같은 오류 발생. fatal: repository 'https://github.com/.../' not found ✔ 해결 git remote add origin https://아이디@github.com/아이디/props-prac.git 애초에 이렇게 remote 하면 저 문제가 발생 안합니다. + 리모트 주소 수정 명령어 git remote set-url origin "https://아이디@github.com/아이디/props-prac.git/" 하지만 이미 오류를 봤고, 위의 명령어를 입력했.. 2022. 10. 28.
[React] useRef 와 useState 개념, 차이 전에 정리하려고 했던 useRef(), useState() 차이를 설명해보겠습니다. ✔ 개념 useState( ) 란? const [state, setState] = useState(initialState); 상태 유지 값(state) 과 그 값을 갱신하는 함수(setState) 를 반환합니다. setState 함수는 state 를 갱신할 때 사용합니다. initialState 인자는 초기 렌더링 시에 사용하는 state입니다. 그 이후의 렌더링 시에는 이 값은 무시됩니다. const [state, setState] = useState(() => { const initialState = someExpensiveComputation(props); return initialState; }); // 예시 co.. 2022. 10. 18.
forEach, for...of, for...in 차이 안녕하세요 react 에서 for문을 사용하였는데 for보다는 forEach를 사용하는게 좋을 것 같다는 피드백을 들었습니다. 그래서 forEach로 바꿔봤더니 더 간단하더라고요! forEach, for of, for in 때에 따라 맞는걸 사용하면 된다고 들었습니다만, 모르니까 공부 시작!! ✔ forEach 문 배열의 요소와 인덱스 모두에 접근할 수 있습니다. 반면 예외를 던지지 않고는 forEach()를 중간에 멈출 수 없습니다. 중간에 멈춰야 한다면 forEach()가 적절한 방법이 아닐지도 모릅니다. mdn에 forEach 검색하니까 바로 for 문을 forEach() 로 바꾸는 방법이 나왔습니다. 이후가 훨씬 깔끔하죠? const items = ['item1', 'item2', 'item3'].. 2022. 10. 13.
multipart/form-data 파일 업로드하기 게시판에서 선택한 파일을 multipart/form-data 형식으로 업로드 해야하는 상황입니다. multipart/form-data 는 백엔드 할때도 까다롭게 느껴졌는데 다시 프론트에서 만나게 됐어요. 이제 다시 만나도 당황하지 않기 위해서 첨부파일 업로드 기능을 구현하면서 새롭게 알게된 점을 정리해놓겠습니다! ✔ 개념 Multipart/formdata 란? 이 방식은 요소가 파일이나 이미지를 서버로 전송할 때 주로 사용합니다. hi.png 라는 이름을 가진 파일을 올리려고 할 때, 우리는 hi.png 파일 뿐만 아니라 해당 파일의 이름, 사이즈 등을 같이 저장하고 싶어합니다. 이럴 때 해당 파일과 파일 정보를 같이 전달하기 위해서 multipart/formdata 를 사용합니다. ✔ 해결 방법 For.. 2022. 10. 12.
[React] useMutation() 은 a single variable or object 만 넣을 수 있다 게시글 작성 페이지를 구현하면서 useMutation 을 사용하고 있습니다. 그런데 오늘 parameter 두 개 받는 api 를 useMutation 을 사용하여 호출하려고 하는데 도통 안되는 거예요 useMutaion은 object 형태 또는 하나의 변수를 전달해야 하는 것 을 모른 채 타입이 안 맞나? 코드가 문제있나? 하면서 하루종일 저를 의심했어요.... 물론 내 잘못 맞음 난 폭풍 구글링 했는데 왜 몰랐는가 반성하며 useMutation 에 대해 공부하다가 자겠습니다!! ✔ 개념 useMutation() 은 react query를 이용해서 서버에 데이터 변경 작업을 요청할 때 사용합니다. 데이터 조회는 useQuery() 를 사용합니다. useQuery의 경우 기본적으로 컴포넌트가 렌더링 될 .. 2022. 10. 12.
[React] react-hook-form 개념, 장점 안녕하세요. 게시판 프론트엔드를 개발하면서 react-hook-form 이라는 것을 알게되었습니다. 개발하면서 모르는게 있을 때는 항상 찾아보긴 하지만, 시간이 조금만 지나면 명확하게 생각이 안나더라고요. 그래서 공부할겸 글로 생각 정리를 해두기로 했어요! 또, 제가 삐약이 시절에 어떤 생각을 하면서 개발했었는지 기록해두면 미래에 재밌을거라고 생각해서요. react-hook-form 을 발견했을 때는 코드 발견 -> -> 이게 뭐지? 왜 썼지? -> 그래서 어떻게 쓰지? 이 순서였어요. 그래서 이 순서로 적어보려고 합니다! ✔ 개념 react-hook-form 이란? form 의 효율적인 validation 이 가능한 리액트 라이브러리 복잡한 form 을 만들 때 간결한 코드 작성에 도움이 된다. 불필요.. 2022. 10. 11.
[VSCode] 터미널에서 code . 실행안될 때 ✔ 문제 터미널에서 npx create-next-app 명령어 실행하여 프로젝트 생성하고 code . 명령어로 바로 vscode 실행하고 싶은데 실행이 안됐다. ✔ 해결방법 vscode 실행 -> command + shift + p 단축키 -> shell 입력 -> Shell Command: Install 'code' ~~PATH 선택 이후 터미널 재시작 하여 code . 명령어 입력하면 실행된다. 2022. 10. 10.
[TypeScript] keyof typeof ✔ 목표 const beer = ['TERRA','CASS'] as const; const COLOR_CODE: TBeer = { TERRA: 'green', CASS: 'blue' } COLOR_CODE 의 타입을 beer 의 값('TERRA', 'CASS') 으로 제한하기 ✔ typeof type TItem = typeof beer // type TItem = readonly ["TERRA", "CASS"] type TItem = typeof beer[number] // type TItem = "TERRA" | "CASS" ✔ Mapped Type const beer = ['TERRA','CASS'] as const; type TBeer = { [key in typeof beer[number]]: s.. 2022. 9. 22.
[오류/해결] Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured. ✔ 환경 인텔리제이 MacOS Java 11 ✔ 문제 Spring boot 프로젝트를 생성 할 때 Dependency 에 사용할 데이터베이스를 미리 정해놓고 생성하는 경우가 많다. 이럴 때 어플리케이션을 실행하면 다음과 같은 문제가 발생한다. Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured. Reason: Failed to determine a suitable driver class Action: Consider the following: If you want an embedded database (H2, HSQL or Derby), please pu.. 2022. 8. 7.