본문 바로가기

IT 개발85

[Next.js] css styling을 class로 하고 싶다면? module.css 사용하기! 클론코딩 강의를 참고하면서 나만의 개인 프로젝트를 실행시키고 있는 중이다아무래도 페이지, 컴포넌트, 스타일링이 거의 다르기 때문에 강의에서 설명해주지 않는 부분은 내가 직접 찾아야 하는데오늘 styled-component를 이용해서 styling을 어떻게 주는지에 대한 설명을 들었지만.. 만약 스타일링이 정의된 하나의 클래스를 만들어서 여러 요소에 적용시키고 싶으면 어떻게 하지?라는 의문이 생겼다우선, styles 폴더를 생성한다.그리고 styles폴더 안에 css파일들을 추가하면 된다   1. 모든 페이지에 공통으로 적용시키고 싶다면 global.css를 이용하자 폰트, body html * a 등.. 모든 페이지에 공통으로 적용되는 스타일링을 주고 싶다면?styles폴더 안의 global.css파일에.. 2021. 10. 13.
[Next.js] Styled-component에러 Warning: Prop className did not match Next 공부를 하는 도중 콘솔 창에 엄청 길게 Warning: Prop className did not match 관련 에러가 발생했다Next에서 styled-component를 사용하기 위해선 몇 가지 설정이 필요하다고 한다.첫 페이지 로딩 시에는 별 문제없지만 새로고침 이후에 발생한 문제였다이유인즉슨, Next.js의 경우 첫 페이지는 SSR, 그 이후에는 내부 라우팅을 통해 CSR을 하게 된다.이때 서버와 클라이언트에서 생성하는 해시값, 클래스명이 달라지면서 생기는 콘솔 창 에러였다 여러 글을 찾아보니 바벨 플러그인 설정으로 해결이 가능한 문제였다 npm i -D babel-plugin-styled-components  터미널에 바벨 플러그인을 설치 후, 프로젝트의 루트에 .babelrc 파일을 .. 2021. 10. 7.
gitignore 적용되지 않을 때 + rm명령어 옵션 next를 빌드할 때 .next 폴더가 생성되는데, 이를 그대로 github 원격 저장소에 올리기엔파일도 너무 많고, 이로인해 push 하면서 에러가 발생하는 케이스를 봤다 그래서 .gitignore 파일을 따로 생성 후, 파일 안에 .next를 추가했는데 계속 git 변경에 잡혔다 gitignore 적용이 되지 않는 이유는.gitignore 파일을 생성하기 전 이미 git에 .next를 올렸기 때문에 적용이 되지 않는 것이었다 이럴 경우, git rm -rf --cached .git add .git commit -m "커밋 메시지" 위의 명령어를 터미널에 순서대로 작성하면 정상적으로 gitignore이 작동한다.  git rm -rf --cached . 명령어를 터미널에 입력했을 때위와 같이 엄청나게 .. 2021. 10. 1.
프로젝트 코드 리팩토링 - 태그버튼 관련 js와 trim을 이용한 공백 제거 조 프로젝트의 매장관리 페이지에서 매장을 대표할 태그를 작성하는 기능이 존재한다. 오늘은 이 부분에 대한 html 마크업과 js 코드를 수정해봤다 기존의 html 마크업 기존의 js 코드이다. 여기서 코드의 의문점은 1. 왜 이 부분만 window.onload 가 들어가야 하는지 2. 밑에 이미 중복되는 코드 존재 이 부분이었다. 알고 보니 window.onload로 따로 코드를 작성해주지 않으면, 태그를 처음 작성할 때는 태그의 텍스트와 삭제할 수 있는 X 버튼이 한 묶음으로 나오지만, 새로고침을 하면 이 두 개가 정말 분리되어 버리는 문제가 발생한다는 점이었다. 기존 태그의 텍스트도 버튼 형식인데, 부트스트랩의 close 버튼을 가져와서 쓰려다 보니 이 또한 버튼 형식으로 작성했던 것이다. 그래서 c.. 2021. 9. 29.
프로젝트 코드 리팩토링 - js setTimeout 초 업데이트 최종 프로젝트가 끝난 지 벌써 이주가 되었다 3주라는 기간의 프로젝트를 진행하는 동안 분명 프로젝트의 완성도를 위해 급하게 넘긴 코드들이 있을 테고, 이 부분들을 찾아서 수정하고 싶어서 오랜만에 우리 프로젝트의 코드를 오픈했다 (!!) 내가 작성하지 않은, 다른 조원들의 코드를 읽는 게 쉽지는 않지만 적어도 한 번은 싹 다 흐름을 제대로 이해해야겠다는 생각이 들어 차근차근 코드의 흐름을 따라가다가 발견했던 setTimeout 함수 이 코드는 매장 주문 확인 페이지에서 가장 상단에 10초의 카운터가 흐르면서 새로고침 되는 코드이다 현재 countDown으로 중복되는 3가지의 함수가 있어서 이를 하나의 countDown으로 줄였더니 10초 후 -> 9초 후 까지 카운트가 표시되고 그 이후로 표시가 안되다가 .. 2021. 9. 27.
[github] fork 한 repository 잔디 안 심어질 때 + non-fast-forward 및 default branch 관련 에러 해결방법 조 프로젝트 이후에 우리 조의 프로젝트를 나의 깃 헙 저장소로 fork 해서 commit push 했더니..전에 PR 보내서 merge 했던 방법으로는 잔디가 심어졌는데 위의 커밋 푸시만 해서는 따로 생기지 않았다알고 보니 fork 한 repository에서의 commit은 잔디에 따로 적용되지 않는다고 한다.나의 커밋이 잔디밭에 적용되기 위해선,깃 헙 계정과 commit 이메일 계정이 동일 or commit이 나의 repository에서 이루어져야 한다 (fork 한 repository는 X) 구글에 fork해온 repositiory 잔디 심는 방법 검색하면 같은 방법들이 나와서 따라 했는데나는 commit push 하는 과정에서, 친구는 push --mirror 과정 에러 에러가 발생했다.혹여나 우리.. 2021. 9. 26.
반응형

티스토리툴바