[NextJS] JEST로 NextJS 테스트 코드 작성하기
·
FrontEnd
Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more! Jest는 단순성에 중점을 둔 유쾌한 자바스크립트 테스트 프레임워크입니다. Babel, TypeScript, Node, React, Angular, Vue 등을 사용하는 프로젝트와 함께 작동합니다 - 자바스크립트 테스트 프레임워크이며, 다양한 라이브러리에서 사용이 가능한 프레임워크입니다. 1. 패키지 설치 생성되어 있는 NextJS 프로젝트 내부에 생성할 것입니다. jest사용에 필요한 라이브러리들을 설치합니다. je..
[NextJS,TypeScript] Custom Type을 한 곳에서 관리 하는 법
·
FrontEnd
Custom Type을 한 곳에서 관리 하는 법 각각의 component와 pages마다 type을 선언할 때 마다, type이나 interface를 재선언해주는것이 올바르지 않다. 라고 생각했고, 다른 한 파일에 타입을 지정해놓고 필요할때 마다 꺼내서 사용하면 좋을 것 같았다. 분명 프로젝트 내에서 필요한 기능이기 때문에 당연히 NextJS 프레임 워크에서 구현이 되어 있었다. next-env.d.ts nextjs 프로젝트를 생성 했을때, 위의 파일이 자동적으로 생성된다. 이 파일은 nextjs 공식문서에서도 타입과 인터페이스를 관리하는 파일로 해석한다. 좋은점이 이 파일에 타입을 지정 했을 시, 자동으로 import없이 타입들을 사용 가능하다는 것이 큰 장점이다. api url같은 상수 값도 여기에 ..
[React,HTML] input 태그에 file을 받을때 이미지 파일만 받는 법
·
카테고리 없음
input태그로 file을 받아올 때, accept라는 속성을 사용하여 가져올 파일의 확장자를 선택할 수 있습니다. 저는 사진파일만 받을 것이기 때문에 .jpg, .jpeg, .png 만 가져올 것 입니다. 실제로 input을 선택해서 파일 추가를 했을때 위에 3개 확장자 파일만 보여집니다.
[React] React-Query 의 status 종류 정리
·
FrontEnd/React
fresh - 기본적으로 서버에서 데이터를 불러왔을때 갓 가져온 데이터 react-query는 기본적으로 모든 값이 fresh가 아니다 라고 정의한다. 언제까지 fresh인지 개발자가 설정해야함 stale - 기회가 되면 항상 데이터를 새로 가져와라. RQProvider에 있는 refetch~~ 를 통해서 다시 받아온다. refetchOnWindowFocus - 다른 탭 갔다가 다시 돌아왔을때 t/f refetchOmMount - 페이지를 이동했다던가 컴포넌트가 다시 리액트에 올라갈때 t/f refetchOnReconnect - 인터넷 연결이 끊겼다가 다시 시작될 때 t/f retry - 실패시에 몇번정도 더 시도할지 useQuery에서 따로 부여도 가능함 staleTime 옵션으로 fresh의 기한을 ..
[Java] Thread의 내부 생성자, 메소드
·
BackEnd/Java
스레드의 생성자와 메소드 1) 생성자 Thread( ) : 새로운 스레드 객체 할당 Thread(String name) : 새로운 스레드 객체가 할당되며, 스레드 이름은 name으로 설정됨 Thread(Runnable target) : Runnable target이 구현된 스레드 객체 할당 Thread(Runnable target, String name) : Runnable target이 구현된 스레드 객체가 할당되면 스레드 이름은 name으로 설정됨. 2) 메소드 void run( ) : 스레드의 실행코드가 작성되는 메소드로 사용자는 run() 메소드를 오버라이드 하여 사용해야 합니다. void start( ) : 스레드가 시작되도록 요청하는 메소드로 JVM은 해당 스레드의 run() 메소드를 호출합니..
[React] useState에 ReactComponent가 들어있을때 어떤 Type을 부여하면 될까?
·
FrontEnd/React
기존에 이렇게 설정된 react state의 타입은 any배열로 줬기때문에 컴파일 오류를 일으켰을때 문제가 생길 수 있다. 실제로 set 함수를 통해 직접적인 state에 변화를 주지 않아서 굳이 useState를 사용 할 필요가 없지만 추후 유지보수시에 리스트가 추가될 것을 염려하여 State로 관리 하였고, 또한 후에 서버에서 받아온 값으로 리스트업 될 수도 있을것이라는 생각이 들어서 리스트로 만들었다. 이런식으로 any배열 대신 ReactElement 배열로 타입을 주어서 다른 타입 int,string 등등 컴포넌트가 아닌 타입이 위치했을때 컴파일 에러를 만든다 - 컴파일 에러는 좋은 에러이다, 개발자가 조기에 에러를 파악하고 고칠 수 있기 때문
[Java] 김영한의 실전 자바 정리 2 - 패키지 ~ 메모리 구조와 static
·
BackEnd/Java
패키지 컴퓨터는 보통 파일을 분류하기 위해 폴더, 디렉토리라는 개념을 제공한다. 자바도 이런 개념을 제공하는데, 이것이 바로 패키지 이다. 같은 패키지에 존재하면 경로를 생략해도된다 다른 위치의 패키지 라면, 전체 경로를 포함해서 클래스를 적어야 한다. 패키지 안에 있는 모든 클래스를 import하고 싶으면 *을 통해 추가한다. 클래스가 중복 되어도 패키지 이름으로 구분해서 사용할 수 있다. import pack.a.User; import pack.b.User; 이런식으로 같은 클래스명이 import되었을때 하나는 User로 사용이 가능하지만 두번째 부터는 pack.b.User 이런식으로 사용해야한다. 패키지의 규칙 이름과 위치는 폴더 위치와 같아야한다. 패키지 이름은 모두 소문자를 사용한다 (관례) 패..
[Java] 김영한의 실전 자바 기본 공부 내용 정리 - 1
·
BackEnd/Java
기본형 : int long double boolean 처럼 변수에 사용할 값을 직접 넣을 수 있는 데이터 타입 참조형 : Student student, int[] students 와 같이 데이터에 접근하기 위한 참조를 저장하는 데이터 타입 참조형 변수는 참조값이 존재하는 위치를 저장한 변수 기본형은 들어있는 값을 그대로 계산에 사용할 수 있다. 참조형은 그대로 사용할 수 없다. 왜? 주소지만 가지고 있기때문에 주소지에 있는 변수에 까지 접근해야한다. 기본형은 연산 o 참조형은 연산 x 기본형을 제외한 나머지는 모두 참조형이고, 기본형은 타입이 모두 소문자로 시작한다. 자바가 기본으로 제공하는 타입 개발자가 새로 만들고 싶다면 Class를 통해서 구현하며 이것은 참조형이다. String? 자바에서 Stri..