어제 아침 9시부터 계속 Axios 에러가 떠서 이것저것 코드를 정말 많이 고쳤다.그런데~~~ 백 분들이랑 이야기하다가, 내가 Lombok 플러그인을 설치하지 않았다는 것을 알게 되었다. 헉.. 설치하니까 바로 잘 된다. "저희가 코드에 Lombok을 범벅해놔서요, 그래서 잘 안됐나봐요"라고 말해주셨다.역시 소통이 중요하구나 느끼게 되었습니다.  1. 롬복 플러그인 설치 - Setting > Plugins - Marketplace 탭에서 Lombok을 검색하여 플러그인 설치  2.  플러그인 설치 - Setting > Plugins - Marketplace 탭에서 Lombok을 검색하여 플러그인 설치

1. 나의 스튜디오 번호 조회   2. DB에 자료 저장하기 Body에 form-data 형식으로 보내기 3. Send 버튼을 누르면, 성공 글이 뜬다  4. 완성된 데이터 조회해보기

1. 백 서버 켜기  2. 포스트맨 켜서 들어가기 3. 토큰 값 확인 및 복사  4. Headers 또는 Authorization에 토큰 넣기  5. Get을 사용해서 조회 가능 API 명세서 캐릭터 목록 조회GET http://localhost:8080/api /studios/{studio_id}/characters   http://localhost:8080/api/studios/1/characters 캐릭터 생성POST http://localhost:8080/api/studios/{studio_id}/characters   http://localhost:8080/api/studios/1/characters 캐릭터 삭제 DELETE http://localhost:8080/api/studios/{stud..

빌드를 안 한 채로, 코드를 업로드 했다고 팀원에게 엄청 혼났다 ㅠ 빌드가 왜 중요할까? 피드백을 통해서 다시, 생각해보게 되는 순간이다. 감사감사 빌드는 소스 코드를 배포 가능한 형태로 변환하는 과정으로, 웹 애플리케이션의 개발과 배포에서 중요한 역할을 한다.빌드의 중요성은 아래와 같다. 1. 코드 최적화압축 및 난독화: 빌드 과정에서 코드가 압축되고 난독화된다. 이는 코드의 크기를 줄이고, 로딩 시간을 단축시키며, 클라이언트 측에서 코드 분석을 어렵게 만든다.트리 쉐이킹: 사용되지 않는 코드나 모듈을 제거하여 최종 번들 크기를 줄인다.2. 파일 번들링 및 모듈화모듈 결합: 여러 개의 JavaScript, CSS 파일을 하나의 파일로 결합하여 네트워크 요청 수를 줄이고 성능을 개선한다.코드 스플리팅: ..

컨테이너를 도입해야 한다 쿠버네티스로 전환해야한다. 컨테이너 = 서버서버는 프로그램 소프트웨어가 실행되는 하드웨어  모든 회사들은 it 서비스를 제공하기 위해서, 소프트웨어를 제공하고 있다. 이 소프트웨어는 개발자분들이 열심히 개발한 작어브이 결과물이다.  개발자는 자신의 PC에서 소스 코드를 개발할 때, 소스 코드를 임시 소프트웨어로 만들어서 자신의 PC에서 실행하고 테스트한다.   그러면 개발을 마치고 결과물로 만들어진 소프트웨어는 고객에게 서비스로 제공되기 위해서,개발자의 PC가 아니라 인터넷의 어딘가에서 실행되어야 한다.  이 소프트웨어가 바로 서버에서 실행된다. 서버는 회사 서버실에 있을 수도 있고, 클라우드 같은 온라인 서버를 사용할 수도 있다.  PC에서 개발한 소프트웨어는 보통 메모리가 2..

리액트는 컴포넌트 기반의 구조 모든 페이지가 컴포넌트로 구성되어 있다 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성되어 있음  그리고 마치 레고 블록을 조립하는 것처럼, 이러한 컴포넌트들을 끼워 맞춰서 새로운 컴포넌트를 만들 수 있다.  하나의 컴포넌트를 반복적으로 사용함으로써, 전체 코드의 양을 줄일 수 있다 자연스레 개발시간과 유지보수 비용을 줄일 수 있다

▶ root라는 id를 가진 div 태그모든 react 앱에 들어가는 아주 중요한 코드  div에 있는 모든 것이 리액트 돔에 의해서 관리된다   ▶ 렌더링 된 Elements 업데이트하기 틱 함수가 실행될 때마다 새로운 element를 생성해서 바꿔준다 (불변성 때문)

▶ React Elements 란 ? 리액트를 구성하는 성분리액트 앱을 구성하는 가장 작은 블록들 화면에 나타나는 내용을 기술하는 자바스크립트 객체  리액트에서 기술한 대로, 실제로 우리가 화면에서 보는 DOM elements가 만들어진다  ▶ Elements의 생김새 리액트 Elements는 자바스크립트 객체의 형태로 존재한다 컴포넌트 유형, 속성, 내부 모든 자식에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체 마음대로 변경할 수 없는 불변성을 가지고 있음 (한번 생성되면 바꿀 수 없음)   ▶ React Element의 특징 => 불변성 (immutable)elements는 다양한 모양으로 존재할 수 있지만,한번 생성된 element는 변하지 않는다 Elements 생성 후에는 childre..

이제 PWA의 요건을 만족하는지 다시 테스트해보고, 테스트를 통과하였다면 직접 제작한 PWA를 설치하고 실행해보자.1. 테스트하기1.1 테스트 전 확인사항테스트하기 전 변경 사항들이 모두 반영되었는지 확인해야 한다. 만약 ngrok로 생성한 url을 사용하였다면 로컬 서버에서 자동으로 업데이트되기 때문에 바로 테스트가 가능함. 하지만 Github pages url을 사용하였다면 반드시 변경 사항을 repository에 업로드해 주어야 한다. github repository에 파일을 업로드할 때는 챕터 2.3에서 했던 것처럼 드래그 앤 드롭 방법을 사용할 수도 있지만, 일반적으로는 터미널에서 git 명령어를 사용하여 변경 사항을 업데이트1.2 PWA Builder 테스트PWA Builder 페이지로 돌아와..