React

[옥소폴리틱스 인턴십] 옥소폴리틱스 메인 페이지 클론 코딩 (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';..

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

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

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

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