Watch Web

참고사항 S3 - CloudFront - Routes53 환경입니다. AWS 배포 환경 설정은 자세히 다루지 않습니다. 아래는 이번 github action 에러를 처리하고 yml 파일 최종 코드입니다. name: build and deploy on: push: branches: - main jobs: build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v3 - name: Install dependencies run: npm install - name: Build project run: npm run s-build - name: Configure AWS credentials uses: aws-actions/configu..

마주한 상황 어느날 갑자기 페이지를 리로드 하니 간헐적으로, 무작위 하게 “인증되지 않은 사용자”라며 “다시 로그인 하세요.”라는 알림을 띄워준다… 심지어 다른 팀원의 PC 에서는 발생하지 않고 일부 PC 에서만 재현되는 상황이었다. 페이지 이동, 혹은 다른 상호작용 시에는 발생하지 않았다. 프로젝트의 구조(개요) // App.tsx AppProvider 내부에는 아래와 같은 함수들이 있다. // 1. 쿠키에서 authToken 을 가져온다. // 2. 가져온 authToken 으로 로그인을 시도한다. // 3. 로그인에 성공하면 권한별 메뉴를 가져온다. const LoginByTokenFetch = async ( ... await getRoleMenu(authToken); ) => {}; const g..

시작 전 최초에는 노션으로 작성한 문서인데, 노션이 더 보기에 편한것같기도 하다. https://enormous-algebra-1c0.notion.site/Architecture-ffea125ae7904d01b609fabd9eafb798 폴더 구조(Architecture) 왜? enormous-algebra-1c0.notion.site 왜? React는 어플리케이션을 구성하고 구조하는 방법을 제공하지 않는다. (그렇기에 정답도 없다.) 어플리케이션을 구성하고 구조하는 것은 개발자나 팀이 상호작용하는 방식이다. 잘 짜여진 프로젝트는 개발자들이 자신의 구현에 더 깊이 생각하고 정리하도록 요구한다. 또한 잘 짜여진 프로젝트는 코드베이스를 쉽게 탐색, 수정 및 확장할 수 있다. 조직화된 코드베이스는 팀이 장기적..

개요 리액트에서 chart.js 사용하기 그래프 구현을 위해 chart.js 를 사용하면서, 처음 사용할 때 어려웠던 점. 불편했던 점을 정리 내가 어려웠던 점은 크게 3가지가 있었다. 리액트에서 사용하기 Object 다루기 그래프에 특정 색 할당하기 그럼 chart.js 의 기본 구조에 대해 정리하고, 위 3가지를 공유해보겠다. 기본 설정 chart.js : 3.9.1 버전 react-chartjs-2 : 4.3.1 버전 react-chartjs 라고 해도 기본적으로 chart.js 를 기반으로 하고 있다는 것을 잊지 말자. chart.js 의 기본 구조 const ctx = document.getElementById('myChart'); new Chart(ctx, { type: 'bar', data:..

메인페이지 목록 출력 페이지에 접속 했을 때, 기본적으로 도서 목록을 표시해 주는 메인페이지. Redux 비동기 feature 작성 Redux에서 비동기 통신을 활용할 것이다. 리덕스에 내장되어 있는 createAsyncThunk 을 사용한다. import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; import axios from '../api/axios'; // 커스텀 axios 호출 // createAsyncThunk('명칭/개요', 실행할 함수) 의 형태 export const fetchFrontEnd = createAsyncThunk('get/frontEnd', async(_query, _page) => { const res = awa..

스타일/레이아웃 포인트 컬러 : 책은 가을의 양식, 가을하면 따듯한 베이지톤이 생각났다. 또, 이번 2022 트렌드 컬러를 참고하여 마침 우리나라의 인기 색상이 아래와 같은 색이었다. (#FFEBCD) 이렇게 확정은 아니지만 이런 비슷한 느낌의 컬러를 포인트로만 사용해볼 예정이다. 페이지 핵심 기능(검색) : 처음에는 내가 읽은 책 목록을 보여주는 것을 중심으로 진행하려고 했으나, 내가 필요한 책들을 찾고 기록하는게 핵심 기능이라고 생각했다. 그래서 사용자가 페이지에 접속했을 때, 검색창을 가장 접근하기 쉬운 상단에 위치시켰다. 내비게이션 바 : 스크롤을 내려도 검색창에 접근할 수 있도록 작은 검색창과 나의 페이지로 이동하기 위한 사용자 아이콘 버튼을 위치시켰다. 검색창 : 제목 검색만 가능하며, 검색 ..

리덕스 학습 및 적용 학습 과정 코딩애플과 생활 코딩을 통해 개념 및 간략한 사용법을 익히며 학습 진행 중 마주친 deprecated 메시지. 기존의 Redux 에서 RTK(Redux ToolKit)로 문법이 최신화 되었다. createStore는 이제 (구)문법으로 처리되어 최신문법인 configureStore를 쓰도록 안내해준다. Provider에 state값을 넘겨주지 않아서 마주친 에러. props 로 넘겨주어 해결 Provider로 컴포넌트를 감싸줌으로써 내부에서 Redux의 state를 사용할 수 있게된다. import { Provider } from 'react-redux'; import { configureStore } from '@reduxjs/toolkit'; const weight =..

프로젝트 설명 도서 검색 및 열람 페이지, 내가 읽은/읽고 싶은 책을 정리할 수 있는 페이지 이 프로젝트를 진행하게된 이유 내가 읽은 책과 읽고 싶은 책을 정리하고 싶다. 추천받는 개발 서적들에 대해 기록해 놓고 싶다. 확실하게 학습하고 기록하면서 프로젝트를 진행하고 싶다. 리액트와 상태관리 라이브러리를 학습하고 싶다. 핵심 기능 도서 목록(무한 스크롤) 대표 카테고리 별 목록(웹 개발, 프론트엔드, 웹디자인) 읽은/학습한 도서 저장 읽고 싶은 도서 저장 도서 검색(제목) 개발 환경 React.js Redux styled-components axios Figma Git/Github 환경 설정 도서 검색 API 카카오의 OPEN API 사용 왜? 1. 너무 많은 정보는 필요하지 않았다. 2. 호출 건수에 ..

Never be entirely idle; but either be reading, or writing, or praying or meditating or endeavoring something for the public good. 1. 정의 2. 왜 에러 핸들링을 해야할까? 3. 에러 핸들링 4. try - catch 1. 정의 에러(오류) : 하드웨어나 소프트웨어가 본래의 동작을 수행할 수 없는 상태 컴파일 에러 : 코드가 컴파일(해석할 수 있는 언어로 변경되는 과정)되는 과정 중 발생하는 에러 런타임 에러 : 프로그램이 동작하는 과정 중 발생하는 에러 예외 : 일반적으로 런타임 에러와 관련된 예상하기 어렵거나 불가능한 이슈 에러 핸들링 : 예외로 인해 발생한 에러 객체를 다루는 것 일반..

The future depends on what we do in the present. HTTP란? 정의 : 인터넷에서, 웹 서버와 사용자의 인터넷 브라우저 사이에 문서를 전송하기 위해 사용되는 통신 규약을 말한다. HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜인데, 웹에서 이루어지는 모든 데이터 교환의 기초이자, 클라이언트-서버 프로토콜이기도 하다. HTTP의 특징 모든 데이터 교환의 기초 HTTP의 헤더를 통해 추가적인 정보를 주고 받을 수 있다. 상태를 저장하지 않는다. 쿠키를 통해 상태가 있는 세션을 만들 수 있다. HTTP의 대표적인 처리방식 GET POST PUT DELETE HTTPS란? 정의 : HTTP 프로토콜의 암호화된 버전이다. 클라이언트와 서버가 민감한 정보를 안..