전체 글

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

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

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

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

TIL#2 - 많은 사진을 import / 스타일드 컴포넌트 / 이벤트 버블링

특정 규칙이 있는 많은 사진을 불러 오기 인턴십 클론 코딩 활동 중, 댓글의 프로필 이미지를 랜더링 해야할 일이 생겼다. 일반적인 프로필이라면 그냥 JSON의 프로필 이미지 url을 땡겨오면 그만이겠지만 옥소폴리틱스는 특이하게도 유저의 성향과 응답에 따라 댓글의 프로필이미지가 달라졌다. 성향은 총 5개, 응답은 4개였으므로 총 20개의 이미지 파일 중에 골라 프로필 사진으로 띄워야 했다. 전부 import? 처음 떠올린 것은 20장 이미지를 전부 import한 뒤 원하는 키워드로 등록해서 img를 리턴하는 함수를 만드는 것이었다. 코드가 길어지는 것도 문제지만 수정사항이 생겼을 때 골치가 아파질 것이 너무 자명했다. import ans1-tribe1 from '../img/ans1-tribe1.png';..

TIL#1 - Today I Learned

TIL(Today I Learned) 말 그대로 오늘 무엇을 공부했는지 또는 배웠는지를 적는 것으로 많은 개발자들이 하고 있다고 한다. 역시 개발자에게는 포트폴리오가 필수다. 유명 개발자 블로그를 보면 1000회가 훌쩍 넘는 TIL을 본 적도 있다. 짧게라도 꾸준한 습관을 들여 멋진 시니어 개발자가 되고 싶다. 아래 적는 내용은 그냥 빠르게 주저리주저리 쓰고 내용이 모이면 주제별로 모아 글로 작성해볼 계획이다. 옥소폴리틱스 인턴십 현재 옥소폴리틱스 인턴십 2주 차를 진행하고 있다. 지금 진행 중인 프로젝트는 옥소폴리틱스 홈페이지의 메인 페이지를 React를 이용하여 클론코딩해 보는 것이다. 3명의 팀원들과 협업하며 React와 더불어 Git, Git-hub까지 실전으로 부딪혀가며 공부해가고 있다. PR(..

[React] 일주일만에 리액트 정복하기! (2)

React 폼 HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태(state)를 가지기 때문에, React의 다른 DOM 엘리먼트와 다르게 동작합니다. -React Document 예를 들어 폼은 특정한 정보를 입력받은 뒤 폼을 제출하면 새로운 페이지로 이동한다. 그러나 대부분의 경우 JavaScript 함수로 제출을 처리하고 폼에 입력된 데이터에 접근하는 것이 편리하다. 이를 위한 표준 방식은 "제어 컴포넌트(Controlled components)"라고 불리는 기술을 이용하는 것이다. 제어 컴포넌트(Controlled Component) , , 와 같은 HTML 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다. React에서는 state와 setState(..

[React] 일주일만에 리액트 정복하기! (1)

나에게는 아주 안 좋은 습관이 있다. 덧셈 뺄셈을 배우던 초등학생 시절부터 거의 병적으로 손으로 필기하기를 싫어했다. 필기가 필수인 대학 수업 때도 PPT 제공 없는 교수님의 수업까지도 필사적으로 필기 없이 공부하기 위해 노력했다. 정말 피치 못해 필기를 해야 할 때에도 단어 위주로, 심지어 단축말... 까지 만들어가며 적어야 하는 양을 최소한으로 줄였다. 십여 년간 쌓아온 나름의 공부 노하우와 이해 방법이 있었기에 공부의 목적이 시험뿐이었던 지금까지는 이 방법이 잘 먹혔으나, 취업 시장에 들어서고 난 후로는 내가 공부한 내용을 남에게 !!!보여줄!!! 방법이 필요함을 절실히 깨닫게 되었다. 특히나 개발 공부를 시작하고 난 뒤로 여기저기서 개발자에게는 블로그와 깃허브가 전부라는 말을 많이 들었기 때문에 ..