알고리즘에 취약하다는 것은 알고 있었지만.. 앞으로 매일매일 알고리즘 문제를 풀어야겠다.
오늘 알고리즘 공부를 하다가 내가 정말 약하다는 것을 체감했다ㅠㅠ


for문

for문에 대해 모르던 것은 아니다.
하지만 알고리즘 문제를 풀려고 하니 온갖 벽에 막히더라 ..

그 막히던 부분에 대해 말해보고자 한다..

sum 으로 배열 안의 숫자들을 전부 합하려면 ?

우선 간과하고 있던 사실이 있다.

[ ] 배열은 하나다. 그리고 그 안에 숫자들이 들어있는 거다. = 매개변수는 1개

그렇기 때문에

매개변수를 이런 식으로 쓰면 안 된다.

그렇게 되면 [10, 20, 30, 40, 50], undefined, undefined, undefined, undefined 가 출력된다.
나는 그래서 오류가 빗발쳤다 ..

배열은 하나라는 사실을 기억한다면

매개변수를 하나만 줄 수 있게 된다.

for 문은 어떻게 돌리지?

기억나는대로 for 문을 작성했는데 밑줄이 열심히 그어졌다 ..
왜 그러나 뇌정지 돼서 고민해봤는데 i라는 변수를 선언해준 적이 없었다.

밑줄이 사라지는 것을 보고 편안해졌다..

그리고 그 다음에 어떻게 해야 값을 출력할 수 있을지 모르겠어서.. 고민해봤다.

우선 result 라는 값을 만들기 위해 변수를 만들어 선언해줬다.

숫자값이므로 초기값을 0으로 두었다.

result = arr[i] 라면 출력값이 각각 10, 20, 30, 40, 50 일 것이다.

그렇다면 JavaScript 의 성질 상 마지막의 값만 남는다.

==> result = 50 이 된다.

sum 합을 구하려면?

i < arr.length;
result += arr[i] 를 하면 값이 누적되어 출력된다.

arr 배열의 길이보다 작을때까지 for문 돌리기 ..

그런데
i <= arr.length; 를 하면
마지막에 NaN 이 나와서 NaN이 출력된다..

이유가 뭘까 ..?

arr 배열의 길이보다 작거나 같을때까지 for문을 돌린다..


글자 수 세기 / 제한

textarea 안에 글자를 입력하면, 글자 수를 세고 제한을 두는 기능을 구현했다.

녹록치 않은 여정이었다....

시도 1. 제이쿼리로 구현

	// 글자 수 표시 / 제한
	$("#textArea").keyup(function (e) {
		let content = $(this).val();

		// 글자수 세기
		if (content.length == 0 || content == "") {
			$(".textCount").text("0자");
		} else {
			$(".textCount").text(content.length + "자");
		}

		// 글자수 제한
		if (content.length > 40) {
			// 40자 부터는 타이핑 되지 않도록
			$(this).val($(this).val().substring(0, 40));
		}
	}); 
  • 먼저 keyup()을 사용하여 타이핑이 될 때마다 글자수를 체크하도록 했다.
  • 여기서 .val()은 value의 약자다.
    해당 textArea에 입력한 내용을 불러오는 코드입니다.
    그래서 $(this).val()을 통해 해당 textarea의 값을 content라는 변수 안에 담아줬다.
  • 그 다음 .length(길이)로 해당 내용의 길이(글자수)를 체크했다.
    글자수가 0이면 '0자'가 출력 되고그게 아니라면, 글자수 뒤에 '자'를 붙여서 보여지게 했다.
  • 그리고 '// 글자수 제한' 주석 아래에 있는 내용이다.
    html에서 maxlenth 속성을 사용하여 글자수를 제한할 수도 있지만,
    나는 substring()을 사용하여 글자수를 잘라봤다.

--> JQuery 가 너무 무거워서 성공했지만 쓰지 않기로 했다 ...

시도 2. JavaScript 로 구현

		// 글자 수 세기
  const DescTextcounter = () => {
	if (descInfoRef.current.value === 0 || descInfoRef === "") {
		return document.getElementsById("textCount").innerText="0자"
	} else {
		return document.getElementsById("textCount").innerText=(descInfoRef.current.value.length + "자");
			}	
	}

--> 자바스크립트로는 장렬하게 실패했다. 최대한 구현해보려고 노력한 흔적 ...

시도 3. useState 로 구현

		// 글자 수 세기 / 제한
        const [len, setLen] = useState(0);
        
		const descTextChange = (e) => {
			setLen(e.target.value.length);
			
			if (descInfoRef.current.value.length > 40){
				descInfoRef.current.value = descInfoRef.current.value.slice(0,39);
			}
		}

최종적으로 결정한 것은 useState로 구현한 것이다!
JQuery 처럼 무겁지 않아서 부담없이 사용할 수 있다.

  • teatarea 속성에서 한 번 글자 수 제한을 줬다.
    • maxlength 를 활용하면 된다!
    • 가장 이상적인 글자 수 제한 방법은, teatarea에서 한 번, 함수에서 한 번, 백엔드에서 한 번 처리하는 것이다.
  • onchange 함수를 textarea에 부여했다.
  • 바뀌어지는 숫자 부분을 미리 선언한 useState의 { len } 으로 대체했다.

postman 의 Content-Type

다른 팀원 분의 포스트맨에서는 정상 작동하는데 내 포스트맨에서만 이상하게 반응하지 않았다..

이유를 찾고 찾고 열심히 찾아보니

postman 의 Content-Type 은 application/json 가 기본값인데,

내 것은 text/plain 으로 되어 있었다.

아무것도 건들지 않았는데... 무슨 연유인지는 모르겠으나 Content-Type을 바꾸니 제대로 돌아갔다 !


이것은 짧은 여담이지만 ...

마이페이지의 비밀번호 변경 시 데이터가 제대로 리듀서에 저장되지 않아 고민했는데,

팀원 분이 원래 비밀번호는 리덕스에 저장하면 안 되는 것이라고 말씀해주셨다 ..!

당연히 리덕스에 저장하고 서버에 저장하는 루트가 이상적인 것이라고 생각했는데
또 다른 시각으로 바라보니 당연히 저장되면 좋지 않은 것이었다!

0개의 댓글