css 작업하기

프로필 로딩화면 만들기

일부러 2~3초 정도 늦게 프로필을 불러오고 로딩화면을 보여주면 더 그럴듯해보이기 때문에 일부러 로딩화면을 만들었습니다. 

자바스크립트에는 해당 밀리세컨드 다음에 함수를 실행하는 setTimeout이라는 함수가 있습니다. 그래서 componentDidMount에서 3초 후에 프로필을 렌더하는 함수를 불러오도록 했습니다. 그리고 프로필이 있냐 없냐에 따라서 클래스 네임과 값을 다르게 주었습니다. 

페이스북 같은 느낌을 내기 위해 배경색은 "#3B5998"을 사용했습니다. 해당 css 코드까지 다 붙여넣고 새로고침을 눌러보세요.

해당 화면이 보인다면 잘 따라오신 겁니다.

3초가 지나면 프로필을 불러오기 때문에 프로필이 있는 화면으로 바뀌게 됩니다.

프로필 렌더링 화면 만들기

이제 프로필들을 깔끔하게 보여지도록 해보겠습니다.

다 flex 박스를 이용할 예정이라 코드들이 비슷합니다. 이렇게 하면 대충의 윤곽이 잡히게 됩니다. 그리고 이제는 profile.js와 profile.css를 수정해서 더 예쁘게 만들어보도록 하겠습니다.

css 부분을 하나하나씩 설명하기가 어려워서 이렇게 프로필 컴포넌트에 사용된 전체 css 코드를 가져왔습니다. 해당 코드들 까지 다 입력하면 아래와 같은 화면이 됩니다.

맨 오른쪽의 한 줄은 화면 크기를 줄였을 때 화면입니다.

플렉스를 사용했기 때문에 딱히 미디어쿼리를 사용하지 않고도 화면 크기에 따라 잘 나왔기 때문에 딱히 반응형 작업을 하지는 않았습니다. 작업하시는 화면 줄였다가 늘렸다가 해보세요. 디자인이 마음에 들지 않으신다면 다른 여러 형태로 바꾸는 등의 연습을 하시는 것도 좋습니다.

에러없이 잘 따라오셨다면 이제는 깃허브에 올리는 일만 남았습니다. 다음 포스팅에서는 깃허브에 올리고 깃허브 페이지를 만들어서 로컬 환경이 아니라 다른 사람들도 볼 수 있게 만들어보도록 하겠습니다.

공감은 제작자에게 큰 힘이 됩니다.