모카의 촉촉한 개발 로그

프론트 개발을 하던 중 만들고 있는 웹사이트에서 외부 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 터미널에서 명령어를 입력해야 ..

API(Application Programming Interface) 응용 프로그램에서 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스 ex) 로그인 요청시 JWT토큰을 넘겨주는 API,새로고침 시 게시글의 정보를 넘겨주는 API 특징 1. 다른 프로그램과 연결 해주는 다리 역활을 한다. 2.구현이 아닌 제어를 담당한다. 3.API를 조합해 원하는 프로그램을 만들 수도 있다 라이브러리(Library) 응용 프로그램 개발을 위해 필요한 기능(함수)를 모아 놓은 소프트웨어 (간단히 말해 문 손잡이, 전화기, 지붕과 같은 집을 지을때 필요한 재료 정도로 생각하면 된다.) ex) passport. react, ... 특징 1. 개발하는 데 필요한 것들을 모아둔 일종의 저장소 2.필요..

우선 참빛 설계의 사회적 약자를 위한 '음성인식 키오스크'를 주제로 UMC2기 Node 서버 팀원들과 프로젝트를 하던 중 필요성을 느꼈다.그래서 Docker가 무엇인지 간단하게 알아 보자 ! 프론트와 백엔드에서 노드 서버 구축 후 ai 라이브러리들을 사용하여 자연어처리를 하기 위해  파이썬으로 flask 서버를 구축 하기로 했다. 파이썬을 사용하기 위해 셋업을 하던 중 결국 개발 환경 문제를 해결 하지 못하였다.파이썬 코드를 플라스크 서버에서 사용하기 위해  파이썬 가상환경 세팅을 통일을 하는 부분에서 문제를 직면하였다. 아나콘다로 배포할 경우 mac사용자가 제작한 환경을 윈도우 사용자에게 공유할 수 없었다.또한 같은 mac 유저 끼리도 pip 버전이 차이가 나면 pip명령어로 설치한 konly, Mec..

보통 리액트에서는 데이터를 가져올 때 useEffect안에서 가져온다.하지만 Nextjs에서는 다양한 방식이 있다.(useEffect도 가지고 올수 있다.) getStaticProps(ISR)Static Generation으로 빌드(build)할 때 데이터를 불러온다(미리 한번에 만들어줌) getStaticPaths(SSG)Static Generation으로 데이터에 기반하여pre-render시 특정한 동적 라우팅 구현(pages/post/[id].js)  getServerSideProps(SSR)Server Side Rendering으로 요청이 있을 때 데이터를 불러 온다.(계속)  getStaticProps- getStaticProps 함수를 async로 export 하면, 리턴되는 props를 가지..

React의 SSR(server side rendering)을 쉽게 구현할 수 있게 도와 주는 간단한 프레임워크이다.리액트로 개발할 때 SPA(single Page Application)을 이용하며 CSR(Client side Rendering)을 하기 때문에좋은 점도 있지만 단점도 있는데 그 부분이 바로 검색엔진 최적화(SEO)이다.CSR을 하면 첫페이지에서 빈 html을 가져와서 JS파일을 해석하여 화면을 구성하기 때문에 포털 검색에 거의 노출 될 일이 없다.하지만 Next.is에서는 Pre-Rendering을 통해서 페이지를 미리 렌더링 하며 완성된 HTML을 가져오기 때문에사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있게 된다.리액트에서도 SSR을 지원하지만 구현하기에 굉장히..