여러 형제 요소가 있을 때, 각 요소의 순서에 따라 다르게 스타일링을 먹이고 싶을 때가 있었습니다. 이럴 때 사용하면 좋은, 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..
Vue에서 페이지를 이동 시킬때, 정상적으로 기능은 작동하더라도, 위와 같은 에러가 발생하는 경우가 있어서, 어떻게 해결했는지 공유해보고자 합니다. 원인 vue-router github의 답변을 보면, router.push 함수는 Promise 객체를 리턴하므로, 만약 navigation failure에 대해 catch를 제대로 해주지 않는다면 위와 같은 에러가 발생한다는 것이다. (왜냐하면, promise rejection을 catch해주지 않았기 때문이다.) 하지만, 이런 navagation failure은 항상 일어나게 된다. 말이 조금 어려웠다. 예를 들어 설명해보자. 1. 나는 현재 A페이지에 있고, B페이지로 가는 버튼을 클릭했다고 해보자. (여기에서 B페이지로 이동하는 함수, goToB()를..