kasumil의 코딩 공작소

이번주 월요일에 적어야할 내용을 목요일에 적고 있다. ꒰( ˵¯͒ꇴ¯͒˵ )꒱ 우리가 해야할 사이트는 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..

어제부터 고민하던 내용인 className 동시 적용여부였다. html에서 class를 단순히 뛰어쓰기만 하여 두가지를 동시 적용하는 것을 사용했지만, 까먹고 있었던 것이다. 그렇기에 나는 class를 한개는 동적으로 다른 한개는 정적으로 유지해야하니 더욱 더 고민했었다. 멘토님한테도 이 문제를 3번이나 물어봤지만, 나의 사항에는 적용할 수 없었다. 이때 문제 점으로 문제는 3항 연산자에도 해당 내용이 적용되는가였다. why? 한개로 class를 통일하면 서로 적용해야할 class내용이 달라서였고, 2개로 넣자니 3항연산자가 들어가는 부분에 방해가 되는 것이다. 결국 내가 원하는 답을 알려주신 멘토님이 있었다. 단순히 뛰어쓰기해서 적용해보라고 말씀하셨다. 해당 결과물이다. 단순히 보면 간단한 내용이지만,..

다음은 unit 테스트 말 그대로 unit단계에서 코드의 작동여부를 디버깅하는 것으로 제일 작은 단위에서 디버깅하다보니 시간, 인력 낭비를 최소화 하기위한 방식이다. 개발하면서 진행하기에, 하루에 수백번을 돌려도 몇초만에 끝나고, 프론트나 백엔드와 연결시에도 이미 코드 작성시부터 디버깅을 진행하기에 문제가 발생하지 않고 거의 완벽하게 붙는다고 한다. 프론트에게도 중요하지만, 백엔드에게 더 중요하므로 백엔드만 따로 과제를 지시받았고, 전체적으로 프론트들은 이 수업에는 관심이 없는 것 같았다.(why? 필요가 없다고 보는 것 같다.) 의문.. React에는 map함수가 있다. 이걸 어떻게 받는가 고민했었는데, 이걸 물어보기가 그래서 직접 찾다가 그냥 호출하면되지 않을까 했는데, 그냥 해당 Component를..

1주차 프로젝트에서 login과 signup을 구현하였다. 하지만, 애니메이션과 모달을 구현하여야 하는데, 안 써본 내용이라 고생할 듯 싶다.;;; import React, { Component } from "react"; 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 }); } // 로그인용 버..

위니또 시작. 그룹 프로젝트의 첫날이라서 사이트는 Aesop으로 결정되고, 일단 해당 클론할 부분을 받았다. 해당 부분은 로그인 부분. modal 팝업으로 구현되어야하나, 그냥 일단 기능 구현을 위주로 하여 애니메이션을 죄다 걷어내고 해당 기능만 일단 구현을 하도록 받았다. 일단 그냥 베끼기로 했다가 이러지 말고, 나의 className을 쓰라고 하여 기본적으로 해당 회사의 코드 등을 베끼었다가 나한테 맞게 코드를 수정하고, 해당 코드들의 class name을 수정하였다. 애니메이션을 걷어내고 비교적 간단한 부분이라 금방 작성할 거 같은데, Aesop 회사 회원가입 좀 구린거 같다. 애니메이션이 작동하는데, password 일치 여부에서 타이핑 즉시 일치여부를 보는 것이 아니라, 다 쳐놓고 다른 곳을 클..

이번 내용은 React의 내용입니다. 12번의 내용이 작성중에 날라갔기에... 어쩔 수 없이 13, 14의 내용이 먼저 올라갔음을 사과하는 바입니다. ㅠ constructor () { console.log(""); super (); } constructor는 최우선으로 불려짐. this.state = { a : 10, b : 20 } setState state값을 수정. 이때 render를 부르지 않으면 화면에 출력되지 않음. 키값은 수정되었으나 return에서 렌더를 불러와줘야함. }> 애로우 펑션을 사용할 것. => 애로우 펑션은 자바스크립트에서 쓰는 ECMA6의 용어라서 나는 가급적 쓰질 않아 처음에는 '저게 뭐지?'하고 이해를 하지 못했다. 애초에 잘 쓰지 않는 부분이라 헷깔려했는데, 나중에 추가..