오늘 공부 계획 및 공부한 내용📝
- 후발대 과제 제출 ㅇ
- styled-component 수정, README.md 작성 ㅇ
- Lv.2 과제 점검 및 제출 ㅇ
- 리액트 강의 다시 듣기 🔺ing 주말에 보충하기
문제🧐 / 해결과정⚒️
1) 파란색 글씨, 파란색 라인 없애기
📌 text-decoration: none 을 추가해줬더니 바로 파란색 밑줄이 없어졌다. 바닐라 자바했을 때 같은 문제가 있었는데... 그와 동일하게 크롬에서 자동으로 만들어진 것이 아닌가 예상해본다...
2) 중복된 스타일 요소 줄이기
📌 리펙토링 과정에서 동일한 스타일 적용은 styled-component 에선 어떻게 처리하는지 알아보았다. 자바스크립트에서는 .태그 이름, .태그 이름 ... 이런식으로 " , "로 처리했는데
styled-component 에선 styled.태그 종류를 styled(차용할 스타일화된 컴포넌트 이름) 로 바꿔주어 처리했다.
🔺 아래 두개는 다른 태그(form이랑 div)를 사용해서 그런지 같은 방식으로 했을 때 스타일 적용이 안됨. 방법을 찾지 못해 기존의 방식대로 써줬다.
오늘의 코테
정규표현식(Regex)을 사용해 풀어보려고 했지만 숫자를 모두 분리해서 더하는 바람에 결과는 실패였다(23을 그대로 더해야 하는데 2와 3으로 분리해 더한 식으로ㅎ).
정규표현식은 "특정 패턴의 문자열"을 찾기 위한 표현 방식으로
사용하면 정말 편리할 것 같지만... 아직 많이 어색하고 어렵다☹️
정규표현식 참고
String.prototype.replace()
📌 6번줄 .replace 를 써서 0-9까지의 수가 아닌 모든 것은 없애 새로운 문자열 반환
(예시 입력값 "aAb1B2cC34oOp" 결과 : "1234" )
--> 필요한 줄이라 생각했지만...결과적으로 필요없음. 이유는 11번줄에서 요소 하나하나를 돌면서 Number함수가 문자열을 숫자로 변환해주는 데, 이 과정에서 그전에 split되어서 공백으로 나온 요소들은 모두 0이 되기에 덧셈 결과에 아무런 영향을 끼치지 않게됨.
📌 처음엔 parseInt를 써서 문자열을 숫자로 바꾸려 했더니 NaN이 나왔다.
비슷한 Number를 썼더니 바로 해결됨. 찾아보니 둘은 약간의 차이가 있었다.
Number는 공백을 0으로 처리하는데 parseInt는 NaN으로 처리해 더하기 결과가 NaN이 나온 것..
