목록분류 전체보기 (123)
EtoC
처음 리엑트를 설치하면 리엑트는 기본적인 UI기능만을 제공한다. 그래서 개발환경을 구축하기(패키지 설치, 유지보수 등)에 어려움이있는데 이런 문제를 돕기위해 리엑트는 프로젝트를 시작하는데 필요한 개발환경을 세팅해주는 툴체인(toolchain)을 제공한다. 그게 Create-React-App(CRA)고 안의 명령어만으로 리엑트의 개발환경을 구축할 수 있다. Create-React-App 프로젝트이름 명령어를 입력하면 진행할것인지 물어보는데 y를 눌러 설치한다. 이떄 프로젝트 명에는 대문자나 ~,!,(),*,^등의 특수문자를 포함하면 에러가 발생한다. 프로젝트 명은 소문자나 kebaa-case를 사용하여야한다. 설치가 완료되면 터미널 아래에 happy Hacking이라는 문구가 뜬다. 이때 바로 npm st..
으.. 프론트엔드 과제를하면서 html이나 css는 검색해보면서 하니 금방 할 수 있었다. 하지만 html파일과 js파일을 어떻게 관계시켜야할지 감이 오지 않았다. HTML과 Javascript를 어떻게 연결할까? 1. HTML에서 Javascript로 연결 태그를 이용 js파일을 연결해서 이용 2. Javascript에서 HTML로 연결 DOM을 사용하여 javascript로 HTML에 접근하여 조작하기 자바스크립트에서 html(웹페이지)에 접근하기위해서는 DOM을 사용해야한다. DOM을 사용하여 요소를 생성하거나 내용추가,클래스부여,스타일수정등 여러 작업을 할 수 있다. 근데 DOM이 뭔데...? DOM DOM은 문서(Document) 객체(Object) 모델(Model)의 약자로, HTML 이나 X..
주소창으로 네이버를 접속하면 어떤 일이 일어나는지에대해 팀원분이 면접에서 질문을 받았다고 하셨다. 그래서 공부해 볼것을 추천하심 이 질문을 왜하나 했는데 브라우저의 동작원리를 물어보는 것이였다. Browser 처음 공부를 시작했을때는 브라우저가 인터넷이라고 생각했다. 브라우저는 우리가 인터넷에서 서칭할때 사용하는 프로그램으로 크롬,파이어폭스,사파리,엣지같은 소프트웨어를 말한다. 브라우저는 파일명 뒤에 .html이라는 확장자가 붙은 문서을 읽어 브라우저에 띄워준다. 주소창에 naver.com을 입력하면 브라우저 엔진이 입력된 텍스트가 검색어인지 url인지를 먼저 확인한다. 검색어라면 브라우저는 검색엔진의 url에 검색어를 포함한 주소로 페이지를 이동시킨다. url이라면 브라우저 엔진은 네트워크 스레드를 통..
계속 CS공부를 해야한다고 생각하고있었는데 윈도우 PC를 맞추려고 부품을 찾다보니 '지금이 써야할때!'라는 생각이들었다. 나의 기억은 라이젠 1코어 4쓰레드를 감탄하던 시절에 멈춰있었다는걸 깨달음. 가보자~ 컴퓨터의 구조 컴퓨터는 크게 4가지 기능으로 구성된다. 중앙처리장치: Central Processing Unit로 CPU를 말한다. 주기억장치: Main Memory로 RAM을 말한다. 보조기억장치: Secondary Storage로 HDD,SSD,USB 등이 있다. 입출력장치: Input/Output로 모니터, 마우스같은 입출력장치들을 말한다. 나는 기계를 사러가면 가장먼저 cpu를 본다. 몇core에 몇thread인지 확인해보는데 이 지표들은 cpu의 성능을 나타낸다. 1. CPU(Central ..
엑세스토큰과 리프레시 토큰을 공부하고 리프레시토큰을 사용한 로그인기능을 만들어보았다. 그런데 어떠한 에러메세지도 없고 포스트맨에서는 무한 로딩이떴다. 2일동안 리프레시토큰발급이안되었던 문제를 적어본다. 하나하나 다 콘솔을 찍어서 찾아보니 @Req @Res 를 지웠을때 로그인이 되는것을 확인하였다. 1번째 문제 import { Body, Controller, Post, Get, Res, Req, Request, Response, } from '@nestjs/common'; import { AuthService } from './auth.service'; import * as bcrypt from 'bcrypt'; import * as crypto from 'crypto'; import { AuthGuard..
아직도 난 허접이야.. 구글로그인 오류 딱 들어가자마 나온것이 승인 차단이었다. 흠..invalid_request, missing redirect_uri.. 공식문서에서 찾아봐도 저 에러메세지는 찾지못했다. 음...대체 왜 차단되는거지.. 비밀번호랑 ID랑 콜백주소까지 제대로 적어두었는데.. 일단 늦어서 기록만 해두자. 자고 일어나서 확인하니 너무 충격적이였다. 아래 코드에 원인이 있었다. import { PassportStrategy } from "@nestjs/passport"; import { Strategy } from "passport-google-oauth20"; export class JwtGoogleStrategy extends PassportStrategy(Strategy, "google..
서버를 켜니 아래와 같은 오류가 떴다. '분명 문자열로 리턴될텐데 왜 void 나 any를 하라고하지?' 생각하며 any로 바꿨다. 서버를 켜보니 오류는 사라졌는데 포스트맨으로 요청을 보내면 아무것도 반환되지않았다. 로그인 코드는 확실하게 작동하는것을 확인했으니 문제는 getAccessToken쪽인데 다시보니 return을 안썼었다.;;; 값이 리턴되는게 없으니 void를쓰라고 뜬거였고 string을 썼을때 에러가 났던것이였다. 아..이제 이런 실수는 하고싶지않은데 그래도 나중에 뭘 우선적으로 확인해야할지 더 빠르게 확인할수 있겠지? 이렇게 생각해본다. 이제 엑세스토큰 값 잘 받아온다.
코테스터디때 팀원들이 설명하면서 class,class하는데 나는 아직도 class가 뭔지 모른다. 딥다이브를 읽다보면 알겠지했는데 딥다이브에서 만나기전에 nestjs에서 만났다. 정확히 class가 뭘까? 1. Class class 객체 지향 프로그래밍에서 객체를 정의하기 위한 상태와 함수로 구성된, 객체를 생성하기위해 변수와 함수를 정의하는 틀이다. tree 라고도하는데 객체를 만들기위한 설명서라고 생각하면된다. class를 사용하여 새로운 객체(인스턴스)를 만들 수 있다. 클래스를 사용하는 이유는 동일한 종류의 객체를 여러개 만들어야하는경우, 같은 기능들을 하나로 묶어서 호풀하면 편하게 사용할수 있기 때문이다. class name{설명}의 설명대로 만들면 new name()의 새로운 인스턴스(객체) ..