[✍️ Dev Log] FE 정재혁 / 2022-01-04

### 오늘은 어떻게 프로젝트에 기여했나요?

- 모바일 프로토타입 제작
- 반응형 웹 구현 방법 터득, 공유
- 콘친 페이지 목업 구현중

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?

- 콘친 찾기 페이지 구현 중에 담당 엔지니어분께 피드백을 받았다.
피드백 중 중요한 것 하나는 최신 웹사이트에서 반응형 웹사이트 구현이 거의 필수적이라는 것이었다.
결국 반응형 웹 구현을 위해 Figma에 모바일 사이즈 프로토타입을 모두 추가하였고, SCSS에서
사용할 규격까지 정해놓은 뒤 반응형 웹에 대한 공부를 시작했다.

```scss
// Break Point
$md: 768px;
$lg: 1200px;

// Mixins
@mixin md {
@media (min-width: #{$md}) {
@content;
}
}

@mixin lg {
@media (min-width: #{$lg}) {
@content;
}
}

@mixin mobile-only() {
@media (max-width: #{$md - 1px}){
@content;
}
}
//_reponsive.scss
```

### 에러 핸들링
위와 같이 초기 세팅을 마치고 실험해보고자 내 코드에서 ```@include```를 사용하여
테스트를 해보려고 했으나 빨간색 에러가 나오며 컴파일이 되지 않았다.

에러에 대해 검색해보니 ```import``` 문제인 것을 알게 되었고, 어디의 ```import```가 잘못된걸까 고민하다가 ```main.scss``` 파일을 열어보니 내가 ```@include```를 사용하려는 파일이 ```mixin```을 만든 ```_responsive```파일보다 먼저 ```import```되고 있었다. ```mixin```을 만들기도 전에 ```@include```로 불러오려다 보니 에러가 난 것 같다.

### 에러 해결
```scss
@import './mixins/reponsive.scss';
@import './base/normalize.scss';
@import './layouts/grids.scss';

@import './pages/conChinPage.scss';
@import './components/conChinPostingBox.scss';
@import './components/conChinConChinBox.scss';
//main.scss
```
```_responsive```파일을 제일 먼저 ```import```하자 에러가 해결되었다.

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [x] 콘친 페이지 목업 구현 마감
- [x] 헤더 목업 구현
- [x] 마이페이지 목업 구현