목록데브코스 TIL (39)
고양이와 코딩
kubectl create namespace db kubectl apply ‒f notes-db-volume.yaml kubectl apply ‒f note-db.yaml 위 명령어를 전부 실행하고 mysql --protocol tcp ‒P 30036 ‒u root ‒p < init-user.sql mysql --protocol tcp ‒P 30036 ‒u root ‒p < init-db.sql mysql --protocol tcp –P 30036 –u prgms -p 초기화 파일을 적용하려고 하는데, 반복적으로 에러가 발생했습니다 ERROR 2013 (HY000): Lost connection to MySQL server at 'reading initial communication packet', sy..
Docker 설치 및 설정 Docker Desktop을 설치하여 로컬 컴퓨터에 Docker를 설치합니다. Docker Desktop을 실행하고 필요한 경우 설정을 조정합니다. Kubernetes (K8s) 클러스터 설정 Docker Desktop에서 Kubernetes를 활성화합니다. 이는 로컬에서 싱글 노드 Kubernetes 클러스터를 실행할 수 있게 해줍니다. Express 프로젝트 설정 Express 프로젝트를 생성합니다. 프로젝트 디렉토리로 이동한 후 Express 앱을 초기화합니다. JWT 및 CORS 설정 Express 앱에 JWT 및 CORS 미들웨어를 추가합니다. JWT를 사용하여 사용자 인증을 구현하고 CORS 정책을 적용합니다. 데이터베이스 연결 MySQL 또는 MariaDB와 같은 ..
프로젝트를 시작 할 때 팀원들과 어떤 규칙을 가지고 임해야 하는지, 백엔드와 프론트엔트 간에 공유해야 할 사항과, 아닌 것은 뭔지가 항상 헷갈려서 API 호출 시에 문제가 발생했던 적이 있었습니다! 그렇기 때문에 이번 강의가 많은 도움이 되어서 캡쳐 해 놓았던 부분을 중심으로 정리 하고자 합니다. 전체 응용의 구성 👾 Frontend React 응용으로 만들어져 UI(User Interface)에 해당하는 부분을 서비스 Backend로 향하는 API 호출은 브라우저의 js 실행에 의하여 이루어짐 - FE에서 작성된 js 코드가 사용자의 브라우저에서 실행되어, 서버 측의 BE 시스템과 통신하기 위한 API 호출을 발생시킨다 👾 Backend Express 응용으로 만들어져 데이터베이스를 이용한 데이터 모델..
이렇게 구현되어있는 도서 화면 ! 전체/동화/소설/사회/신간 카테고리가 아무 의미가 없다. 난 분명 강의중에 놓친게 없는거같은데... 왜 필터링이 안되지?! 생각했지만 아마 실제로 구현한 적이 없는듯 합니다 ... 현재는 BookFilter.tsx 파일에서 const handleCategory = (id: number | null) => { const newSearchParams = new URLSearchParams(searchParams); if (id === null) { newSearchParams.delete(QUERYSTRING.CATEGORY_ID); } else { newSearchParams.set(QUERYSTRING.CATEGORY_ID, id.toString()); } setSear..
백엔드 코드에서 camelCase로 변경한 변수 유의하여 사용 변수의 선언 방식 const orderId = req.params.id; const { orderId } = req.params.id; const orderId = req.params.id; 는 req.params.id의 값을 orderId 변수에 할당 즉, `orderId` 변수에 `req.params.id`의 값이 그대로 저장된다 const { orderId } = req.params.id; 는 객체 비구조화 할당으로 req.params.id에서 orderId 라는 새로운 변수를 선언하고 초기화 위와 동일하게 `orderId` 변수에 `req.params.id` 값이 저장 → 하지만 req.params.id의 id값은 객체가 아닌 단순 값..
일반적인 프로젝트 폴더(디렉토리) 구조 pages - 라우트에 대응 하는 페이지 컴포넌트(컨테이너) 이 페이지가 렌더링 되어 화면에 보여집니다 components - 공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트를 분리해서 넣습니다 ex) common > Header , user > Profile utils - 유틸리티 유틸리티 함수와 간단한 도우미 함수들을 포함하며, 이 함수들은 여러 컴포넌트나 모듈에서 공통적으로 사용할 수 있습니다 ex) formatDate.js (날짜를 특정 형식으로 포맷하는 함수), capitalizeString.js (문자열을 대문자로 변환하는 함수) hooks - 리액트 훅 커스텀 리액트 훅 함수들을 포함합니다. 이러한 훅들은 컴포넌트 로직을 재사용 하기 위해 만들어집니다...