반응형

클론코딩 6

[테슬라] 클론 프로젝트 - 스크롤이벤트(useRef)

잠깐 서버구축으로 node로 외도한 건 비밀. 다시 돌아왔습니다. 테슬라 클론을 진행 중 입니다. 현재 스크롤이벤트에 발목이 잡혔는데요. {data && data.car.map((el, i)=> { return ( ) }) } 그 이유는 리액트에서 DOM에 직접 접근하기를 권하지 않고 있습니다. useRef란 것을 사용해야하는데, 해당 것을 사용하기가 어렵다는 것이죠. 자료가 별로 없습니다. 기껏해야 해당 위치로 버튼과 연동하는 방식? 하지만 직접 접근이 가능하니 그것으로 접근해도 됩니다. document.addEventListener('scroll', function() { var currentScrollValue = document.documentElement.scrollTop; console.log..

[테슬라] 개인사이드 프로젝트(2)"svg 이미지 색상반전."

테슬라 클론을 진행중이다. svg의 색상반전을 하고 싶으면 filter : invert(1); 먹이면 된다. 하지만, svg에서 호출에서 막혀버렸다. 무슨 오류인지 svg라서 해당 이미지가 불러와지지 않는다. img를 불러내서 색상반전을 먹이면 되는데, 왜 안되는건가 싶어서 찾아보니 svg는 컴포넌트로 바꾸어서 호출해야한다고 한다. 이거 편리해지라고 만든거 같은데, 어째 더 불편하다;;; 그리고 로그인 버튼은 왜 문제가 생긴건가? 해결했다. 백그라운드 이미지로 설정했을때, 이상한 테두리가 생기는데 img태그로 사용시에는 그냥 테두리 없이 잘나온다. 이유는 모르겠다...?????!!! 오른쪽 테슬라 계정 부분은 position에 이상한 -40이 있길래 뭐지 싶어서 찾다보니 css부분에 margin-bott..

[위코드] TIL(Today I am Learned) -31(기업협업)(DatePicker 완성)

- 오늘의 할일. 코드 리팩토링. 기능 구현 상담 후 수정할 것 있는지 확인 후 merge할 것. -코드 리뷰 3일간 날 괴롭히던 datepicker의 기능을 대부분 구현했다. 기존에 하드 코딩으로 2019를 표시했던 것을 이제 자동으로 시간이 지나도 알아서 작동되게 구현하였고, WRDS처럼 2007년 페이지를 기준으로 했던 것처럼, 내가 만든 부분도 13년으로 설정해서 현재는 2007년 내년에는 2008년 내후년은 2009년으로 자동으로 바뀌게 만들었다. 원래 J쿼리로 만들어진 것이라 구현이 매우 빡셌다. 자료도 대부분 J쿼리 전용이라... 이에 참고한 자료가 HackerOne에서 만든 React-datepicker 자료 https://reactdatepicker.com/ React Datepicker..

[위코드] TIL(Today I am learned) -22(2차프로젝트 시작/트립어드바이저)

이번주 월요일에 적어야할 내용을 목요일에 적고 있다. ꒰( ˵¯͒ꇴ¯͒˵ )꒱ 우리가 해야할 사이트는 tripadvisor로 선정되었고, 모두가 경악하였다. 〣(ºΔº)〣 1차 프로젝트보다 훨씬 어려운 사이트를 선정되었기때문이다. ٩(͡◕_͡◕ 여기저기 이전 1차에 비해서 많이 어려워진 스크롤이벤트, 여러 기능들이 많아졌기에 그러하다. youtu.be/NDQAJ3PJ2kU 트립어드바이저 본홈페이지 해당 기능을 설명하기 위한 유튜브 링크 이중에서 내가 구현해야할 기능은 로그인, 회원가입을 맡았다. 원래는 다른것을 해야하지만, 이전 1차에서 구현하지 못한 모달을 위해서 그냥 받아들였다. 그리고 최대한 빨리 다른 페이지를 할것이다. ◝(⁰▿⁰)◜ 하는 마음으로 프로젝트를 시작했다. 의외로 난항이었던 것이 구글..

위코드 10기 1차 프로젝트 클론코딩 후기.(이솝/aesop)

youtu.be/tCugSJzPjZY 팀명 : ok-bujangnim 구성원 : 프론트 엔드 3명, 백엔드 2명. 프론트엔드 3명 최운정(PM), 배정규, 송수호 백엔드 2명 최홍일, 이문영 프로젝트 gihub: github.com/kasumil/10-ok-bujangnim-frontend kasumil/10-ok-bujangnim-frontend Aesop 사이트 클론 위코드 10기 팀프로젝트. Contribute to kasumil/10-ok-bujangnim-frontend development by creating an account on GitHub. github.com 나의 소개 나의 이름은 송수호입니다. 부트캠프인 위코드의 시작일인 2020년 6월 22일이 제 개발 경력의 시작이자. 개발자로..

[위코드] TIL(Today I am learned) -21(1차 프로젝트)

import React, { Component } from "react"; import { withRouter } from "react-router-dom"; import "./Login.scss"; class Login extends Component { constructor(props) { super(props); this.state = { email: "", pw: "", }; } hadleValueID = (e) => { this.setState({ email: e.target.value, }); }; hadleValuePW = (e) => { this.setState({ pw: e.target.value, }); }; // 로그인용 버튼 hadleBtn = (e) => { fetch("http:..

728x90