SimCoding

[VSC] *.ts,* .tsx 파일에서 prettier가 작동하지 않을 때 해결방법 vsc의 setting.json을 수정하면 됩니다. "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }

[ Apollo] apolloClient nextjs 환경에서 network-only 가 작동하지 않는 현상 해결 apolloClient - nextjs 환경에서 network-only가 작동하지 않는 버그가 있는 것 같습니다. 이로인해 첫 request 이후, 캐쉬가 생기면 더 이상 request를 보내지 않게 되어 불편함이 발생합니다. 이를 해결하기 위한 방법을 알아보겠습니다. > 서버사이드 환경과 클라이언트사이드 환경을 구분해 fetchPolicy를 설정합니다. 서버사이드 환경에서는 'network-only' 가 작동하지 않기 때문에 , 서버사이드 환경에서는 'no-cache' 를 적용하고 클라이언트사이드 환경에서는 'network-only'를 적용해 줍니다. fetchPolicy: typeof w..

'!.' 연산자 - Non-null assertion operator "!." 연산자는 피연산자가 null, undefined가 아니라고 단언 해주는 문법입니다. 타입스크립트의 문법에러를 해결하기 위해 주로 사용됩니다. 하지만, 타입단언은 타입에 강제성을 부여하는 만큼 위험 부담이 있습니다. 실제로 eslint에서는 Non-null assertion을 사용할 경우 the strict null-checking mode의 이점을 활용할수 없기 때문에, 사용을 권장하지 않습니다. // 사용예시 const a = {b : 1} a!.b

[Jest] mocking을 위한 jest.spyOn, mockImplementation 에 대해 알아보기 1. spyOn - spyOn은 메소드를 가로채서 모킹할 수 있도록 도와준다. 2. mockImplementation - mockImplementation은 기본적으로 아무런 동작도 하지 않으며, 인자로 콜백함수를 넣어주면 콜백함수가 작동한다. 즉, mocking된 함수를 원하는대로 조작할 수 있게 해준다. @예시코드 // spyOn -> service.sendEmail() 메소드를 mocking 한다. // mockImplementation -> mocking된 함수를 아무런 동작도 하지 않게 해준다. jest.spyOn(service, 'sendEmail').mockImplementation(a..

[Nextjs] nextjs middleware활용해서 redirect구현하기 안녕하세요. 이번 포스팅에서는 nextjs 에서 middleware를 활용해서 redirect를 구현하는 방법에 대해 알아보겠습니다. middleware에 작성된 코드는, request가 완료되기 전에 작동합니다. 이를 활용해, response를 중간에 가로채 수정할 수 있습니다. response를 중간에 가로채서 url을 변경해주면 redirect기능을 구현할 수 있겠죠? 자주 사용되는 예시를 통해, redirect 기능을 구현하는 방법에 대해 알아보겠습니다. 아래 예시코드는 로그인이 되어있지 않은 유저가 페이지에 접근하려고 할 때, root페이지로 redirect를 시키는 코드입니다. // middleware.ts impo..

[Nextjs] userAgent 에서, 브라우저 환경 구분하는 방법 이번 포스팅에서는 userAgent에서 브라우저 환경을 구분하는 방법에 대해 알아보겠습니다. 안드로이드, 아이폰, 오페라 , 윈도우 등 다양한 브라우저 환경이 존재하는데 브라우저에 환경에 따라 다른 코드를 적용해 주어야 할 때가 있습니다. 브라우저 환경은, request-header에 담겨있는 userAgent를 통해 확인할 수 있고, 이를 정규표현식을 통해 원하는 환경별로 구분해서 사용할 수 있습니다. 아래 예시코드를 통해 확인해 보겠습니다 ! const userAgent = typeof navigator === 'undefined' ? 'SSR' : navigator.userAgent; const isAndroid = Boolean..

[JS] Javascript padStart , padEnd 사용해서 빈자릿수 채우기. 안녕하세요. 이번 포스팅에서는 padStart(), padEnd() 를 사용해서, 빈자릿수를 원하는 문자열로 채워주는 방법을 알아보겠습니다. padStart() let num = 12; num = String(num).padStart(4,'0') // 문자열 앞에 '0'을 채워 4자리수를 만들어준다. console.log(num) // 0012 padEnd() let num = 12; num = String(num).padEnd(4,'0') // 문자열 뒤에 '0'을 채워 4자리수를 만들어준다. console.log(num) // 1200

[CSS] div태그 white-space로 줄바꿈 처리하기. 안녕하세요. 이번 포스팅에서는 white-space를 이용해 div에서 줄바꿈 처리하는 방법에 대해 알아보겠습니다. white-space에 사용할 수 있는 값은 다음과 같습니다. normal : HTML의 기본 값이다. 여러개의 공백은 하나로 표시되고, \n은 무시되며 긴 행은 필요시에 Wrap 된다. nowrap : normal과 같은데, 긴행이 wrap되지 않는다. 글을 포함한 컨테이너를 넘어서 표시된다. pre : 여러개의 공백과 개행문자가 모두 표현된다. 긴행은 개행문자에서만 개항이 되고, wrap되지 않는다. pre-line : 여러개의 공백은 하나로 표시되고, 긴 행은 필요시 wrap된다. 개행 문자를 만나도 개행된다. pre-wr..