전체 글89 Numble 챌린지 회고록 넘블에서 진행한 연계 챌린지에 참여하였습니다! ✔ 프로젝트 소개 저희 팀에서는 동물에 관한 짧은 영상을 올리는 숏폼을 주제로 자신의 반려동물을 자랑하고 싶은사람! 혹은 반려동물을 키우고 싶지만 여건이 되지않은 사람들을 위해 영상을 직접 올리거나 모아 둘 수 있는 서비스를 기획하였습니다. ✔ 역할 담당 저는 이번 프로젝트에서 로그인 / 회원 가입 / 마이 페이지 / 관심 영상 조회 등 회원 계정과 관련된 부분을 담당하여 개발 하였습니다. 제가 구현한 api 명세는 다음과 같습니다. ✔ 사용한 라이브러리 와 이유 프레임워크 : React, Next.js style : postCSS 상태관리(server) : react-query 상태관리(client) : redux-toolkit SSR까지 구현이 목표였기에.. 2022. 5. 16. 토큰 기반의 로그인 인증 방법 이해하기 (JWT) 프로젝트를 진행하며 로그인 / 회원가입 부분을 담당하여 개발하게 되었습니다. 로그인을 구현하기 위해 공부한 내용을 정리하고 공유하고자 하는 목적으로 글을 작성합니다. 우선 사용자 로그인에 관한 이해를 위해 알아야 할 개념이 있습니다. 바로 인증과 인가 입니다. ✔ 인증(Authentication) 과 인가(Authorization) 인증(Authentication) 식별 가능한 정보로 서비스에 등록된 유저의 신원을 입증하는 과정 인가(Authorization) 인증된 사용자에 대하여 자원의 접근권한을 확인하는 것 개념만 정의한다면 추상적이라 구체적인 설명을 붙이자면 간단한 게시판 서비스가 있다고 가정하면 모든 사용자가 글을 읽을 수 있으나 글을 작성하려면 유저 정보가 필요합니다. 사용자는 로그인을 통해 .. 2022. 4. 30. 사용자 로그인 이해하기 (쿠키와 세션) ✔ 사용자 로그인? 우리가 사용하는 web은 http기반의 요청(request)과 응답(response)로 동작을 하게 됩니다. 즉, 서버와 클라이언트 사이에서 수많은 통신이 일어나게 됩니다. 웹 서버의 경우 수많은 클라이언트와 동시에 통신하게 되는데 이 과정에서 서버가 클라이언트의 요청을 식별할 필요가 있습니다. (예를 들어 장바구니 기능, 클라이언트 - 서버 간의 정보가 유지 되어야합니다.) 하지만 http의 특징 중 하나는 stateless하는 것 입니다. 즉, 각각의 요청(request)과 응답(response)은 독립적으로 일어나며 사용자의 상태를 유지 할 수 없습니다. 이를 해결하기 위해 http에서 사용자를 식별하기 위한 기술들이 많이 있습니다. 그 중에서도 가장 보편적으로 사용되는 것이 사.. 2022. 4. 25. [React 상태관리] react-query 입문 하기 https://www.youtube.com/watch?v=MArE6Hy371c&t=2195s react-query를 공부하기 위해 해당 영상을 보고 정리, 요약한 게시글 입니다. ✏️ FE 상태관리에 대해 redux, mobx, recoil 같은 라이브러리를 떠올릴 수 있음 상태란? 주어진 시간에 대해 시스템을 나타내는 것으로 언제든지 변경될 수 있음 즉, 문자열, 배열, 객체 등의 형태로 응용 프로그램에 저장된 데이터 => 개발자 입장에서는 관리해야하는 데이터들 모던 웹프론트엔드 개발에서 UI/UX의 중요성과 함께 프로덕트 규모가 많이 커지고 FE에서 수행하는 역할이 늘어남 -> 관리하는 상태가 많아짐 상태관리는? 시간의 흐름에 따라 변화하는 상태를 관리하는 것, React에선 단방향 바인딩이므로 Pr.. 2022. 4. 13. [정렬] 백준 2108 통계학 C++ https://www.acmicpc.net/problem/2108 2108번: 통계학 첫째 줄에 수의 개수 N(1 ≤ N ≤ 500,000)이 주어진다. 단, N은 홀수이다. 그 다음 N개의 줄에는 정수들이 주어진다. 입력되는 정수의 절댓값은 4,000을 넘지 않는다. www.acmicpc.net 풀이 : 예전에 풀었던 문제인데 재채점 되면서 틀렸다고 나와서 다시 풀어 봄 사실 틀렸다고 나온 이유는 산술 평균 구할 때 -0.xxxx 이런수를 반올림 할 때 -0으로 출력하는 문제 때문에 틀렸던 거였다. 근데 다시 보니 코드가 너무 지저분해서 첨부터 다시 풀었다. 사실 평균값, 중앙값, 범위 값 구하는 것 자체는 그리 어렵지 않다. 입력 받은 수 들을 vector에 push_back 해서 sort 함수로 정.. 2022. 4. 9. [11주차 스터디]49장-Babel과 Webpack 이요한 ES6+/ES.NEXT 개발환경 구축 Babel과 WebPack을 이용한 ES6+/ES.NEXT 개발 환경 구축 매년 새롭게 도입되는 ES6이상의 버전(ES6+)과 제안 단계에 있는 ES 제안 사양(ES.NEXT)은 브라우저에 따라 지원율이 제각각 따라서 최신 사양으로 프로젝트를 진행하려면 구형 브라우저에서 문제 없이 동작 시키기 위한 개발환경을 구축하는 것이 필요하다. 대부분의 프로젝트가 모듈을 사용하므로 모듈 로더도 필요하다. 다음과 같은 이유로 ESM 보다 별도의 모듈 로더를 사용하는 것이 일반적 IE를 포함한 구현 브라우저는 ESM을 지원하지 않는다. ESM을 사용하더라도 트랜스 파일링이나 번들링이 필요한 것은 변함 없음 ESM이 아직 지원하지 않는 기능(bare import 등..)이 존재 Babel Babel은 트랜스 파일링 도구.. 2022. 4. 8. 이전 1 2 3 4 5 6 ··· 15 다음
