우당탕탕 개발일지

JOIN 두 개 이상의 테이블을 연결 또는 결합하여 데이터를 출력하는 것을 의미한다. 일반적으로 PK나 FK 값의 연관에 의해 성립되지만, 논리적인 값들의 연관만으로도 JOIN이 성립 가능하다. SELECT 테이블.컬럼, 테이블.컬럼 FROM 테이블1, 테이블2 WHERE 조건 EQUI JOIN (등가 조인) 두 개의 테이블 간에 칼럼 값들이 서로 정확하게 일치하는 경우에 사용되는 방법 Non EQUI JOIN (비등가 조인) 두 개의 테이블 간에 칼럼 값들이 서로 정확하게 일치하지 않는 경우에 사용된다. Join 종류 1) INNER JOIN JOIN 조건에서 동일한 값이 있는 행만 반환한다. INNER JOIN 표시는 JOIN 조건을 FROM 절에서 정의하겠다는 표시이므로 USING 조건절이나 ON ..

CI(Continuous Integration)란? CI는 어플리케이션의 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트 되어 공유 레포지토리에 통합하는 것을 의미한다. 즉, 개발 및 테스트를 자동화한다. CD(Continuous Delivery & Continuous Deployment)란? CD는 지속적 제공(Continuous Delivery) 혹은 지속적 배포(Continuous Deployment) 두 용어 모두의 축약어이다. 지속적 제공은 공유 레포지토리로 자동으로 Release 하는 것, 지속적 배포는 프로덕션 레벨까지 자동으로 deploy 하는 것을 의미한다. 즉, 개발자의 변경 사항이 레포지토리를 넘어, 고객의 프로덕션 환경까지 릴리즈 되는 것을 의미한다. CI/CD 파이프라인 CI/..

Axios 인스턴스 request를 보낼 때 공통으로 사용하는 주소나 헤더를 axios 인스턴스로 생성한다. import Axios from "axios"; import { BASE_URL } from "../axios.constant"; export const axiosInstance = Axios.create({ baseURL: BASE_URL, timeout: 1000, }); 예를 들어, 401(Unauthorized) 에러가 서버로부터 들어오면 토큰을 갱신해준 후 재요청을 보내는 과정을 한번에 처리함으로써 중복 코드를 제거하고 유지보수성을 향상시킬 수 있다. [ 참고 ] * 절대경로 설정 프로젝트 개발을 하다 보면 여기저기서 서로 다른 경로의 파일들을 불러와야 할 때가 많은데, 상대 경로를 사용..

카카오 지도 API는 무료로 제공되고 있으며, 사용을 위해서는 아래와 같이 키 발급을 받아야 한다. [ 참조 : https://apis.map.kakao.com/web/guide/ ] 1. 카카오 개발자사이트 (https://developers.kakao.com) 접속 2. 개발자 등록 및 앱 생성 3. 웹 플랫폼 추가: 앱 선택 – [플랫폼] – [Web 플랫폼 등록] – 사이트 도메인 등록 4. 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록합니다. (예: http://localhost:8080) 5. 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용합니다. 6. 앱을 실행합니다. API 키 저장 .env 파일에 API_KEY를 저장한다. CRA로..

훅 계층 구조 훅 계층 구조는 다음과 같이 나눌 수 있다. 쿼리 훅 계층에서는 React Query를 직접 호출하고 사용하며, 쿼리 키를 사용할 수 없다. queryClient 객체를 사용하는 곳은 이 곳 밖에 없다. 비즈니스 로직 훅 계층에서는 쿼리 훅 계층으로부터 반환되는 값으로 작성되는 비즈니스 로직들이 포함되는 영역이다. 쿼리 훅 계층으로부터 remote data 혹은 mutation 객체를 받아 컴포넌트에게 비즈니스 로직을 전달하는 역할을 수행한다. 컴포넌트 계층에서는 비즈니스 로직 훅 계층으로부터 비즈니스 로직을 전달받아 핸들러 코드를 만들어 컴포넌트에서 사용된다. useMutation 서버에 데이터를 업데이트하도록 서버에 네트워크 호출을 실시한다. useMutation은 mutate 함수를 ..

Dart Setting 깃허브에서 플러터 프로젝트를 새로 클론했는데 SDK가 존재하지 않는다는 오류가 발생했다. 플러터는 Dart에서 제공되는 SDK가 존재해야 하는데, 경로를 인식하지 못해서 발생하는 오류이다. Dart 설정에서 SDK 경로를 지정해주고, 적용시킬 프로젝트 모듈을 선택해서 해결하였다. Device Manager 플러터 프로그램을 실행시키기 위해서는 실행할 디바이스가 필요하다. 에뮬레이터라는 가상 기기로 프로그램을 실행시켜 볼 수 있다. Lint Setting analysis_options.yaml에서 rules: 부분에 추가 (analysis_options.yaml) rules: prefer_const_constructors: false avoid_print: false prefer_t..

React Query란 React Query는 클라이언트에서 서버 데이터 캐시를 관리한다. 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용한다. React 코드에서 서버 데이터가 필요할 때 axios를 통해 서버로 바로 이동하지 않고 React Query 캐시를 요청한다. 데이터 관리뿐만 아니라 React Query는 서버 상태를 관리 한다. 서버에 대한 모든 쿼리의 로딩 및 오류 상태를 유지하기에 수동으로 관리할 필요가 없다. 데이터의 페이지 매김(Pagination)을 제공하며, 무한 스크롤이 가능하다. 캐시에서 해당 데이터를 가져오기 때문에 서버에 연결할 때까지 기다릴 필요가 없다. 서버에서 데이터 변이나 업데이트를 관리할 수 있다. ..

리액트를 사용하여 작업을 할 때 수많은 파일들과 기능, 컴포넌트를 관리하는 것은 정말 복잡한 일이다. 그렇기에 폴더 구조를 미리 정해두는 것은 코드의 유지 및 보수에 큰 도움이 된다. 최초 생성 디렉토리 node_modules CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더 package.json CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일 모든 프로젝트마다 package.json이 하나씩 존재 [ dependencies ] 리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인이 가능. 실제 코드는 node.modules 폴더에 존재한다. [ scripts ] start : 프로젝트 development mode(개발 모드) 실행을 위한 명령어. ..