본문 바로가기

모카 스터디

ReactJS로 영화 웹 서비스 만들기 #2 THE BASICS OF REACT React Js는 UI를 interactive하게 만들어 준다. 우선 바닐라js로 간단한 어플리케이션을 만들어 보려한다. 첫번쨰로 html를 만들고 두번쨰로 js에서 button을 가져왔다. 세번쨰로 button.addEventListener로 두고 click event를 감지하게 하였다. 그리고 click에 대응하는 함수를 만들어 줬다. 왼쪽은 clickㄹ르 해도 콘솔에 직접 counter 변수를 확인하지 않으면 수가 증가되는 것을 알수가 없지만 오른쪽은 span을 가져와서 연결하면 htlm에서도 바로 변경된것을 확인할 수 있다. 종합적으로 1.html을 만들기 2.js에서 가져와서 3.event를 감지 4.데이터를 업데이트 한다.(counter=counter+.. 더보기
노마드 nestjs API만들기 nestjs는 nodejs의 프레임 워크이면서 모든 nodejs어플리케이션의 초석이 되는 express의 프레임워크이기도 하다. nestjs는 다른 nodejs의 프레임워크에는 없는 구조를 가지고 있는 장점이 있다. nodejs의 장점이다 단점은 하고싶은대로 아무것나 할수 있는것이다. 하지만 nest에는 구조와 순서 룰이 있어서 그 룰을 따르기만하면 큰규모의 백엔드를 쉽게 만들 수 있다. nestjs는 기업에 큰 중점으 두는데 그 이유는 아주 좋은 아키텍처와 구조를 가지고 있고 테스트 하는 방법 또한 잘 구성되어 있다. 우선 npm i -g @nestjs/cli ==>cli는 미리 세팅된 여러 기능들을 가진 새 프로젝트 생성하게 해준다 난 이미 설치 되있으므로 nest -v 로 설치된 버전을 확인해 보고.. 더보기
NestJS 로그인 JWT발급과 인증 +ndoe쿠키 세션 [John ahn] Header와 payload와 비밀텍스트를 합쳐서 verify Signature을 생성한다. 왼쪽 네모는(payload부분)+ 비밀 텍스트를 합쳐서 토큰을 만든다. 우선 위에 표는 보류 passport 여기까지 이미 클라는 토큰을 가지고 있다. validate에서 반환해준user의 값이 req에 들어가게 된다. node의 쿠키 세션 방식 더보기
개발자라면 알아야 할 Shell 명령어 (Power Shell) 1. pwd (Print Working Directory) 지금 자신이 어떤 경로에 있는지 알 수 있다. 2. ls 자세히 (List) 현재 디렉토리에 있는 폴더와 파일들을 확인 할 수있다. ls -name 이름만 보고싶을때 ls -force 숨겨진 파일까지 확인 파일 열기 explorer (파일명 3. cd (이동경로) 디렉토리로 이동 cd .. 상위 디렉토리로 이동 cd ~ 최상위 디렉토리로 이동 ex) C:\Users\acyc0 4. get-childitem -File -Filter "*.txt" -Recurse .txt인 모든 파일 찾기 5. gcm (node) (get-command) node의 디렉토리 위치를 알수 있다. 6(리눅스). touch 파일생성 // 없으면 파일을 생성하고, 있으면 .. 더보기
VSCode 필수 익스텐션 1. Material Theme -여러 코드 색상 테마를 설정하여 더욱 코드의 가독성을 높일 수 있다. 2.Material icon Theme - 아이콘들이 더 생동감 있게 설정 가능 3.Prettier -Code formatter -기본적인 띄어쓰기 줄맞춤 등등 더러운 코드를 깔끔 하게 해준다. 4.Indent Rainbow - 줄마다 들여쓰기가 다른경우 색감을 넣어주어 가독성을 높인다. 5.Auto rename tag - 특히 HTML 언어 사용 시 앞에 태그를 수정하면 뒤의 태그또한 자동으로 수정이 된다. 6. CSS Peek - Ctrl를 누른채로 해당 big이라는 클래스를 누르면 정의된 css파일로 이동할 수 있다. 7.Live Server -일일이 새로고침(F5)을 하지 않아도 저장만해도 자동.. 더보기
아나콘다 및 주피터 설치 및 마크다운 사용법 아나콘다 : 수학이나 과학 관련 패키지들을 포함하고 있는 파이썬 배포판이다. 현실에서의 모델하우스와 비슷하다. 특히 데이터 사이언스나 머신러닝관련 패키지들이 이미 아나콘다에 포함되어있다. 주피터 노트북은 아나콘다 배포한에 포함되어 나온다. 아나 콘다 내부에 pandas,tensorFlow,pytorch등등 도 있다. 주피터 노트북이란 웹브라우저 상에서 개발을 할 수 있는 도구이며, 코드를 Cell 단위로 묶어서 실행하고 그래프나 표, 그리고 이미지나 영상 등을 쉽게 볼 수 있어서 특히 데이터 관련 작업을 할 때 많이 활용된다. 가급적이면 크롬에서 사용하기를 권장 권장 주피터 노트북을 실행을 시키면 이런 창이 뜨고 그 이후에 새로운 브라우저가 뜬다. 파란색은 명령 모드 (Esc누르면 됨) 초록색은 편집 모.. 더보기
파이썬 가상환경 개념 가상환경:프로젝트별로 패키지를 따로 관리 왜? 패키지 버전 호환성 문제 때문 Window상에서 가상환경을 설치하고 그 위에 다른 패키지를 사용해 보자 pip list를 입력하면 현재 깔려 있는 패키지를 볼 수 있다. $ python -m venv myenv 이 커맨드로 myenv라는 이름을 가진 가상환경을 설치 -m이라는 옵셥은 모듈이름을 뜻하며 venv라는 모듈 사용 우측 아래에 이런 팝업이 뜨는 데 우선 아니오를 선택한다. 그러면 이렇게 폴더가 생기며 그 밑에 다른 작은 폴더 도 생긴다. Scripts라는 폴더 안에 activate.bat이라는 파일을 실행을 시켜야 한다. 하지만 명령어를 쳐더 실행이 되지 않는다,. 흠 결국 그 이유는 powershell 터미널에서 커맨드를 실행 했어야 했는데 나는 .. 더보기
Window 단축기 모음 #Window Win + Shift + s : 캡쳐 Win + 방향키 : 화면분할 Win + E : 파일탐색기 해당 창만 보기 : 탭을 잡고 흔들기 다시 이전 창들 보기: 탭을 잡고 씨게 흔들기 or 잡은상태로 오른쪽 마우스랑 같이 흔들기 Ctrl + tab : 다음 브라우저 Ctrl + Shift + tab : Ctrl + w : 탭 삭제 #크롬 브라우저 ㄱ ctrl + r : 새로고침 ctrl + shirft + j : 개발자도구 #개발자 도구 element에서 esc 누르면 콘솔창이 나온다 #터미널 위쪽 방향 키보드 누르면 전에 작성했던 커맨드들이 나온다. #VSCODE ctrl + z : 뒤로가기 ctrl + shirft + z : 다시 앞으로 Alt를 사용하여 여러 곳 마우스 커서 !만 쳐도 H.. 더보기

티스토리툴바