개발 메모장 개발 메모장

분류 전체보기

• NextJS Image 태그 height auto로 사용하기

  Next.js 2022. 1. 11. 14:38

  이 글은 NextJS 12 버전을 기반으로 작성되었습니다. 2023.08.04 - [Next.js] - Next.js Image 태그 height auto로 사용하기 (update 13 version)업데이트 된 내용은 이 글에서 확인하시기 바랍니다. NextJS 10 버전이 나오며 가장 눈에 띄었던 것은 개인적으로 Image 태그였다. Vercel로 배포하게 되면 cdn역할까지 해주며 큰 사용성을 보여주는 역할을 했는데, 생각보다 많이 사용하지만 NextJS Image태그(이하 Image 태그)에서는 사용하기 어려운 것이 있다. Public 이미지의 경우 width, height를 사용하지 않아도 사이즈가 가변적으로 잘 들어가지만 실제 서비스를 할 경우 외부에서 이미지를 가지고 오는 경우가 더욱 많기에..

  Read More
• Redux Toolkit Dependency cycle Error

  Tip 2021. 12. 16. 19:09

  Redux Saga에서 Redux Toolkit(이하 RTK)으로 바꾸며 큰 만족을 했지만 cycle에러를 피하기 어렵다는 단점이 있다. 이런 것은 Duck's Pattern의 고질적인 문제이기도 한데, 내가 이 문제를 해결한 방법을 공유하려고 한다. 이 문제가 발생하는 경우에 대해 먼저 설명하자면. // aReducer ... const aSlice = createSlice({ name: 'aSlice', initialState, reducers: { testReducer(state, action){ // func contents } }, extraReducers: (builder) => builder .addCase() ... }) export { testReducer } = aSlice.action..

  Read More
• 폴더 별 다른 Github 계정 설정하기

  Git 2021. 12. 16. 18:24

  해당 글은 Mac OS를 기반으로 작성하였습니다. 먼저 폴더별로 다른 계정으로 설정하려면 gitconfig의 설정을 변경하여야 한다. git config --list --show-origin 대부분의 Mac의 경우 ~ 경로에 있다. 이제 해당 config를 수정하기 전에 설정하려는 계정만큼 파일을 만들어 준다. .gitconfig-personal vim ~/.gitconfig-personal [user] email = personal@personalMail.com name = personalGithubName .gitconfig-company vim ~/.gitconfig-company [user] email = company@companyMail.com name = companyGithubName 이제..

  Read More
• Git local Branch 모두 삭제하기

  Git 2021. 12. 14. 11:57

  // 모든 로컬 브런치 삭제 git branch | grep -v '^*' | xargs git branch -d // 모든 브런치 삭제 git branch | grep -v '^*' | xargs git branch -D 해당 작업을 할 때는 main(master) 브런치에서 작업하는 것을 추천합니다.

  Read More
• VSCode ESLint, Prettier 자동 수정 적용안될 때

  Tip 2021. 12. 8. 17:05

  vscode에 eslint와 prettier을 설정하는 방법에 대해서는 많은 글들이 있기에 세팅에 대해 아주 간략하게 설명한다. vscode의 확장을 눌러 eslint와 prettier을 설치한다. 그 뒤로 프로젝트마다 설정할 경우. eslintrc,. prettierrc 등을 이용해 수정해 사용하면 된다. 하지만 여기서 내가 안 된 상황은 2가지였다. prettier가 아예 작동을 하지 않는 경우 windows의 경우 ctrl + , / mac의 경우 cmd + , 버튼을 눌러 설정을 연다 검색창에 editor default formatter를 검색해 나온 항목을 Prettier로 변경해 주는 것으로 간단하게 해결되었다. Prettier의 동작은 잘되는데 eslint의 auto fix를 안 해주는 경우..

  Read More
• husky + lint-staged를 활용하여 git hook걸기

  Git 2021. 11. 10. 12:45

  이 글에서는 가장 많이 사용하는 git hook인 pre-commit을 기준으로 설명하겠다. 먼저 이 글을 작성하게 된 가장 큰 원인인 husky@4에서 사용하던 아래와 같은 방법을 사용할 수 없게 되면서 였다. // package.json { ... "husky": { "hooks": { "pre-commit": "lint-staged" } } } 일단 나와 같이 husky가 설치되어 있는 사람의 경우 아래를 실행하여 husky의 버전을 올리고 husky를 init 해준다. npm i -D husky@latest // husky@7.0.4 기준 npx husky install 처음 설치하는 사람의 경우 아래를 실행하여 간단하게 설치할 수 있다. npx husky-init && npm install 위의..

  Read More
• Expo xcrun exited with non-zero code: 2에러 해결하기

  Tip 2021. 10. 27. 19:32

  여러 글을 읽었지만 해결되지 않았는데 해결법이 너무 간단해 소개한다. 1. 가장 먼저 xcode를 종료한다. 2. 터미널을 열고 xcrun simctl list을 입력한다. 3. list중 실행하고 싶은 deviceId를 복사한다. 4. xcrun simctl boot 를 입력한다. 5. expo start --ios를 선택한 디바이스로 실행된다.

  Read More
• 효과적인 CSS애니메이션 활용

  CSS 2021. 10. 7. 11:23

  개발을 할 때 애니메이션은 필수적인 요소라 해도 과언이 아니다. 하지만 애니메이션을 잘못 사용한다면 애니메이션이 버벅거리는 느낌이 들거나, 사이트 자체가 느려 보이는 효과가 날 수 있다. 이는 애니메이션을 사용할 때 사용한 CSS 속성의 문제인데, 여기에서는 크게 Layout을 다시 그리는(Reflow)와 Paint를 다시 하는(Repaint) 그리고 이 둘 모두를 안 하는 속성이 있다. 우리는 당연히 최대한 다시 그리는 것이 적은 요소를 사용해야 하고, 웬만하면 Reflow와 Repaint를 모두 하지 않는 속성을 사용하는 것이 좋다. 그럼 거두절미하고 3가지 경우에 해당하는 속성들을 보여주겠다. Reflow가 일어나는 대표적인 속성 position width height left top right b..

  Read More