Dev/Projects

[옥소폴리틱스 인턴십] Laws Cloud 프로젝트 회고 (1)

완성 배포 페이지 http://lawscolud.top 새로운 인턴십 9월 말부터 감사하게도 옥소폴리틱스 사의 인턴십 프로그램에 다시 참여하게 되었다. 4주과정이 끝나고 마지막 발표만을 앞둔 상태라 그동안의 프로젝트를 회고해보려 한다. 팀 컨벤션 정하기 우선 프로젝트에 앞서 팀 컨벤션과 소소한 규칙들을 정하였다. 별거 아닌듯 하지만 컨벤션과 규칙은 미리 구체화 시켜놓는 것이 나중에 훨씬 편하다는 것을 이전 프로젝트에서 경험했기 때문에 주제 선정 이전에 팀 컨벤션을 미리 정하였다. 더보기 미팅 룰 시간 엄수 사정 있을 시 (불참, 지각 등) 1시간 전에는 알리기 디스코드 미팅 매일 오전 10시 미팅 디스코드 항상 온라인 상태 유지 떠오르는 생각은 바로 디스코드에 정리 의견 교환 부정적 피드백 기분 나빠하지..

[옥소폴리틱스 인턴십] 옥소폴리틱스 FAQ 페이지 구현하기 (2)

Search Bar 구현하기 대부분 검색엔진은 외부 라이브러리 등을 사용하는 것으로 알고 있다. 하지만 이번 프로젝트에서의 검색 기능은 다른 자료를 참고하지 않고 직접 구현해보고 싶었다. 검색 기능은 Category 영역의 정보를 받고 Answer 영역에도 영향을 주어야했기 때문에 Search Bar에서는 검색어를 state로 받고 초기화 기능만 구현하였다. const SearchBar = ({ search, setSearch }) => { const handleChange = (e) => { setSearch(e.target.value); }; const handleClear = (e) => { e.preventDefault(); console.log('clear'); setSearch(''); }; ..

[옥소폴리틱스 인턴십] 옥소폴리틱스 FAQ 페이지 구현하기 (1)

FAQ페이지 구현하기 이전의 옥소폴리틱스 메인페이지 클론코딩을 성공적으로 마치고 다음 과제에 대해 회의하는 시간이 있었다. 옥소 사 멘토분들과 팀원들과의 회의에서 나온 의견으로는 다른 페이지 클론 코딩, 현재 구현한 메인페이지에 Firebase 적용하기, 아예 새로운 제품 개발해보기, notion으로 구현된 페이지 React로 구현하기 등이 있었다. 새로운 제품을 개발해보기에는 시간이 빠듯했기에 현재 옥소폴리틱스에서 notion으로 구현되있는 페이지 중 하나를 React를 이용해 웹페이지로 구현해보기로 하였다. 현재 옥소폴리틱스의 FAQ 페이지는 다음과 같이 노션으로 구현되어 있다. 노션 페이지 자체의 디자인은 나쁘지 않지만 기존 옥소폴리틱스의 다른 페이지들과는 이질감이 많이 느껴졌다. Figma를 이용..

[Cloning] (Nomad Code) Twitter clone code with Firebase & React (2) - Firestore, Firebase storage, FileReader API

데이터 베이스 - Firestore Firestore는 파이어베이스에서 제공하는 NoSQL 데이터베이스 서비스이다. NoSQL NoSQL은 말 그대로 SQL이 아닌 방식의 데이터베이스다. SQL형 데이터베이스는 '관계형 데이터베이스'라고도 부르며, 이름처럼 모든 데이터들이 관계로 연결되어있다. 가장 간단하게는 행-열 형태의 데이터를 갖는 엑셀도 SQL과 비슷한 데이터베이스라고 볼 수 있다(실제로 연동하여 사용하기도 한다). 반면 NoSQL 방식은 데이터 간의 관계를 통해 데이터를 구조화하는 것이 아니라, key를 통해 데이터를 접근한다. Javascript 객체의 key, value 모델이 대표적인 NoSQL 형식의 데이터 저장 방식이다. SQL 방식은 인덱스와 데이터 관계를 통해 데이터에 접근해야 하기..

[Cloning] (Nomad Code) Twitter clone code with Firebase & React (1) - Firebase, React Router, Vice 최신 버전으로 사용하기

리액트 복습과 파이어 베이스 연습이 필요하여 노마드 코더(Nomad Coder)에 있는 트위터 클론 코딩 코스를 수강하였다. 이런 코스를 무료로 제공하고 있다는 점이 놀랍다. 이 강좌에서는 Firebase와 React Router의 이전 버전을 사용하고 있었고, 해당 버전의 설치 후 수강이 권장되었다. 하지만 나는 호기롭게 공식문서와 함께 최신 버전을 사용해보기로 하였고 이것은 큰 고난의 서막이었다.... React Router 리엑트 라우터가 최근 업데이트에서 크게 바뀌었다. 나는 입문자이기 때문에 애초에 이전 버전을 접해본적이 없어 잘 모르지만 강의와 비교하여 달라진 점을 찾아내느라 애를 먹었다. Upgrading from v5 - React Router 대신 Switch로 Route들을 감싸던 방식..

[옥소폴리틱스 인턴십] 옥소폴리틱스 메인 페이지 클론 코딩 (2)

베스트 댓글 영역 구현 그룹 영역은 사실 구현해야 할 부분이 많이 없었기 때문에 커뮤니티 영역을 맡은 팀원분을 도와 '베스트 댓글' 항목의 구현을 내가 맡기로 하였다. 옥소폴리틱스의 베스트 댓글은 조금 특이하게 조회수 순으로만 베스트 댓글을 선정하는 것이 아니라 각 '부족'별로 베스트 댓글을 하나씩 보여주는 방식을 사용하고 있다. 이를 통해 각 부족 간의 의견을 모두 보여줄 수 있다. 옥소폴리틱스로부터 구현을 위해 제공된 데이터는 해당 게시글의 전체 댓글 데이터와 전체 게시글의 베스트 댓글 ID가 들어있는 데이터를 각각 JSON 파일로 받았다. 내가 해야 할 일은 각 게시글의 베스트 댓글 ID들을 입력하여 comments.json에서 해당 댓글들을 찾아 출력하면 되는 일이었다. json 파일을 받는 것은..

[옥소폴리틱스 인턴십] 옥소폴리틱스 메인 페이지 클론 코딩 (1)

2주 전부터 옥소폴리틱스 사의 인턴십에 합격하여 2명의 팀원과 함께 인턴십을 진행하고 있다. 나는 이제 막 HTML/CSS/JS 기초를 뗀 쌩 입문자였기 때문에 1주일동안 리액트를 마스터 해야하는 미션이 주어졌었다. 일주일만에 리액트 정복하기(1) [React] 일주일만에 리액트 정복하기! (1) 나에게는 아주 안 좋은 습관이 있다. 덧셈 뺄셈을 배우던 초등학생 시절부터 거의 병적으로 손으로 필기하기를 싫어했다. 필기가 필수인 대학 수업 때도 PPT 제공 없는 교수님의 수업까지도 필사 youngst.tistory.com 어찌저찌(?) 리액트를 한 주만에 익히고 그 다음 미션이 옥소폴리틱스 사의 메인페이지를 클론 코딩 해보기였다. 옥소 사의 문화 자체가 위에서 해야할 일을 지시하는 위계 조직이 아닌 팀에서..