블록체인 엔지니어링 부트캠프 2기 - Week 2👏

Bosees·2021년 11월 15일
0

부트캠프

목록 보기
2/6
post-thumbnail

Day 1🌞

개발자들의 대표적인 형상 관리시스템 Git에 대해 배웠다. 평소에도 자주 사용했던지라 어색함은 없었지만, 혼자만 개발하는 시간이 길어지다 보니 add, commit, push 밖에 사용을 안 했었다. 협업하면서 일어날 수 있는 충돌에 대해서 자유로웠던 경향이 있어서 이번 계기를 통해 충돌을 극복하는 방법을 배워보았다.

페어와 먼저 연동을 진행하고. 일부러 충돌을 내어보았다.

잘 보면 위에 "Accept Current Change" 와 "Accept Incoming Change" 버튼이 있는데 비쥬얼 스튜디오 코드에서 편의성을 위해 제공해주는 기능이다. 이 버튼을 통해
충돌된 코드를 올바른 코드로 바꿀 수 있는데. 이 부분에서는 페어와 상의를 하여 어떤 코드를 살릴지 협의 후 병합하는 과정을 거치면 충돌을 해결할 수 있다.

결론

결국 충돌을 해결하기 무엇을 살릴지 서로 더 나은 코드를 작성하기 위해선 협업하는 사람과의 의사소통이 중요하다.


Day 2🌞

CSS 레이아웃을 다루는 Flex Box에 대해서 알아보았다. 유저마다 보고 있는 화면의 크기가 다른데 일관성 있게 보여주기 위해선 유동적인 UI가 필요하다. 거기서 가장 익숙한 Flex Box를 적절히 사용하여 화면에 보여주기 위해 정석적인 절차를 진행해 보았다.

순서는,

  • 와이어프레임 작성
  • 목업 작성

이 2가지를 통해 내가 만들 화면이 어떤 화면인지 먼저 생각하고 구조화 시키는 작업을 진행하였다.

와이어 프레임

페어와의 이해를 도우려고 디자인툴. 피그마를 사용해 직접 그려본 사진이다.
셀렉터의 밸류는 CSS 방법론 중 하나인 BEM을 사용하여 그려보았다.

그리고 목업으로 작성후.

목업을 기준으로 만든 UI

역시나 디자인은 꽝이다. 그래서 일단 보기 편한 파스텔톤 색상으로만 백그라운드 컬러를 주었다.

결론

CSS에는 너무 많은 프로퍼티가 존재하기 때문에 하면서 외우려고 한다. 또 Flex Box를 다루는 방법 또한 개발하면서 배우는 게 가장 효율이 높지 않을까 생각한다.


Day 3🌞

Document Object Model. 일명 줄여서 DOM이라고하는 문서를 객체로 표현하는 브라우저 랜더링과 관련된 핵심 지식이다. 웹개발자라면 무조건 알아야하는 기초적인 지식인 만큼 가장 정확하게 알고 있어야 한다.

DOM은 예전에도 많이 공부했고 블로그에도 작성했던 기억이 있어서 이해하는 데 전혀 지장이 없었다.
그래도 교육 중 배웠던 가장 유익했던 순간은 JavaScript로 이벤트를 핸들링하는 방법 두 가지에 대해서
얘기 해보려고 한다.

이벤트를 핸들링하는 2가지는,

  • 태그에 집적 어트리뷰트로 이벤트를 추가하는 법 예) 엘리먼트.onclick = function...
  • 혹은 addEventListener API를 활용하여 이벤트를 핸들링 하는 법.

두 가지에 차이점은, 대상을 중복되게 사용할 수 있냐, 없냐 차이이다. 이 내용은 나중에 기술 블로그로 구체적으로 다시 작성할 예정이다.

Day 4🌞

간단한 로그인 기능을 흉내 낼 수 있는 UI를 작성했다. 보통 로그인이라 하면 대소문자나 특수문자, 몇 글자 이상만 가능하게끔 구현한다. 이때 유효성 검사가 필요한데. 이런 검사는 프론트쪽에서 미리 검사해 서비스의 불필요한 연산을 막는 게 중요하다.

유효성을 검사하는 단순한 코드

많은 서비스에서 아마도 조건문을 통해 복잡하게 유효성을 검사하지는 않을 것이고 정규 표현식을 사용한 함수를 통해 좀 더 깔끔한 코드를 작성할 수 있도록 하는 게 일반적이다.
정규표현식은 항상 미뤄왔던 숙제와도 같았는데. 이 역시 블로그에 자세하게 다룰 예정이다.


Day 5🌞

어쩌면 오늘은 JavaScript를 좀 더 세련되고 깔끔하게 작성하기 위해 가장 중요한 날일지도 모른다.
ES6에서 새롭게 나온 API중 map(),reduce(),filter()... 등등 다양한 API의 로직을 겸사겸사 공부할 수 있는 시간이기도 하다.

원래 알고리즘 공부를 하다 보면 자주 사용하게 되는 API들인데 실제 안에서 돌아가는 로직은 잘 알지 못했다. 그냥 무지성으로 썼달까?🙄

이 역시 블로그에서 다룰 예정이다.

profile
블록체인 프론트엔드 개발자

0개의 댓글