21.05.10(월) - 해왔던 거와 흡사한 기능 구현은 이제 어렵지 않다. 새로고침 시 username을 불러오는 함수 실행시키고 닉네임 중복검사 기능을 완성하였다. 이미 다 기반이 다져져 있던 부분 숟가락만 얹은 거라 쉽게 쉽게 하였다. - chart.js 첫 사용 chart.js 활용하여 막대그래프와 선 그래프가 함께 나오는 혼합 차트를 구현해야 한다. Library Docs를 보고 있긴 한데 거의 자바스크립트 위주라 필요한 정보 뽑아내기가 어렵다. 곧 MVP 출시해야 하는 시기가 다가오는 만큼 빨리 끝내야 하는데 내일까지는 성공해보겠다. 21.05.11(화) - Chart 작업 완료 그래프 구현 성공을 하였다. 데이터를 넘겨받고 누락된 데이터들도 에러 없이 날짜순으로 표시를 해야 하는데 이 부분에..
카카오 소셜 로그인 기능 구현 실전 프로젝트를 진행 중 소셜 로그인 구현을 맡게 되어 05.02 부터 소셜로그인 구현을 위한 사전 작업에 돌입하였고 그렇게 1주일간 백엔드 팀원 분과 소셜 로그인 늪에 빠지게 되었다. 분명 쉽다 그랬는데.. 소셜 로그인 중에서도 카카오가 가장 쉽고 프론트는 할 일이 정말 없다고 했다. 그래서 정말 편하게 시작했다. 근데 할일이 없다고는 하는데 대체 내가 프론트로서 어떤 역할을 해줘야 하는 건지 확실하게 명시된 곳이 없었다. 그냥 서비스 설명뿐... 애매한 역할분담, 결론은 삽질 kakao developers 페이지에서 우리가 구현하려는 부분에 대한 프론트와 백엔드의 역할이 명확히 지정되어있지 않았다. 이것저것 검색해보니 정말 많은 방법들로 포스팅한 사람들이 많았다. 근데 ..
프로젝트를 진행하면서 소셜 로그인 구현을 맡게 되었다. 다들 프론트엔드는 소셜 로그인에서 할게 많이 없다 쉽다~, 그중에서 카카오가 가장 쉽다~ 이렇게 얘기해서 방심했다. 그렇게 6일간의 소셜 삽질이 시작되었다. 구글링을 해보니 똑같은 카카오 로그인 구현인데도 정말 신기하게 포스팅한 사람들마다 다들 다른 방법을 사용하여 매우 혼란스러웠고 이해하는데 한참 걸렸다. 마침내 성공을 했을 때 극한의 희열감과 이건 반드시 포스팅으로 남겨 놓으리라 다짐하여 지금 글을 작성 중이다. 카카오 개발자 홈페이지를 정말 많이 읽었음에도 프론트엔드가 소셜 로그인을 할 때 어떤 역할을 해주어야 하는지 명확히 감이 오질 않았고 API 활용 방법만 적혀있을 뿐이었다. 프론트와 백엔드의 역할 구분에 대한 개념이 확실히 잡히질 않았기..
21.04.26(월) - Calendar 코드 뜯어보다. 프로젝트를 진행하며 Calendar 기능을 구현해야 하는 필요가 생겨 이전에 완성해내지 못한 calendar 코드를 다시 보게 되었다. 지금 보면 조금 쉬울 줄 알았는데 아직도 어렵다는 게 놀라웠고, 그때 과제하다 포기하지 않고 버틴 게 자랑스럽다. 아무튼 캘린더 코드를 커스터마이징 하는 테스트를 프론트엔드 팀원들 전부 연습 겸 테스트 겸 각자 진행하는 시간을 가졌다. 21.04.27(화) - Calendar 코드 커스터마이징 캘린더 코드를 이용해 어느정도 우리 입맛에 맞는 View를 형성하게 되었고, 이제 필요한 기능들을 집어넣을 차례다. 기능은 솔직히 잘 모르겠는데 하다 보면 비둘기 모가지로 나는 것처럼 되긴 할 것 같다. 21.04.28(수)..
프로젝트를 하면서 상단에 네비게이션바 를 만들어야 할 수요가 생겼다. 그래서 실제 다른 웹페이지들처럼 누르면 누른 버튼 상태가 바뀌고 또 그 상태에서 다른 버튼을 누르면 이전에 눌려있던 버튼의 생김새는 원상태로 돌아오는 기능을 구현하고 싶었다. 가장 먼저 눌린 버튼의 상태를 변화시키기 위해 useState를 활용하고 onClick을 넣었다. click한 버튼을 찾고 새로운 상태를 적용시키기 위해 id 값을 버튼마다 부여하였고(case1, case2, case3) javascript 함수인 getElementById 를 써서 id 값으로 눌린 버튼을 찾고 스타일을 바로 적용해주었다. const Navigator = () => { const [currentClick, setCurrentClick] = Rea..
21.04.19(월) - 댓글 조회, 댓글 작성, 댓글 삭제 구현 성공 저번 주 클론 코딩 때 근처에 가보지도 못했던 댓글 기능을 구현하였다. 초반에 조금 헤맸는데 하고 나니 생각보다 별거 없었다. 처음 리액트를 배울 때 과제로 엄청나게 헤맸던 기억이 트라우마로 남았었던 모양이다. 댓글 기능과 비슷하게 트라우마로 남은 기능들이 몇몇 더 있는데 앞으로 하나씩 정복해나가는 것도 재밌을 듯하다. 21.04.20(화) - 좋아요 기능 구현 성공 바로 전날 트라우마 기능 중 하나였던 댓글을 부수고 이번엔 또 다른 트라우마였던 좋아요 기능을 구현했다. 굳이 트라우마라고 표현하기도 창피하지만 과제를 하면서 스스로 구현해내지 못했던 부분이 찝찝함으로 남아있었는데 오늘 속 시원하게 풀었다. - CSS로 외부 폰트 적용하..
팀 프로젝트를 위해 만들어진 그룹에 초대되었고 그룹 안에서 저장소를 만들었다. 그리고 로컬에서 작업을 한 뒤 테스트를 해보려던 중 갑자기 권한이 없다고 새빨간 오류 메시지가 떴다. 처음엔 대체 왜 안될까 하면서 이것저것 시도해보았고 그룹(organization) 멤버 권한이 없어서 인가 싶어서 리더님 돌아오자마자 권한 없어서 여태 삽질했다고 찡찡댔는데 문제는 그것도 아니었다...ㅋ remote: Permission to "원격저장소 주소" fatal: unable to access '원격저장소 주소': The requested URL returned error: 403 오류 메시지는 미처 캡처하지 못했다. 해결해보려 몇시간 삽질하다 보니 멘탈이 정상이 아니었기 때문에....바사사삭.... 대충 위에 내용..
눈누 라는 굉장히 이쁜 무료 폰트가 많은 사이트를 찾았다. 리액트로 외부 폰트 적용하는 법은 처음이라 구글링을 통해 알아냈고 하고 나면 정말 쉬운데 딱 입맛에 맞는 정보를 주는 블로그가 없는 것 같아 직접 포스팅하려 한다. 우선 아래 사진은 눈누 페이지에 들어가면 바로 보이는 폰트들이다. 대충 봐도 무료가 맞나 싶은 퀄리티다. 여하튼 이중에 맘에 드는 폰트를 하나 골라서 클릭하고 상세페이지로 이동하면 아래의 화면이 보일 것이다. @font-face { font-family: 'twaysky'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_tway@1.0/twaysky.woff') format('woff'); font-weight: norm..
