data life

깊고 복잡한 배열 구조를 간단하게 정리하기 위해 사용하는 함수입니다. map()함수는 다들 많이 이해하고 사용하고 계시지만 ES2019에 추가된 flat()과 flatMap()에 대해 알아보도록 합시다! flat() 중첩된 배열을 정해진 깊이만큼 평탄하게 만들어 주는 함수입니다. const newArr = arr.flat([depth]) 매개변수로 어느 깊이까지 평탄하게 할 지 정할 수 있는 depth 변수가 있고 이는 선택사항입니다. 생략 시, 기본값은 1이 적용되며 만일, infinity를 사용하게 된다면 하위 배열이 없을때까지 평탄화해줍니다. const exampleArray = ["a", , ["b"], ["c"]]; const newArray = exampleArray.flat(); //newA..

Glide에 대해 알아보자! Glide란? 외부 종속성이 없는 자바스크립트 ES6 슬라이더 및 캐러셀 패키지로 가볍고 유연한 장점을 가지고 있습니다. 모듈식 접근 방식을 이용하였기 때문에 프로덕션 빌드에서 많은 무게를 줄일 수 있으며 모든 기능을 포함한 무게는 ~28kb(gzip으로 압축하면 ~8kb) 정도라고 나와있네요! Rollup과 Webpack 모두 지원하며 테마와 사용자 정의 스타일을 추가해야 하는 경우 CSS와 scss를 사용하여 추가가 가능합니다. Glide 설치하기 $ npm install @glidejs/glide Glide의 스타일 구성 glide.core glide.theme Glide의 옵션 type : 움직임 종류 (slider / carousel) startAt : 특정 슬라이드..

Google OAuth2 클라이언트 ID와 비밀번호 얻기 1. Google API 콘솔 에서 google 로그인하고 들어간다. 2. 새 프로젝트를 만들거나 기존 프로젝트를 선택한다. 3. 프로젝트를 생성하거나 선택했으면 왼쪽 사이드의 'OAuth 동의 화면' 메뉴를 클릭하여 사용자 유형 중 '외부'를 선택합니다. 4. 앱 등록 수정 > 앱 정보, 앱 로고, 앱 도메인에서 정보를 모두 입력해줍니다. 5. 범위 > 범위 추가 또는 삭제 클릭하여 아래와 같이 원하는 범위를 지정해줍니다. 선택완료 시, 아래의 저장 및 계속을 클릭합니다. 6. 테스트 사용자 > ADD USERS 클릭하여 테스트할 사용자 이메일을 입력해주세요. 7. 여기까지 동의화면 설정이 끝났습니다. 이제 사용자 인증 정보 메뉴바에 들어가서 O..

이번 팀프로젝트를 진행하면서 React-query를 도입해보고자 해당 기술에 대해 알아보고자 합니다. React-Query란? 공식문서에 따르면 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 만들어주는 라이브러리로 소개되어있으며 서버 상태를 관리하기 위한 최고의 라이브러리로 이해하면 되겠습니다. 기술적인 측면에서, - 복잡하고 많은 양의 코드를 줄여 줄 수 있습니다. - 유지 관리가 쉽고 새 기능을 쉽게 구축할 수 있습니다. 캐싱이란? 특정 데이터의 복사본을 저장하여 이후 동일한 데이터의 재접근 속도를 향상시켜준다. React-Query는 캐싱을 통해 반복적인 비동기 데이터 호출을 방지하고 서버에 대한 부하를 줄여주는 장점이 있다. (fresh Data : 최신 데이터 stale Data : 오..

이번 프로젝트 로그인/회원가입 구현을 맡으면서 사용한 react-hook-form에 대해 정리해보려고 합니다. react-hook-form은 form의 validation을 도와주는 라이브러리로 성능적으로도 더 뛰어나다고 합니다만 자세한 건 공식문서를 참고해보시는 걸로!! 📌 참고로 - 쓰면서 굉장히 유용했고 자주 이용했던 부분 위주로 설명할 예정입니다. - 공식문서는 다크모드로 보시길 추천드립니다. 1. useForm form을 만들기 위해서는 useForm을 이용해야합니다. const { register } = useForm({ mode: 'onSubmit', reValidateMode: 'onChange', defaultValues: {}, resolver: undefined, context: un..

앞서 jwt에 대한 개념들과 구현해야 될 것들을 정리하는 시간을 가졌었다. 이를 토대로 구현을 해보면 되지만 사실 보안과 관련해서 고려해야할 사항들도 굉장히 많았다. 인증 유지 말 그대로 사용자가 로그인 상태를 계속 유지하도록 해주는 개념입니다. 인증 유지를 통해서 화면이 전환될 때마다 매번 로그인해야되는 번거로움을 덜어주고 서버에서 매번 요청에 대해 사용자의 정보를 읽어와서 확인하는 과정을 거칠 필요가 없어집니다. 따라서, 접속 시에 로그인 과정을 통해 인증 받은 사용자는 사용자의 권한 정보 등을 쉽고 빠르게 접근 가능한 방식으로 보관하고 로그인 된 사용자를 식별하는 인증 키를 발급하고 이 인증 키를 이용해서 계속 요청을 보내는 방식인데 사실 요즘 많이 이용하는 방식이기도 하고 어찌보면 당연하지만 서비..

이번 프로젝트에서 로그인 및 회원가입 구현 담당을 맡게되면서 많이 헤메었던 소셜로그인 구현 방법을 정리해보는 시간을 가져보겠습니다. 일단, 저희는 총 2가지 소셜 로그인 기능을 추가하였고 - 카카오, 네이버 그 중 카카오 로그인 구현을 먼저 시작해보겠습니다! 사실 레퍼런스라면 많은 검색도 도움이 되었지만 그냥 카카오 공식문서를 차근차근 읽어보았던 게 가장 큰 도움이 되지 않았나..라는 생각입니다. 구현하기 전에 전체적인 흐름을 이해하기 위해서 꼭 한번 읽어보시길 바랍니다. 저 같은 경우 추가로 api 명세서도 수정해가면서 읽으니 금방 이해가 갔었던 것 같네요! 참고로 - 카카오 개발자 센터에서 client_id, redirect_uri 등 기본적인것들은 먼저 설정하셔야 됩니다. - REST API KEY..

이번 팀프로젝트에서 로그인/회원가입 구현 페이지를 맡게 되었다. 사실 첫 팀플인지라 개인프로젝트때와는 달리 백엔드 분들과의 소통도 굉장히 중요하다고 느꼈고 모든 게 처음이라 오랜만에 블로그 글을 작성하면서 끄적끄적,, 내용이나 생각 정리할 필요성도 뼈저리게 느끼게 되었다..ㅋㅋ 개인프로젝트에서는 기본 로그인과 소셜로그인(google)을 이용하였다. 사실 firebase 라는 NoSQL을 처음 이용해보았고 생각보다 쉬웠다라고 생각해서 손쉽게 구현할 줄 알았지만 백엔드 지식이 무지한지라... 백엔드 분들이 알려주신 기본적인 로그인 구현 형식은 다음과 같다. 로그인 방식 회원 아이디, 패스워드 입력 JWT 토큰 발행 ( 유지 시간 5 ~ 6 hour ) Refresh 토큰은 추가 행동때 새로고침 사이트 내에서..

2. 데이터 입출력 구현 2-1. 데이터 전환 데이터 전환 - 운영 중인 기본 정보 시스템에 축적된 데이터를 추출하여 새로 개발할 정보 시스템에서 운영할 수 있도록 변환한 후, 적재하는 과정 - ETL (Extraction, Transformation, Load) - Data Migration(데이터 이행, 데이터 이관) 이라고도 한다. 데이터 전환 계획서 - 데이터 전환에 필요한 모든 계획을 기록하는 문서 - 항목 - 개요 - 데이터 전환 대상 및 범위 - 환경 구성 - 조직 및 역할 - 일정 - 방안 - 데이터 정비 방안 - 비상 계획 - 데이터 복구 대책 2-2. 데이터 검증 데이터 검증 - 원천 시스템의 데이터 -> 목적 시스템의 데이터로 전환하는 과정이 정상적으로 수행되었는지 확인하는 과정 - ..

Form과 제어 컴포넌트 Form element 폼 요소는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다. 그러나 기본적으로 리액트에서도 state를 이용하여 변경된 상태를 setState를 통해 업데이트를 하는데 그렇다면 이 둘은 어떻게 같이 쓰이면서 관리할 수 있을까?? 💡바로 제어 컴포넌트를 이용하는 것이다. 제어 컴포넌트란? 데이터를 변경할 수 있는 모든 방법에 대해 이벤트 헨들러를 작성하고 React 컴포넌트를 통해 모든 입력 상태를 연결하는 방식으로 기존에 우리가 사용하던 handle~ 방법이라고 이해하면 된다. 그러나 이벤트 헨들러 작성이 많아지게 된다면 굉장히 번거롭기 때문에 다른 방식으로도 폼 요소의 업데이트 구현이 가능하다. export default fu..