profile
𝙸 𝚊𝚖 𝚊 𝚌𝚞𝚛𝚒𝚘𝚞𝚜 𝚍𝚎𝚟𝚎𝚕𝚘𝚙𝚎𝚛 𝚠𝚑𝚘 𝚎𝚗𝚓𝚘𝚢𝚜 𝚍𝚎𝚏𝚒𝚗𝚒𝚗𝚐 𝚊 𝚙𝚛𝚘𝚋𝚕𝚎𝚖. 🇰🇷👩🏻‍💻
post-thumbnail

리덕스에서 리코일로

프로젝트에서 기존에 상태관리를 위해 써왔던것은 리덕스 입니다.그러나 저희 프로젝트에는 아직 대규모로 진행 하지 않았고 불필요한 보일러 플레이트가 많은 리덕스보다는 리코일을 사용이 더 적합해서사실 내가 너무 써보고 싶었음이제 로그인 페이지에서로그인을 상태를 useReco

2023년 9월 2일
·
0개의 댓글
·
post-thumbnail

리액트 SSE 연결

오늘은 SSE 연결을 통해 서버에서 댓글이나 메세지를 받았을때 바로 알림을 받을 수 있는 기능을 구현 했다.백엔드쪽 자료는 많았지만 프론트엔드쪽은 자료가 적어서 너무나 힘들었기에 많은 사람들에게 도움이 되면 좋겠지만 나의 글솜씨는 좋지 않기 때문에 너무 기대를 안했으면

2023년 8월 31일
·
0개의 댓글
·
post-thumbnail

웹소켓 과 SSE(Server-Sent-Event) 차이점 알아보고 사용해보기

최근에 어떤 이벤트가 생겼을 때 client side에 ui를 업데이트해야 되는 기능을 구현해야 됐었습니다. 처음에는 이런 경우에 사용할 수 있는 것이 socket 밖에 몰라서 socket.io를 사용해서 socket으로 만들다가 웹소켓을 공부하다가 보니 SSE(Se

2023년 8월 24일
·
0개의 댓글
·

input은 줄넘김이 안된다

포스트 페이지를 리펙토링 과정중에신경안쓴 부분이 있는데 내용을 기입할때 줄바꿈이 안되는것이었다....인풋태그가 줄바꿈이 안된다는걸 처음 알았음...그래서 textarea로 바꾸어 주었다 근데 왜 플레이홀더 색깔이 안바뀌냐??그건 이렇게 넣어줘야 바뀜 이것땜에 1시간동안

2023년 8월 21일
·
0개의 댓글
·
post-thumbnail

네비게이션바 만들기 feat.에어비앤비

프로젝트를 진행중 디자이너님에게 생전 처음 보는 내비게이션바를 만들어 달라는 미션을 받았다딱보니 쉽지 안겠구나라는걸 느끼고 라이브러리가 있나 찾아 봤지만 영 원하는 ui를 찾기 못했고하기 싫었지만 수작업으로 만들어야 한다는걸 알게 되었다.레퍼런스가 필요했는데 에어비앤비

2023년 8월 15일
·
1개의 댓글
·

메인 페이지가 데이터를 받지 못할때

갑자기 발견한 오류처음 메인 페이지를 랜더링 하면 서버에서 데이터를 잘가져오지만다른 페이지로 갔다가 뒤로가기로 돌아가면 이상하게 로딩이 되지 않는것그래서 서버에서 데이터를 가져올 시간이 없어 리액트는 데이터가 없어 에러를 뛰어 버렸다.데이터를 맵으로 뿌리는곳에 옵셔널체

2023년 8월 8일
·
0개의 댓글
·
post-thumbnail

카카오톡 소셜 로그인 {리액트}

1.버튼 눌러 로그인화면 띄우기2.카카오에게 인가 코드 받아오기3.인가코드는 주소의 쿼리스트링에 담아져서 제공된다. 이걸 파싱해서 백엔드에게 전달한다.4.(백엔드는 우리가 준 코드를 알아서 처리해서 토큰을 준다.)5.그 토큰을 받아서 로그인을 유지한다.버튼을 누르면 카

2023년 8월 6일
·
0개의 댓글
·

Redirection

2023년 8월 2일
·
0개의 댓글
·
post-thumbnail

useTransition

비동기로 뭔가를 할때 지연이 있을때 그 지연을 직접 세팅해서 넣어줄수 있는 새로운 훅처음 들었을때 이걸 스피너의 로딩 화면을 일부러 0.5초 정도 보여주면 어떨까라는 생각이 들어서저장 해둠나중에 프로젝트에서 로딩 스피너를 사용할때 로딩화면을 0.5초정도 더 보여줘서로딩

2023년 8월 1일
·
1개의 댓글
·
post-thumbnail

오늘의집 클론 코딩 결과물

오늘의집 클론 코딩의 결과물이 완성되었습니다.실제 작업시간이 5일정도라서 밤을 새는 경우도 많았습니다.그중에 좋아요와 스크랩을 구현하는데 상당히 까다로웠습니다.좋아요와 스크랩 갯수는 잘전달되는데 좋아요가 되면 파란색으로 유지해야 하는데새로고침을 하면 다시 원래색으로 돌

2023년 7월 30일
·
0개의 댓글
·

좋아요 기능 비동기를 리액트 쿼리로

// -----------------------댓글 추가 기능----------------------------// // 댓글 추가 기능// const handleCommentSubmit = async (e) => {// e.preventDefault

2023년 7월 26일
·
0개의 댓글
·

좋아요 비동기 리액트로

// -----------------------좋아요 기능----------------------------// const handleLikeButton = async () => {// try {// const accessToken = getCo

2023년 7월 26일
·
0개의 댓글
·
post-thumbnail

기존 비동기 통신에서 리액트 쿼리로

위 와 같은 기존의 비동기 통신을 리액트 쿼리로 바꿔 보는 작업을 시작했습니다.팀프로젝틀르 하면서 통신 방법의 통일이 필요했습니다.아래는 리액트 쿼리로 바꿔본 위의 코드리액트 쿼리는 useMutation라는 훅으로 동작을 처리합니다.주로 데이터를 변경하는 요청 (생성,

2023년 7월 25일
·
0개의 댓글
·
post-thumbnail

로그인 페이지 서버와 통신

서버와 연결을 위해 코드를 작성하고 아래 로그인을 시도해 보았지만 로그인 버튼을 클릭하는 순간 리다이렉션이 되는 현상이 계속 되었다.왜 이럴까 시도1: 백엔드 서버와의 통신 점검결과: 게시판의 GET은 되므로 아님시도2: consloe.log 찍어보기결과: 콘솔은 받는

2023년 7월 24일
·
0개의 댓글
·
post-thumbnail

오늘의집 클론코딩

어제 로그인 페이지에 이어 오늘은 집사진이라는 상세페이지를 구현 했습니다.틱히 어려웠던 점은 오른쪽에 있는 4개의 버튼들의 위치를 레이아웃하는것이 힘들었습니다.CSS는 생각대로 잘될때는 너무나 재미있지만 하나가 틀어지면 레이아웃이 산으로 가는 현상은끊었던 담배를 생각나

2023년 7월 24일
·
1개의 댓글
·

Git 협업 규칙

main - dev - front, back - feature\_개인단위깃 저장소 관리프론트 저장소 : origin : master / dev / feature\_백 저장소 : origin : master / dev / feature\_개별 저장소 : origin :

2023년 7월 24일
·
0개의 댓글
·
post-thumbnail

미니프로젝트 클론코딩

이번주 나는 오늘의집 클론코딩을 시작했다프론트와 백엔드로 나누어서작업을 진행했고나는 그중에 우선 로그인을 구현했다. 강의로만 클론 코딩을 해왔는데 실제로 내가 사이트를 보고 클론코딩을 해보는건 처음이었다.이전 프로젝트에서는 나만의 생각으로 그려왔던것에 반해 이미 만들어

2023년 7월 23일
·
0개의 댓글
·
post-thumbnail

::before와::after 의 이해

여기 ::after는 뭘까 모던 스타일과 아파트 사이에 가상요소를 만들어 준다 본문1\. 가상요소 ::before, ::after의 정의1.1) 가상 요소(Pseudo-Element)란?– 가상클래스(Pseudo-Class)는,별도의 class를 지정하지 않아도 지정한

2023년 7월 23일
·
0개의 댓글
·
post-thumbnail

리액트 쿼리 refetch (실시간업데

왜 댓글을 작성했는데 새로고침을 하기 전까지 업데이트가 되지 않는걸까? 1번째 시도 결과:실패 원인:실제로는 onMutate 옵션을 사용하는 것으로만으로는 댓글을 작성하자마자 즉시 업데이트되지는 않습니다. onMutate 옵션은 mutate 함수가 호출된 직후에

2023년 7월 19일
·
0개의 댓글
·

리액트 쿼리 쿠키에서 토큰 받기

2023년 7월 19일
·
1개의 댓글
·