letsgojieun

클론코딩 강의를 참고하면서 나만의 개인 프로젝트를 실행시키고 있는 중이다아무래도 페이지, 컴포넌트, 스타일링이 거의 다르기 때문에 강의에서 설명해주지 않는 부분은 내가 직접 찾아야 하는데오늘 styled-component를 이용해서 styling을 어떻게 주는지에 대한 설명을 들었지만.. 만약 스타일링이 정의된 하나의 클래스를 만들어서 여러 요소에 적용시키고 싶으면 어떻게 하지?라는 의문이 생겼다우선, styles 폴더를 생성한다.그리고 styles폴더 안에 css파일들을 추가하면 된다   1. 모든 페이지에 공통으로 적용시키고 싶다면 global.css를 이용하자 폰트, body html * a 등.. 모든 페이지에 공통으로 적용되는 스타일링을 주고 싶다면?styles폴더 안의 global.css파일에..

Next 공부를 하는 도중 콘솔 창에 엄청 길게 Warning: Prop className did not match 관련 에러가 발생했다Next에서 styled-component를 사용하기 위해선 몇 가지 설정이 필요하다고 한다.첫 페이지 로딩 시에는 별 문제없지만 새로고침 이후에 발생한 문제였다이유인즉슨, Next.js의 경우 첫 페이지는 SSR, 그 이후에는 내부 라우팅을 통해 CSR을 하게 된다.이때 서버와 클라이언트에서 생성하는 해시값, 클래스명이 달라지면서 생기는 콘솔 창 에러였다 여러 글을 찾아보니 바벨 플러그인 설정으로 해결이 가능한 문제였다 npm i -D babel-plugin-styled-components  터미널에 바벨 플러그인을 설치 후, 프로젝트의 루트에 .babelrc 파일을 ..

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 . 명령어를 터미널에 입력했을 때위와 같이 엄청나게 ..

조 프로젝트의 매장관리 페이지에서 매장을 대표할 태그를 작성하는 기능이 존재한다. 오늘은 이 부분에 대한 html 마크업과 js 코드를 수정해봤다 기존의 html 마크업 기존의 js 코드이다. 여기서 코드의 의문점은 1. 왜 이 부분만 window.onload 가 들어가야 하는지 2. 밑에 이미 중복되는 코드 존재 이 부분이었다. 알고 보니 window.onload로 따로 코드를 작성해주지 않으면, 태그를 처음 작성할 때는 태그의 텍스트와 삭제할 수 있는 X 버튼이 한 묶음으로 나오지만, 새로고침을 하면 이 두 개가 정말 분리되어 버리는 문제가 발생한다는 점이었다. 기존 태그의 텍스트도 버튼 형식인데, 부트스트랩의 close 버튼을 가져와서 쓰려다 보니 이 또한 버튼 형식으로 작성했던 것이다. 그래서 c..

최종 프로젝트가 끝난 지 벌써 이주가 되었다 3주라는 기간의 프로젝트를 진행하는 동안 분명 프로젝트의 완성도를 위해 급하게 넘긴 코드들이 있을 테고, 이 부분들을 찾아서 수정하고 싶어서 오랜만에 우리 프로젝트의 코드를 오픈했다 (!!) 내가 작성하지 않은, 다른 조원들의 코드를 읽는 게 쉽지는 않지만 적어도 한 번은 싹 다 흐름을 제대로 이해해야겠다는 생각이 들어 차근차근 코드의 흐름을 따라가다가 발견했던 setTimeout 함수 이 코드는 매장 주문 확인 페이지에서 가장 상단에 10초의 카운터가 흐르면서 새로고침 되는 코드이다 현재 countDown으로 중복되는 3가지의 함수가 있어서 이를 하나의 countDown으로 줄였더니 10초 후 -> 9초 후 까지 카운트가 표시되고 그 이후로 표시가 안되다가 ..

조 프로젝트 이후에 우리 조의 프로젝트를 나의 깃 헙 저장소로 fork 해서 commit push 했더니..전에 PR 보내서 merge 했던 방법으로는 잔디가 심어졌는데 위의 커밋 푸시만 해서는 따로 생기지 않았다알고 보니 fork 한 repository에서의 commit은 잔디에 따로 적용되지 않는다고 한다.나의 커밋이 잔디밭에 적용되기 위해선,깃 헙 계정과 commit 이메일 계정이 동일 or commit이 나의 repository에서 이루어져야 한다 (fork 한 repository는 X) 구글에 fork해온 repositiory 잔디 심는 방법 검색하면 같은 방법들이 나와서 따라 했는데나는 commit push 하는 과정에서, 친구는 push --mirror 과정 에러 에러가 발생했다.혹여나 우리..

1. basic basic 타입은 number, string, boolean, undefined, null, any, unknown, never, void, object 이 존재한다. 보통 변수를 선언할 경우 const name:string = '이름'; const num:number = 4; 이렇게 변수명:type 형식으로 작성이 가능하다 만약 변수에 하나의 타입이 아닌 다른 타입도 함께 받고 싶다면, let name: string | undefined; 로 작성이 가능하다. 여기서 | 는 or을 의미한다 void는 생략이 가능하며 any, unknown은 어떤 타입이든 다 담을 수 있지만 이러한 이유로 사용을 권장하지 않는 편이다 never은 함수에서 절대 리턴되지 않는 (ex. 에러를 던지거나 wh..

인터랙티브 디벨로퍼님의 유튜브 강의를 보다가 발견 한 댓글. 별 의심 없이 보고 있었다가 댓글을 보고 코드를 다시 봤다 if의 this.point.unshift는 배열의 앞에 새로운 값을 차곡차곡 넣어주고 else if의 this.point.splice는 배열에서 값을 잘라내주는데, 밑의 글을 참고하면 splice(-1)이므로, start값이 음수라 배열의 끝에서부터 요소를 세면서 deleteCount는 따로 존재하지 않기 때문에 (생략) start부터의 모든 요소를 제거한다 하지만 위에서 if를 충족하면 else if 조건문으로 넘어가지 않기 때문에 if의 코드 블록인 unshift만 계속 실행되어 배열 앞의 길이가 계속 추가만 되는 것 (=배열의 길이가 계속 길어짐) 그리고 if문을 충족하였으므로 위..

slice는 이미 존재하는 배열을 똑같이 복제하기도 하고, 존재하는 배열에서 원하는 인덱스만큼 따로 추출해서 새로운 배열로 만들어준다 splice와 slice는 언뜻 비슷해 보이지만 이 둘의 가장 큰 차이점은 splice() 메서드는 기존에 존재하는 배열의 요소를 수정 및 삭제 추가를 하면 원본 배열 자체를 수정하게 되는 것이며 slice() 메서드는 수정 및 삭제를 해도 원본 배열이 아닌 복사본을 만들어서 새로운 배열 객체로 반환해준다. 그래서 위에서 기존 배열에서 순서를 바꾸지만 원본 배열 자체에 영향을 주고 싶지 않다면 array 다음에 slice로 복제본을 하나 생성 후, 이 복제본에 sort 메서드를 통해 새롭게 정렬해주면 된다 * a-b는 오름차순 / b-a는 내림차순 숫자는 위처럼 a-b로 ..

요즘 제로초님의 자바스크립트와 리액트 강의를 번갈아 듣고 있는데, array.fill.map 함수에서 정확히 fill의 쓰임을 본 적이 없어서 찾아보다가 전체적으로 함수의 흐름을 정리해보면 좋겠다는 생각이 들었다. Array(45)를 콘솔 창에 쳐보면 텅텅 빈 45개의 배열이 생성된다. 여기서 배열의 모든 공간에 숫자 1을 넣고 싶다면, Array(45). fill(1)이라고 작성하면 된다. 그럼 위에 콘솔 창에 찍혀있는 것처럼 배열에 1이 45개가 들어간다. fill() 메서드는 arr.fill(value [, start [, end]]) 의 구문으로, value : 배열을 채울 값 start : 시작 인덱스 end : 끝 인덱스 ( end가 3이면, 3은 포함되지 않는다 ) 로 작성이 가능하다. 만약..