예방이의 개발일기

저는 이미 JavaScript에 대한 기본적인 이해가 있었지만, TypeScript를 프로젝트에 어떻게 적용해야 할지에 대한 고민이 있었습니다. 몇 번의 TypeScript 문법 강의를 들은 적이 있었지만, 여전히 이를 프로젝트에 어떻게 활용할지에 대한 감이 부족했습니다. 그런데 패스트캠퍼스에서 제공하는 강의를 통해 많은 도움을 받았습니다. 이미 JavaScript를 알고 있었지만, 강의에서는 JavaScript에 대한 깊은 이해를 바탕으로 TypeScript를 어떻게 적용할 수 있는지에 대해 자세히 다뤄주셨습니다. 강사님은 이해한 내용을 토대로 자신의 생각을 명확하게 표현하고 설명하는 능력이 뛰어나신 것 같았습니다. 확실히 실무에 계셨던 분이셔서 그런지 실무에서 사수없이 일하고 있는 저의 가려움을 잘 ..

코드를 작업하다 보면 생각보다 드래그도 많이하게 된다. 그러다 보면 마우스로 드래그 하고, 다시 키보드로 손을 이동하는 동작들이 많아져서 손목에 부담이 가게 된다. 그래서 찾게된 vscode extension과 단축키 설정법! 단축키는 mac 기준으로 작성되었다. 1. Bracket Select 괄호, 따옴표 등을 단축키를 이용해 선택할 수 있다. opt + a 를 클릭하면 "" 사이, '' 사이, [] 사이 등 한 번에 선택해준다. 완전 편함 강추 2. htmltagwrap jsx 작업하다보면 부모 태그로 감싸 줘야하는 경우가 많이 생기는데 이 extension사용하면 내가 지정한 태그로 단축키만 입력하면 감싸준다. opt + w를 클릭하면 드래그 한 부분을 태그로 감싸줌~! 나는 기본 div로 설정해..

선택자 패턴에서의 우선순위 적용 규칙 !important 인라인 스타일 요소 style="color:red" #id .class 속성기반 가상 Tag * CSS 명시도 계산법 1. inline 스타일 : 1000점 2. Id 선택자 개수(#) : 100점 3. Class 선택자 개수 (.) : 10점 4. Tag, Element 선택자 개수 : 1점 5. !important : 그냥 강제로 무조건 적용 (99999999...점) 6. 전체 선택자 (*) : 0점 7. 가상 엘리먼트는 무시 * 전역선택자(*), 조합자(+, >, ~, "", ||)과 부정 의사 클래스는 명시도 영향 없음 * 부정의사 클래스 내부에 선언한 선택자는 영향을 끼침 * 점수가 같다면 가장 마지막에 (가장 하단에) 작성된 선언이 적..

웹사이트 만들다 보면 아이콘을 직접 만들 수는 없으니까 인터넷에 있는 레퍼런스들을 빠르게 참고해서 사용해야하는데 아래 사이트들에서 이용하면 좋았다. 특히 이미지를 다운받고 싶으면 Iconbuddy가 유용했던 것 같고 리액트 프로젝트를 할 때는 npm으로 React Icons을 설치해서 유용하게 사용했다. 1. Iconfont Download 2400+ Free, High-Quality Icons | IcoFont icofont.com 2. Iconbuddy Iconbuddy — 180K+ open source icons Iconbuddy is a search engine that allows you to search, download, customize, and edit over 180,000 open ..

프로젝트 할 때 어떤 색상을 메인으로 해야할지? 그리고 메인 색상과 잘어울리는 색상은 무엇이며 어떻게 구성을 해야할지 고민이 많이된다. 그 고민을 줄여주는 사이트들이다. 색상팔레트, 컬러조합 등을 추천해준다. 1. Coolors Coolors - The super fast color palettes generator! Generate or browse beautiful color combinations for your designs. coolors.co 2. Paletton.com Paletton - The Color Scheme Designer Paletton, the color scheme designer In love with colors, since 2002. Paletton application..