오랜만의 포스팅이지만...길게 적을 것은 아니고 개발도중 어이없던 에러가 하나 생겨나 짧게 포스팅을 해볼까 한다.   프로필 페이지를 개발하던 도중 분명히  로컬 테스트 환경에선 잘만 나오던 성별아이콘이 빌드 이후 EC2에서 배포 중에는 이미지를 불러오지 않는 버그가 터진 것이다. ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 간단하지만 로직을 보여주자면  아이콘으로 사용할 사진의 이름을 FEMALE과 MALE이라는 대문자. png로 저장을 하였다.굳이 대문자로 저장되어 있는 이유는보시다시피 우리 백엔드 서버가 로그인한 유저의 성별정보를 보내줄 때 이렇게 대문자문자열로 성별을 보내 주기 때문이다. 따라서나는 따로 if 로직을 추가할 필요 없이 src를 설정하는 부분에서 링크에서 성별 부분을 데이터 통신으로 받아와MALE..

검색기능! 기존의 검색기능 구현중에 의견이 나왔기에 반영을 해보려고 했다. 기존의 작품검색의 로직은 움짤과 같이 검색 Input 창에 검색어를 입력후 search 버튼을 눌러야 검색 로직이 작동해 작품정보를 받아와 결과로 뿌려주게 된다. 원하는 동작! 원하는 동작의 버전은 검색버튼을 누르는 추가동작없이 input 창에 검색어를 입력하면 실시간 반영되어 검색결과가 나오길 희망했다. 하지만 이기능의 구현을 생각하다보니 문제점이 생겼다. 생겨난 문제점! 이러한 동작을 생각해 검색어를 입력할때마다 감지하여 useEffect 기능을 사용해 search() 통신컴포넌트를 실행시키는 로직을 설계해봤다. 하지만 이렇게 간단히 구성하니 검색단어의 구성글자 한글자마다 통신이 오고가 엄청난 자원낭비가 생긴다는걸 인지했다. ..

들어가기에 앞서... 기초적인 회원로그인 기능은 이미 해봤던 기능이기에 별다른 어려움 없이 완료를 하였지만 소셜로그인은 처음 시도해보는것이기도 하며 일반적으로 서칭을 해 나왔던 여타 일반적인 다른 프로젝트와는 조금 다른 부분이 있다고 생각하기에 포스팅을 하기로 했다... 소셜로그인의 구조 일반적으로 진행하는 소셜로그인의 구조라고한다 리액트 (프론트 클라이언트) 측에서 카카오에 api키등이 포함된 url 로 푸쉬를 해 카카오측에서 보내주는 인가코드를 전달받고 전달받은 인가코드를 백앤드 서버측에 보내줘 백앤드 서버가 토큰을 발행받아 우리서버의 엑세스토큰을 발행해 리액트 측에 전달해주는 과정이다. 소셜로그인 구현에 대해 간단히 구글링을 해보았을때도 대부분의 사용자들이 이러한 구조방식을 사용하고있었다. 하지만 ..

들어가기에 앞서.. 본격적으로 프로젝트의 틀을 마련하기 전에 AWS 서버에 배포 자동화 프로세스를 구현하고 시작을 하기로 하였다. AWS 에 배포를 해본적은 있지만 빌드 파일 만 올려 작동시키는것은 기존에 전체 파일을 전부 업로드 시켜 구동 시키는것보다 효율적이라고 생각이 들었다. CI 와 CD 란? 이제 막 프로젝트를 시작한 나에겐 이러한 용어들이 커다란 장벽으로 다가오는 느낌이다. 하지만 지금까지 배웠던 내용들도 부르는 용어가 생소 했을 뿐이지 그렇게 까지 어려웠던 내용은 없었던 경험을 생각해 간단히 검색을 해보았다. CI (Continuous Integration) 지속적인 통합 간단히 말하자면 빌드 및 테스트의 자동화를 의미한다. 프로젝트의 인원이 많다면 각자의 브랜치에서 개발을 진행을 하다가 하..

친구들과 팀플을 시작! IMAD 라는 영화리뷰 어플리케이션을 내가 팀플에 참여해서 웹버젼도 제작하기로 하였다. 우선 기초적인 API 부터 사용을 해보기로 하였다. 로그인 API 를 사용해서 로그인 토큰을 제공받고 받은 토큰을 헤더에 넣어 회원정보를 받아오는것이 목표이다! 아직 테스트 환경이기때문에 필요한 리소스만 활용해 CSS 없이 화면을 구성했다. 로그인 을 할 화면이다. 로그인후 회원정보를 조회해 나열한 모습이다. 로그인 페이지의 로직부 import { ChangeEvent, useState } from "react"; import LoginPageUI from "./login_presenter"; import axios from "axios"; import { useRouter } from "nex..

UI 라이브러리란 ? UI 라이브러리란 우리가 지금껏 개발을 하며 만들어낸 기본적인 버튼디자인, 아이콘, 별점, 달력기능, 등 여러 UI적인요소를 라이브러리 모듈 개발을 해놓아 우리가 원할때 직접 꺼내어 사용할수있는것을 말한다. 이를 잘만이용하면 실제 개발을 할때 시간을 엄청나게 단축시킬수 있고 코드의 단축화를 하기에도 수월하다. 라이브러리 종류 라이브러리 종류에는 여러가지가 있지만 오늘은 제일 유명한 것을 통해 기본적인 활용 방법을 알아볼것이다. ANTD https://ant.design/ Ant Design - The world's second most popular React UI framework An enterprise-class UI design language and React UI libr..