![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/be02TZ/btsJoYMk3eL/CjjXY9n2Arj5hDJB698TJ0/img.png)
Tailwind CSS에서 기본 스타일(텍스트 색상, 글꼴 등)을 추가하기 위해서는 두 가지 방법이 있다. 첫번째는 index.html 파일에 클래스를 추가하거나 두번째는 @layer 지시문을 이용해서 추가하는 것이다.@tailwind base;@tailwind components;@tailwind utilities;@layer base { h1 { @apply text-2xl; } h2 { @apply text-xl; } /* ... */} 나는 두번째 방법으로 전역 폰트를 적용하기 위해 아래와 같이 코드를 작성했다. 폰트는 Pretendard를 적용했고 CDN을 이용해 Pretendard를 사용할 수 있기 때문에 https://github.com/orioncactus/pr..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/c06egi/btsIRuEtyKf/nEIRyjcEkMbxaiXUVz8VPK/img.png)
고급 프로젝트를 앞두고 팀원들과 기술 스터디를 진행 중인데, 이번 주제는 Plain React App이 아닌 Next.js를 프로젝트에서 사용해야하는 이유였다. 그 과정에서 프레임워크와 라이브러리의 차이를 공부하게 되어서 정리해보려 한다. 라이브러리와 프레임워크 쉽게 이해하기나는 헷갈리는 개념은 비유를 통해서 이해하는 것을 좋아하는데, 프레임워크와 라이브러리의 차이 또한 집이라는 비유를 통해 알아보고자 한다. 먼저 라이브러리는 집을 설계부터 건축까지 모든 것을 도맡아 하는 것과 비슷하다. 따라서 내가 원하는 대로 집을 설계할 수 있고 어디를 안방으로 할 지 어디를 거실로 할 지와 같이 각 방을 원하는 대로 배치할 수 있다. 반면 프레임워크는 새 집을 구입하는 것과 같다. 따라서 집을 직접 설계하지 못하는..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/X1t37/btsICg7Q0jN/3m0rf3gy8kl7YRnlJhEzW1/img.png)
저번 프로젝트에서 TanStack-Query(React-Query)를 사용해보자는 논의가 나왔지만 라이브러리를 사용하지 않고도 구현할 수 있을 것이라는 결론이 내려져 사용하지 않았었다. 그래서 데이터 페칭을 위한 hook을 만들었었는데, 이후에 리팩토링하는 과정에서 이 hook을 useQuery와 useMutation으로 분리시켰다. (왜 분리했는지에 대한 자세한 내용은 링크에서 볼 수 있다.) 이렇게 훅을 분리하는 것에 대한 아이디어는 프로젝트 시작 전 TanStack Query에 대해 공부하면서 얻게되었는데, 프로젝트 이후 TanStack Query 공식문서를 읽다보니 api 예외처리를 간편하게 해주는 것 이외에도 다양한 기능이 많아서 공부해보려고 한다. 1. TanStack-Query(React-Q..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/dHjZH8/btsIwR7RG06/xs9WMBgNBuZ4xaWG3DjTvk/img.png)
들어가며5월 초반에 2주 동안 진행했던 기초 프로젝트를 마치고, 어느새 중급 프로젝트까지 마쳤다. 이번엔 기초 프로젝트 때 보다 시간이 금방 지나간 것 같아 시원섭섭하다. 기초 프로젝트 때는 너무 적고 싶은게 많아서 그랬는지, 미루고 미루다 보니 결국 적지 못했다. 그래서 이번 프로젝트는 꼭 회고를 적고야 말겠다는 의지를 가지고 팀 미팅이 끝난 뒤 부리나케 카페로 달려왔다. 이번 프로젝트는 저번 프로젝트보다 걱정이 앞섰다. 기술 스택 중 하나인 Tailwind css도 처음 사용해보고, Next.js는 아직 익숙치 않은 상태였기 때문이었다. 하지만 걱정했던 것과는 다르게 너무 재밌게 프로젝트에 참여했고, 많은 것들을 배울 수 있었다! :) Problem, Keep, Try 나는 이번 프로젝트에서, ..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/c8paHs/btsIyKsIjwi/6VOkkVEfDScyjPenQdZ1E0/img.png)
로그인과 회원가입을 구현할 때 알아야 할 중요한 개념 중 하나가 인증과 인가이다. 하지만 둘의 개념은 혼동하기 쉽기 때문에 간단한 예시와 함께 이해해 보려고 한다. 1. 인증(Authentication) vs 인가(Authorization)인증과 인가 서비스를 제공하는 authO에 둘의 개념이 잘 나와 있다. 1. 인증(Authentication)인증은 사용자의 신원을 확인하는 것이다. 두 가지 예시를 보자. 은행 창구에 가서 돈을 인출하려고 하면 직원은 신원을 확인하기 위해 신분증을 요구한다. 비행기에 탑승하기 전에도 여권을 통해 신원을 확인해야만 비행기에 탑승할 수 있다. 위 예시 모두 우리의 신원을 확인하기 위해 어떤 절차를 걸치며 이를 인증이라고 한다. 2. 인가(Authorization) 인가는..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/GGWe2/btsH0NemRvj/1G4mG1wO7OFvpXNmaaCLD1/img.png)
try catch 문으로 에러를 처리할 때 아래와 같이 작성했더니 err에 타입에러가 뜨는 것을 보게되었다.const getSth = async (pararms) => { try { // ... actinos } catch (err) { setError(err.message) } }; err에 커서를 대보면 다음과 같은 메세지가 뜬다. 사진에서 알 수 있듯이 error는 unknown 타입이다. unknown 타입은 any 타입 외의 어떤 타입에도 할당할 수 없기 때문에 타입 좁히기를 해주어야 한다. 따라서 instanceof를 이용해서 타입을 좁혀주었더니 에러가 말끔히 사라졌다. 이렇게 타입을 좁혀주는 매커니즘을 타입 가드라고 한다.if (err instanceof Error) { setError(er..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/GeV6t/btsIwXm1gCT/aI9h5dGHUkyKJqHl18IqY1/img.png)
CORS 정의 로그인, 회원가입 시 만나게 되는 CORS! 어떤 건지 정의를 정보통신용어 사전에 검색해봤는데, 개념이 난해하고 이해하기 쉽지 않다😮 CORS 는 웹 브라우저를 통해 서로 웹 서버에서 다른 도메인간 리소스 접근을 허용하도록 하는 웹 브라우저 기술 표준을 말한다. (출처: 정보통신용어사전) 아래처럼 일상적인 상황에 대입하면 좀 더 이해하기 쉬울 것 같아 정리해보았다. 1. A라는 사람이 있다고 가정해보자. A는 아주 바쁜 사업가다. 그래서 자신의 연락을 대신 관리해주는 사람인 B를 고용하게 된다. 2. A는 B에게 누군가 A의 사무실에 전화를 하면 통화를 바탕으로 발신자에 대한 정보(누구, 왜 등)를 수집하고 대기하라고 말해둔다. 3. B는 이후에 A에게 전화를 걸어 발신자에 대한 정보를 공..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cBj6n3/btsHYT6enmZ/vJPOR0fkvGmEkc1fo3uz7k/img.png)
작업을 마치고 원격 저장소에 push를 했는데 Compare & Pull Request 버튼이 안보였다. 이 버튼이 떠야 PR을 날릴 수 있는데 당황스러웠다. 버튼이 뜨지 않은 이유는 간단했다. 예전에 A 브랜치에서 작업하고 이 작업물을 main에 merge 했었다. 이후 A 브랜치에서 작업물을 이어서 해야하는 경우가 있어서 새로 브랜치를 생성하지 않고 이어서 진행했다. 이런 경우 (A 브랜치가 이미 main에 병합된 상태에서 A 브랜치에서 작업을 계속하는 경우), GitHub은 해당 브랜치와 main 브랜치 간의 차이가 없다고 판단할 수 있다. 따라서 Pull Request를 생성할 필요가 없다고 인식하게 되어 Compare & Pull Request 버튼이 나타나지 않을 수 있다. 이런 경우 New..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/0TPIC/btsHZgy8giK/LWzKFJQmFFWeLzQadq3Ez1/img.png)
A 브랜치에서 B 브랜치로 넘어갔는데 A 브랜치의 내역이 B 브랜치에 적용되고 A 브랜치의 내역이 삭제되는 문제가 발생했다. 이러한 문제는 가끔 VSCode에서 브랜치 토글이 제대로 되지 않을 때 발생하는데, 해결방법은 아래와 같다. 1. VSCode 강제 종료 및 재실행VSCode 강제 종료: 현재 열려 있는 VSCode를 강제 종료한다.VSCode 재실행: VSCode를 다시 실행한다.대부분의 경우 VSCode를 종료하고 재실행하면 문제가 해결된다. 2. . git/HEAD.lock 파일 삭제 강제 종료 후 VSCode를 다시 열었음에도 불구하고 문제가 지속된다면 아래의 방법을 사용하면 된다. 1.Git Clean 커맨드 실행 우선 작업중인 디렉터리의 불필요한 폴더와 파일을 제거한다.git clean..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/wYUBI/btsHO3zNBcC/66OlMVIPmp4H9C0s5OAQlK/img.png)
Next.js를 배우면서 간단한 백엔드 서버를 만들게 됐는데, Mongoose라는 라이브러리로 MongoDB를 연동했다. 조약하지만 백엔드 서버는 처음 만들어봐서 재밌다ㅎㅎ MongoDB와 Mongoose에 대한 공부는 차차 할 예정이고, 오늘은 실습을 하면서 마주쳤던 에러에 대해 다룰 것이다. Mongoose 스키마와 모델우선 스키마와 모델은 무엇일까? 스키마는 MongoDB 컬렉션에 저장되는 document에 어떤 종류의 값이 들어가는지를 정의한다.모델은 스키마를 기반으로 만들어지는 인스턴스이며, MongoDB 컬렉션에서 도큐먼트를 생성, 읽기, 업데이트, 삭제(CRUD)하는 데 사용된다. 나는 URL 단축 기능을 구현하기 위해 아래와 같이 스키마와 모델을 정의했다. 아래의 스키마는 title, u..
- Total
- Today
- Yesterday
- CSS
- rest parameter
- 코드잇 스프린트
- 프론트엔드
- Target
- 코드잇스프린트
- html
- GitHub
- 동기
- arguments
- 스프린트프론트엔드6기
- 중급 프로젝트
- 제어 컴포넌트
- 취업까지달린다
- 유사배열객체
- 객체
- js
- Git
- react
- 비동기
- hydrationboundary
- 배열
- map
- 리액트
- 비제어 컴포넌트
- javascript
- Next.js
- innerhtml
- tanstackquery
- currentTarget
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |