반응형 전체 글70 [Django] ArrayField Integer 인 경우 test code 사용 방법 [ 문제점 ] 다음과 같이 django 에서 model 에 ArrayField를 사용해서 만들었다고 하자. from django.db import models from django.contrib.postgres.fields import ArrayField class User(models.Model): array = ArrayField(models.IntegerField()) ArrayField 안에는 IntegerField를 넣어서 정수의 배열을 받는다. 이를 테스트 하기 위해서 다음과 같은 테스트 코드를 작성하였다. import pytest from rest_framework import status from rest_framework.test import APITestCase @pytest.mark... 2022. 7. 25. [React | Jest] unit test raises error because of .getContext() is not implemented [ 문제점 ] jest를 사용하여 테스트 하는 과정에서 canvas element가 있었다. 이를 조작하는 메소드 .getContext()를 사용하는데 여기서 에러가 발생하였다. canvas를 테스트 하는 것은 아니기에 테스트는 성공하였지만, 하는 과정에 에러가 났다. [ 시행착오 ] 구글에 검색해보니 jest-canvas-mock을 설치, createElement 함수를 jest.fn()을 사용해서 조작하기 여러 방법을 찾았다. 그러나 jest-canvas-mock은 install 하니 .getContext()까지는 에러가 없이 되지만 undefiend가 반환이 되면서 이후 과정에서 다시 에러가 발생하였다. createElement를 조작하는 방식은 마찬가지로 .getContext() 까지는 작동되지만.. 2022. 7. 20. [NextJS] Image background 설정하기 일반적으로 웹에서는 img tag 혹은 css의 background-image 속성을 사용하여서 배경 이미지를 설정한다. 그러나 Next JS에서는 자체적으로 최적화를 해주는 Image tag가 있다. 따라서 이 태그를 사용해 배경으로 설정해보겠다. import Image from "next/image"; export default function Page() { return ( content ) } Image tag에서는 width와 height를 설정할 수도 있지만 위처럼 layout을 fill로 설정하고 objectFit을 cover로 설정하면 자동으로 배경을 채워준다. objectPosition 속성은 사용하지 않을 수도 있지만 우선 center로 설정해준다. 이렇게 작성하기만 하면 이미지와 co.. 2022. 7. 2. [NextJS] SyntaxError: Unexpected token u in JSON at position 0 - router.query undefiend 해결하기 [ 문제점 ] Next Js의 이전 페이지에서 query를 사용해 값들을 넘겨주고 이 값들을 가져와 사용하려고 하였다. 전달하는 값이 json이라서 JSON.stringify을 하여서 보내고, JSON.parse함수를 사용해서 받으려고 하였다. 그래서 다음과 같은 코드로 실행을 하였는데 오류가 나왔다. import {useEffect} from "react"; import {useRouter} from "next/router"; export default function App() { const router = useRouter(); useEffect(() => { console.log(JSON.parse(router.query.dict as string)); }, []); return ( {router.. 2022. 6. 28. [NestJS] must be a number conforming to the specified constraints - body dto 타입 에러 해결 [ 문제점 ] Nest Js에서 post나 put을 할 때 body에 데이터를 담아서 보낸다. 이때 dto로 검증을 하는데 id는 number을 받기 위해서 다음과 같은 dto를 만들었다. import { IsNumber, IsOptional, IsString } from 'class-validator'; export class UpdatePlanDto { @IsNumber() readonly id: number; @IsOptional() @IsString() readonly date: string; } 이렇게 만들고 요청을 보내니 다음과 같은 400오류가 뜨면서 작동하지 않았다. [ 해결 방법 ] 이러한 오류가 나온 이유는 message에도 설명해주지만 id의 type이 number가 아니라는 것이다... 2022. 6. 11. 성장하는 나. 그런데 고통을 곁들인 (database migration) 개발 이야기는 인스타 easy_develop에도 올라옵니다! DB migration 세팅 시작 DB 세팅으로 하루 반을 썼지만, 다시 migration 세팅으로 하루 반을 써버렸다. 이 시간 동안 분명히 성장했지만, 너무 큰 고통이 수반되었고 다음에는 이런 일을 겪지 않기 위해 기록한다. 이번에는 db migration 문제지만 작은 문제들이 엮여 있었다. ormconfig 연동, directory 이름, npm script 등 평소에는 잘 만지지도 않는 설정 파일들 이라서 문제라서 힘들고 많은 시간이 걸렸다. 이 과정에서 깨달은 빠르게 오류를 고치는 방법과 긴 시간이 걸린 근본적인 이유를 이야기해보려고 한다. 오류를 빠르게 해결하는 방법 당연하게 들리겠지만, 빠르게 오류를 고치는 방법은 오류 메시지를 .. 2022. 6. 11. 똑같은 실수를 하지 않기 위한 기록 개발 이야기는 인스타 easy_develop에도 올라옵니다! 지금까지의 백엔드 프로젝트 프로젝트 개수로 따지자면 fastapi, express, mongodb, postgres, MYSQL 등 많이 다루어 본 것 같지만 제대로 된 프로젝트는 없었다. 코드는 구조가 없이 엉망진창, db는 local과 production이 구분되지 않아서 엉망진창 등등…. 그래서 이번에는 nest로 파일구조를 강제하고 local, production도 구분 지어서 제대로 된 프로젝트를 시작하였다. 프로젝트의 시작 프로젝트의 첫 시작은 로컬 개발환경 세팅이다. 계획은 완벽했다. 로컬은 sqlite, production은 heroku의 postgres로 하고 환경변수를 설정해서 이를 구분 짓는다. 그러나 로컬환경인 sqlite.. 2022. 6. 11. [Flutter] Flutter로 개발하면서 느낀 점 개발 이야기는 인스타 easy_develop에도 올라옵니다. 플러터 프로젝트가 진행 중이라는 점 유의 플러터의 시작 처음 flutter 프로젝트를 만들고 기본 템플릿으로 실행시켰을 때의 느꼈던 감정을 잊지 못한다. “와…. 이 정도로 개발자 도구가 잘돼있다고?”라는 감탄이 나왔다. 중단된 프로젝트지만 React Native로 앱 개발을 해보았을 때는 디버깅하기 너무 힘들었다. 똑같은 React지만 웹에서 요소를 클릭하면 각종 정보를 볼 수 있는 개발자 창도 없어서 화면구성 하기 힘들었고, 웹 콘솔 창도 없다 보니 JSON 같은 데이터를 출력하면 검은 콘솔 창에 쭉 나왔다. 그러다가 React Native Dev Tool을 찾았지만, 실행시키면 앱의 속도가 10배 정도 느려졌다. 이렇게 정말 힘들게 개발하.. 2022. 6. 11. [NextJS] Next js를 배워보고 느낀 점 React에서는 routing을 하기 위해서는 react-rout-dom을 사용해서 path 별로 어떠한 컴포넌트가 보일 건지 설정을 해주어야 했다. 그리고 SSR을 설정하기 힘들어서 SEO면에서도 좋지 않았다. 솔직히 SEO같은 점들은 체감되지는 않았지만, Next js를 쓰게 되면 file 별로 자동으로 path가 만들어지고 SSR을 하기에도 매우 편하다고 해서 배워보았다. 노마드코더의 Next JS 무료 강의를 들었는데 계속 들으면서 느꼈던 것은 Next js에는 정말 엄청난 기능들이 많다는 것이었다. file 별로 URL path가 생성되는 것만 알고 있었는데, 그 속을 들여다보니 기본적인 SSR 기능으로 SEO를 할 수 있고, redirect와 rewrite 기능으로 URL masking을 할 .. 2022. 6. 11. 이전 1 2 3 4 5 6 7 8 다음 반응형
