Chunho’s DevLife

프로젝트를 진행하며 종종 컴포넌트가 자동으로 import 되지 않는 불편함이 있었다.. 라이브러리를 찾던 중 Auto Import라는 라이브러리가 있어서 설치했다..) ES6, TS, JSX, TSX 모두 지원한다! 설치 후 import가 되어있지 않은 컴포넌트를 클릭하면 위와 같이 왼쪽편에 전구 모양이 생기는 것을 확인할 수 있다. 전구 모양을 클릭한 뒤 가져오기 추가를 누르면 자동으로 import가 된다!

이미지를 반응형의 1:1 비율로 맞추기 위해서는 position: 'relative', width: '100%', paddingBottom: '100%', overflow: 'hidden'가 적용된 div 태그로 이미지를 감싸준다. 이후 img 태그에 position: absolute, width:100%, height:100%를 적용해주면 이미지를 반응형의 1:1비율로 맞춰줄 수 있다. img { cursor: pointer; position: absolute; width: 100%; height: 100%; }

font-family: 'Pretendard', 'Apple SD Gothic Neo', Sans-serif; 다음과 같이 Pretendard가 적용되지 않았을 때 다음 폰트를 지정해주면 해결할 수 있다.

GridBox 사용 시 justify-content가 먹히지 않는 현상이 발생하였다. grid-template-columns: 20% 20% 20% 20%; 를 적용하고 정렬을 위해 justify-content에 space-between을 주었지만 아래와 같이 적용되지 않았다. grid박스 안에 있는 item에 고정된 width 값을 준 것이 문제였다. 정렬을 하기 위해서는 item의 비율을 width로 직접 적용하면 안되고, grid의 grid-template-columns 또는 grid-template-rows 에서 %를 사용하여 지정해주어야 한다. 위와 같이 수정을 해주면 정렬이 잘 되는것을 확인할 수 있었다.

css 작업 중 margin이 안먹는 문제가 발생하였다.. margin이 겹쳐져 있을 때 주로 발생하며, 이를 해결하기 위해서는 border, padding, inline을 적절하게 사용하면 된다.

더 많은걸 배우고 새로운 프로젝트를 진행하며, 학습해야 할 양은 점점 방대해져 갔지만 시간은 항상 부족했었다. 4학년을 앞두고 전공과목에 대한 지식 뿐만이 아닌 효율적으로 학습을 하는 방법과 시간을 사용하는 법을 배울 수 있어서 이번 학기는 나에게 조금 더 의미있었던 것 같다. 물론 흥미와 관심이 뒷받침돼야 한다고 생각한다. 내가 하고싶은 일, 배우고싶은 일이라 다행이라고 생각한다. 앞으로 더 많은걸 배우고 발전해야겠다.

보안상의 목적으로, 또는 굳이 원격 저장소에 올라가지 않아도 될 파일은 .gitignore를 사용하여 Push 시에 제외시킬 수 있다. .gitignore 파일은 git init이 되어있는 프로젝트 폴더의 최 상단에 위치해야 한다. 위와 같이 .gitignore 파일 안에 제외할 파일 또는 폴더를 작성하면 된다. 같은 경로에 있는 파일은 ./가 아닌 / 임에 유의하여야 한다.

먼저 마켓플레이스로 이동해 Prettier를 설치해준다. 이후 .prettierrc라는 이름의 파일을 만들어 준 후 아래 내용을 복사해서 붙여넣기해주면 설정이 완료된다. { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 }

먼저 Remote Development를 마켓플레이스에서 설치한다. 이후 명령 팔레트를 열고 Remote-SSH: Connect to Host를 클릭한다. 다음으로 나오는 창에 userID@ip 또는 서버 이름을 입력해준 후 : 뒤에 포트 번호를 입력해준다. 디폴트값은 22이다. 패스워드를 입력한다. 좌측 하단을 확인하면 SSH연결이 정상적으로 완료된 것을 확인할 수 있다.