우선 아침에 둘째 날 문을 열고 첫 데일리 스크럼을 진행했다. 회사에서 진행했던 스탠드업 미팅에서 했던 걸 생각을 했는데 지금 당장엔 내가 PM분들만큼 스크럼을 이끌 디테일도 약간 부족했고 미니 프로젝트도 각자 영역에서 작성하고 있었기에 오늘 하루의 일정을 정리하는 걸로 빠르게 마감했다.
매니저님의 피드백도 있었는데 회의록 작성에 디테일이 부족할 수 있다고 말씀해 주셔서 회의의 경과는 토픽이나 키워드를 놓치지 않고 적는게 나을 것 같다.
개인 홈페이지 완성하기
어제 와이어 프레임, 팀 노션을 작성하느라 시간이 좀 걸렸다곤 하나 웹 자체는 여전히 미숙해서 시행착오를 많이 겪었다.
display 옵션에 따른 차이
display의 속성들 중 추가된 것들은 아직 정리하지 못했고 기본 none, inline, inline-block, block 중 프로필 이미지 컨테이너를 inline-block 으로 중앙 정렬을 하려다가 틀린 것부터 시작이었는데
inline-block 으로 잡아놓고 parent를 좌측 정렬로 두고 아리송해하는 해프닝이 있어 속성부터 빠르게 공부하고 넘어가게 됐다.
inline은 컨텐츠만큼의 사이즈만 가지고 별도의 크기 조정이 안되는데 block은 기본적으로 container의 가로를 전부 채울 만큼 할당받기 때문에 쓰임에 주의해야 한다.
inline-block은 두 가지의 특징을 합쳐 기본적으론 inline이지만 크기 또한 조정 가능해 유동적으로 영역을 사용할 수 있다. (추가로 none은 요소를 완전히 숨긴다.)
나 같은 경우 프로필 이미지 컨테이너를 중앙정렬 하고 싶었고 컨테이너에 좌우 margin을 auto로 둬서 정렬할 생각이었는데 별도의 align 없이 inline-block 만을 사용해 부모를 따라 좌측정렬되는 이슈였고 간단한 자기소개 페이지라 유동적인 조정은 없을 예정이니 우선 block으로 바꿔서 해결하고 난 다음 나중에 부모의 align과 inline-block을 같이 사용해서 같은 결과가 도출되는지 비교해보니 맞았다.
여유가 있으면 flex, grid, table 등의 새로이 추가된 옵션도 살펴봄이 좋겠다.
앱 개발을 할 때도 iOS, Android가 제공하는 Constraint 기반으로 대부분 레이아웃을 작성했던지라 이처럼 기본적인 영역에 대한 속성 이해가 부족한게 느껴져서 다양한 속성을 지원하는 CSS에서 배워갈 점이 아직 많이 남은 것 같다.
그 외 파트는 웹 개발 종합반 강의에서 들은 만큼만 활용해 무난한 자기소개 페이지를 만들 수 있었다. 아주 옛날에 학교에서 써본 적 있었던 hover css animation 정도만 추가로 채택한 것 같다.
첫 팀 코드리뷰
코드리뷰라고는 하나 PR을 올려 각자의 환경에서 리뷰한 것이 아닌 ZEP 상에서 화면 공유로 자신의 페이지를 소개하며 설계의 의도, 추가로 배워보고자 개발한 부분, 공유하고 싶은 코드들을 보여주는 식으로 진행했다.
거의 유사 스터디이나 코드가 가장 핵심이 될 거라는 점에서 시도한 점이었고 웹 개발 종합반 강의에서 들은 내용을 복습하며 자기소개 내용을 담아 만들어보기 라는 자유 양식을 다들 저마다의 방식으로 개발해서 공유할 내용도 풍부했고 재밌는 시간이 됐다.
소개가 끝나면 구술로 코드 리뷰를 하듯 궁금한 점을 여쭤보거나 특별히 채용한 기술들에 대해 이야기를 주고 받았고 다른 분들의 경우
- toggle을 활용해 디스플레이된 콘텐츠 볼륨을 최대한 간결히 만들거나
- CSS 애니메이션을 적극 활용한 랜딩과 깔끔한 UI, 상호작용을 여기저기 넣은 페이지나
- 버튼으로 페이지를 넘기는 슬라이드식으로 구성 후 반응형으로 프레임 크기를 고려하거나
등 옵션의 차이같은 걸 중점으로 설명한 나랑 또 모두가 다른 맛으로 개발을 해서 리뷰할 때 서로가 서로에게 새로운 요소가 많아 각자 공부한 것 이상의 성과를 거둘 수 있었다.
나 같은 경우엔 toggle로 콘텐츠 조절하기, 오랜만에 보는 CSS Animation이나 슬라이드식으로 구현한 자기소개 페이지에서 rem, vw, 퍼센트를 쓰지 않은 요소도 반응형으로 크기 조정을 하고자 resize 이벤트 핸들러를 채용해 크기를 조절해보는 방식등을 새로이 배워갔다.
추가로 리뷰 자체에 즐거운 분위기가 형성돼서 아직 이틀 차인것 치고는 빠르게 어색함도 줄어드는 효과도 볼 수 있었다.
코드카타 - 프로그래머스 이상한 문자 만들기
문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백문자로 구분되어 있습니다. 각 단어의 짝수번째 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 리턴하는 함수, solution을 완성하세요.
fun solution(s: String): String = s.split(" ").map {
it.mapIndexed { index, char ->
if (index % 2 == 0) char.toUpperCase() else char.toLowerCase() }.joinToString("")
}.joinToString(" ")split을 사용한 결과에 map으로 transform을 진행하고 mapIndexed로 각 단어 글자의 Index를 포함하여 변환해 대문자, 소문자로 변형후 joinToString으로 다시 문자열로 바꿔주었다.
접근 자체는 깔끔했는데 다른 풀이를 참고하니 약간의 디테일이 부족했다.
fun <T> Array<out T>.joinToString(
separator: CharSequence = ", ",
prefix: CharSequence = "",
postfix: CharSequence = "",
limit: Int = -1,
truncated: CharSequence = "...",
transform: ((T) -> CharSequence)? = null
): StringjoinToString은 옵션이 다양하고 transform도 지원하기에 map을 사용하지 않고 joinToString(" ") {} 형식으로 사용해 함수 호출을 줄일 수 있었다.
