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..

안녕하세요. 이번에는 JUMPIT 이 주최한 JUMPIT TO FRONT-END 컨퍼런스를 다녀온 후기를 작성해보려고 해요. 이번에 참여한 컨퍼런스는 - 2023년 4월 30일 - 강남 모나코스페이스 센스있게 일하는 FE 개발자 되기 • ‘FE개발의 소프트 스킬과 하드스킬’ 강연자 김태곤 • ‘협업?! 이렇게 한번 해봐’ 강연자 유동균 - FE개발자가 타 직군과 대화를 잘해야하는 이유 FIT한 정보로 성장 부스트업 • ‘FE개발 트렌드’ 강연자 이인제[소플] - 리액트 개발 생태계와 Next.js까지 • ‘타입스크립트로 FE개발 레벨업’ 강연자 장기효[캡틴판교] 의 내용으로 진행되었어요. 이번 점핏의 개취콘을 통해 기술적으로도 정보를 얻을 수 있었지만, 특히나 마인드셋에 대해 배운 점과 기억나는 점이 많..

소개 먼저 스프린트란 무엇일까요? 단거리를 전력질주한다는 의미에서 따온 것으로, 팀이 일정량의 작업을 완료하는 시간이 정해진 짧은 기간입니다. “스프린트는 스크럼과 애자일 방법론의 핵심이며, 올바른 스프린트는 애자일 팀이 더 적은 수고를 통해 더 나은 소프트웨어를 제공하는 데 도움이 됩니다.” 라고 알려져 있습니다. 구글에선 이 스프린트를 아래과 같이 사용합니다. 핵심 과제를 5일 안에 집중적으로 해결할 수 있도록 창안한 팀 단위의 기획 및 실행방법으로 단기 프로젝트를 7명 이내의 팀원이 5일 내에 완료하는 것을 목표로 합니다. 바로 이 구글 스프린트 방식을 배경으로 하여금 “테오”가 주최하는 스프린트인 것이지요. 이번이 14기인 만큼 지금까지 많은 분들이 테오의 구글 스프린트를 경험해왔고, 그만큼 체계..

마주한 상황 어느날 갑자기 페이지를 리로드 하니 간헐적으로, 무작위 하게 “인증되지 않은 사용자”라며 “다시 로그인 하세요.”라는 알림을 띄워준다… 심지어 다른 팀원의 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. 호출 건수에 ..