리스트형 목록 화면에서 이름이 긴 value에 대해서는 일정 길이 이상이 되면 ... 표출 후 tooltip으로 value 값을 표출하는 것을 했다.

value 제한

const test = [
  {id: 0,
   name: kim,
   city: 서울특별시 마포구 연남동
  },
  {id: 1,
   name: lee,
   city: 서울특별시 송파구 가락동
  },
  {id: 2,
   name: han,
   city: 서울특별시 도봉구 쌍문동
  }
];

<div>
          {test.city.substr(0, 7) + "..."} // 원하는 만큼 길이 제한
</div>

tooltip 적용

tooltip 설치

$ npm install react-tooltip

적용

아래에서 핵심은 아래이다. 아래를 해주지 않으면 모든 data가 한번에 뜨는 오류가 있었다.

data-html={true} data-tip={test.city}

import ReactTooltip from "react-tooltip";

 <div data-html={true} data-tip={test.city} data-for="cityTip">
          {test.city.substr(0, 7) + "..."}
          <ReactTooltip id="cityTip" place="top" effect="solid" multiline={true}/>
  </div>

길이가 길은 value값에만 tooltip 적용

위와 같이 적용하면 길이가 짧아도 tooltip이 적용된다. 좀 더 깔끔하게 길이가 길은 value값에만 tooltip을 적용을 아래와 같이 조건을 적용하면 된다.

{
  test.city.length > 7
 ?
    <div data-html={true} data-tip={test.city} data-for="cityTip">
          {test.city.substr(0, 7) + "..."}
          <ReactTooltip id="cityTip" place="top" effect="solid" multiline={true}/>
    </div>
:
      <div>
        {test.city}
    </div>
}

참고

• https://github.com/wwayne/react-tooltip#readme

참고

• https://stackoverflow.com/questions/53253940/make-react-useeffect-hook-not-run-on-initial-render/63776262#63776262

insert 시 2022-08-30 11:16:47.000 이와 같은 형식이 string으로 되어 있을 때 DB등록 시 timestamp형식으로 바꿔야 했다.

잘못된 예

<insert parameterType="testDto">
        INSERT INTO public."tbl"
        (
        <trim suffixOverrides=",">
            "ID",
            "REGIST_ID",
            "REGIST_DT",
            "UPDT_ID",
            "UPDT_DT"
        </trim>
        ) VALUES (
        <trim suffixOverrides=",">
            #{id},
            #{registId},
            #{registDt},
            #{updtId},
            now()
        </trim>
        )
    </insert>

해결된 예

<insert parameterType="testDto">
        INSERT INTO public."tbl"
        (
        <trim suffixOverrides=",">
            "ID",
            "REGIST_ID",
            "REGIST_DT",
            "UPDT_ID",
            "UPDT_DT"
        </trim>
        ) VALUES (
        <trim suffixOverrides=",">
            #{id},
            #{registId},
            // 여기를 그냥 #{registDt}하면 timestamp 오류 발생
            To_TIMESTAMP(#{registDt},'YYYY-MM-DD HH24:mi:ss.SSSSSX'),
            #{updtId},
            now()
        </trim>
        )
    </insert>

문제 발생한 상황

1. 팀원들과 git으로 협업하기 때문에 git push를 한 상태
2. 폴더명 및 파일명을 camelCase로 작성하지 않은 것 발견
3. local에서 폴더,파일명 변경
4. local에서는 변경되었지만 git에는 그대로

Solution

찾아보니 git은 대소문자 구분을 하지 않는다고 한다. 따라서 내가 파일명 자체를 다르게 바꾸지 않는 이상 대소문자 변경만 일어났을 경우에는 변경으로 인식되지 않는다.

아래와 같은 형식으로 작성하면 된다.

git mv oldname newname

하지만 대소문자만 변경할 경우에는

1. 바꾸려하는 파일명을 임시로 작성뒤
2. 임시파일명을 원래 하려던 파일명으로 해주는 2번의 과정을 거쳐야한다.

git mv hellocode temp
git mv temp helloCode

참고로 폴더 및 파일명을 변경해줄 때 경로도 같이 적어줘야한다! 안그럼 fatal오류가 날 것이다.

git mv ./src/components/hellocode.jsx temp 
git mv temp ./src/components/helloCode.jsx

이렇게 하고 git status를 하면 rename으로 변경사항이 뜰것이다!

구조

일단 나의 구조는 input에 세팅되는 값은 부모에서 받아오는 값이다. 그리고 input box 세팅은 자식에서 해준다.

문제

수정하는 화면의 input box에 기존 값을 가져오고 onChangeHandler를 이용해 변환된 값을 표출시키는 과정에서 아무리해도 부모의 값이 바뀌지 않는 문제가 있었다.

_원인을 먼저 말하자면 input의 value값을 부모의 값으로 세팅_해서 그렇다. 그래서 아무리 바꾸려고 해도 부모의 값이 바뀌지않았다.

해결

🥕원래의 값을 바로 input의 value의 값에 세팅하는 것이 아닌 useEffect를 이용하여 부모값을 세팅해주고 변경되는 값을 상태관리는 하는 것이 포인트다.

const children = (props) => {
    // userId 상태관리
    const [data, setData] = useState({
        userId: null
    });

    // 기존 부모의 값 세팅
    useEffect(() => {
        if (props.data) { // 부모에 값이 있다고 가정
            setData(prevState => ({
                ...prevState,
                userId: props.data.userId
            }));
        }
    }, [props.data]);

    // userId 값을 바꾸는 이벤트
    const onChangeHandler = useCallback((type, event) => {
        setData(prevState => ({
            ...prevState,
            [type]: event.value
        }))
    }, [data]);


    return (
        <Fragment>
            <div>
                <div>
                    <Input
                          onChange={(event) => onChangeHandler("userId", event)}
                        value={data.userId} // 여기의 값을 props.data.userId로 하면 input 값이 안바뀜
                    />
                </div>
            </div>
        </Fragment>
    );
};

셀렉트박스에 숫자 선택 시 그 숫자만큼 행을 동적으로 생성시키면 된다.

problem

동적으로 행을 생성하려면 map함수를 사용하는 것이 일반적인것 같다. 하지만 map을 이용하려면 리스트를 사용하여야하는데 내가 이용하는 데이터는 숫자이다. 아래의 데이터의 key값을 numberOfPeople이라고 해보자.

// 1을 선택하면 
numberOfPeople : 1
// 2를 선택하면 
numberOfPeople : 2
        .
        .
        .

이런식으로 값이 넘어온다.

이 문제 때문에 시간이 걸렸지만 해결방안은 _index값을 넘겨주어 그 값으로 리스트를 만들어서 map함수에서 사용하는 것_이다!

코드

부모

const parent = (props) => {
  const [formData, setFormData] = useState({
        numberOfPeople : null, // db에서 데이터가 넘어옴. 1,2,3..이런식으로
        numberOfPeopleList : [] // 위의 숫자만큼 값을 담을 빈배열
    })

  // numberOfPeople 값이 변할 때 마다 numberOfPeopleList에 새로운 배열 생성
  // 2 선택 시 [0,1]
  // 5 선택 시 [0,1,2,3,4]
  useEffect(() => {
        formData.numberOfPeopleList = [];
        for (let i= 0; i < formData.numberOfPeople; i++) {
            formData.numberOfPeopleList.push(i)
        }
    }, [formData.numberOfPeople]);

  // 이벤트 핸들러
  const onChangeHandler = useCallback((name, event, idx) => {
        let value = event.value;
        switch (name) {
            case "numberOfPeople":
                value = (value.numberOfPeople != null ? value.numberOfPeople : "")
                break;
            default:
                break;
        }
        setFormData(prevState => ({
            ...prevState,
            [name]: value
        }));
    }, [formData]);

   return (
        <Fragment>
           {
               formik => {
               return (
                 <Form className={"form"} onSubmit={formik.handleSubmit} ref={formRef}>
                     // kendo를 사용
                     <table>
                       <div>
                         <kendo-dropdownlist
                                [data]="["1", "2", "3", "4", "5"]"
                         ></kendo-dropdownlist>
                       </div>
                     </table>
                      <div>
                          <div>
                             // numberOfPeopleList의 리스트 값으로 map
                            {formData.numberOfPeopleList.map((index)=>(
                              <div key={index}>
                              <ListItem idx={index}
                                        onChangeHandler={onChangeHandler}
                                        /> 
                              </div>
                            ))}
                          </div>
                    </div>    

                  </From>
               )
            }
            }

         </Fragment>
     )
}

자식

const child = (props) => {
    return (
            <Fragment>
                <div>
                      <div>
                      <Input
                            name={"numberOfPeople"}
                            // onChangeHandler로 값을 선택 할 때 이벤트 핸들러가 발생
                            onChange={(event) => props.onChangeHandler("numberOfPeople", event, props.idx)}
                        />
                    </div>
                </div>
            </Fragment>
    );
};

구현 기능

• 전체 체크 기능
• 개별 체크 기능
• 개별 체크 모두 체크 시 자동으로 전체 체크
• 전체 체크일 때 개별 체크 하나라도 미체크시 전체 체크 미체크

  구조

• 내가 한 프로젝트의 구조는 아래와 같이 부모 컴포넌트와 자식 컴포넌트가 두개인 구조이다😎

부모 컴포넌트 자식 컴포넌트 - 헤더 컴포넌트 : 전체 선택 체크박스 - 내용 컴포넌트 : 개별 선택 체크박스

부모 컴포넌트 (함수선언)

const parent = (props) => {
      const [data, setData] = useState({
            testInfo : {id : 1, data : "11"},
                       {id : 2, data : "22"},
                       {id : 3, data : "33"}
        }
    );

  // 체크박스 선택 시 삭제할 리스트
    const [delCheckedList, SetDelCheckedList] = useState([]);

    // 전체 체크 클릭 시 발생하는 함수
    const onCheckedAll = useCallback(
        (checked) => {
            if (checked) {
                const checkedListArray = [];

                data.testInfo.forEach((list) =>                                
                checkedListArray.push(list.id));
                SetDelCheckedList(checkedListArray);
            } else {
                SetDelCheckedList([]);
            }
        },
        [data.testInfo]);

    // 개별 체크 클릭 시 발생하는 함수
    const onCheckedElement = useCallback(
        (checked, intsId) => {
            if (checked) {
                SetDelCheckedList([...delCheckedList, intsId]);
            } else {
                SetDelCheckedList(delCheckedList.filter((el) => el !== id));
            }
        },[delCheckedList]);
}

헤더 컴포넌트 (전체 체크)

const header = (props) => {
    return (
        <Fragment>
            <table>
                <thead>
                <tr>
                    <th>
                        <Checkbox
                            checked={
                                props.delCheckedList.length === 0
                                    ? false
                                    : props.delCheckedList.length === props.data.testInfo .length
                                    ? true
                                    : false
                            }
                            onChange={(e) => props.onCheckedAll(e.target.value)}
                        />
                    </th>
                    <th>test1</th>
                    <th>test2</th>
                    <th>test3</th>
                </tr>
                </thead>
            </table>
        </Fragment>
    );
};

내용 컴포넌트 (개별 체크)

const content = (props) => {
    return (
        <Fragment>
            <div>
                <div>
                    <Checkbox
                        checked={
                           // data를 식별할 수 있는 컬럼에 key 값을 넣어줌
                          props.delCheckedList.includes(props.dataItem.id) ? true : false
                        }
                        onChange={(e) => props.onCheckedElement(e.target.value, props.dataItem.id)}
                    />
                </div>
                <div>{props.dataItem.test1}</div>
                <div>{props.dataItem.test2}</div>
                <div>{props.dataItem.test3}</div>  
            </div>
        </Fragment>
    );
};

참고

• https://velog.io/@tunakim/React-CheckBox-%EC%A0%95%EB%A6%AC-%EC%A0%84%EC%B2%B4-%EC%84%A0%ED%83%9D-%ED%95%98%EA%B8%B0

db에서 timestamp로 되어있는 컬럼의 값을 등록할 때 client 단에서는 아래와 같이 한국 표준시로 데이터를 넘겼다.

day: Wed May 12 2022 00:00:00 GMT+0900 (한국 표준시)

하지만 service단에서 가지고 온 데이터는 하루 전날인 즉, -1일인 데이터 값을 가지고 왔다.

2022-05-11T15:00:00.000Z

해결방법

우리 나라 표준 시인 +9를 넘겼지만, 받을 땐 국제 표준 시인 24 -9 인 15인 값을 가지고 온 것이다.

Timestamp Time = Timestamp.valueOf(holidayDto.getHday().replace('T',' ').replace('Z',' '));
            Calendar cal = Calendar.getInstance();
            cal.setTimeInMillis(Time.getTime());
            cal.add(Calendar.HOUR, 9);


            String koreaTime = new Timestamp(cal.getTime().getTime()).toString();

            testDto.set컬럼명(koreaTime);

등록/수정하는 쿼리 작성에서 타입으로 문제가 빈번히 발생했다. 각각 data type을 아래와 같이 설정해두었다.

• postsql(db) : timestamp
• dto : string
• 원하는 insert/update 컬럼 형식 : date(YYYY-MM-DD)

Error

쿼리

xml : mybatis

INSERT INTO public."LOGIN_TABLE"
    "NAME",
    "ID",
    "PW",
    "LOGIN_DATE"
VALUES (
    #{name},
    #{id},
    #{pw},
    #{loginDate}
)

test data

_swagger나 postman_에서 테스트를 아래와 같이 작성하였다.

{
"name" : "han",
"id" : "test",
"pw" : "1234",
"loginDate" : "2022-07-20"
}

이렇게 하니 loginDate가 dto에서 string으로 정의되어 있으나 db에서는 timpestamp여서 오류가 발생하였다.

Solution

아래와 같이 TO_DATE( #{loginDate}, 'YYYY-MM-DD') 작성해 주면 오류가 해결되고 db에 time 값이 0으로 세팅된다.

ex

TO_DATE(text,format) // 2022-07-07 00:00:00.000

쿼리

xml : mybatis

INSERT INTO public."LOGIN_TABLE"
    "NAME",
    "ID",
    "PW",
    "LOGIN_DATE"
VALUES (
    #{name},
    #{id},
    #{pw},
    TO_DATE( #{loginDate}, 'YYYY-MM-DD')
)

• https://www.wake-up-neo.com/ko/mysql/mysql%EC%9D%98-%EC%97%AC%EB%9F%AC-%ED%85%8C%EC%9D%B4%EB%B8%94%EC%97%90%EC%84%9C-count/970967252/

Java

• 자바는 일반적으로 변수명에 Camel case 사용
  • userId

DB

• snake case로 사용
  • user_id

문제

xml 파일에서 select sql문을 작성하였을 때, java의 Dto 변수명이 해당 DB 컬럼명과 다를 경우 null 값이 출력된다.

하지만 반드시 Dto와 DB네이밍을 일치시킬 필요는 없다. 오히려 java는 언더바(-)사용을 권장하지 않는다고 한다.

3가지 방법이 있다.

사용방법

mybatis-config.xml 파일 설정

이 방법이 보통 내가 프로젝트를 하면 사용하는 방법이다.

<setting name="mapUnderscoreToCamelCase" value="true" />

sql문에 별칭(AS, Alias) 설정

select user_id as userId,
       ...
from USER_TB 

resultMap의 property 설정 적용

• Mapper 파일에서 해당 SQL문에 해당하는 resultMap을 사용

  <resultMap id="userResultMap" type="User">
  <id property="id" column="user_id" />
  <result property="username" column="username"/>
  <result property="password" column="password"/>
  </resultMap>
  

• 편리한 문법을 이용해서 css를 작성하고 추후에 다시 순수 css로 변환해 주는 것
• 다시 말하면 프레임워크의 문법에 맞게 css를 작성하면 사용자에게 배포할 브라우저가 이해할 수 있는 css로 변환이 됨.

✅ 필요한 이유?

• 기본적인 CSS만으로는 중복적으로 작성해야됨
• 브라우저 호환성 위해 필요
• 중복되는 코드를 최소화하기 위해 필요

✅ 종류

• LESS
• SASS
• Stylus(스타일러스)

PostCSS란?

• SASS와 LESS와 같은 프레임워크와 비슷하지만 SASS와 LESS는 제공이 한정적임. 하지만 POSTCSS는 플러그인이 다양함

• create react app 을 할 때 기본적으로 PostCSS가 설치됨

  • package.json or node_modules에서 확인 가능!

✅ autoprefix란?

prefix란?

• 브라우저 별 따로 놀던 CSS3 속성을 잡어주기 위해 사용되기 시작
• 마크업 시 CSS의 Class 앞에 -moz-, -webkit-, -o-, -ms- 와 같이 각 브라우저에서 판독 가능한 접두어를 붙여서 해당 브라우저에서 인식할 수 있게 하는 것

만약 index.css에 아래와 같이 작성하고 빌드를 하면 (최종적으로 사용자에게 배포될 것) 빌드된 css가 생성됨

:fullscreen {
    background-color: pink;
}

• 빌드된 css를 보면 자동적으로 prefix가 붙어있는 것을 볼 수 있음
  • PostCSS의 autoprefix가 모든 prefix를 붙여줌.
    • 현재 브라우저들의 시장 점유율과 호환성 문제를 자동으로 정보 수집해서 처리가 되는 것 (신뢰 가능!!)

참고

• PostCSS
• postcss/plugins
• postcss/plugins_github

Intro

개인적으로 프로젝트를 하다가 배포하고 싶거나 해야할 일이있다. 이때 내가 해본 방법은 GitHub와 Netlify를 이용한 방법이다.

GitHub

1. 생성한 repository의 Settings에서 GitHub Pages로 이동한다.
2. master Branch로 변경하면 배포하면 얻게될 주소가 생성된다.
3. 프로젝트의 package.json에서 private밑에 homepage작성한다.

"homepage": "https://yunkyunghan.github.io/habit-tracker"

4. 터미널에서 npm 혹은 yarn을 이용해서 GitHub 페이지에 install

npm install --save gh-pages
yarn add gh-pages

5. 다시 package.json scripts에서 아래 플러스 된 것 추가한다.
   • yarn start를 하면 프로젝트 실행
   • yarn build를 하면 프로젝트를 빌드해서 사용자에게 배포할 수 있는 소스코드가 만들어짐.

"scripts": {
+   "predeploy": "npm run build", // deploy를 실행하기 전에 자동으로 호출. 따라서 deploy만 호출하면 됨. 
+   "deploy": "gh-pages -d build", // 만들어진 빌드를 GitHub에 배포
    "start": "react-scripts start",
    "build": "react-scripts build", 

6. 프로젝트 빌드한다.

yarn build

7. 아래 명령어를 실행하여 사이트에 배포한다.
   • 성공하면 Published! 뜸

npm run deploy

8. GitHub 브랜치에는 우리가 빌드한 것이 올라가 있기 때문에 설정이 필요하다.
   • gh-pages인것을 명심!

9. homepage url 입력하면 배포된 페이지 볼 수 있음!😲

Netlify

1. build 폴더 안에서 아래 명령어 실행한다. (둘 중 선택)

npm install netlify-cli -g
yarn global add netlify-cli

2. 설치에 성공하면 버전확인 가능하다.

    $ netlify -v
    netlify-cli/10.5.1 win32-x64 node-v14.17.0

3. build 폴더에서 나와서 아래 명령어 입력하면 회원가입창이 뜬다.
   • GitHub로 연결 (선택사항은 본인 자유)

netlify deploy

4. 승인을 해주면 터미널에서 선택사항이 뜬다.

5. team 이름, site name, publish directory(deploy할 폴더)설정해주면 된다.

   • publish directory는 build입력

   • 📍 주의 ) 만약 package.json에 GitHub 배포를 할 때 설정했던 hompage가 있으면 안됨.

     • 만약 아무런 홈페이지가 뜨지 않는다면

       "homepage": ".", // 삭제대신 이렇게 수정
       
       yarn build
       netlify deploy 재입력

배포 후 url 변경하는 법 (Netlify)

• 배포를 하게 되면 우리가 확인할 수 있는 검증, 테스트 용 url이 만들어짐(임시적인 배포상태)
• 그 후 실제로 기능이 완벽하고 이슈가 없는것이 확인이 되면 공식적으로 배포할 수 있음.
• 따라서 위에서 배포 시 terminal log에도 Website Draft URL 이라고 명칭이 되어져 있음
• 실제 배포 (최종 url)

netlify deploy --prod

참고

• https://create-react-app.dev/docs/deployment/

Spread Operator란?

Spread Operator라고 해서 ...을 이용하며 스프레드 오퍼레이터, 스프레드 연산자라고 불린다. ES^에서 새롭게 추가된 내용으로 연결, 복사 등에 활용도가 높다.

배열 병합

기존에서는 배열을 결합하는데 있어 concat 메서드를 많이 사용했다. spread 연산자를 이용하면 더 깔끔한 병합이 된다.

let arr1 = [1,2,3]; 
let arr2 = [4,5,6]; 

let newArr = arr1.concat(arr2); 
console.log(newArr); // [ 1, 2, 3, 4, 5, 6 ] 

// ES6 spread operator
let arr1 = [1,2,3]; 
let arr2 = [4,5,6]; 

let newArr = [...arr1, ...arr2]; 
console.log(newArr); // [ 1, 2, 3, 4, 5, 6 ] 

배열 복사

spread연산자는 _얕은 복사_를 한다. ✨배열은 복사되지만 배열 안에있는 객체는 원본 값을 참조한다. 복사한 배열의 객체 값을 변경하면 참조하고 있는 원본 배열의 객체 값도 변경된다. 하지만 새로운 객체를 추가하면 복사한 배열에만 변경이된다. (원본배열에서 참조값이 없기 때문)

배열의 값을 변경했을 경우

📍 배열의 값만 있을 때와 배열 안에 객체가 있을 때랑 헷갈리면 안된다!

// ES6 spread operator
let arr1 = ['han','wheezy']; 
let arr2 = [...arr1]; 

arr2.push('coding'); 

// 원본 배열은 변경되지 않습니다.
console.log(arr1); // [ "han", "wheezy" ]
console.log(arr2); // [ "han", "wheezy", "coding" ]

// ES6 spread operator
let arr1 = ['han','wheezy']; 
let arr2 = [...arr1]; 

arr1[0] = "hello"

console.log(arr1); // [ "han", "wheezy", "coding" ]
// 복사된 배열은 변경되지 않습니다.
console.log(arr2); // [ "han", "wheezy" ]

원본 배열의 객체 값을 변경했을 경우

let arr1 = [{name: 'han', age: 10}]; 
let arr2 = [...arr1]; 

arr1[0].name = 'lee';

console.log(arr1); // [{name: 'lee', age: 10}]
console.log(arr2); // [{name: 'lee', age: 10}]

복사된 배열에 새로운 객체를 추가했을 경우

let arr1 = [{name: 'han', age: 10}]; 
let arr2 = [...arr1]; 

arr2.push({name2: 'han2', age: 20})

console.log(arr1); // [{name: 'han', age: 10}]
console.log(arr2); // [{name: 'han', age: 10}, {name2: 'han2', age: 20}]

복사된 배열에 새로운 key, value값을 추가했을 경우(원본 참조값에)

let arr1 = [{name: 'han', age: 10}]; 
let arr2 = [...arr1]; 

arr2[0]["city"] = "seoul";

console.log(arr1); // [{name: 'han', age: 10, city: 'seoul'}]
console.log(arr2); // [{name: 'han', age: 10, city: 'seoul'}]

slice 혹은 ES5 map일 때

만약 배열 참조가 아닌 복사를 위해서는 기존의 slice 혹은 ES5 map을 이용하면 된다.

// Javascript array 복사
let arr1 = ['han','wheezy']; 
let arr2 = arr1.slice();

arr2.push('coding'); 
console.log(arr2); // [ "han", "wheezy", "coding" ]
// 원본 배열은 변경되지 않습니다.
console.log(arr1); // [ "han", "wheezy" ]


// ES5 map 
let arr1 = ['han','wheezy']; 
let arr2 = arr1.map((item) => item);

arr2.push('coding'); 
console.log(arr2); // [ "han", "wheezy", "coding" ]
// 원본 배열은 변경되지 않습니다.
console.log(arr1); // [ "han", "wheezy" ]

참고

• https://paperblock.tistory.com/62

오브젝트란?

오브젝트는 key와 value의 집합체이다.

object = { key: value };

생성방법

object literal

const obj1 = {}

object constructor

new class 키워드 사용

const obj2 = new Object();

자바스크립트는 동적으로 타입이 runtime(프로그램이 동작하고 있을 때)결정되므로 오브젝트 생성 후 property를 후에 추가 및 삭제 할 수 있다.

// 기존
const wheezy = {name: 'wheezy', age: 20};

// 추가
wheezy.hasJob = true;

// 삭제
delete wheezy.hasJob; // undefined

오브젝트 할당

변수에 원시형 데이터 (문자열, 숫자)를 할당하면 데이터 자체가 그래도 변수가 할당되지만 오브젝트를 변수에 할당하면 오브젝트가 메모리에 들어있는 주소인 참조값이 변수에 할당된다.

const name = "wheezy";
const nameObj = { name: "wheezy" }; // x111

위에서 nameObj의 오브젝트는 메모리 주소값에 할당되어진다. (주소값을 x111이라고 가정)

const wheezy = { name: "wheezy", age: 10 }; // x222
const han = { name: "han", age: 20 }; // x333
const yk = wheezy; // x222

위에서는 wheezy변수를 yk에 할당하게 되어 wheezy변수의 참조값이 yk에 복사되어져 할당된다.

추가적으로 오브젝트는 값 자체가 변수에 저장되는 것이아니라 참조값(Reference)이 저장된다. 따라서 아래와 같이 수정된 값을 적용받게 된다.

wheezy.age = 30;
console.log(wheezy) // { name: "wheezy", age: 30 }
console.log(yk) // { name: "wheezy", age: 30 }

배열에서는?

배열 안에 오브젝트가 있을 때 생성된 오브젝트수에는 배열 자체도 포함시켜줘야 한다. 따라서 아래의 경우에는 총 3개의 오브젝트가 생선되었다.

const userInfo = [ // x666
    { name: "wheezy", age: 10 }, // x444
      { name: "han", age: 20 } // x555
];

Spread Operator 경우에

✨ Spread Operator은 배열 안의 모든 오브젝트 내용을 하나하나 복사해오는 것이 아니라 오브젝트는 그대로 두고 array의 아이템들의 참조값을 복사한다.

따라서 아래와 같이 userInfo3배열에는 새로 만들어진 참조값 x777안에 userInfo3[0]은 userInfo[0]과 동일한 참조값이 x444, userInfo3[1]은 userInfo[1]과 동일한 참조값이 x555를 갖게된다.

const userInfo = [ // x666
    { name: "wheezy", age: 10 }, // x444
      { name: "han", age: 20 } // x555
];
const userInfo2 = userInfo; // x666
const userInfo3 = [...userInfo]; // x777

따라서 만약 userInfo[0].age = 30으로 고치면 userInfo, userInfo2, userInfo3 모두 age가 30으로 바뀐다. 참조값이 모두 x444로 동일하기 때문에!!!

📍 주의할 점 다만 만약 userInfo에 새로운 값을 추가하면 Spread Operator을 한 배열에는 해당이 안된다. 다시 말해

userInfo.push({ name: "yk", age: 90 });
console.log(userInfo[name].length); // 3
console.log(userInfo2[name].length); // 3
console.log(userInfo3[name].length); // 2

render() 안에 로그를 확인하여 Component에 이 render 함수가 언제 호출되는지 확인할 수 있다. 코드에 console.log()를 찍고 화면을 refresh 해주면 로그들이 두번씩 찍힌다.

🖋 render함수가 두번씩 찍히는 이유

index.js에서 StrictMode를 사용하여서이다.

StrictMode란?

StrictMode를 사용함으로서 한번 더 호출되어 잘못되는 것이 없는지 검사한다. 개발하는 동안만 두번 호출이되고 실제 배포시는 두번씩 안되므로 걱정할 필요는 없을 것 같다!

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

🖋 성능 분석

다시 본론으로 돌아가면 만약 onClick 함수가 호출되는 부분을 누르면 계속 모든 render함수가 호출된다. 하지만, React 자체에서 VDOM을 써서 실제로는 정말 업데이트 돼는 것들만 DOM요소에 업데이트 된다.😎

따라서 render함수가 계속 호출이되지만 성능이 괜찮은 이유는 필요한 요소만 업데이트가 되기 때문이다.(요소에서 확인 가능)

• 즉, React 어플리케이션은 state가 변화되면 전체적으로 render가 호출이 되지만 (부모의 App에 state가 있음) VDOM 메모리상에 트리를 보관해 놓고 있기 때문에 이전의 데이터와 비교하여 실제로 필요한 부분만 DOM요소에 업데이트가 된다.

디버깅을 할 때, HTML Elements파트에서 DOM요소 전체가 사라지고 깜빡이면서 나타나거나 변화가 많이 일어나면 잘못하고 있는 것!

문제점

이렇게 하나의 컴포넌트만 업데이트하였는데 전체 render 함수가 호출되면 발생할 수 있는 문제가 없지는 않다. ⇒ 화면 깜빡임, 불필요한 일 수행 등,, 실제로는 관련된 데이터가 전혀 변경되지 않았음에도 불구하고 render 함수가 계속 호출되는 것은 성능에 좋지 않다!

호출 확인 방법

브라우저에서 불필요한 render함수들이 호출되는지 확인할 수 있다.

컴포넌트가 렌더링 될 때, 업데이트 되는 것은 하이라이트 해주는 기능	시각적으로 브라우저에서 확인 가능

🎨PureComponent

PureComponent와 memo는 컴포넌트 state나 props에 변화가 없으면 render함수가 호출이 안되게 한다.

import React, { PureComponent } from 'react'

class HabitAddForm extends PureComponent {
  ...
}

위와 같이 코드를 PureComponent로 작성하게 되면 최상위에 있는 데이터가 변하지 않으면 props와 state안에 들어 있는 데이터의 render함수가 호출되지 않는다.

• 즉, re-rendering을 하지 않는다.

HTML을 작성할 때, DOM 요소에 이름을 붙일 경우 <div id ="testId"> 와 같이 id 값을 준다. 이렇게 하면 해당 id가 있는 DOM 요소에만 스타일을 따로 적용할 수 있다.

마찬가지로 리액트에서도 DOM을 선택해 직접 접근하기위해 ref를 사용한다.

어떤 경우에 ref를 사용?

React에서 State로 해결할 수 없고, DOM을 반드시 직접 건드려야 할 때 사용하게 된다.

• js로 DOM요소에 focus, 텍스트 선택 영역, 미디어의 재생을 관리
• 애니메이션 직접적으로 실행

ref 사용 예시

class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: ""
    };
  }

  render() {
    return (
      <input
        value={this.state.value}
        onChange={({ target: { value } }) =>
          this.setState({ ...this.state, value })
        }
      />
    );
  }
}

위 코드는 일반적인 React 상태로 제어하는 컴포넌트이다. State로 input의 value를 관리하기 때문에 Input에서 키보드를 입력할 때마다 state가 변하게 되고 ui를 업데이트하기위해 re-rendering이 일어난다

이러한 프로세스는 불피요한 컴퓨팅 자원을 소모하는 이슈이다.

class Example2 extends React.Component {
  constructor(props) {
    super(props);

    this.ref = React.createRef();
  }

  render() {
    return (
      <input ref={this.ref} />
    );
  }
}

따라서 ref가 input을 가리키면 state를 변경하지 않기 때문에 re-rendering은 일어나지 않는다.

참고

• https://tecoble.techcourse.co.kr/post/2021-05-15-react-ref/

대량의 데이터를 db에 insert할 때 엑셀로 보통 자료를 받는다고 한다.

하는 방법은 아래와 같다 😲

엑셀에 data 입력

아래의 사진과 같이 data가 있다고 가정해보자.

Excel로 받은 data 예시

첫번째 행에 쿼리 작성

데이터가 들어있는 첫번째 행에 쿼리를 작성해준다.

이때 number

• " 셀번호 "

varchar는

• '" 셀번호 "'

  =CONCATENATE("INSERT INTO test  VALUES (",A2,", '",B2,"', '",C2,"', ",D2,");")

  드래그

  첫번째 셀에 위와 같이 쿼리를 작성해주면 알아서 첫번째 행의 데이터가 들어간 쿼리가 작성될 것이다. 이후 드래그만 해주면 완성!

Excel 작성 예시

데이터 베이스에 쿼리문 복사 및 실행

데이터 베이스에 쿼리문 복사 및 실행 예시

프로젝트마다 다른 node 버전이 필요해서 버전 관리가 필요했다. A 프로젝트 - node v10.24.1 B 프로젝트 - node v13.14.0

NVM이란?

Node Version Manager

노드 버전을 업데이트하기 위한 패키지로 쉽게 Node.js 버전을 관리할 수 있다. nvm을 설치해놓으면 명령어 하나로 노드 버전을 변경할 수 있다.

NVM 이점

• 컴퓨터에 다양한 버전의 Node.js를 설치 가능
• node 버전 간단하게 스위칭 가능
• 설정, 리스트 확인, 삭제 등 관리가 쉬움

사용방법

📍 핵심!

• 기존에 node가 설치되어있으면 삭제
• nvm -> node 순으로 설치 만약 node 설치 후 nvm을 설치해주면 nvm에서 버전을 변경을 해줘도 반영이 안됨

NVM 설치

아래 경로로 들어가 nvm-setup.zip 파일 다운로드 후 압축 풀기 및 exe 실행하면된다. https://github.com/coreybutler/nvm-windows/releases

nvm vesrion // 버전 확인

nvm ls // 설치된 node 리스트 확인. 만약 처음이면 설치된 리스트가 없음.

그 다음 원하는 버전을 설치해주면 된다.

nvm install v13.14.0

만약에 여러 버전이 있다면 설치 후 원하는 버전을 사용해주면 된다.

nvm use 13.14.0

오류 해결

위의 방법으로 바로 되는 경우도 있지만 나는 그렇지 않았다...😥

원하는 버전을 쓰려고 아래처럼 명령어를 쳤을 때 오류가 발생하였다. 관리자 권한으로 실행하면 exit status 145로 숫자만 변경되고 오류는 동일하였다.

nvm use 원하는 버전

순서

1. NVM 삭제
2. scoop 설치
3. scoop을 이용한 NVM 설치

1. NVM 삭제

• 제어판에 들어가 앞서 설치한 NVM을 삭제

2. scoop 설치

• 아래의 명령어를 차례로 치면 된다.

  > Set-ExecutionPolicy RemoteSigned -scope CurrentUser 
  > $env:SCOOP = 'D:\Scoop' // 원하는 드라이브로 경로 설정 가능
  > iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

  

다시 nvm use 원하는 버전을 입력해주면 정상 작동이 된다 :>

참고

• https://velog.io/@mayinjanuary/NVM-%EC%9D%B4%EB%9E%80-%EB%85%B8%EB%93%9CNode.js-%EB%B2%84%EC%A0%84-%EA%B4%80%EB%A6%AC%ED%95%98%EB%8A%94-%EB%B2%95
• https://jaegeun.tistory.com/62

warning: LF will be replaced by CRLF in README.md.

Error

git을 사용하면 이런 error을 보게 되는 경우가 있다. 이는 mac 또는 linux를 쓰는 개발자와 window 개발자가 Git으로 협업할 때 발생하는 whitespace 에러이다. 나또한 macOS를 사용하는 분의 코드를 clone 시키고 나의 windowOS에서 수정 후 올리려고 하다가 보게 되었다🙄

다시 말해 다른 시스템에서 new line (줄바꿈) 문자열에 차이가 있어 나오는 경고문이다. ◾ 유닉스 시스템은 한줄의 끝이 LF(Line Feed)로 이루어짐 ◾ 윈도우 시스템은 CR(Carriage Return)와 LF(Line Feed), 즉 CRLF(Carriage Return Line Feed)방식을 사용해 줄 바꿈 시 변환 오류가 날 수 있다고 한다.

Solution

core.autocrlf는 자동변환해주는 기능을 갖고 있어 이 기능을 켜주면 된다.

window

git config --global core.autocrlf true

Linux

git config --global core.autocrlf true input

참고

• https://blog.jaeyoon.io/2018/01/git-crlf.html