주니어에서 시니어로

진행 중인 리액트 프로젝트를 타입스크립트로 바꾸고 있는데,객체의 타입을 줄 때 어떤건 type으로 주고, 어떤건 interface로 주기에 무슨 차이인가 알아보게 되었다.확장interfaceinterface Person {  name: string;  age: number;}interface Student extends Person {// 확장(상속)  school: string;}const hello: Student = {  name: 'hello',  age: 11,  school: 'world'} typetype Person {  name: string;  age: number;}type Student = Person & { // 확장(상속)  school: string;}const hello: S..

개발을 하면서 기존 pagination으로 관리되던 리스트 목록을 페이지 넘기지 않고 한 스크롤에서 보기 편하게 됐으면 좋겠다는 요청이 들어왔다. 리스트 목록이 적으면 상관이 없으나, 몇백 개의 리스트를 한 스크롤에 한 번에 불러오면 렌더링 시의 속도 면이나 자원 면에서도 좋지 않다고 판단됐다. 그래서 무한 스크롤로 구현하되, 현재 보고 있는 페이지만 점차 렌더링되도록 하기로 했다. chatGPT에 물어본 결과 현재 사용중인 react 에서는 react-virtualized와 react-window를 많이 사용하고 있는 듯 했다. 그 중 react-window가 용량이 작아 비교적 간단한 구현에서는 유리하다고 생각되어 사용하려고 했다. 하지만 고정 높이를 사용해야 하는 단점이 있었다. 높이의 경우 유동적..

이번에 파일 다운로드 기능을 구현하다가 엄청난 삽질을 하게 돼서 기록 삼아 글을 쓴다. 엑셀 파일이 서버 측에 저장되어 있고, api를 호출하면 서버에서 response로 파일을 보내주고 해당 파일을 다운로드 구현하는 일이었다. 서버 응답은 이런 식으로 샬라샬라 내려옴 구글링을 해보니 responseType을 추가해줘야 한다고 한다. const options = { responseType: "blob", }; 이리저리 검색해보니 responseType: "arraybuffer"로 넣는 사람도 있고 "blob"을 넣는 사람도 있던데 쓰기/수정 기능을 써야 하는 게 아니라면 불변성이 있는 blob을 권장한다고 한다. 읽기 전용이므로 blob으로 넣었다 그리고 불러온 데이터를 new Blob으로 생성해 준다 ..