클라이언트/서버 상태 프론트엔드 개발시에 다루는 상태는 클라이언트 상태와 서버 상태로 크게 두가지가 있다 클라이언트 상태 - view를 위한 데이터 한 유저만을 위한 데이터(세션간 지속될 필요 없는 데이터) 렌더링에 반영하기 위한 데이터 →컴포넌트의 state를 화면에 보여줄때, input의 state, 동기적으로 저장되는 redux store의 데이터 등 서버 상태 - 서버에서 가지고 오는 데이터 여러 유저가 공유해야 하는 데이터(세션간 지속되어야 하는 데이터) DB에 저장되어 있는 데이터 → axios로 api를 호출해서 자원을 가져오는 경우 react-query 서버 상태를 관리하기 위한 상태 관리 라이브러리이다. API 요청에 특화 서버의 값을 클라이언트 쪽에 가져오거나 캐싱, 업데이트, 에러 핸..

ESLint? 사용자가 직접 정의한 것처럼 코드를 점검하며, 에러가 있으면 표시해준다. 문법 에러 뿐만 아니라 코딩 스타일까지 정할 수 있어서 마치 한사람이 코드를 작성한 것처럼 보이게 하기 대문에 협업할 때 매우 좋다! 예를 들어 함수를 사용할 때 arrow function으로 사용할 것인지 그냥 사용할 것인지 등등.. 반복문을 사용할 때, for문이나 forEach, map등 내장함수 사용 등등.. 코드와 코딩 컨벤션을 점검해주는 툴은 여러가지가 있지만 ESLint가 다양한 플러그인을 사용할 수 있기 때문에 확장성이 매우 높다! 코드 포맷터의 역할도 하지만 주로 에러 코드를 잡아내고 코드 문법을 강제하면서 코드 품질 개선에 중점을 둔다! Prettier? Prettier는 코드 포맷터이다. EsLin..

작동 방식 브라우저가 웹페이지에서 자바스크립트를 발견하면 프로그램의 텍스트를 자바스크립트 컴파일러로 전달한다. 컴파일러는 프로그램에 에러가 있는지 검사하고, 프로그램을 모형 컴퓨터처럼 만들어 낸 컴퓨터의 어셈블리 언어 명령어로 컴파일한다. 모형 컴퓨터 같은 시뮬레이터를 실행하여 자바스크립트 프로그램이 수행하기로 되어 있는 모든 기능을 수행한다. 자바스크립트 동작 구조 자바스크립트의 대표적인 엔진은 Google에서 만든 V8 엔진이다. 엔진은 Memory Heap 과 Call Stack 으로 구성되어 있다. Memory Heap은 메모리 할당이 발생하고, Call Stack (호출 스택)은 코드 스택에 따라 하나씩 쌓이는 곳이다. 자바스크립트에서는 수 많은 API를 사용하고 있다. 하지만 이런 API들은 ..

우선 아래 링크를 참고하여 redux tool kit에 대한 설정을 하자 https://duckgugong.tistory.com/315 Redux Tool kit Redux Took kit? 리덕스를 사용하려면 작성해야할 코드와 파일이 기본적으로 너무 많다 → 보일러플레이트가 증가한다! Redux Tool Kit은 리덕스를 편하게 사용하는데 유용한 패키지가 들어있는 도구 duckgugong.tistory.com createAsyncThunk? redux에서 비동기 처리를하기 위해 사용한 미들웨어 redux thunk와 마찬가지로 redux tool kit에서는 creatAsyncThunk를 사용할 수 있는데 따로 미들웨어 설정을 할 필요 없이 redux tool kit에서 기본적으로 제공해준다! 사용법 ..

S3 버킷 설정하기 우선 가비아에서 도메인을 하나 구입하자. https://www.gabia.com/ 웹을 넘어 클라우드로. 가비아 그룹웨어부터 멀티클라우드까지 하나의 클라우드 허브 www.gabia.com AWS에 로그인해서 S3 탭으로 이동한 후 버킷 만들기를 클릭하자. 배포할 사이트 도메인 이름과 버킷 이름을 꼭 같게 만든다 모든 퍼블릭 액세스 차단을 해제하고 현재 설정으로 인해 이 버킷과 그 안에 포함된 객체가 퍼블릭 상태가 될 수 있음을 알고 있습니다. 선택 아래로 내려서 버킷 만들기 클릭 버킷 이름 선택 권한 탭에 잇는 버킷 정책에서 편집 클릭 버킷 ARN 복사 후 정책 생성기 클릭 Select Type of Policy: S3 Bucket Policy 선택 Principal: * 입력 Act..

tailwind-css https://tailwindcss.com/docs/guides/create-react-app Install Tailwind CSS with Create React App - Tailwind CSS Documentation for the Tailwind CSS framework. tailwindcss.com tailwind css의 컨셉인 Utility-First로 인해 HTML과 CSS를 왔다갔다하면서 원하는 태그의 스타일을 변경하기 위해 시간을 쏟을 필요가 없고 클래스명도 고민할 필요가 없다 각 css 요소 수준의 유틸리티 클래슬르 제공하기 때문에 세밀하게 원하는 디자인을 구현할 수 있지만 디자인이 복잡해질 수록 코드가 못생겨진다 ㅠㅠ 또한 클래스 속성명에 대한 러닝커브가 존재..