프론트엔드

이번에 구현하고 있는 서비스에서는 카카오와 구글, 이렇게 두 가지의 OAuth를 지원하고 있다.나는 그 중에서도 카카오를 맡게 되었으나, 구글의 OAuth 플로우도 거의 동일한 것 같아 전반적인 OAuth에 대한 공부를 해보았다.프론트 단에서 처리하는 방법만 알기보다는, 서버에서는 어떤 과정을 거치는 지도 알아야할 것 같아서 백엔드를 담당하시는 분과도 이야기한 후 정리해보았다. 그렇다면 우선 OAuth가 무엇인지부터 알아보자 ! OAuth란?OAuth (Open Authorization)는 제 3자 애플리케이션이 사용자의 비밀번호를 알지 않고도 해당 사용자의 정보를 안전하게 접근할 수 있게 해주는 인증을 위한 개방형 표준 프로토콜이다.이를 통해 로그인 정보와 같은 민감한 데이터를 노출하지 않고도, 다른 ..

기능적인 구현은 모두 끝이 났다.디자인도 같이 병행해서 개선하다보니, 생각보다 신경쓸 것들이 더 많았지만 그래도 마무리가 되고 보니 너무 뿌듯했다.하지만 본격적인 고민은 지금부터 시작이다. 내가 만든 웹 사이트가 성능적으로 얼마나 더 개선될 여지가 남았는지 잘 따져보아야 한다.구현했다 끝~! 하고 덮어놓고 보지 않으면 의미가 없지 않은가 !그래서 지금부터는 어떤 지점을 개선할 수 있을 지 한 번 리스트업 해보려고 한다. 1. 시작할 때 정한 컨벤션을 잘 지켰는가?함수의 정의 방식을 올바르게 사용하고 있는지네이밍 형식을 잘 지켰는지import , export 를 적절하게 하고 있는지 (export default)사용하기로 한 라이브러리를 통해 로직을 구현했는지폴더 구조는 올바르게 짜서 사용하고 있는지등 등..

어느덧 코드잇 스프린트의 마지막 프로젝트가 시작되었다.지금까지 마지막 프로젝트에 대한 이야기를 포스팅 한적이 없는 것 같은데, 중간 점검 느낌으로 한 번 정리하고 넘어가면 좋을 것 같아서 이번 포스팅의 주제로 들고 와보았다. FeedB 피드비웹 서비스의 이름은 '피드비(FeedB)', 배포된 토이 프로젝트를 게시하고 그에 대한 피드백을 사용자에게 받아볼 수 있는 사이트이다. 내가 만든 프로젝트가 실제 배포된 환경에서 문제가 있지는 않은지, 어느 지점에서 사용자 경험이 떨어지는지 제작자의 입장에서 알아보는 것은 한계가 있기 때문에, 이러한 프로젝트 주제를 잡게 되었다. 프로젝트를 홍보하고 게시하는 입장 뿐만 아니라, 다른 사람들이 어떤 주제로 토이 프로젝트를 진행하는지가 궁금한 사람 역시, 이 웹 서비스를..

캘린더와 함께 간단한 할 일을 메모할 수 있는 사이트를 만들어보자 생각한 지 언....(기억 안남)그래서 이번에 프로젝트도 끝났겠다, 프론트엔드 멘토에서 얻은 의욕을 여기에 써보자는 생각이 들었다. 리액트로 구현을 할까, 바닐라JS로 구현을 할까 고민을 했지만기본적인 자바스크립트에 익숙치 않은 상태에서 리액트로 들어갔던 것이 내심 불안했던 지라 이번에는 바닐라 JS로 구현해보기로 마음 먹었다!  우선 디자인부터 만들어보자! 원래는 프론트엔드 멘토에 있던 시안을 기반으로 만들어보려고 했는데, 조금 더 단순하고 깔끔한 디자인으로 만들고 싶어서 내가 처음부터 새로 만들어봤다!!구성은 아주 간단하다.이번 달을 확인할 수 있는 캘린더 부분 선택한 날짜의 일정을 확인하고 등록할 수 있는 사이드 바기본적인 HTML과..

프로젝트를 진행하고 코드를 작성하다보면, 상태 관리 라이브러리의 필요성을 느낄 때가 있다.현재 로그인한 유저의 정보, 다크 모드 라이트 모드 설정 등 생각보다 많은 부분에서 상태 관리 라이브러리의 필요성을 느꼈다. 주된 이유는, 너무 깊이 이어지는 Prop drilling이 이유였지만, 현재 상태값에 대한 인과 관계를 보다 쉽게 찾기 위해 라이브러리를 쓰고자 할 때도 있었다.(여러 컴포넌트에서 하나의 state를 핸들링하면, 현재의 state가 왜 그 값을 갖게 되었는지 찾기 어렵기 때문) 유명한 상태 관리 라이브러리들은 많았지만, 나는 라이브러리들 간의 차이를 알고 필요에 따라 적절한 것을 선택해서 사용하는 개발자가 되고 싶었다.그래서 상태 관리 라이브러리들의 공식문서를 읽고 사용해보면서, 그 구조들을..

이번에 프로젝트에서 페이지네이션을 버튼을 구현해봤다.다 구현해보고 나니 나름..? UI와 로직을 잘 분리한 것 같다는 생각이 들어서, 코드를 한 번 가지고 와봤다. 더보기- Next JS app router- tailwind- typescript [ 버튼 UI ] PagiNationButtonexport default const PagiNationButton = ({ currentPage, totalPage, handleCurrentPage, hiddenCount = false, // 두 번째 유형처럼 사용하기 위한 prop}: PagiNationButtonProps) => { return ( {!hiddenCount && ( {totalPage} ..

위클리 미션에서 리팩토링을 하고 싶은 부분이 아주 많다.그 중에서 한 두가지 정도를 뽑아서 매주 리팩토링을 해보자는 다짐을 했었는데, 이번주에는 모달을 리팩토링 해보기로 했다. 그래서, 멘토링 시간 때 모달 리팩토링에 대해서 이야기를 해봤고 context API만으로도 구현이 가능해보인다는 결론이 나서 이번 주차에 해보기로 마음을 먹었다..! 이전부터 상태관리를 위한 다양한 방법들을 공부하고 싶었기 때문에 바로 리팩토링에 들어갔다.그럼 바로, ContextAPI를 이용해서 어떻게 모달 리팩토링을 진행했는지 확인해보자~ ! 😊  Modal 컴포넌트 리팩토링이 필요하다고 생각한 이유우선, 왜 모달 컴포넌트를 리팩토링 하고 싶었는지에 대해 짚고 넘어가야할 것 같다.현재 모달 컴포넌트 구현을 위한 로직은 아래..

이번 주차의 요구사항은,저번 주차에 만들었던 Input Component를 이용해서 로그인 및 회원가입 기능을 완성하는 것이다.하지만,  react-hook-form을 적용하는 것이 심화 요구사항이기 때문에 이를 적용해서 구현해보았다. 요구사항의 세부사항이 많은 관계로 간략하게 정리했다!- input에서 focus out될 때 빈 값이거나 유효한 값이 아니면 에러메시지를 출력한다.- 모두 유효한 값이 입력되었을 때 로그인 및 회원가입 시도가 가능하고, api에 POST 요청을 보내 로그인 및 회워가입이 가능하면 folder 페이지로 이동한다.react-hook-form는 처음 써보는 라이브러리였기 때문에 적용하는 과정과 함께 공식 문서의 내용을 정리해보려고 한다   아직 난 아무것도 모르는 응애입니다😊..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Suite Landing Page FOCUS ON This small-ish HTML and CSS only landing page includes some interesting layout decisions. Perfect if you want to put your layout and responsive skills to the test! 반응형과 시안 안의 몇 가지 요소를 CSS로 구현하는게 재미있을 거라고 하네요! WHAT TO DO? - 두 번째 섹션과 footer 부분을 완성했다. - z-index에 대해서 생각한..

week13의 심화 요구사항을 이번 주차에 구현하기로 마음먹고, next.js로의 마이그레이션과 심화 요구사항을 구현했다.  심화 요구사항-  상단에 있던 링크 추가하기 영역이 가려져 보이지 않을 때 최하단에 링크 추가하기 영역을 고정하도록 만들었나요? - 푸터가 시작되는 지점에서는 최하단에 고정된 링크 추가하기 영역이 보이지 않도록 했나요? 이 요구사항과 함께, Intersection Observer를 이용해 구현해보라는 코멘트도 함께 달려있어서 사용해보았다 Intersection Observer 사용법위 요구사항에서 나는 folder 페이지 컴포넌트의 header와 footer을 주시 대상으로 지정해야 했다.// folder 페이지 구성  기본 HTML 태그를 사용했을 땐 바로 useRef()를..