준텁

버튼(또는 박스)를 누르면 프레스 효과를 줄것이다. 1. InkWell위젯을 사용할 것. 2. onTap 핸들러를 설정하여, 기능은 그대로 유지할 것. Positioned( left: 38, top: 231, child: InkWell( onTap: () {}, borderRadius: BorderRadius.circular(10), splashColor: Colors.white.withOpacity(0.5), highlightColor: Colors.white.withOpacity(0.1), ) ) # 위 코드가 에러가 난다? Material위젯을 추가하여, InkWell 위젯을 자식위젯으로 넣어준다. Positioned( left: 38, top: 231, child: Material( color: ..

JWT 토큰 검증. 1. 프론트엔드에서 인증이 필요한 API를 사용할 때, 웹은 쿠키에서 Access Token을 가져와서 헤더의 Authorization에 넣어서 요청을 보낸다. 2. 백엔드 Guard는 Access Token을 JWT Secret으로 유효한지 검증한다. (nestjs, Auth Guard에서 검증, ExpressJS는 미들웨어에서 검증) 3. 유효한 경우 API를 실행한다. 4. 유효하지 않은 경우 401 인증 실패 에러를 전달한다.

JWT 토큰 생성 개념. 1. 프론트엔드에서 아이디, 패스워드를 로그인 API요청과 같이 보낸다. 2. 백엔드에서 JWT Secret, 회원 아이디, 토큰 만료시간으로 Access Token을 생성해서 프론트엔드에 응답한다. 3. 프론트엔드에서는 웹(chrome), 앱 프레임워크에서는 secure storage에 Access Token을 저장한다.

인터셉터(Interceptor) - 정식명칭은 Handler Interceptor이다. - 특정 URL로 요청시 Controller로 가는 요청을 가로채는 역할. 스프링에서 관리되기 때문에 스프링내의 모든 객체에서 접근 가능 주로 '로그인 처리'에 이용 만약 인터셉터를 이용하지 않고, 로그인 처리를 한다면? 게시물 작성, 게시물 수정, 게시물 삭제 등 모든 요청마다 controller에서 session을 통해 로그인 정보가 남아있는지를 확인하는 코드를 중복해서 입력해야함. 인터셉터를 이용하면 abc작업(abc경로로 요청)을 할 경우에는 interceptor를 먼저 수행하여 session에서 로그인 정보가 있는지 확인해 주는 역할을 한다. 결론적으로 인터셉터를 사용하면, 중복 코드가 확 줄어든다. 추가 설..

사용 환경 - vscode - NestJS - My SQL * 오류 상황 vscode에서 NestJS-> TypeORM으로 데이터를 컨트롤하기 위한 빌드 작업중. 다음의 에러코드를 만남 * 에러 코드 : Access denied for user 'root'@'localhost' (using password: YES) * 해결 방법 : MySQL 비밀번호가 틀렸을때 발생하는 오류. 비밀번호 변경할 것 1. app.module 에서 password 변경하기 - local에 설치된 MySQL이라면, app.module.ts에서 TypeOrmModule에서 설정한 password를 확인한다. - password가 로컬MySQL의 비밀번호와 동일한지 확인해보자. - 다르다면 변경할것. 2. port번호 재 확인하..

VScode extension 으로 MySQL DB 연동 visual studio code 에서 MySql DB 를 연결해서 사용해보자 1. extension tab을 열어 MySQL을 install 한다. 2. 설치 후 왼쪽 메뉴바에서 mySQL 아이콘을 클릭하면, 아래의 화면이 나오는 것을 확인한다. 상단의 [+] 버튼을 누른 후 빨간박스 안의 정보 입력하기. [connect] 버튼을 누르면 DB가 연동된다. 3. 그럼 DB 가 임포트 되고 원하는 테이블 정보를 볼 수 있다.

NEST JS를 설치하고 실행하기 - 작업 환경 * visual studion code 에디터 * nodejs 설치 NestJS프로젝트를 위한 인터페이스 설치하기 NestJS cli 설치 코드 npm i -g@nestjs/cli 설치 완료 후, cli를 이용해 프로젝트 만들기 nest new project-name - 프로젝트 실행 npm start - 브라우저에 url입력후 테스트 확인 http://localhost:3000

디자인 패턴(Design Pattern) 소프트웨어 설계시 자주 발생하는 문제들을 해결하기 위한 해결책이다. 소프트 웨어 개발 과정에서 발견된 설계의 노하우를 축적하여 그 방법에 이름을 붙여서 이후에 재사용하기 좋은 형태로 특정 규약을 만들어서 정리한, "효율적인 코드를 만들기 위한 방법론"이다. Pattern(패턴) 패턴이란 단어는 어플리케이션 개발에서 발생하는 유사한 문제들을 동일한 해결책으로 적용할 수 있는 의미이다. 그러나 디자인 패턴이 모든 문제의 정답은 아니며, 상황에 맞는 최적 패턴을 결정해서 사용해야한다. GoF(디자인 패턴) Gand of Four 디자인 패턴을 구체화하여 정리한 대표적인 분류 방식이다. GoF는 "생성 패턴" "구조 패턴" "행위 패턴" 총 3가지로 구분된다. * "Fo..

핸들러 매핑 (Handler Mapping) 요청 정보를 기준으로 어떤 컨트롤러를 사용할지 선정하는 인터페이스이다. 핸들러 매핑 인터페이스는 여러 구현체를 가지고 있고, 대표적인 구현체 클래스는 다음과 같다. BeanNameHandlerMapping ControllerClassNameHandlerMapping SimpleUrlHandlerMapping DeaultAnnotationHandlerMapping BeanNameHandlerMapping - 빈 이름을 URL로 사용하는 매핑 전략이다. - 빈을 정의할 때 슬래시("/")가 들어가면 매핑 대상이 된다. - ex) @Bean("/hello") ControllerClassNameHandlerMapping - URL과 일치하는 클래스 이름을 갖는 빈을 ..