4/30(토) 오늘의 개발일기

길고 꾸준하게·2022년 4월 30일
0

코딩테스트

오늘은 코딩테스트를 봤다. 바닐라JS + scss로 짜는거라서 저번dino프로젝트처럼 코드가 엉망이될까 걱정이많았는데 처음부터 신경쓰고 코드를짜니
다른건 몰라도 이름짓기 부분에서는 만족한다. 함수도 인수를 많이 안넣으려고 노력했다.

하지만 마지막에 모듈화를 하려고 이리저리 분리하는데 도통 에러가 나서.. 후 dino때도 그랬고 지금도 모듈화는 달라진게 없는것같다.
코드자체가 길지가 않아서 그나마 다행이지만 이름짓기는 처음부터 신경써서 해서 잘됬는데 모듈화를 아직까진 처음부터 신경써서 할 정신까지는 없나부다..

그래도 성장했다. 확실하게. 코드를짤때 이름짓는걸 생각하고 하는거랑 그때그때 뭐가좋지를 생각하는거랑은 다를꺼라고 생각한다.
하지만 테스트도중 2가지정도의 문제점을 만났다.

array.map()으로 string을 리턴할때 이상한 `(백틱?쉼표?) 가 튀어나오는 현상

나는 바닐라js로 코딩을할때는 template를 만들어서 element를 템플릿리터럴로 string으로 구조를 짜서 넣는걸 좋아한다.
아무래도 엘리먼트를 만들고 append하고 하다보면 전체적인 구조가 눈에 안들어와서.
그래서 map을 이용해서 받은 data를 템플릿 리터럴을 이용해 원하는 element형태로 구조를 짠다음 return했는데
중간중간에 쉼표가 보인다.. 모니터에 먼지가 묻었나하고 닦아도봤는데 그럴리가없지;

출처
https://takeknowledge.tistory.com/139

참고하면 map 함수가 문자열 형태로 값을 리턴할 때는 (template literals로 결합한 내용도 마찬가지로 문자열) 기본적으로 쉼표(,) 로 묶어서 리턴한다고 한다. React로 jsx문법을 리턴할때 map을 많이써서 저런게 있을줄은 몰랐다. 결론은 map뒤에 .join('')만 붙이면 해결.

#id.class // .class

제목만보면 무슨말인지 모를수있지만 나는 바닐라js로 modal창을 구현하느라 .on/off클래스를 만들었다.
그후 id가 #modal인 엘리먼트에 on/off클래스를 토글해서 구현하고 싶었는데..

#modal{
	display:none;
}
.on{
	display:block; //not working
    border:5px solid red //working
}

시작은 이랬다. 나는 당연히 될줄알았는데 안되는거다. 그래서 다른 style은 먹히나 하고 border를 주고 최초 상태를 display:block로 바꾸고 테스트를 해봤다.
버튼에 따라 on클래스가 toggle로 잘 작동하는것을 확인했고 그에따라 border style도 변경됬다 => 근데 display transform등.. 다른건 안먹혔다..
셀렉터가 문제가있나 해서 구글링후 다음과같이 수정했다. ('css selector id class combined')

#modal{
	display:none;
}
#modal.on{
	display:block; //working
}

잘 된다. 외국형님이 id는 고유해야하는데 class랑 결합하려는 이유가뭐냐? 라고 댓글을 남기셨다(내글은 아니지만)
글쎄.. 입이삐죽나온채로 방법을 찾아내서 해결했다. => id and class selector

참고
https://css-tricks.com/multiple-class-id-selectors/
https://stackoverflow.com/questions/1028248/how-to-combine-class-and-id-in-css-selector

어째 TIL이 자꾸 길어지는 느낌이다..

profile
작은 나의 개발 일기장

0개의 댓글