-
Next.js 프로젝트에 ESLint와 Prettier 설정하기
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하는 이호균입니다. 들여쓰기가 맞지 않아도, 변수를 선언하고 사용하지 않아도, 모든 곳에 any 타입을 사용하여도 어플리케이션은 동작합니다. 동작하니까 문제가 없는 것 같아보이지만 사실 문제가 있습니다. 가독성도 나쁘고, 유지보수가 어렵습니다. any를 남발하였으니 compile time 잡을 수 있었던 문제들이 runtime까지 갑니다. 프로젝트에 ESLint와 prettier를 추가하여 최소한의 코드 품질과 일관된 코드 스타일을 보장하는 방법을 알아봅니다. 프로젝트 생성 // 생성 npx create-next-app <MY-AWESOME-APP> // config 파일 생성 touch tsconfig.json // 프로젝트 실행 npm run dev //...
-
JWT란 무엇인가
JWT 안녕하세요 똑똑한 개발자에서 백엔드 개발을 하고 있는 김영환 입니다. JMT졸맛탱이 아니라 JWT😝 웹 개발을 진행하다보면 빠질수 없는 인증 / 인가 .. JWT에 대해서 소개해보도록 하겠습니다. JWT 란 무엇인가 지겨우시죠? 네 저도 지겨워요 Json Web Token 약자로 모바일이나 웹의 사용자 인증을 위해 사용하는 암호화된 토큰을 의미합니다. JWT 정보를 request에 담아 사용자응 정보 열람, 수정 등 개인적인 작업 등을 수행할 수 있게한다. 그럼 JWT는 어떤 정보를 담아서 전달하나요? JWT는 세 파트로 나누어지고, 각 파트는 .(점)으로 구분하여...
-
Frontend에서 State를 관리하는 방법
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 맡고 있는 심재철입니다. 오늘은 ContextAPI, Redux, Mobx를 비교하는 글을 써보려고 합니다. Context API는 왜 안쓰나요? 상태 관리 라이브러리를 사용하지 않고 리액트로만 전역 상태를 관리하려면 Context API를 사용해야합니다. 아주 소규모의 서비스라면 Context API로도 충분합니다. 하지만 사이즈가 조금만 커져도 코드가 장황해지고 관리하기가 힘들어집니다. 그 이유는, 바로 성능떄문입니다. 예를들어서, function UserProvider({ children }) { const [user, setUser] = useState(null); const PassToChild = { user, setUser }; return <UserContext.Provider value={PassToChild}>{children}</UserContext.Provider>; } 이런 유저 데이터를 관리하는...
-
아키텍처 패턴 소개
안녕하세요, 똑똑한개발자에서 백엔드 개발을 하고 있는 권창식입니다. 오늘은 아키텍처 패턴 몇 가지를 소개해드리고 자 합니다. 아키텍처 패턴 아키텍처 패턴은 아키텍처를 설계할 때 참조할 수 있는 전형적인 해결 방식 또는 예제를 의미합니다. 아키텍처 패턴은 소프트웨어 시스템의 구조를 구성하기 위한 기본적인 윤곽을 제시합니다. 아키텍처 패턴에는 서브시스템들과 그 역할이 정의되어 있으며, 서브시스템 사이의 관계와 여러 규칙, 지침 등이 포함되어 있습니다. 아키텍처 패턴의 장점 시행착오를 줄여 개발 시간을 단축 시키고, 고품질의 소프트웨어를 생산할 수 있습니다. 검증된 구조로 개발하기 때문에...
-
SerializerMethodField() 사용의 쿼리 최적화
SerializerMethodField() 사용의 쿼리 최적화 안녕하세요 똑똑한 개발자에서 백엔드 개발을 하고 있는 jujun입니다. SerializerMethodField는 원하는 key value를 만들 수 있게 도와주지만 잘못 사용하면 N+1 문제를 발생시킵니다. . . 본론 예제 모델 Profile 모델과 Essay 모델이있고 Essay는 Profile을 참조하고 있습니다. # profile/models.py class Profile(models.Model): username = models.CharField("제목", max_length=50) # essay/Essay.py class Essay(models.Model): title = models.CharField("제목", max_length=50) profile = models.ForeignKey(Profile, verbose_name='작성자', on_delete=models.CASCADE) . . ###정방향 참조 모든 essay의 내용과 작성자 정보를 담은 json을 반환하고자 합니다. 해당 뷰는 모든...