profile
Develop System, Develop Life, Develop Myself
post-thumbnail

SENTENCE U | Day 33

스타일 코드에서 컨벤션이 존재한다는 사실일반 CSS나 SCSS를 작성 할 때에는 CSS Sort 익스텐션을 사용해서 쉽게 정렬했지만 지금 이 프로젝트는 emotion을 사용해 css-in-js형식으로 작성하고있다. 그래서 기본적인 스타일코드의 문법이 이런식이다.

약 4시간 전
·
0개의 댓글
·
post-thumbnail

SENTENCE U | Day 30

유저들 대부분 모바일 환경에서 사용하고있어, PWA(Progressive Web App)를 추가했다. 보통 CRA로 리액트 환경을 만들때 PWA를 사용하지만, 나는 CRA도 사용하지 않았고 이미 개발도 어느정도 완료가 된 상태여서 PWA를 추가하는 방식으로 찾아봤다

3일 전
·
0개의 댓글
·
post-thumbnail

Interview | 인생 첫 개발자 면접

너무 긴장하고 긴장하고 긴장했다.서류합격 후 1차면접을 화상면접으로 진행했다.크게 세 가지의 시간으로 나눠진 것 같은데 자기소개 및 진로 등 - 기술질문 - 질의응답 순으로 진행됐다.현재 내가 성장하고 있는 과정과 진행하고있는 프로젝트를 바탕으로 나의 배움의 자세와 열

4일 전
·
0개의 댓글
·
post-thumbnail

SENTENCE U | Day 27

수정 버튼 클릭 시 flag State 변경으로 수정모드로 변경한다. 포스트 변경과 동일한 구조로 유저명과 유저타이틀도 변경된 내용을 POST로 서버로 보낸다. 계정 삭제 기능은 포스트와 댓글 삭제와 동일하지만, 해당 이름의 모든 포스트를 삭제하는 과정을 추가함.

6일 전
·
0개의 댓글
·
post-thumbnail

SENTENCE U | Day 26

서버 하드에 저장하면 서버 재배포 시 새로 생긴 경로는 모조리 삭제되서 초기화된다. 이 문제를 마주하고 처음에는 서버를 재배포 할 때마다 서버에 있는 새로 생긴 폴더를 다 다운받으면 되지 않을까? 하는 생각을 했다.

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

SENTENCE U | Day 23

multer를 사용해보자 이미지 업로드 버튼 클릭 시 파일을 첨부할 수 있도록 input태그를 사용했다. `onUploadHandler` 함수 실행 시 유저가 input창에서 선택했던 파일을 FormData를 사용해 `avatar`라는 키의 값으로 넣어준다.

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

SENTENCE U | Day 22

왜? 이제와서?기존의 Life Is a Sentence, 즉 LIS 는 독특하고 기억에 남기 때문에 좋은 옵션이지만, 웹이 무엇을 하는지 처음에는 사용자에게 명확하지 않을 수 있다고 생각했다.제작 하면서도 더 좋은 제목을 생각했고 SentenceU는 문장 공유 서비스에

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

SENTENCE U | Day 17

최신글 처럼 날짜별로 보이면 좋을 것 같은 리스트는 섹션별로 나눠서 보여주는 것이 좋을 것 같았다.dayjs를 사용해서 postList라는 매개변수를 받아 그 글의 createdAt을 최신순으로 MM월 DD일 ddd요일 형태로 새로운 배열에 추가한다.사용하려는 컴포넌트

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

SENTENCE U | Day 16

홈페이지와 개인 프로필 페이지의 UI는 완성했다.다이어리 페이지에는 캘린더와 유저 본인만 볼수있는 다이어리 리스트를 추가할 것이고, 요청페이지에는 관리자에게 보낼수있는 요청사항을 담은 Form을 추가할 것이다.기존에 서버에서 res.data를 가지고와 useQuery의

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

SENTENCE U | Day 15

일단 수정/삭제 기능을 추가하기 위해서 post카드를 클릭했을 때 수정버튼과 삭제버튼이 나오도록 구현했다.post카드를 눌렀을때 높이를 조절하는 것은 ref와 css를 사용해서 적용했다.처음에는 state를 사용해서 emotion props로 보냈는데, state가 바

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

SENTENCE U | Day 14

일단 완성본부터layout은 아래와 같이 나눴다.상단에는 NavBar와 네이버 명언에서 크롤링해온 데이터가나오는 롤링배너를 위치시켰다.메뉴의 구성은 아래와 같이 나눴다.Write : 글쓰기Collection : 좋아요 누른 글만 모아보는 페이지Diary : 한줄일기를

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

SENTENCE U | Day 13

NavBar의 프로필 부분을 모달창의 컴포넌트는 만들어놨지만 작동을 안해서 수정할 경 스타일을 적용했다.약간 어두운 흰색을 배경으로 채도가 조금 빠진 검정색을 이용했다.유저프로필쪽에 호버를 하면 메뉴가 내려오도록 꾸몄다.로그인 하지 않은 상태의 기본 모습로그인 한 상태

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

SENTENCE U | Day 12

UI는 아래와 같이 스타일을 적용했다.Like 버튼의 데이터는 글, 날짜, 작성자와 동일하게 가져왔다.Like 버튼은 데이터만 가져오면 끝나는게 아니다. 누를 때 마다 데이터가 업데이트 되어야 하고, 이미 눌렀다면 다시 뺀 값이 업데이트 되어야한다.api는 게시물 번호

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

SENTENCE U | Day 11

전체글을 가져오는 기능을 필요로 하는 페이지가 점점 많아지다보니 페이지마다 동일한 코드를 작성할 수 없었다.그래서 Hook으로 만들어 필요한 정보를 리턴해 원하는 페이지에서 데이터를 가져가다 쓸 수 있도록 했다.문제는 useQuery로 받아온 데이터는 객체로 받는데 보

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

SENTENCE U | Day 10

서버에서 전체 유저 리스트를 받아와 현재 온라인인 유저만 불이 들어오도록 했다.일단 useQuery를 사용한 서버의 전체 유저 데이터를 받아왔다.그리고 실시간으로 접속중인 유저의 데이터는 socket.io를 사용해서 가져오고 allUsers,onlineList는 모두

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

SENTENCE U | Day 9

socketio로 유저 접속 시 백에서 배열에 저장해놨다가 중복검사를 해서 돌려주는 코드를 작성했었다.그 배열을 돌려주는 객체에서 토큰과 유저명을 가져와 로그인중인지 확인 하는 방법을 선택했지만, 그러려면 useQuery랑 같이 사용해야하고 그 과정이 너무 복잡했다.s

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

SENTENCE U | Day 8

글을 누르면 해당 글의 페이지로 이동되는 기능을 추가했다.일단 글을 누르면 서버로 글의 번호를 보내고몽고디비에서 params의 id와 게시물의 번호가 동일한 글을 가져와서 돌려준다.새 글을 생성할 때 글 번호를 랜덤으로 생성하고, 생성할 때 dayjs로 연,월,일 포맷

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

SENTENCE U | Day 7

메인 랜딩페이지를 그냥 기본적인 구조로 만들었다.NavBar: 로고와 로그인/로그아웃/내정보 기능Write: 바로 글 작성 할 수 있는 공간TopPosts: 좋아요를 많이 받은 순서로 정렬된 글RecentPosts: 최근에 등록된 순서로 정렬된 글UsersStatus:

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

SENTENCE U | Day 6

레드핫 토스트 라이브러리를 설치해서 성공/실패 시 토스트알림으로 나오게 구현했다.예를들어 로그인 컴포넌트에서 토스트를 하면 랜딩페이지로 넘어가면서 토스트가 먹통이 되는 경우가 생겼는데, 이때 각페이지마자 Toast Provider를 추가하는게 아니라 메인 App컴포넌트

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

SENTENCE U | Day 5

디자이너 구합니다....유저 로그인 상태 쿼리 키 관리하는 커스텀 훅유저 정보 가져오는 쿼리 키 관리하는 커스텀 훅이렇게 두 개 만들어서 필요한 컴포넌트나 페이지에서 깔끔하게 두줄로 원하는 데이터를 가져올 수 있게 됐다.Emotion vs MUI or Bootstrap

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