kasumil의 코딩 공작소

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의 용어라서 나는 가급적 쓰질 않아 처음에는 '저게 뭐지?'하고 이해를 하지 못했다. 애초에 잘 쓰지 않는 부분이라 헷깔려했는데, 나중에 추가..

import React, { Component } from 'react'; export class App extends Component { constructor() { super(); this.state = { id: '', pw: '' }; } handleID = event => { // console.log('event.target.value: ', event.target.value); this.setState({ id: event.target.value }); }; handlePW = event => { // console.log('pw event 실행'); this.setState({ pw: event.target.value }); }; handleLogin = () => { // data 송신..

인증/인가 필수요소인 패스워드 암호화 인가의 필수요소인 JWT 인증의 정의 유저의 정체성을 확인하는 절차. 즉, 본인인지 확인하는 절차로 ID와 Password를 확힌하는 절차. 인증을 위해서 id와 password를 생성하는 기능도 필요. 인가의 정의 인가란 유저(user)가 요청한 실행을 할 수 있는 권한이 있는지를 확인하는 것. 즉, 유료로 작동하는 기능이 있는데, 이를 사용할 수 있게 해당유저가 유료로 구매했는지 안했는지를 파악하여 이를 권한을 부여하여 해당 request의 실행여부를 판단하게 해주는 것. 이러한 인가와 인증의 정의를 한번 보았다. 그렇다면 이제 로그인이 진행되는 과정을 보자. 로그인 절차. 1) 유저id와 password를 생성. 2) 해당 유저의 id, password를 암호화..