[TIL] 20230614 - git add warning LF / 클릭한 해당 아이디의 객체 속성을 변경해서 반환(true/false toggle)

warning: in the working copy of 'src/App.css', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/App.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/index.js', LF will be replaced by CRLF the next time Git touches it

CR(Carriage-Return)

현재 커서를 줄 올림 없이 가장 앞으로 옮기는 동작

 

LF(Line-Feed)

커서는 그 자리에 그대로 둔 상황에서 종이만 한 줄 올려 줄을 바꾸는 동작

 

CRLF (Carriage-Return+Line-Feed)

한마디로 줄 바꿈!

 

 

OS마다 줄 바꿈에 대한 문자열이 다르기 때문에 git에서 어느 쪽을 선택해야 할지 경고 메시지를 띄워 준 것

 

 

그러므로 윈도우 사용자의 경우 이러한 변환이 항상 실행되도록 다음과 같은 명령어를 입력한다. 물론 시스템 전체가 아닌 해당 프로젝트에만 적용하고 싶다면 —global 을 빼주면 된다.

• git config --global core.autocrlf true

 

리눅스나 맥을 사용하고 있는 경우, 조회할 때 LF를 CRLF를 변환하는 것은 원하지 않을 것이다. 따라서 뒤에 input이라는 명령어를 추가해줌으로써 단방향으로만 변환이 이루어지도록 설정한다.

• git config --global core.autocrlf true input

 

혹은 이러한 변환 기능을 원하지 않고, 그냥 에러 메시지 끄고 알아서 작업하고 싶은 경우에는 아래 명령어로 경고메시지 기능인 core.safecrlf를 꺼주면 된다.

• git config --global core.safecrlf false

 

참고 https://cocoon1787.tistory.com/728

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

---

Todo list를 만드는 과제를 진행중에

상태변경 부분에서 고민에 빠졌다.

 

클릭하면 그아이디와 같은 아이의 isDone 상태를 toggle 해야하는데 어떻게 써야하지...?ㅎㅎㅎㅎ

 

for..if ..다 돌려봤는데 그 속성을 수정해서 배열로 돌려줘야해서 오류가 계속 났다.

state로 상태값을 변경해줘야한다.

결국 팀원분께 도움을 받아 해결했다! 

.map함수로 새로운 배열을 생성해주는데 그때 콜백함수로 삼항연산자를 활용해서

id값을 받아 id를 비교한 후 그해당 아이디가 동일할경우

 { ...item, isDone: !item.isDone } 

isDone 값이 true면 false로 isDone이 false로 바꿔준다

동일하지 않을경우는 객체 그대로를 반환!

그다음 새로운 배열 반환값을 setState로 넣어주면 되었던것!!!

 

const clickCompleteToggle = (id) => {

        const newArr = task.map((item) => (item.id === id ? { ...item, isDone: !item.isDone } : item));

        setTask(newArr);

    };

    return (

        <div key={item.id} className="task-box">

            <h3>{item.title}</h3>

            <p>{item.text}</p>

            <button onClick={() => clickDelete(item.id)} className="del">

                삭제

            </button>

            <button onClick={() => clickCompleteToggle(item.id)}>{item.isDone ? '취소' : '완료'}</button>

        </div>

    );

 

처음엔 삭제/취소버튼, 삭제/완료 버튼을 따로 만들었었는데 컴포넌트를 분리하면서 버튼도 삼항연산자를 활용해서 조건부 렌더링이가능하도록 변경했다