사실 오늘 공부 계획을 전달했을 때는 이미지 드래그앤드랍 외에도 안읽은메시지 보여주는 기능도 하려고 했었다. 근데 이미지 드래그앤드랍에 시간이 좀 많이 소요돼서 결국 못했다 ㅜ 오늘 해본 것은, 이미지를 외부에서 드래그해서 드랍했을 때 바로 나타나게끔 하는 드래그앤드랍이다. DM과 채팅 모두에서 가능하게 했지만, 둘 다 하면 너무 길어지니까.. DM만 작성할 것이다. 1. DM 페이지 여기서 다른 부분은 전부 이전 포스팅에서 다뤘으므로 생략하고 onDrop과 onDragOver만 볼 것이다. 1-1. onDragOver 우선 dragOver 상태, 그러니까 현재 페이지에 드래그오버된 것이 있는지를 나타내기 위해 useState를 setDragOver과 함께 만들었다. onDragOver 함수를 보면, 1..

오늘 공부한 것은, Socket.io를 사용해서 실시간으로 채팅을 주고받는 DM 기능과 이름 옆에 3:57 PM, 11:18 PM과 같은 방식으로 보내는 시간을 표현하는 것을 구현하였다. 빨리 클론코딩을 끝내야 프로젝트를 시작할 수 있는데, 깊은 이해를 요구하기 때문에 진도가 좀 더디다. 빠르게 해봐야겠다. 위와 같은 페이지는, 내가 나에게 보내는 것으로 설정해뒀으나, 페이지를 두개 놓고 할 경우에는 실시간 채팅이 가능하다. 좀 느리긴 하지만 가능하다. 신기하지 않은가?? 1. useSocket custom Hook 기본적으로 socket.io의 사용은 이 useSocket에서 시작된다. Hook은 화면에 어떤 것을 건드리는 게 아니라 로직만 다루는 경우에 보통 사용한다(화면이 들어가더라도 상관은 없다...

글이 너무 길어질 것 같아서 나눠서 포스팅한다. 채널과 DM 목록을 만들었으므로 이제 각 페이지 내부에서 실질적으로 사용되는 채팅을 구현하기 전 먼저 채팅 박스와 내부 스타일링 먼저 구현해본다. 그 이후에 콘솔에 내가 작성한 DM을 띄우는 것까지 해볼 예정이다. 이전과 마찬가지로, 코드부터 보고 시작한다. 1. DM 페이지 내부 1-1. 프로필(gravatar 사용) GitHub를 이용해본 사람이라면 이러한 이모티콘을 많이 봤을 것이다. 이 이모티콘은 gravatar에서 제공하는 것으로, 라이브러리를 다운받아서 import해오면 누구나 손쉽게 사용할 수 있다. gravatar.url(email, options); 이런식으로 불러와서 사용할 수 있다. 이메일은 필수 옵션이다! {userData.nickna..

나는 팀원들과 프로젝트를 하거나 단순 의사소통을 할 때 특히 슬랙으로 소통하는 일이 잦아서 슬랙을 자주 사용한다. 물론 뭐 클론코딩이지만, 내가 사용하고 있는 서비스를 직접 이렇게 구현해보고 있다는게 신기했다. 오늘 포스팅할 내용은 간단하게 채널과 DM 섹션이다. 현재 DM에 사용자로 등록되어있는 'a', 'aa', 'a', 'a', 'a' 이렇게 5개의 계정은 각각 로그인 및 회원가입 페이지를 만들 때 임시로 만들었던 계정들이다. 회원가입을 하면 자동으로 DM 섹션에 추가가 되는 것이다. 사실 실제 슬랙에서는 이 워크스페이스에 사용자를 초대해야 DM 섹션에 뜨게 되지만, 어쨌든.. 회원가입을 한 값이 여기에 추가된다는 게 중요한 게 아닐까? 싶다. 진행을 하기 전에 이전 포스팅에서는 전부 서버 주소가 ..

오늘 모각코 시간에는, 타입스크립트를 사용한 리액트 프로젝트에서 채널 만드는 모달과 사용자 초대 모달, 그리고 라우터 주소설계에 대해 공부했다. 사실 이 부분 자체는.. 이전 포스팅 내용과 막 크게 차이가 나진 않는다. 그나마 차이가 있는 점은, 어제 올린 포스팅에서는 껍데기를 페이지에 부여했다면 이번에는 껍데기를 포함한 전체를 컴포넌트안에 넣고, 파라미터를 담은 채로만 페이지에 불러왔다는 것이다. 이 부분 또한 전체 페이지에서 내가 다룰 부분만 가져왔다. 1. 채널 모달 만들기 ( &라우터 주소 설계 ) 1-1. 컴포넌트 시작하기에 앞서 이전 포스팅들에서 다룬 내용은 전부 생략한다. 1. useParams Hook useParams Hook은, 이후 쿼리문의 형태로 사용하는 것을 수월하게 해 주는 Ho..

클론코딩 강의를 들으면서 점점 구조가 복잡해지고, 어려워지고 있음을 몸소 느끼고 있다. 오늘 배운 부분은, 실제 Slack에서 워크스페이스를 API통신을 활용하여 만드는 것이다. 우선 시작하기에 앞서 스타일링은 전부 Slack의 개발자도구에서 그대로 가져온 것이므로, 따로 말할 게 없다는 점을 밝힌다. styled-components를 사용하긴 했지만, 이마저도 결국 뭐 직접 짠 거는 아니니까.. 그냥 그러려니 하면 될 것 같다. 사실 중요하지도 않고. 간단해 보이지만, 이것을 만들기 위해서는 많은 함수가 필요하다. + 버튼을 눌렀을 때 모달을 불러오는 것이라든지, 모달의 우측상단 X 버튼을 눌렀을 때 모달이 꺼지는 것이라든지.. 우선 페이지와 컴포넌트로 나눠서 설명을 해야할 것 같다. 1. 컴포넌트 이..

이 글은 Slack 클론 코딩[실시간 채팅 with React] 강의의 내용을 담은 글입니다. TypeScript에 대한 이론을 어느 정도 익히고서, 이제 TypeScript를 사용한 React 프로젝트를 진행하는 강의를 수강 중에 있다. 여기서, 내가 궁금했던 axios의 활용법을 어느정도 익히게 된 것 같아서 그 내용을 포스팅 하고자 한다. 1. axios를 활용하여 서버로 데이터 보내기(+CORS, proxy) 우선 백엔드 서버로 데이터 보내기(http://localhost:3095/api/user에 axios 활용)는, 해당하는 서버가 켜져 있어야 한다. 즉, 데이터의 흐름은 localhost:3090(리액트 서버) -> localhost:3095/api/user (백엔드 서버)로 이뤄지게 되는데..

특정 값이 들어가 있고, 버튼을 눌렀을 때 값을 변경할 수 있게끔 하고, 저장을 누르면 그 값으로 바뀌는 inline text editor를 만들어 봤다. 함수형 컴포넌트로 진행했고, 로컬에서 진행했음을 먼저 말한다. 스타일링은 styled-components를 사용했는데, 여기서 스타일링은 중요한 부분이 아니므로 생략한다. 우선, useState로 두 가지 값을 정의한다 1. 수정 모드로 들어가는 useState (editMode로 정의했다.) 2. 텍스트 값에 대한 useState (text로 정의했다.) 연필 버튼을 눌렀을 때 editMode가 바뀌게 하기 위해서 editMode를 false로 지정해주었고, text는 현재 서버와 연결되어있지 않기 때문에 임의로 userState를 만들어서 그 안의..

기존의 checkbox 상태관리에서, 성별 및 연령대 select value 선택 시 버튼이 활성화되도록 기능을 추가했다. select는 Material-UI 라이브러리의 Select를 활용했다. 사용하고 싶은 것만 취사선택하여 코드 복붙을 하였고, option value를 그대로 적용시키기 위해 onChange 함수를 걸었다. 기본적으로 Material-UI에서 제공하는 것들을 import해준 뒤(앞 사진) handleChange 함수를 type에 따라 구분하였고, useState를 활용하여 현재 선택된 값(e.target.value)을 성별에 설정(setSearchSex), 연령대에 설정(setSearchAge) 해줬다(뒷 사진). isAllChecked라는 변수에, 기존의 checkbox 상태관리 ..

종합설계 프로젝트에서, 체크박스의 상태관리 및 체크박스 전부 체크 시 버튼을 활성화하는 부분을 구현하는데 애를 먹었다. 여러 방법이 있지만, useState를 활용하여 상태관리를 하는 방법을 남겨보고자 한다. const SignupContents = ({ history }) => { const [checkedButtons, setCheckedButtons] = useState([]); const changeHandler = (checked, id) => { if (checked) { setCheckedButtons([...checkedButtons, id]); console.log(체크 반영 완료); } else { setCheckedButtons(checkedButtons.filter(button =>..