글이 너무 길어질 것 같아서 나눠서 포스팅한다. 채널과 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 섹션에 뜨게 되지만, 어쨌든.. 회원가입을 한 값이 여기에 추가된다는 게 중요한 게 아닐까? 싶다. 진행을 하기 전에 이전 포스팅에서는 전부 서버 주소가 ..
클론코딩 강의를 들으면서 점점 구조가 복잡해지고, 어려워지고 있음을 몸소 느끼고 있다. 오늘 배운 부분은, 실제 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 =>..
React 공부를 책을 통해 하고 있던 도중 (출처: 벨로퍼트 리액트를 다루는 기술) utils.scss 파일을 불러올 때 현재 수정하고 있는 scss 파일 경로가 어디에 위치하더라도 앞부분에 상대 경로를 입력할 필요 없이 styles 디렉토리 기준 절대 경로를 사용하여 불러올 수 있게 하기 위해 webpack.config.js에 커스터마이징 된 sass-loader를 webpack.config.js에 넣어주려고 하니 options has an unknown property 'includePaths'. These properties are valid 라는 오류가 발생했다. 이게 무슨 에러인고 하니 .. 현재 내가 내려받은 sass-loader의 버전이 호환 불가능한 버전이기 때문에 발생하는..
const termSubmit = document.getElementById("btn_add_term"); const termList = document.getElementById("list_terms"); const termBox = document.getElementById("text_term"); const termLi = document.querySelectorAll("ul li"); termSubmit.addEventListener("click", () => { addRelatedTerm(termBox.value); }, false); termBox.addEventListener("keyup", (e) => { const keyCode = e.keyCode; if (e.keyCode == 188..