전체보기

원의 내각이 주어졌을 때, 원의 좌표(x, y)를 구하는 방법에 대해 정리해보고자 합니다. 구하는 방법은 매우 간단합니다. 반지름(r)이 1인 원이 있다고 가정 해봅시다. 그러면, 위 그림에서 볼 수 있듯이 내각(θ)를 가지는 x, y의 좌표는 (cosθ, sinθ)가 되게 됩니다. 즉, θ 각도를 가지고 있는 x좌표는 cosθ, y좌표는 sinθ를 이용하면 된다는 것 입니다. 그럼, 이제 어떻게 JS를 이용하여 좌표를 구할 수 있는지 코드로 알아보도록 합시다. 구현 코드 JavaScript에서는 sin과 cos을 구하는 메소드를 Math함수를 이용하여 제공( 참고링크 )하고 있습니다. const cos = Math.cos(0); const sin = Math.sin(1); 이때 주의 할 점은, 인자를 ..

여러 형제 요소가 있을 때, 각 요소의 순서에 따라 다르게 스타일링을 먹이고 싶을 때가 있었습니다. 이럴 때 사용하면 좋은, SCSS에서 제공하는 함수에 대해 간단히 정리해보고자 합니다. 먼저 HTML 코드는 아래와 같습니다.(NextJS 프레임워크를 사용했습니다.) wrapper 안에 총 3개의 div 요소가 존재하게 됩니다. const Home: NextPage = () => { const aniArray: number[] = [1, 2, 3] return ( {aniArray.map((el) => { return })} ) } 이제 어떻게 함수를 선언하고, 이 함수를 어떻게 실행 시키는지 알아봅시다. 먼저 @를 이용해서 함수를 선언합니다. 아래 코드에서 $ 표시는 SCSS에서 변수를 선언할 때 사용..

React나 NextJS를 사용하시는 분들이라면, useEffect를 사용할 때 dependency를 [] 빈배열로 넣어주게 되면, 해당 useEffect는 처음 렌더될 때 한번만 실행 되게 된다는 것을 알 것입니다. 근데, 이상하게 useEffect안의 함수가 2번 실행되는 것을 보고 해결해보고자 합니다. 사실, 이 문제는 React를 사용할 때 이미 겪어본 문제였습니다. React에서는 App 컴포넌트를 감싸고 있는 React.StrictMode 태그를 제거 해주면 됐지만, NextJS의 app.tsx의 경우에는 strictMode 태그가 안보였습니다. 하지만 결국 strictMode를 풀면 해결되는 문제였기에, next.config.js 파일에서 strict 모드를 false로 주고 재 실행 하니 ..

이 글은 docker container를 띄운 상태에서 local에 있는 db와 접속하는 방법에 대한 글입니다. [ 해결 전 상태 ] NestJS로 서버를 도커 컨테이너에 띄웠는데, 이걸 내 local 컴퓨터 안에 있는 DB에 접속하기 위해 아래처럼 작성 하니, 계속 에러가 발생했습니다. export const databaseProviders = [ { provide: 'DATA_SOURCE', useFactory: async () => { const dataSource = new DataSource({ type: 'mysql', host: 'localhost', port: Number(process.env.DB__PORT), username: process.env.DB__USER__NAME, passw..

for문을 돌렸을 때와 map을 이용했을 때 성능차이를 측정하기 위해, 아래처럼 코드를 짰지만 에러가 발생하는 것을 볼 수 있었다. JS에서는 이렇게 날짜간에 차이를 - 를 이용해 연산이 가능하지만, TS에서는 에러를 표출한다. 이럴 때에는 getTime 메소드를 이용해주면 된다. 바로 예시를 통해 알아보자. 참고로, 결과는 ms 단위로 나오게 된다. 결론적으로 저 방식은 3초가 넘게 걸린다는 것... 개선하러 가야겠다

아래처럼 js-cookie를 이용하여, 존재하는 쿠키들을 다 받아와 모두 삭제시키는 removeCookies라는 함수를 만들었다. 그런데 이상하게 쿠키 하나가 삭제가 안되는 문제가 있었다. import Cookies from 'js-cookie' export const removeCookies = () => { const cookies = Cookies.get() for (let cookie in cookies) { Cookies.remove(cookie) } } js-cookie Readme에 아래처럼 나와있었다. js-cookie A simple, lightweight JavaScript API for handling cookies. Latest version: 3.0.1, last published..