profile
프론트엔드 개발자 꿈나무
post-thumbnail

[Project] Hobbyt - Pagination 개발하기

1. 데이터가 들어오고 있는 형식 api 요청은 아래와 같이 보내면 된다. http://생략/api/members/myPage/products?page=0&size=10 페이지네이션을 클릭 시 클릭한 버튼의 value 값(1을 눌렀음 1을, 2를 눌렀음 2를)을

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

[Project] Codetech - 사이트 시연 영상

서버 컴퓨터 문제로 배포 링크에 접속이 안 되는 걸 확인해 임시로 영상으로 대체합니다.유튜브 링크

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

[Mac] React-Native CLI 설정 및 Ruby update 적용하기

react native CLI 빠른 시작 가이드를 진행하면서 ruby를 업그레이드 해야 했는데 2.7.6 버전을 install 하고 rbenv global 2.7.6 으로 기본 버전을 설정한 뒤 ruby -v로 확인해 보면 버전이 바뀌지 않는 상황이었다.global

2023년 3월 14일
·
0개의 댓글
·

[Project] Hobbyt - WebSocket 과 stomp 이용하여 알림, 실시간 채팅 구현하기

typeScript, Next.js, WebSocket, stomp 사용알림 기능을 만들 때 서버와 클라이언트가 양방향 통신이 필요없다보니 SSE를 주로 사용하는 것 같다. 우리 프로젝트의 같은 경우에는 실시간 채팅 기능도 있기 때문에 어차피 WebSocket을 사용해

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

[Project] Hobbyt - useState 바로 적용 안 될 때 해결방법

프로젝트를 진행하면서 판매관리의 진행사항을 변경하는 드롭박스 기능을 구현하게 되었다.드롭박스 안을 모두 button으로 만들고 해당 버튼을 클릭시 patch 요청이 가도록 구현하였다.하지만 버튼을 두 번 클릭해야 useState의 clickName 이 클릭한 값으로 변

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

[Project] Hobbyt - map() 사용해서 자식 컴포넌트에 props 2개 내려주는 법

개인홈 페이지에 내가 쓴 댓글 리스트를 뽑는 와중에 생긴 에러 처리 방법입니다.api가 아직 준비되지 않아 프론트에서 테스트를 해 보기 위해 아래와 같이 진행하였습니다. item의 유티크한 id 값만 자식 컴포넌트에서 필요했습니다. id 값을 자식 컴포넌트에서 patc

2023년 1월 16일
·
0개의 댓글
·

[Project] Hobbyt - Proxy 설정하는 법 (CORS, 404 not found)

Next.js와 typescript 를 사용하고 있습니다.프로젝트를 진행하면서 주도적으로 나서서 proxy 설정을 적용해 본적이 없어서 이번에 제대로 어려움을 겪게 되었네요.처음엔 http-proxy-middleware를 다운 받아 설정해 봤지만 404 not foun

2023년 1월 11일
·
0개의 댓글
·

[Project] Hobbyt - 내 컴퓨터에서 Server 실행하기

이번 프로젝트는 AWS를 사용하기 때문에 빌드가 굉장히 괴로울 것 같다... (사실 pre 프로젝트에서도 AWS를 사용했었는데 그땐 휘몰아치듯 지나가서 기억에 남는 게 별로 없다. 이래서 블로깅을 열심히 하라는 건가보다) 자동 빌드되던 젠킨스이 너무나도 그립다...

2023년 1월 11일
·
0개의 댓글
·

[Recoil] Recoil 공부 1

RecoilRoot는 여러개가 공존할 수 있다. 컴포넌트에서 recoil과 연동할 때 해당 컴포넌트와 가장 가까이 있는 RecoilRoot를 사용하면 된다. atom은 recoil에서 상태를 정의하는 방법이다. 상태를 정의할 때 고유값인 key를 설정하고, 기본값

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

[Next.js] 공부 4일차

\_app.js 에 너무 많은 컴포넌트를 임포트 하는 것을 원치 않을 때 컴포넌트 폴더에서 Layout.js 파일을 만들어 사용할 수 있다.이 헤드 부분을 바꿀 수 있는 태그이다!원래는 localhost:3000 이라고 뜨는 부분을 원하는 대로 바꿔줄 수 있는데 그때

2023년 1월 9일
·
0개의 댓글
·

[Recycle] Tab 컴포넌트 재사용하기

부모 컴포넌트에서 .map() 을 사용하지 않고 자식 컴포넌트에서 사용할 경우Tab 컴포넌트를 재사용하기 위해 TabARR.tsx 파일에 탭 메뉴들을 배열로 만들어줌부모 컴포넌트에서 자식 컴포넌트로 배열들을 props로 내려보냄자식 컴포넌트에서 props로 받고 int

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

[Project] - Hobbyt Error 해결법

tsconfig.json 파일에서 뜬금없이 발생. VScode를 다시 실행하는 방법으로 해결 가능.

2022년 12월 28일
·
0개의 댓글
·

[Error] esLint Parsing Error : can not file read

해당 프로젝트는 Next.js + typescript 를 사용한 프로젝트이다. .eslintrc.js 파일에추가 후 저장하고 VScode를 껐다가 다시 켜면 에러 해결됨.

2022년 12월 27일
·
0개의 댓글
·

[Project] Hobbyt - 개발환경 세팅

새로 시작하는 프로젝트 우당탕탕 개발환경 세팅하기처음엔 프론트 개발 세팅을 모두 끝내고 push를 했었는데 server 폴더만 올라가지고, client 폴더는 올라가지지 않아서 당황했다.이런저런 시도를 해 보다가 client 폴더, server 폴더에 example.t

2022년 12월 26일
·
0개의 댓글
·

[Next.js] 공부 3일차

next.js 에서 css를 적용하는 방법으로 모듈 방법과 jsx 방법을 알게 되었다. jsx 방법은 처음 보는 방법이라 굉장히 생소했는데 tailwind css를 사용하여 포트폴리오 웹사이트를 만들 생각이었기 때문에 이런 방법도 있구나~ 하고 넘어가려고 한다.클래스

2022년 12월 25일
·
0개의 댓글
·
post-thumbnail

[Next.js] 공부 2일차

일본 여행을 다녀온 후 여독을 풀고 다시 시작하는 next.js 공부!react-router-dom 에서 사용하던 Link 태그를 다시 만나게 되었다. a 태그를 사용하게 되면 페이지가 처음부터 새로 렌더링 되기 때문에 렌더링 되는데 시간이 오래 걸리고, ESLint

2022년 12월 24일
·
0개의 댓글
·

[Next.js] 공부 1일차

이번 사이드 프로젝트에선 Next.js를 사용해 보기로 정했기 때문에 미리 Next.js를 공부하려고 강의를 펼쳐보았다.마침 노마더 코더에서 Next.js 강의를 무료로 배포하고 있었다. (땡큐!)react를 사용하면 react router DOM 을 사용해, rout

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

[Project] 코드스테이츠 SEB 40기 메인 프로젝트 회고

타입스크립트 :주스탠드 : 토스트 ui 에디터 :테일윈드 : 프로젝트를 시작하기 전 어떤 툴을 사용할 것인가에 대해 팀원들과 상의 후 결정이 났을 때 타입스크립트, 주스탠드, 테일윈드 모두 처음 사용하는 것이었기 때문에 걱정이 많았다. 실제로도 타입스크립트를 사용하며

2022년 12월 3일
·
0개의 댓글
·
post-thumbnail

[Project] Codetech - QA

가입 안 한 이메일로 로그인 눌렀을 때 “가입되지 않은 이메일입니다” 모달창 뜨면 좋을 것 같다비밀번호 잘못 입력하고 로그인 눌렀을 때 “잘못된 비밀번호 입니다” 모달창 뜨면 좋을 것 같다구글 auth 요청 시 => 엑세스 차단됨: 이 앱에서 잘못된 요청을 전송했으므로

2022년 12월 2일
·
0개의 댓글
·
post-thumbnail

유효성 검사

2글자 이상, 20글자 미만/(\\w-.+)@((\[0-9{1,3}.0-9{1,3}.0-9{1,3}.)|((\\w-+.)+))(a-zA-Z{2,4}|0-9{1,3})(]?)$/;요청바디 : ( 이메일 )=> 이메일이 유효하다면 상태코드 200, 이메일이 유효하지 않다면

2022년 12월 1일
·
0개의 댓글
·