kasumil의 코딩 공작소

위코드에서 마지막으로 진행한 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..

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

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일이 제 개발 경력의 시작이자. 개발자로..

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:..

- 오늘의 과제 * 실제 data.json 받아서 연결해보기 * filternav 호출해서 연결하기 오늘의 실습. 해당 컴포넌트에서 Productlist를 호출하려고 하는데, 렌더 오류가 나왔다. import React, { Component } from "react"; import Nav from "../../Components/Nav/Nav"; import Productfilternav from "../../Components/Productfilternav"; import Mapcomponent from "./Component/Mapcomponent"; import Footer from "../../Components/Footer/Footer"; import "./Maplist.scss"; class..

오늘의 과제 - mapgoods 컴포넌트의 list 아이템중에 한개만 선택하는 것을 설정하기. 지금 문제점은 여러개가 같이 동시에 onMouse 이벤트가 작동한다. import React, { Component } from "react"; import { Link } from 'react-router-dom'; import "./Mapgoods.scss"; // const obj = { // 0: // } class Mapgoods extends Component { constructor() { super(); this.state = { products : [], btnChange: true, display: null, } this.hoverOverChange = this.hoverOverChange.b..