[React] 타이머 만들기 / Modal창 추가, jsconfig 절대경로 연결

결과

이런저런 시도를 하는 중이라 디자인은 크게 건들지 않고 있다.

---

 

결과 설명

우선은 ● 버튼을 임시로 모달창이 나오게 하려 했는데,
클릭 후 이벤트를 어떤식으로 넘겨줘야 할지 고민 중이다.

제목을 적고 확인을 누르면 타이머 밑에 시간이 저장되고 무엇을 하며 시간을 보냈는지 기록하도록 할 것이다.
저장은 Firebase에 Firestore 기능을 이용할 예정이다.

최종적으로 시간을 기록하다가 ■ 버튼을 눌렀을 때 Firestore에 저장이 되고 화면에 출력되는 것이다.

---

jsconfig 절대 경로

[ jsconfig.json ]

{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": [
        "src"
    ]
}

위 코드를 jsconfig.json 이름으로 저장하면 절대 경로로 사용 가능하다

 

 

[절대 경로]

// 절대 경로
import SetTimer from 'routes/SetTimer';
import NavBar from 'routes/NavBar';


// 상대 경로
import SetTimer from '../routes/SetTimer';
import NavBar from '../routes/NavBar';

 

자세한 설명

import (상대 경로 → 절대 경로) path 설정 방법

[JavaScript] import (상대경로 → 절대경로) path 설정 방법

---

오류 - 1

React 내부에서 함수(function)에서 배열을 저장하려고 하면 현재 값만 출력되고 이전 값들은 모두 Undefined가 출력된다.

// 생략
// onClick 실행 함수
const onTimeSave = () => {
        var i = 0
        const saveCurrentTime = [] // 배열 지정
        var x = timer(); //타이머의 현재 시간
        saveCurrentTime[i] = x // saveCurrentTime[i] 값에 타이머값 저장
        setSaveTime(saveCurrentTime);
        i += 1 // 클릭 이벤트 발생 시 i값 1씩 증가
    }

//생략

주석처럼 실행이 될 것이라 생각했는데 i 값이 증가하지 않았다. 

---

오류 - 2

state를 통해 idx 증가는 해결했다.

// 태스트 코드
const [idx, setIdx] = useState(0) // idx값을 state로 저장
const x = []
const onTimeSave = () => {
    const adds = idx // idx값 저장
    x[idx] = adds // x배열의 idx번째에 adds값 저장
    setIdx(idx + 1) //idx + 1 증가
 }

문제는 adds에 idx값을 저장해서 출력하면 x[현재 idx]만 출력이 된다.

x[idx] = 0
배열 값 = 0
x[idx] = 1
배열 값 = ,1
x[idx] = 2
배열 값 = ,,2
x[idx] = 3
배열 값 = ,,,3
x[idx] = 4
배열 값 = ,,,,4

 

이전 배열 값이 Undefined로 출력된다. 

---

추측

Vanilla js로 해보았을 땐 이상 없이 작동하였다.

JSX 관련 문제이거나, State를 통해 저장해야 하는 내용일 것 같다.

---

해결

Firestore 사용하기 전에 한번 나타내 보려 했는데 생각보다 복잡했다.

DB에 저장하고, 해당 내용을 불러오는 것이 목표이므로 우선은 넘어가기로 했다.

 

무엇이 문제인지 찾아서 글에 추가를 해 놓을 예정이다.

---

느낀 점

코딩을 하면서 매일 수많은 벽을 만난다.
벽을 넘으면 더 높은, 더 넓은 벽이 기다리고 있다.
이 벽을 넘었을 때 큰 행복과 성취감을 느낀다.
아직 넘어야 할 벽은 많지만, 뒤돌아 보면 막막했던 벽들이 많이 작아져있음을 느낀다.
앞으로 나타날 벽들도 훗날 돌아보면 한 없이 작은 벽이 될 것이라 생각하며 계속 부딪히며 도전할 것이다.