230523 TIL_개인 프로젝트3 (개인 지출 관리 사이트 제작) > React (keys) > CSS(gird, flex), 알고리즘(map)

개인 프로젝트

React... JS...

...진행 중... 몹시 고통스러워하는 중... 그리드 플랙스에 죽어가는 중....

const month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

이런 코드 밖에 못 짜는 내가 싫어서 열심히 알아본다...ㅋㅋㅋㅋㅋㅋ

const months = [...Array(12).keys()].map((month) => month + 1);

label

<label> 요소의 for 속성은 연결된 <input> 요소의 id 속성과 일치해야 합니다. 이렇게 하면 사용자가 라벨을 클릭했을 때 해당 입력 필드에 포커스가 이동합니다.

<label for="date">날짜:</label>
<Input type="date" name="date" id="date" />

label for이랑 id랑 연동시키면 포커스가 된다는데 왜 안 되는지 이해 x 너 맘대로 해라

localStorage

ㅎ ㅏ........ 실제 인덱스와 액티브 인덱스는 0부터 시작하고,
1. 로컬 스토리지 밸류 값이랑 2. 사용자한테 보여지는 값 3. 선택한 값은 +1

사용자가 선택한 값 = 실제 인덱스 (=액티브 인덱스) +1
사용자가 선택한 값 -1 = 실제 인덱스

실제 인덱스, 액티브 인덱스 (0 ~ 11)
사용자 (1 ~ 12) -> 초기값은 1로 설정

즉, 인덱스 0번은 1
사용자한테 보여질 값은 인덱스 + 1
로직에서 쓸 값은 사용자 값 - 1

인덱스 값 즉, 액티브 인덱스의 초기 설정 -> 사용자가 보는 값 (=로컬 스토리지 밸류 값) -1 / 없으면 1

아... 액티브 인덱스에서 말렸다...^^ 클릭하면 인덱스 === 액티브 인덱스 값을 설정 해놓고서 (*그냥 버튼에 효과 주려고... 🥹 ) 별개로 생각해서... 쉽게 쉽게 가려고 클론 코딩 했다가 전혀 이해 못하고 쓰는 사태 발생 ...!!!

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 하필 스타일 컴포넌츠를 사용해야 하는 과제라서, $active 이 녀석 때문에 (*이것 때문에 액티브 인덱스가 만들어지긴 했지만) 액티브 넌 뭔데... 액티브 인덱스 넌 뭔데..... 인덱스 넌 뭔데...... 이런 상황 발생했다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

이걸로 액티브 인덱스의 기능이 끝났으면 좋았으련만, 거기다 로컬 스토리지까지 연결하려고 하니 죽을 맛... 한 개가 두 기능..... 차라리 그냥 기능을 분리할 걸... 아니다..
클릭하는 순간 인덱스 === 액티브 인덱스 라는 걸 깨닫지 못한 나의 잘못이다.....ㅎㅎ
다음엔 더 잘할 수 있을 듯 (아마)

CSS

와 이걸 지금 드디어 깨달았다...

display 속성

display : flex 일 때
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

display: grid 일 때
.container {
  display: grid;
  justify-items: center;
  align-items: center;
  text-align: center;
}

justify-content, justify-items 이름이 다르자너~ 꺄아아악~

margin

마진은 오토로... 기억해... 마진은 오토.....
순서는 상 하 좌 우 순이고 상하 / 좌우 세트다....

알고리즘

배열에서 문자열 대소문자 변환하기
문자열 배열 strArr가 주어집니다. 모든 원소가 알파벳으로만 이루어져 있을 때, 배열에서 홀수번째 인덱스의 문자열은 모든 문자를 대문자로, 짝수번째 인덱스의 문자열은 모든 문자를 소문자로 바꿔서 반환하는 solution 함수를 완성해 주세요.

나의 문제 풀이

function solution(strArr) {
    for(let i = 0; i < strArr.length; i++) {
        if (i % 2 !== 0 ){
            strArr[i] = strArr[i].toUpperCase()
        } else {
            strArr[i] = strArr[i].toLowerCase()
        }
    }     return strArr;
}

다 풀고 나니 나만 원시적으로 풀고 있었다. 히히...😊 (삼항 연산자라도 쓸걸~^.^)

[더 공부해야 할 다른 사람의 문제 풀이]

배열에서 문자열 대소문자 변환하기에서 꽂힌 게 대소문자 변환이라 아는 거 나와서 신났다.... 근데 사실 더 집중해야 하는 건 "배열에서" 였거늘....

map

function solution(strArr) {
    return strArr.map((v, i) => i % 2 === 0 ? v.toLowerCase() : v.toUpperCase());
}

map의 인덱스 활용

[오늘의 회고록]

벌써 목요일이다!!! 요즘은 꿈에서도 코딩을 한다... 그만... 그만...🙃 (꿈에서도 다 해결 못한다....) 요즘 배가 불렀는지 편의성에 자꾸만 집착하며 "이 비효율적인 걸 왜 써야 하는 것인지"에 대해서 자꾸만 불평이 늘기 시작했다... 하지만 어디든 장점이 있는데!! 필요할 때 장점만 쏙 빼서 쓰기 위해서 조금 거친 길을 연습하고 있다고 생각하려고 한다...

그런 의미에서... 단순히 그냥 오늘까지 각종 패키지 인상...
1. 리액트... 프로젝트 생성부터 쉽지 않다. 그런데 생성하고 나면 dom제어가 쉬워서 말이 안 됨....
2. 프롭스 드릴링... 너무 비효울적이지만, 한 두 개 정도는 내려도 괜찮지 않나?^^ 리덕스 세팅하는 것보다 내려보낼 때가 훨씬 더 빠를 때가 있다.
3. 스타일 컴포넌츠... 누가 도대체 css랑 js를 섞은 거니 ㅜㅜ 했지만 삼항 연산자 꾸미기 할 때... 좋지 않냐는 말을 듣고서는 깨달음을 얻었다.

끝나는 시간이니까 나중에 더 이어서........