문제 경고창에 태그 안에 태그가 있다는 경고문이 떴습니다. 메인 페이지에 접속하자 마자 뜬 오류라서 메인 페이지 코드부분을 살펴보았습니다. react-router-dom의 Link 컴포넌트는 랜더링될때 요소로 변환됩니다. 태그로 정의된 styled component가 Link 컴포넌트안에 위치해 있어 위와같은 오류가 발생하였습니다. 해결방법 당연하게도 둘 중 하나를 제거하면됩니다. 저는 SPA의 특성상 새로 고침이 되는 태그보다는 부드러운 화면전환을 하는 Link 컴포넌트를 사용하여 오류를 없애주었습니다.
소문자 어쩌구 에러 Warning: React does not recognize the isVisible prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isVisible instead. If you accidentally passed it from a parent component, remove it from the DOM element. 무슨 뜻 인가요? 리액트는 DOM 요소에서 isVisible property를 인식하지 않는다. 만약에 의도적으로 사용자 정의 속성으로써 DOM에 표시하려면 isVisible 대신 소문자 스팰링을 써라. 만..
모모 프로젝트에서는 회원정보의 프로필사진, 닉네임, 지역, 자기소개 내용을 수정할 수 있습니다. 이 중에 프로필 사진 변경 (사용자가 파일을 직접 업로드하는 경우) 기능을 포스팅해 보겠습니다. 우선 사용자는 input에 파일을 업로드할 수 있어야 합니다. type 속성은 "file"로 설정해 줍니다. accept 속성은 허용할 확장자 명을 입력해 줍니다. 💡 파일 업로드 하는 부분을 못생긴 input창이 아닌 이미지를 보여주고 싶다면 안에 위치시키면 됩니다. 💡 만약 여러 개의 파일을 업로드하고 싶으시면 multiple 속성을 추가해 주시면 됩니다. input에서 파일을 업로드하여 변경이 일어나면 이미지를 변경하는 함수 handleImgChange를 실행시켜줍니다. 다음은 handleImgChange 함..
가장 알고싶고도 모르고싶은 주제인 실행컨텍스트에 대해서 알아보겠습니다. 오늘의 블로깅도 모자딥다와 우테코 영상을 전적으로 따릅니다. 실행 컨텍스트 : 코드를 실행하는데 필요한 환경을 제공하는 객체 스코프, 호이스팅, 클로저의 개념과 개념만 알고 있는 상태입니다. (스코프는 유효범위 .. 호이스팅은 선언을 끌어올린것처럼 동작하는 특징.. 클로저는 함수와 그 함수의 렉시컬환경의 조합..어쩌고.. 저쩌고..) 실행 컨텍스트를 이해하게 되면 자바스크립트의 주요한 동작들을 이해할 수 있습니다. 실행 컨텍스트의 구성 실행 컨텍스트는 직접 접근해서 확인하기 어렵고 그 구성이 매우 복잡합니다. 따라서 실행 컨텍스트의 Lexical Enviroment 안에 있는 환경 Record로 호이스팅을 Outer로 스코프체이닝에 ..
요약 Type Alias는 모든 타입을 선언할 때 사용할 수 있고 Interface는 객체에 대한 타입을 선언할 때 사용될 수 있다. 차이점은 확장 가능 여부이며 확장 불가능한 타입 선언시 Type Alias를 확장 가능한 타입 선언시 Interface를 사용한다. 설명 사실 제일 최근 프로젝트를 하면서 type alias는 모든 타입을 선언할 때 사용할 수 있어서 거의 모든 객체 데이터 타입을 type alias로 설정해주었습니다. //interface interface Person { name: string, age?: number } const person = {} as Person; person.name = 'Kim'; person.age = 25; person.address = 'Seoul'; ..
axios instance 프로젝트를 할때면 API 요청 헤더에 공통적으로 들어가는 코드들이 있었습니다. 이를테면 토큰과 "content-type": "application/json"같은 property들은 주로 쓰는 네트워크 요청 라이브러리 axios의 인자로 늘 작성해주었습니다. 메인 프로젝트에서 다른팀 코드를 보다 알게된 axios instance는 중복된 헤더들을 한곳에서 선언할 수 있게 해주었습니다. axios instance를 생성하면 여러 가지 설정(기본URL, 요청 헤더, 인터셉터, 기본 요청 옵션)을 사전에 정의하고 재사용할 수 있습니다. 예시코드 //axiosInstance.js import axios from "axios"; const BASE_URL = process.env.REAC..
요약 모듈이란 특정 기능을 갖는 작은 코드 단위이며 이러한 코드를 파일로 나누어서 관리하는 것을 모듈화라고 합니다. 모듈 번들러란 여러개의 어플리케이션을 구성하는 JS,CSS, 이미지 등의 파일을 하나의 파일로 합쳐주는 도구 입니다. 설명 👩🏻💻 왜 모듈을 하나로 합칠까요? 자바스크립트를 여러개의 파일로 분리해서 script 태그로 로드해도 결국 하나의 자바스크립트 파일처럼 동작합니다. 분리된 파일간의 스코프 구분이 없어 로드 순서를 정하는데 많은 시간을 소모했습니다. 그래서 등장한 CommonJS와 AMD 하지만.. commonJS 코드 예시 // 다른 모듈에서 함수 가져오기 const math = require('./math.js'); // 가져온 함수 사용하기 const sum = math.add..
모모 프로젝트에서 구현한 무한스크롤에 대해서 포스팅 해보겠습니다. 저는 지난번 솔로 프로젝트에서 라이브러리를 이용해서 무한스크롤을 구현해본 경험이 있는데요 이번에는 내장된 API인 observer API와 react-query의 useInfiniteQuery 훅으로 무한스크롤을 구현해 보았습니다. 무한 스크롤의 작동원리는 두 단계로 진행이 됩니다. 1. 스크롤이 뷰포트 바닥에 닿았는지 감지 2. 필요한 데이터 요청 useInfiniteQuery 사용하기 const { data, fetchNextPage, hasNextPage, isLoading, isError, }: UseInfiniteQueryResult = useInfiniteQuery( ['filteredList', keyword, selected..
요약 내부 함수가 생명주기를 마감한 외부 함수의 지역변수를 참조할 수 있는 내부함수 설명 1. inner함수가 outer함수 내부에서 정의되고 2. 그 inner함수가 outer함수의 변수 outerVar에 접근할 수 있는 상황을 클로저 라고 합니다. 클로저의 원리 자바스크립트에서 함수는 정의될때 자신의 내부슬롯에 상위 스코프의 참조를 저장합니다. 따라서, outer함수가 생명주기를 마감하면서 실행컨텍스트에서는 제거되었지만 inner함수는 내부 슬롯에 상위 스코프의 참조를 저장하고 있기 때문에 생명주기가 끝난 outer함수의 변수에 접근이 가능합니다. function outer() { const outerVar = 'I am from outer'; function inner() { console.log(..
지난번 리팩토링 글에서 서버에서 받아온 데이터를 redux로 관리하는 대신 react-query의 캐싱기능으로 상태관리를 해주었는데요 여기서 redux의 useSelector처럼 useQuery를 커스텀 훅으로 만들어 return 값을 사용했습니다. const { myData, isLoading, error } = useMyInfo(); 두 번 실행되는 콜백함수 해당 커스텀 훅은 유저의 정보를 리턴합니다. 모모의 홈페이지에 들어갔을때 1. 유저의 프로필사진과 닉네임이 필요한 컴포넌트 2. 유저의 지역 정보가 필요한 컴포넌트 이렇게 두 개의 컴포넌트에서 커스텀 훅이 실행이 됩니다. 저는 커스텀 훅을 여러번 호출이 되어도 캐싱된 데이터가 있으면 네트워크 요청이 한번만 가므로 콜백함수가 한번만 실행이 될 것이..
