[타입스크립트] 자주쓰는 메소드 타이핑

forEach 우선 forEach 부터 시작해봅시다. Arr 타입에 대한 forEach 메소드의 타입을 정의해주어야합니다. interface Arr {} const a: Arr = [1, 2, 3]; a.forEach((item) => { console.log(item); }); a.forEach((item) => { console.log(item); return 3; }); 우선 forEach는 리턴값이 없기때문에 void로 정의해줍니다. 이 함수는 아무것도 반환하지 않는다는 의미입니다. interface Arr { forEach(): void; } 그 다음으로는 forEach 내부의 callback 의 타입을 지정해주어야합니다. 우선 callback 또한 리턴을 void 로 선언했습니다. 콜백의 리턴..

[타입스크립트] class

Constructor 가 있을 때 Class class A { a: string; b: number; constructor(a: string, b: number = 123) { this.a = a; this.b = b; } method() {} } const a = new A("123"); console.log(a); // A { a: '123', b: 123 } const b = new A("DONG", 1006); console.log(b); // A { a: 'DONG', b: 1006 } class 이름을 type 으로 사용할 수 있다. 이때는 new 키워드를 사용하여 instance 를 할당해주어야한다. const aaa: A = new A("123"); class 자체를 할당하려면 type 은..

자주 사용하는 로더

style-loader , css-loader css 를 import 하려면 다음과 같은 오류를 만날 수 있다. 이는 css 로더와 style 로더를 설정하지 않았기 때문이다. 다음 처럼 style-loader 와 css-loader 를 포함시켜주면 된다. file-loader CSS 뿐만 아니라 소스코드에서 사용하는 모든 파일을 모듈로 사용하게끔 할 수 있다. 파일을 모듈 형태로 지원하고 웹팩 아웃풋에 파일을 옮겨주는 것이 파일을 옮겨주는 것이 file-loader가 하는 일이다. 가령 CSS 에서 url() 함수에 이미지 파일 경로를 지정할 수 있는데 웹팩을 file-loader를 이용해서 이 파일을 처리한다. webpack 4 에서는 별도로 설치를 해주어야했지만, webpack5 에는 default..

git conflict rebase 로 처리하기

pull requests 를 보낸 해당 브랜치로 갑니다. git remote add upstream https://github.com/PNU-SWEFI/Among git fetch upstream main (upstream/main 이라는 브랜치가 자동으로 생성됩니다!) git rebase upstream/main - 계속 하려면 git rebase --continue - 취소 하려면 git rebase --abort git push origin -f [브랜치 이름]

Github 레포에서 clone 한 프로젝트 branch가 보이지 않을때

어떤상황이었나요? 강의를 보면서 공부를 하고 있는데 repo 를 clone 해서 각 branch 에 실습 코드가 있는 상태였다. 그런데 branch 가 master 밖에 없었다. 이게 무슨일인가. git branch -a 를 해야 remote 에 있는 숨겨진 브랜치 까지 모두 볼 수 있었다. 여담으로 fork 한 레포에서는 git branch -a 를 해도 remote branch 를 볼 수가 없었다.

프로젝트에 gitHooks 적용하는 방법

우선 진행하는 프로젝트에서 git hooks 설정을 다른 분이 모두 해주셨지만, 저는 잘 모르니까 뭔가 답답했습니다. 이런 답답함이 생긴 기회에 궁금함을 해소하려고 합니다. cd .git/hooks 삽질한 과정 더보기 vim 을 통해 pre-commit 을 생성해주었습니다. 다음 내용을 넣었습니다. echo 'Hello Gabia!' 이제 바로 될 줄 알았것만, 뭔가 추가적인 설정이 필요한 듯 했습니다. .git/hooks 경로에 들어와서 ls 명령어를 실행하면 다음과 같은 파일들을 볼 수 있을 겁니다. 이중에서 저는 pre-commit.sample 을 건들여야합니다. (이미지에서는 pre-commit 일텐데 제가 이미 수정하고 난 후라서 그렇습니다. 혼동하지 말길 바랍니다.) 쉽게 말하자면 pre-co..

원격 서버에 리액트 프로젝트 정적 배포한 과정

어떤 상황이였나? 현재 제가 진행하고 있는 프로젝트는 서울에 실 서버를 설치해서 ssh 로 원격접속을 할 수 있게끔 설정을 해놓은 상태입니다. 이제 프런트에서 만든 프로젝트를 빌드하여 정적배포를 하려고 합니다. 저희 서버의 도메인으로 접속을 할 수 있게끔말입니다. 그 과정을 기록해둡니다. 저와 비슷한 처지에 놓으신 분들을 위해, 까먹을 미래의 저를 위해서 말이죠. 우선 서버에 원격 접속을 당연하게 했습니다. 프로젝트의 메인 서버는 Fast API로 구축되어있는 상태입니다. 프로젝트의 리더님께서 정적 배포를 위해 다음 파일을 사용하라고 언급을 해주신 상태였습니다. main.py from fastapi import FastAPI from fastapi.staticfiles import StaticFiles ..

git 방금 commit 취소하는 방법

졸업과제를 하고 있는데 모든 변경내용을 한꺼번에 커밋해버렸다.. 나란 사람.. 병신 해결하는 방법은.. git reset HEAD^ 위 명령어는 아래 명령어와 동일하다. git reset --mixed HEAD^

imgUrl 을 FormData 형식으로 변환하기

현재 toastUI를 사용해서 이미지를 꾸미는 기능을 추가해보려고 하고 있다. 그런데 이미지를 저장할때 이미지정보를 imgUrl 로 얻을 수 있다. imgUrl 말그대로 url 이다. 다만, url 에 해당 데이터를 입력하면 이미지가 나타날 뿐이다. 그런데 문제점은 현재 서버에서는 이미지 url 이 아닌 FormData 형식으로 보내주고 있기 때문에 imgUrl -> FormData img파일로 바꾸어주고 싶었다. 아래 코드에서 문제점을 해결할 수 있었다. 파라미터인 url 에 imgUrl 을 넘겨주면 formData 에 넣을 수 있는 이미지 파일이 리턴된다. 이미지명은 정해주기가 귀찮아서 faker 라이브러리를 사용하여 랜덤이름으로 넣어주었다. const editorToBase64 = async () ..

React 스크롤 커스텀하기 , 스크롤 색 바꾸기

음 예전에는 scroll custom 을 라이브러리를 사용해서 해봤었는데, 이번에는 그냥 라이브러리 없이 css 만으로 구현해보기로 했다. 2022.05.08 - [공부기록/커뮤니티 프로젝트] - 스크롤바 다시 커스텀.. 스크롤바 다시 커스텀.. 아.. 이 무슨 .. 기존에 사용하던 스크롤바 라이브러리이다. 윈도우에서는 내 입맛에 맛게 커스텀 되었지만, 최근에 맥북으로 바꾸게 된 프로젝트 환경에서는 그렇지 않았다. 즉, 내가 원하는 모 ehddud100677.tistory.com 그런데 구글링을 하고 계속 시도해보는데 왜 때문인지 바뀌지가 않았다. 결국 문제는 해결할 수 있었지만 커스텀을 위해 꼭 필요한 부분을 강조한다. overflow : scroll overflow: scroll 속성이 필히 부여되어..