[위코드] TIL(Today I am learned) -17

다음은 unit 테스트

말 그대로 unit단계에서 코드의 작동여부를 디버깅하는 것으로 제일 작은 단위에서 디버깅하다보니 시간, 인력 낭비를 최소화 하기위한 방식이다.

 

개발하면서 진행하기에, 하루에 수백번을 돌려도 몇초만에 끝나고, 프론트나 백엔드와 연결시에도 이미 코드 작성시부터 디버깅을 진행하기에 문제가 발생하지 않고 거의 완벽하게 붙는다고 한다.

프론트에게도 중요하지만, 백엔드에게 더 중요하므로 백엔드만 따로 과제를 지시받았고, 전체적으로 프론트들은 이 수업에는 관심이 없는 것 같았다.(why? 필요가 없다고 보는 것 같다.)

 

의문.. React에는 map함수가 있다. 이걸 어떻게 받는가 고민했었는데, 이걸 물어보기가 그래서 직접 찾다가 그냥 호출하면되지 않을까 했는데, 그냥 해당 Component를 호출하면 되던 간단한 방법이었다.

import React, { Component } from "react";
import { Link } from 'react-router-dom';
import Underbar from "../Underbar/Underbar";
import Mapgoods from "./Mapgoods";
import "./Mapcomponent.scss";

class Mapcomponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }  


    render() {
        return(
            <div className="Mapcomponent">
                <div className="textTitleBOX">
                    <div className="introTitle">
                        <div className="introDescription">
                            <h2 className="introDescriptionHeadline" >
                                처음의 시작
                            </h2>
                            <p className="introDescriptionINFO">
                                각질, 불필요한 유분 그리고 기타 잔여물을 말끔히 씻어내어 피부를 깨끗하게 하는 것은 인텔리전트 스킨케어의 기초입니다.
                            </p>
                        </div>
                        {/* 있어서 만들긴했는데, 왜 있는지 모르겠는 기능 */}
                        {/* <div className="IntroCategoryLinkBOX">
                            <link className="IntroCategoryLink" href="_blank">
                                <div className="IntroCategoryBOXWrapper">
                                    <span className="IntroCategoryTEXT" />
                                </div>
                            </link>
                        </div> */}
                    </div>
                    <Mapgoods></Mapgoods>
                    <Underbar className="Underbarcontrol"></Underbar>
                </div> 
            </div>
        )
    }
}

export default Mapcomponent;

mapgoods와 underbar 부분을 저리 작성하면 그냥 호출되어 해당 컴포넌트를 간단하게 불러올 수 있다.

이거 쓰다가 대문자로 시작하는 classname을 발견해서 죄다 수정해주었다.

 

import React, { Component } from "react";
import { Link } from 'react-router-dom';
import Underbar from "../Underbar/Underbar";
import Mapgoods from "./Mapgoods";
import "./Mapcomponent.scss";

class Mapcomponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }  


    render() {
        return(
            <div className="Mapcomponent">
                <div className="textTitleBOX">
                    <div className="introTitle">
                        <div className="introDescription">
                            <h2 className="introDescriptionHeadline" >
                                처음의 시작
                            </h2>
                            <p className="introDescriptionINFO">
                                각질, 불필요한 유분 그리고 기타 잔여물을 말끔히 씻어내어 피부를 깨끗하게 하는 것은 인텔리전트 스킨케어의 기초입니다.
                            </p>
                        </div>
                        {/* 있어서 만들긴했는데, 왜 있는지 모르겠는 기능 */}
                        {/* <div className="introCategoryLinkBOX">
                            <link className="introCategoryLink" href="_blank">
                                <div className="introCategoryBOXWrapper">
                                    <span className=introCategoryTEXT" />
                                </div>
                            </link>
                        </div> */}
                    </div>
                    <Mapgoods></Mapgoods>
                    <Underbar className="underbarcontrol"></Underbar>
                </div> 
            </div>
        )
    }
}

export default Mapcomponent;

해당 내용을 모두 수정한 장면.

이걸 작성하면서 다른 팀들의 코드를 잠깐 봤는데, mapgoods(같은 컴포넌트) open, close 태그 사이 내용에 유효성검사(밸리데이션) 태그가 들어간 걸 봤는데, 왜 그리 작성한것인지 모르겠다. 궁금함.

 

다음은 이벤트 핸들러들을 합치는 방식이다.  

이건 나중에 설명할 예정.

 

백엔드 자료가 없어서 가짜 데이터 자료를 만들었는데, 불러오질 못한다.

무엇이 문제일까????

간단히 생각해보았는데, Mapcomponent를 최상위에 두고 여기서 componendDidmount를 주어 자료를 받고 props로 넘겨주면 되려나?

같은 팀원은 굳이 이러지말고, mapgoods 자체에서 받으라고 하던데 그걸 모르겠다.

어떻게해야 받는 것인지 모르겠다.