프로그래밍 공부 노트

styled-components는 CSS 파일 없이도 JS 파일 내부에서 CSS를 작성할 수 있도록 도와주는 라이브러리이다. 프로젝트를 진행하면서 CSS와 JS파일을 왔다갔다하는 번거로움을 줄여준다고해서 사용해봤다. styled-components를 사용해보면서 느낀 장점은 아래와 같다. 1. styled-components를 사용하면 한 창에서 디자인, 로직 모든것을 해결할 수 있다. 2. CSS 파일을 추가적으로 생성하지 않아도 된다. 3. SCSS 에서 사용하던 문법을 비슷하게 사용할 수 있다. 4. class 명칭을 고민하는 시간이 줄어든다.? 사용법과 간단하게 공부했던 내용을 정리해보려고 한다. 사용방법 import React from " react " ; import { Link } from " react-router-dom " ; import styled from " styled-components " ; import " ./MenuFont.css " ; // styled-components const List = styled . ul ` display : flex ; list-style : none ; ` ; const Item = styled . li ` padding-right : 1 rem ; ` ; const StyledLink = styled ( Link ) ` text-decoration : none ; color : black ; ` ; const CenterMenu = () => { return ( < List className = " Menu-Font " > < Item > < StyledLink to = " / " > Home </ StyledLink > </ Item

VSCode를 사용하면서 확장기능들중 잘 사용하고있는 Prettier가 갑자기 동작을 하지않았다. Prettier를 재설치해보고 VSCode를 껏다켜보고 컴퓨터도 재부팅 해봤지만 똑같이 동작하지 않았다. 1. VSCode settings 에서 Format on Save 를 검색하고 체크박스가 표시되어있는지 확인하고 안되어있다면 체크하기 체크가 되어있었고 해제했다가 다시해봤지만 그대로였다. 2. settings -> json 검색 -> Launch -> edit in settings.json -> editor.formatonsave:true 이미 true로 설정되어있었다. 마지막으로  3. settings -> Default Formatter 검색 버튼눌러서 "esbenp.prettier-vscode" 선택 해당부분이 나는 null로 되어있었다. esbenp.prettier-vscode 를 선택하고 해당 문제를 해결할 수 있었다.