모카의 촉촉한 개발 로그

페이지네이션[Pagination] 이란 ?많은 데이터를 부분적으로 나눠서 불러오는 기술.  특징- 쿼리에 해당되는 모든 데이터를 한번에 다 불러오지 않고 부분적으로 나눠서 불러온다 예) 한번에 20개씩- 쿠팡 같은 앱의 경우 수억개의 상품이 데이터베이스에 저장되어 있는데 사용자가 상품 검색화면을 들어갈 때 마다 모든 상품을 서버에서 클라이언트로 전송할 필요가 없다. (데이터 전송시 많은 양의 금액이 발생+ 메모리 터짐+ 시간이 오래걸림) 페이지 기반 페이지 네이션(간단)- 페이지 기준으로 데이터를 잘라서 요청- 요청을 보낼 때 원하는 데이터 갯수와 몇번째 페이지를 가져올지 명시- 페이지 숫자를 누르면 다음 페이지로 넘어가는 형태의 UI에서 사용- 페이지네이션 도중 데이터베이스에서 데이터가 추가되거나 삭제..

https://softmoca.tistory.com/294 세션, 쿠키, JWT 토큰 및 인증과 인가 개념 정리로그인기능을 구현한는 것도 어렵지만 무엇보다 로그인 상태를 '유지'하는거도 만만치 않게 어려운 일이다. 예로 들어 naver에 로그인을 했을 때 메일함을 들어가고 나올때, 보낸 메일함과 받은softmoca.tistory.com전반적인 세션과 jwt토큰에 대한 인증 인가 개념은 위 포스트에 정리하였다. 리프레쉬 토큰을 왜 사용하는가 ?가장 보편적으로 리프레쉬 토큰이 사용되는 이유는 아래와 같다.서비스에서 특정 권한이 있는 사용자만 보낼수 있는 api가 있다.예를 들면 게시글 삭제 혹은 사용자 정보 수정, 관리자 페이지 접속 등등 프론트엔드에서 사용자가 로그인을 하면 백엔드에서 엑세스 토큰과 리프레..

로그인기능을 구현한는 것도 어렵지만 무엇보다 로그인 상태를 '유지'하는거도 만만치 않게 어려운 일이다.예로 들어 naver에 로그인을 했을 때 메일함을 들어가고 나올때, 보낸 메일함과 받은 메일함을 들어갔다 나올때 마다로그인을 다시 하면 사용자들은 상당히 불편할 것이다.그래서 서버에서 현재 사용자가 로그인을 했는지 안했는지를 알수 있어야 로그인 상태가 유지가 된다.인증(Authentication). : 로그인==> 내가 이 사이트에 가입된 회원임을 즉, 특정 서비스에 일정 권한이 주어진 사용자임을 아이디랑 비밀번호를 통해서 인증을 받는것 인가(Authorization)==> 한번 인증을 받은 사용자가 이후 서비스의 여러기능을 사용할 때 매번 로그인 되어있음을 알아보고 허가 해주는것.예) sns에 한번 로..

Node.js란 ?Node.js is JavaScript runtime built on Chorme's V8 JavaScript engine.크롬의 V8자바스크립트 엔진이 내장된 자바스크립트 실행 환경. 즉, 자바스크립트를 사용할수 있는 실행 환경이다.  Node.js의 역사   1995Netscape 브라우저가 JavaScript를 소개했다. 2008Web 2.0 Google이 Chrome 브라우저를 발표했다.그리고 Chrome 브라우저는 JavaScript 엔진인 V8 엔진을 사용했다.새 브라우저 Chrome이 출시했을 때 V8엔진 덕분에 JavaScript가 정말 빠르고 성능 좋게 실행할 수 있었다. 2009Ryan Dahl이 Node.js를 만들었다. Node.js를 만드는 아이디어는 간단했다. ..

sudo git fetch —all // 원격 저장소에서 모든 변경 사항을 가져오기sudo git reset —hard origin/main //로컬 저장소의 HEAD를 원격 저장소의 main 브랜치로 재설정sudo git pull //원격 저장소의 변경 사항을 로컬 저장소로 가져오고 병합주로 다른 개발자가 main 브랜치에 변경 사항을 커밋하면 sudo git fetch --all을 사용하여 해당 변경 사항을 로컬 저장소로 가져온다.그런 다음 sudo git reset --hard origin/main을 사용하여 로컬 저장소의 HEAD를 원격 저장소의 main 브랜치로 재설정 한다.이렇게 하면 로컬 저장소의 변경 사항이 모두 삭제되고 원격 저장소의 main 브랜치의 변경 사항만 남게 된다. 마지..

프론트 개발을 하던 중 만들고 있는 웹사이트에서 외부 API에서 정보를 받아 오려고 할때 주로 발생한다. 즉, 한 사이트에서 주소가 다른 서버로 요청을 보낼 때 발생 Postman이나 다른 익스텐션 어플로 테스트를 하면 이상이 없지만 웹사이트(브라우저)에서의 요청에서는 CORS 에러가 나온다. 해당 하는 서버에서 요청을 막는 것이 아니라 브라우저(크롬) 쪽에서 연결을 막는 것이다. 주로 브라우저에서 접속하는 사이트 들은 당연하게도 되부 사이트여서 의심을 하는것이다. 즉, 브라우저는 사용자가 방문한 사이트에 대해 믿지 못해서 발생한다. 그럼 CORS가 있는 이유는 ? 주로 브라우저에서 사이트를 이용할 때 나의 브라우저의 쿠키로 사용자의 정보가 있다(토큰이나 세션 정보) 이러한 상황에서 악성사이트에 방문할..

깃헙에 있는 다른 프로젝트들과 오픈소스를 돌려 보던 와중  프로젝트 마다  node 버전이 달라 종속성이 꼬여 에러가 발생 하였다. 매번 참조 할 때마다 노드를 삭제 하였다가 해당 프로젝트의 node버전으로 다운을 받아도 되지만 그러면 시간이 오래 걸리고 매우 번거롭다. 이럴 경우 NVX라느 node.js 버전 관리 도구를 사용해서 빠르게 버전을 변경할 수 있다. + nvx의 경우 npm을 설치할 경우 자동으로 전역적으로 설치가 된다. 에러 코드> npm run start> dwitter-app@0.1.0 start> react-scripts startnode:internal/modules/cjs/loader:573 throw e; ^Error [ERR_PACKAGE_PATH_NOT_E..

access denied for user 'root'@'localhost' (using password: yes) 는 root계정의 비밀번호가 다를시 나오는 에러 이다.   비밀번호 초기화 방법1.C:\Program Files\MySQL\MySQL Server 8.0\bin // mysql.exe가 있는 폴더로 이동// 첫번째 CMD터미널 생성2.Window+r을 눌러 services.msc검색 후 서비스에 들어가서 mysql 을 종료3. C:\Temp 해당 경로에 mysql_init.txt 에 ALTER USER 'root'@'localhost' IDENTIFIED BY '0000'; 작성 4. 관리자 권한의 cmd를 키고서비스의 mysql을 더블클릭한 후 실행 파일 경로를 확인.끝에 서비스명은 복사하..

Next12페이지 단위로 렌더링 방식을 규정.getStaticProps(). SSG,ISR ==> 얼마나 자주 업데이트(할것인지)getServerSideProps()  Next13 페이지 단위가 아니라 컴포넌트 단위로 렌더링 방식을 규정한다.즉,  아래 사진과 같이 한 페이지 안에서 기능별로 클라이언트 컴포넌트와 서버 컴포넌트를 둘다 사용할 수 있다.(기본적으로 모두 서버컴포넌트이다) 서버 컴포넌트(서버에서 빌드가 될때 실행되는 컴포넌트)브라우저에서 제공하는 api 는 사용할 수 없고 node api를 사용해야 한다.useState같은 상태 관련 로직을 사용할 수 없다.   사용자의 상호작용이 필요한 부분만 컴포넌트로 만들고 그걸 모아서 하나의 서버 컴포넌트로 만드는 것이 중요한다.    서버 사이드 렌..

가상환경 : 프로젝트별로 패키지를 따로 관리 왜 사용하는가? 패키지 버전 호환성 이슈 를 예방하기 위해. Window상에서 가상환경을 설치하고 그 위에 다른 패키지를 사용해 보자 $ pip list 현재 깔려 있는 패키지를 볼 수 있다. $ python -m venv myenv 위 커맨드로 myenv라는 이름을 가진 가상환경을 설치 -m이라는 옵셥은 모듈이름을 뜻하며 venv라는 모듈 사용 우측 아래에 이런 팝업이 뜨는 데 우선 아니오를 선택한다. 그러면 이렇게 폴더가 생기며 그 밑에 다른 작은 폴더 도 생긴다. Scripts 디렉토리 내부의 activate.bat이라는 파일을 실행을 시켜야 한다. 하지만 명령어를 입력해도 실행이 되지 않는다. 그 이유는 powershell 터미널에서 명령어를 입력해야 ..