재사용 가능한 모달 사이드 프로젝트 진행중에 모달창을 띄워야 하는 일이 생겼다. 대부분의 페이지에서 사용 해야했기 때문에, 재사용 가능한 컴포넌트로 제작하기로했다. 컴포넌트 단위로 생성했을때 여러곳에서 재사용이 가능하며, (가장 큰 장점) 개발시간을 크게줄여준다. 예를들어, 비슷하게 생긴 모달창이 20개 30개 혹은 100개 이상 필요한데 모두 다 복붙 할 수는 없다. 생산성이 매우 떨어지기 때문. 이를 바탕으로 컴포넌트가 얼마나 생산성을 높여주는지 실제로 만들어보면서 느껴보자. 일단. 컴포넌트를 먼저 생성해준다. 이 글은 Typescirpt와 NextJS 기반이다. 내가 만들어야 하는 컴포넌트 이다. 총 3가지의 변화가 있을 것이다. 1. 아이콘, 2. 텍스트, 3. 버튼 이 모달을 컴포넌트를 사용하지..

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..

Custom Type을 한 곳에서 관리 하는 법 각각의 component와 pages마다 type을 선언할 때 마다, type이나 interface를 재선언해주는것이 올바르지 않다. 라고 생각했고, 다른 한 파일에 타입을 지정해놓고 필요할때 마다 꺼내서 사용하면 좋을 것 같았다. 분명 프로젝트 내에서 필요한 기능이기 때문에 당연히 NextJS 프레임 워크에서 구현이 되어 있었다. next-env.d.ts nextjs 프로젝트를 생성 했을때, 위의 파일이 자동적으로 생성된다. 이 파일은 nextjs 공식문서에서도 타입과 인터페이스를 관리하는 파일로 해석한다. 좋은점이 이 파일에 타입을 지정 했을 시, 자동으로 import없이 타입들을 사용 가능하다는 것이 큰 장점이다. api url같은 상수 값도 여기에 ..

input태그로 file을 받아올 때, accept라는 속성을 사용하여 가져올 파일의 확장자를 선택할 수 있습니다. 저는 사진파일만 받을 것이기 때문에 .jpg, .jpeg, .png 만 가져올 것 입니다. 실제로 input을 선택해서 파일 추가를 했을때 위에 3개 확장자 파일만 보여집니다.

fresh - 기본적으로 서버에서 데이터를 불러왔을때 갓 가져온 데이터 react-query는 기본적으로 모든 값이 fresh가 아니다 라고 정의한다. 언제까지 fresh인지 개발자가 설정해야함 stale - 기회가 되면 항상 데이터를 새로 가져와라. RQProvider에 있는 refetch~~ 를 통해서 다시 받아온다. refetchOnWindowFocus - 다른 탭 갔다가 다시 돌아왔을때 t/f refetchOmMount - 페이지를 이동했다던가 컴포넌트가 다시 리액트에 올라갈때 t/f refetchOnReconnect - 인터넷 연결이 끊겼다가 다시 시작될 때 t/f retry - 실패시에 몇번정도 더 시도할지 useQuery에서 따로 부여도 가능함 staleTime 옵션으로 fresh의 기한을 ..

스레드의 생성자와 메소드 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 state의 타입은 any배열로 줬기때문에 컴파일 오류를 일으켰을때 문제가 생길 수 있다. 실제로 set 함수를 통해 직접적인 state에 변화를 주지 않아서 굳이 useState를 사용 할 필요가 없지만 추후 유지보수시에 리스트가 추가될 것을 염려하여 State로 관리 하였고, 또한 후에 서버에서 받아온 값으로 리스트업 될 수도 있을것이라는 생각이 들어서 리스트로 만들었다. 이런식으로 any배열 대신 ReactElement 배열로 타입을 주어서 다른 타입 int,string 등등 컴포넌트가 아닌 타입이 위치했을때 컴파일 에러를 만든다 - 컴파일 에러는 좋은 에러이다, 개발자가 조기에 에러를 파악하고 고칠 수 있기 때문

패키지 컴퓨터는 보통 파일을 분류하기 위해 폴더, 디렉토리라는 개념을 제공한다. 자바도 이런 개념을 제공하는데, 이것이 바로 패키지 이다. 같은 패키지에 존재하면 경로를 생략해도된다 다른 위치의 패키지 라면, 전체 경로를 포함해서 클래스를 적어야 한다. 패키지 안에 있는 모든 클래스를 import하고 싶으면 *을 통해 추가한다. 클래스가 중복 되어도 패키지 이름으로 구분해서 사용할 수 있다. import pack.a.User; import pack.b.User; 이런식으로 같은 클래스명이 import되었을때 하나는 User로 사용이 가능하지만 두번째 부터는 pack.b.User 이런식으로 사용해야한다. 패키지의 규칙 이름과 위치는 폴더 위치와 같아야한다. 패키지 이름은 모두 소문자를 사용한다 (관례) 패..