플레인 텍스트를 읽기 쉽고 쓰기 쉽게 하자 🔥마크다운 언어가 만들어지게 된 계기이다. 매번 태그와 함께 작성하는 어려운 방법이 아닌 간단한 문법으로 작성하면 그럴 듯한 문서가 완성된다.마크다운 문법은 블로그나 리드미 파일을 작성할 때 주로 사용하며 나는 그걸 읽을 수

Tailwind를 사용하면 기본적으로 모든 HTML태그의 스타일을 리셋시켜준다.h1, button과 같은 태그를 사용했음에도 불구하고 아무런 변화를 볼 수 없는 이유이다.일반 태그의 경우 우리가 className을 부여하여 스타일을 관리할 수 있지만 Markdown과

NextJS에서 외부라이브러리를 사용할 때에 유독 오류를 많이 마주했고 해결하면서 부족했던 부분을 알게 되어서 블로그를 적게 되었다.Error: Object prototype may only be an Object or null: undefined분명 가져오란 대로 가

TypeScript에서는 Props의 타입을 컴포넌트에게 알려주어야 한다.이때 children이 넘어온다면 아래와 같이 정의할 수 있다.

NextJs에서는 서버 컴포넌트에서 fetch를 하기 위해 async와 await를 사용할 수 있다.위의 page 파일처럼 컴포넌트 자체에 async를 사용한 User 컴포넌트를 임포트하여 사용하면 이러한 에러가 발생한다.Next.js 13의 서버 컴포넌트를 async

react-query는 서버에서 받아온 정보들을 캐싱해두었다가 사용할 때 아주 유용하다.하지만 특별한 설정을 하지 않는다면 기본적으로 데이터가 변경되었을때, 윈도우에 다시 포커스 되었을 때(화면 전환), 네트워크가 다시 연결되었을 때 다시 정보를 받아오게 된다. 우리는

Realtime database를 사용하기 위해서는 앱 등록 및 초기화 과정이 필요하다. firebase console을 통해 앱 등록이 되어있다는 가정하에 진행하려고 한다. 다만 보안 규칙을 물을 때 잠금 모드가 아닌 테스트 모드로 진행할 것! 1. 프로젝트 만들기

사용자가 사진을 직접 업로드하는 것은 생각보다 어려운 일이었다.프로그램을 만들며 어려웠던 부분과 해결방안들을 적어보려고 한다.input이니까 당연히 파일 경로도 e.target.value로 접근하면 될 것이라고 생각했다. 하지만 보안상의 문제로 fake path가 포함

로그인하지않은 사용자에게 장바구니 페이지를 보여주지 않거나 관리자에게만 관리자 페이지를 보여주고 싶을 때 useNavigate를 많이 사용한다.관련해서 <Navigate> 요소도 있어 함께 정리해보려고 한다.이벤트가 발생했을 때 경로를 변경할 수 있는 메서드이다.

Firebase는 백엔드 없이 간편하게 앱을 구현할 수 있도록 도와준다. 그 중 authentication(인증), 그 중에서도 구글 로그인에 대해 정리해보려고 한다. 공식 문서를 참고할 때에는 firebase > build > authentication 로 들어가면

HTML내의 엔터, 탭, 스페이스바를 나타내기위해 \\n, &nbsp 를 사용한다.그게 귀찮다면 pre 태그를 사용하는 것도 좋은 방법이다.결과물은 아래와 같이 나올 것이다.또는 서버와의 통신을 하면서 긴 글(ex. description)에 \\n, &n

컴포넌트간에 useNavigate 훅을 사용하면서 데이터를 함께 넘겨주고 싶을 때가 있다.이럴 때에는 useNavigate와 useLocation을 적절히 활용해주면 된다.위의 UserCard 컴포넌트에서는 user state에 유저 정보를 담고 있다.해당 컴포넌트를

Axios는 fetch의 단점을 보완한 Promise 기반의 HTTP 클라이언트 라이브러리이다. fetch 메서드의 가장 큰 단점이라면 서버에서 보낸 에러코드를 성공한 통신이라고 생각한다는 것이다. 서버에서 400, 404등의 에러가 발생한 코드를 보내주면 fetch

서버와의 통신을 하는 동안 우리의 코드는 그동안 너무 많은 데이터를 보여줘왔다.통신해야하는 주소, 주소의 param은 무엇으로 주어야하는지 등등..이것을 조금 더 private하게 요청하는 방법으로 class의 private field를 사용해보았다.fakeYoutub

통신해서 가져온 데이터를 chashing해두었다가 사용하기 위해 react-query를 사용했다. 그 중 조금 이해가지 않았던 query key와 query function에 대해 정리해보려고 한다. react-query의 사용 먼저 react-query를 사용하기

위와 같이 뒤로가기 버튼을 클릭했을 때 이전의 검색 결과를 보여주는 것을 정리해보려고 한다.먼저 라우터의 경로는 아래와 같다.SearchHeader에서 검색한 내용은 Videos 컴포넌트에서 useParams()을 통해 query로 받는다.마찬가지로 뒤로가기 버튼을 누

mock 데이터를 가지고 통신을 하던 중 이런 에러를 발견했다.유독 한 컴포넌트에서만 통신을 했을 때 이런 문제가 발생했는데문제는 간단하게 해결되었다.데이터 주소의 시작에 "/" 를 잊어버렸던 것이다.겸사겸사 경로에 대해 같이 정리하면 좋을 것 같아서 블로그를 적었다.

부트캠프가 끝나고 부족한 이론을 공부하다 까먹기전에 코드를 좀 쳐야겠다는 생각이 들어서 간단한 todo list를 만들어보기로 했다.다만 서버의 도움을 받을 수 없으니 local host의 도움을 받기로 했다.생각으로는 엄청 쉬울 것 같았는데 나에게는 고난과 시련이 기

프로그래머스를 푸는데 문자열로 된 식을 계산하는 문제가 나왔다.도저히 내 머리로는 풀 수 없어서 구글의 도움을 받았는데 그때 나오게 된 것이 바로 eval() 메서드였다.함수는 다음과 같이 동작한다.MDN 사이트에서는 이렇게 간편한 함수를 절!대! 사용하지 말라고 한다

데이터 바인딩이란 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미한다.자바스크립트에서는 데이터가 변경될 때마다 화면의 데이터와 맞춰주는 과정이 필요했지만 리엑트에서 데터