이노캠 2주차(월)-문자열 배열문제

오늘 JS문법 종합반 2주차까지 풀고 나서 숙제로 나온 문제풀이와 씨름하다가 정리하기 위해 글을 올려봤다.

🔎문자열 배열문제

문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다.

• 제한조건
  • strings는 길이 1 이상, 50이하인 배열입니다.
  • strings의 원소는 소문자 알파벳으로 이루어져 있습니다.
  • strings의 원소는 길이 1 이상, 100이하인 문자열입니다.
  • 모든 strings의 원소의 길이는 n보다 큽니다.
  • 인덱스 1의 문자가 같은 문자열이 여럿 일 경우, 사전순으로 앞선 문자열이 앞쪽에 위치합니다.

✍️ 문제풀이법

코드 배열문제를 풀기 위해서 해결할 문제를 단계적으로 나누었다.

1.먼저 문자열 가장 앞에 n번째 글자를 붙인 배열 만들기
2.해당 배열을 사전순으로 정렬(sort)
3.앞글자 제거 후 return

일단 처음에는 문제 해결을 위한 function 함수를 만들어줬다.

function solution(string,n){
	var answer=[];
  
  	return answer;
 }

//test용으로 하나 집어넣었다. 
solution(["sun","bed","car"],1);

그리고 나서 문자열 가장 앞에 n번째 글자를 붙인 배열을 만들어준다. 이때 for(){}문을 사용한다.

for (var i=0;i<strings.length;i++){
	strings[i]=strings[i][n]+strings[i]
}

이렇게 입력하면 test용 배열을 집어넣었을때 sun->usun, bed->ebed, car->acar가 된다. 2차원 배열을 이용한 방법같은데 아직 잘 이해는 가지 않지만 배열 안 i번째 요소를 선택하고 그 요소에서 n번째 글자를 추출해 둘이 합친다고 이해했다. 이때 없는 글자를 출력하려고 하면 undefined가 뜬다.

예시)

console.log(strings[1][4]); // bed는 4번째 글자가 없으므로 undefined 출력

이 다음엔 해당배열을 사전순으로 정렬하는 sort 함수를 이용한다.

❓sort()메소드란?
배열의 요소를 정리하는데 사용하는 함수이다.

그래서 sort 함수를 이용하여 해당 배열을 사전순으로 정렬해준다.

function solution(string,n){
	var answer=[];
    for (var i=0;i<strings.length;i++){
	strings[i]=strings[i][n]+strings[i]
	}
    strings.sort();
  //이러면 [ 'acar', 'ebed', 'usun' ]으로 출력된다. 
  	return answer;
 }

📌sort() 메소드 사용시 주의점
문자열 같은 경우에는 sort()를 쓰면 오름차순으로 반영이 잘 되지만 숫자의 경우엔 다르다.

숫자의 경우에는 유니코드 값으로 정렬되기 때문에 예를 들어 11,2,5,20,8을 sort 값으로 정렬하면 우리가 생각했던 2,5,8,11,20이 아닌 11,2,20,5,8로 정렬된다. 그렇기때문에 우리가 생각한 대로 정렬하기 위해서는

Digit.sort((previous, current) => previous-current); //오름차순
Digit.sort((previous, current) => current-previous); //내림차순

의 방법을 이용할 수 있다.

sort함수 참고사이트)
https://velog.io/@mystyle730/자바스크립트의-Sort함수-이해

그런 다음 앞글자를 제거하고 return 하는데 이때는

 for( var j=0; j<strings.length; j++){
    strings[j]=strings[j].replace(strings[j][0],"");
    //해설영상에서는 i라는 변수를 이미 위에서 써서 j라고 변수를 지정했는데
    //for문 안에서만 변수가 사용돼서 i라고 써도 문제가 없을 것같다. 실제로 실험해봤는데 그렇다.
    //""는 맨 앞에 붙인 n번째 글자를 없애기 위해 넣은 공백이다. 
    answer.push(strings[j]);   
 }

로 입력하면 된다. 그래서 종합하면

function solution(strings,n){
    var answer=[];
 //1.문자열 가장 앞 글자를 붙인 배열 만들기 
 for (var i=0;i<strings.length; i++){
    strings[i]=strings[i][n]+strings[i];
    //car=> a+car -> acar
    }
   
 
 //2.해당 배열을 사전순으로 정렬(sort)
 strings.sort();
 

 //3. 앞글자 제거 후 return
 for( var i=0; i<strings.length; i++){
    strings[i]=strings[i].replace(strings[i][0],"");
    answer.push(strings[i]);   
    }
    return answer;
}

가 된다.

✍️ 느낀 점

나는 ...을 이용한 전개구문을 이용해 배열 안 요소들을 끄집어내고 charAt를 이용해 n번째 글자를 출력하는 것까지는 해냈는데 그 뒤에는 도저히 어떤 방법을 써야할지 감이 잡히질 않아 해설영상을 보면서 따라하게 됐다. 특히 함수들은 구글링을 하면서 이것저것 다 써보는데 데이터 타입에 따라 못쓰는 함수들이나 배열이나 객체에 사용하면 오류가 나는 함수들을 써서 돌리니 오류가 나서 내 기본기 부족을 실감했다. 일단 JS문법 종합반을 다 듣고 나서 연습문제 사이트에서 문제 하나씩 풀어보며 코드를 짜봐야겠다. 수업만 들으니 나는 다 안다고 생각했는데 모르는게 천지삐까리다ㅠ

📌Velog 글쓰기 창 preview 사라짐 해결법!

저번에는 preview가 없어졌을 때 로그아웃하고 재접속하니 해결됐었는데 이번에는 그런 방법으로는 어림도 없었다. 나와 같은 인간들이 많았던 듯 velog preview not showing, velog preview not working 등이 구글 연관 검색어에 많이 떴는데 해결책은 나오지 않았다😂😂 그러다가 이노베이션 캠프 잡담방에 도움을 요청하니 다른 분께서 해결책을 알려주셔서 다행이 preview 기능을 되찾을 수 있었다. 그 방법은 바로

`Ctrl' 누르고 마우스 휠로 화면 축소하기 이다.

엄청 간단한 방법인데 이렇게나 헤매다니🤦‍♂️ 시간 낭비때문에 그저 슬퍼지는 이 순간...그래도 이제 방법을 알게 되서 다행이다. 다른 분께서는 프리뷰를 볼 수 있는 다른 사이트를 알려주셨는데 이것도 유용해보여 링크를 달아놓으려고 한다. 나같은 사람들에게 도움이 됐으면 좋겠다.

프리뷰 사이트
stackedit.io