발생한 문제
로그인 하고 리뷰를 등록했을때 첫 동작은 이벤트가 실행되지 않고, 새로고침 후 로그인 정보가 로컬스토리지에 데이터값이 저장이 되면 두번째부터 이벤트가 발생되는 문제가 발생했다.
form태그를 사용해서 submit이 되는 문제인가싶었는데 preventDefault를 작성해둬서 그 문제는 아닌 것 같았고 튜터님께 질문도 해보면서 해당 문제를 찾아보니, 처음에 로컬스토리지에 로그인 정보가 아예 없을 때 존재하지 않는 데이터에 접근해 정보를 가져오려 할 때 문제가 발생한 것 같았다.
해결방법
optional-chaining을 통해 해결할 수 있었다.
옵셔널 체이닝이란 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있도록 해주는 것.
프로퍼티 뒤에 ?.를 붙여서 사용하며 ?.은 '앞'의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.
?.는 존재하지 않아도 괜찮은 대상에만 사용해야 하며 ?.앞의 변수는 꼭 선언되어 있어야 한다.
기능 구현 후 팀원분과 함께 리팩토링 해봤을때 옵셔널체이팅을 사용하지 않아도 오류가 발생하지 않아서 참고용으로 주석처리 완료
const savedReview = localStorage.getItem("review");
const userId = JSON.parse(localStorage.getItem("login")); // ?.[0]. optional-chaining
let currInfo = null;
//로그인을 안했을 때의 예외처리를 위한 작업
if (userId === null) {
currInfo = [];
} else {
currInfo = userId.filter((e) => e.id === currUser);
}####알고리즘 문제풀이
영어가 싫어요
문제 설명
영어가 싫은 머쓱이는 영어로 표기되어있는 숫자를 수로 바꾸려고 합니다. 문자열 numbers가 매개변수로 주어질 때, numbers를 정수로 바꿔 return 하도록 solution 함수를 완성해 주세요.
https://school.programmers.co.kr/learn/courses/30/lessons/120894
나의 문제풀이
function solution(numbers) {
let obj = {
zero : 0, one : 1, two : 2, three : 3, four : 4,
five : 5, six : 6, seven : 7, eight : 8, nine : 9
};
let num = numbers.replace(/zero|one|two|three|four|five|six|seven|eight|nine/g, (val) => {
return obj.val
})
return Number(num);replace 정규식을 사용하여 obj 객체의 key값을 value값으로 치환해서 출력하는 방식으로 접근했다.
문제풀이 방식은 맞는 것 같은데 객체 프로퍼티에 접근하는 방법이 잘못된 것 같아 구글링을 해봤다.
객체의 프로퍼티에 접근하는 방법은 점 표기법과 대괄호 표기법이 있는데 두 가지 방법의 차이점은 아래와 같다.
| 점 표기법 | 대괄호 표기법 |
|---|---|
| 프로퍼티 식별자는 오직 알파벳만 가능(_ & $ 포함) | 프로퍼티 식별자는 문자열 혹은 문자열을 참조하는 변수 |
| 숫자로 시작할 수 없음 | 숫자로 시작할 수 있음 |
| 변수를 포함할 수 없음 | 변수, 공백 사용 가능 |
| 가능 - obj.prop_1, obj.prop$ | 가능 - obj["1prop"], obj["prop name"] |
| 불가 - obj.1prop, obj.prop name |
아무튼 해당사항을 확인해보고 obj[val]로 변경해보니 정상 출력 확인!
let obj = {
zero : 0, one : 1, two : 2, three : 3, four : 4,
five : 5, six : 6, seven : 7, eight : 8, nine : 9
};
let num = numbers.replace(/zero|one|two|three|four|five|six|seven|eight|nine/g, (val) => {
return obj[val]
})
return Number(num);다른사람의 풀이
forEach와 replaceAll을 사용한 풀이가 있어 가져와 봤다.
let numStr = [ "zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine" ];
numStr.forEach((str, idx) => {
numbers = numbers.replaceAll(str, idx);
});
return Number(numbers);