kasumil의 코딩 공작소

* 아직 리덕스는 학습을 시작한 상태라 적용하지 않았음. - 오늘의 할일. 1. 어제 구현하지 못한 input check 박스 선택에 따라서 필요한 컴포넌트 호출하는 기능 구현. 2. email 주소와 쿼리네임을 선정하여 해당 input 창에 기입하면 해당 값을 입력시키기. 3. 제출하기 버튼클릭시 해당 이메일과 다운로드 기능 구현 - 진행 완료사항. 1. input true : faslse값에 따라 해당 컴포넌트 호출하는 기능으로 구현. 2. email, input 창 기입에 따른 해당값 state값으로 저장구현. - 진행중 사항 - 1. submint 버튼 클릭시 이메일로 발송과 해당 파일을 다운로드 요청하는 기능 구현 중 2. 각자의 컴포넌트마다 해당 state 값이 저장되므로 Redux를 공부하여..

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

- 오늘의 할일. React Datepicker 커스텀하기. 남은 포인트 설정하기. DatePicker를 커스텀하는 중. 특정일자로 datepicker를 설정하려고 하는데, jQUERY와 다르게 react라서 헤맸다. 원래는 jQUERY에선 그냥 "2019-12-31"만 적으면 되는데 DATEPICKER는 날짜만 기입되면 안되고, 해당 날짜 앞에 new Date("날짜") 쳐야 작동하는 것.... setStartDate(date)} selectsStart startDate={startDate} endDate={endDate} minDate={new Date("1925-12-31")} maxDate={new Date("2019-12-31")} dateFormat="yyyy-MM-dd" onKeyDown={..

오늘의 수정사항. - ip주소를 모아둔 config.js에서 행으로 구분을 위해서 뛰어달라고 요청 받음. (내가보기엔 가독성이 더 떨어지는 것 같다만;;; 뭐 요청에 따라 수정함.) - 코드 리팩토링을 통해서 1100줄이 넘던 코드를 600줄(하드코딩 자료를 목업자료인 json으로 넘겨서)로 줄였고, 컬러만 빼고 중복되던 styled 컴포넌트를 컬러만 따로 먹이게 진행함. - 동일한 스타일을 먹이던 것을 props를 통해서 따로 특정색상을 먹일 수 있도록하여, 코드의 중복을 줄였음. - 기존 프로젝트에서는 Route에서 nav와 footer를 기본으로 두고, 이를 해당 페이지만 교체하였는데, 해당 페이지에서 같이 호출하는 걸로 해달라하여 그렇게 수정하였음. - 코드 삭제하기전에 코드가 남아있는 코드 68..

월요일부터 써야했지만, 시간이 없어서 오늘적는다. - 분위기 신생기업이라서 그런지 되게 으쌰으쌰 하는 분위기이다. 업무 분위기가 엄청 좋다. 서로서로 장난도 많이치는 것 같음. - 구조 기업을 핸들링하는 교수님이 CTO로, 다른 분이 CEO로 자금을 대는 구조 같았다. 다들 DATA Sientist라서 고스펙자들만 모여 있음. - 업무 wrds라는 와튼 데이터 업체를 클론 코딩하는 중. 해당 사이트를 베이스로 자신들의 사이트로 개편해서 고치려는 것 같다. - 아직은 클론 코딩이기에 코드를 공개할 수 있겠지만, 나중에 가면 코드를 공개하지 못할지도..? - 어차피 github에 올리는 상태라 그냥 여기서 공개해도 될지도 모르겠다. footer는 하루만에 완성해서 끝났는데, 의외로 시간이 걸리는 데가 sig..

위코드에서 마지막으로 진행한 2차 프로젝트 클론 코딩. youtu.be/5bPp7WZGTWQ 전체 영상 트립어드바이저(Trip advisor) 프로젝트 소개🙌 전 세계 여행자들의 859만 개의 숙박 시설, 음식점, 체험, 항공권, 크루즈 여행에 대한 7억 95천만 건 이상의 리뷰와 의견을 검색하여 모든 여행이 최적의 여행이 되도록 도와주는 Tripadvisor 홈페이지 클론코딩. 개발기간📆 2020년 8월 3일 ~ 2020년 8월 14일(12일간) 팀원🐙 프론트엔드 [10기 권한성] [10기 김경배] [10기 송수호] 백엔드 [10기 김도환] [10기 김병준] 기술 스택 및 구현 기능 1)기술 스택 React.js React Router RESTful API multipart/form-data 2)구현 ..

오늘 해야할 것. 1) 로그인 컴포넌트(컴포넌트가 교체되면서 새로 출력하는 부분 만들 것) - 완료 2) 상세페이지 사진 hover시에만 떠야하는데 안떠서 스타일 컴포넌트로 통일 -예정 3) 상세페이지 호텔 설명 slice함수를 통해서 배열로 만들고 이를 map함수를 통해 출력하기 = 예정 4) 상세페이지 이미지(slick slider) 구현 - 예정 로그인 컴포넌트를 고쳤다. 우오오~(Modalhandler 구조는 아직도 이해가 안됨;;; 리덕스 같은데, 리덕스는 아니라고 하는데 함수를 조금더 공부해봐야 할듯 싶다.) 모든 로그인 컴포넌트를 컨트롤하는건 nav 컴포넌트였던 것이다. 이것이 꺼지도록 애초에 nav에서 설정한다면, 그것을 props로 하위 컴포넌트로 보내버리면 되는 것이었다. import ..

- 오늘한 일. hotel 상세페이지 이동. react redux에 세션을 통해서 배움. 이력서 세션이 있었음. 오늘의 문제점... 화면 마우스 이벤트로 hover시에 숨겨져야 하는 빨간색 동그라미친 부분이 hide, exhibit 클래스가 제대로 안 먹는 문제가 발생. 컴포넌트 클래스로 죄다 통일하여 정리해야겠다. 수정 예정: 충돌 문제를 해결하기 위해서 스타일 컴포넌트로 리팩토링하여 싹 다 통일 예정. 예상외로 내 속도가 너무 느려서 난항 중. 버튼을 누르면 이동하는 슬릭을 넣을 예정. 아래 코드 블럭은 사진을 표현하는 컴포넌트. import React, { useState } from "react"; import styled from "styled-components"; import { withRo..

- 오늘의 해야할 것. 코딩....코딩...코딩....은 농담같지만 진실인것이고~! ༼ つ ◕_◕ ༽つ 엊그제 해결했다고 생각한 것이 폭탄이 되어 돌아온 Login...엄청나게 많은 코드수정을 요구 받음.... 어제 해결해야했으나 주말만 되면 몸이 아프네~(*￣ρ￣) 그래서 오늘 해결하고 있습니다. 오늘 이거 로그인 끝내고, 오늘마저 hotelpage에서 평점을 이미지로 등급을 리턴하는 방식을 구현하려고 노력중입니다. 내용은 간단하지만 실제로 구성하기가 어려워서 어찌해야할지.... import React, { useState, useEffect } from "react"; import styled from "styled-components"; import { withRouter } from "react-..

- 오늘의 한 것. 이전에 작성한 socialLogin, emailLogin, signup 컴포넌트에 대한 리뷰받은 것을 수정하여 재업로드. 어제 만들다만 1개 상세 페이지기존에 작성하다가만 styled-component를 마저 작성하기로 함. 아래 코드는 호텔페이지 1개의 헤더(header)부분 import React, { useState } from "react"; import styled from "styled-components"; import { Link, withRouter } from "react-router-dom"; import { IoMdPin } from "react-icons/io"; import { IoMdHeartEmpty } from "react-icons/io"; import..