development42 [HTML|CSS] Font format과 font-face 선언 및 적용법 이번 포스팅에서는 Font format의 종류와 font-face 선언 방법, 적용법을 알아봅시다. Font format의 종류 포맷과 종류별 특징 포맷 포맷별 특징 TrueType Fonts (TTF) - 가장 일반적인 글꼴 형식 - 대부분의 브라우저가 지원 OpenType Fonts (OTF) - TTF를 기반으로 제작된 글꼴 형식 - TTF와 비슷하지만, TTF에서 지원하지 않는 최신 기능을 사용 가능 The Web Open Font Format (WOFF) - OTF와 TTF로 이루어져 있는 압축된 글꼴 형식 - 압축되어 있어 가볍고 다운 받는 속도가 빠름 - W3C 권장 사항 The Web Open Font Format (WOFF 2.0) - WOFF보다 더 향상된 압축을 제공하는 글꼴 형식 S.. 2021. 6. 23. [React.js] ESLint와 Prettier를 이용한 React 환경 설정 (VSCode) 들어가며 프로젝트를 진행할 때 꼭 필요한 Lint 설정을 진행합니다. Lint란 무엇이고, 왜 필요한 지에 대해서 학습합니다. 최종적으로Prettier, ESLint를 사용하여 VSCode에서 저장 할 때마다 자동으로 원하는 스타일로 Auto formating 해주는 설정 방법에 대해서 알아봅니다. 본 글에서는 React + Typescript 설정을 기준으로 하며, JS 설정을 하고 계신다면 typescript 관련된 내용을 제외하고 적용하시면 됩니다. Lint가 필요한 이유 설명에 들어가기 앞서, Lint/Linter의 개념부터 알아봅니다. Lint, Linter란 소스코드를 분석하여 문법적인 오류나 스타일적인 오류, 적절하지 않은 구조 등에 표시를 달아주는 행위이고, Linter란 Lint의 동작을.. 2021. 6. 19. [React.js] Shallow compare와 Class component에서의 최적화 (22.04.13. 내용 수정 및 추가) 들어가며 안녕하세요. 이번 포스팅에서는 Shallow compare 와 Class component 에서의 최적화에 대해 말씀드리려고 합니다. 메모리에 대한 이해가 있으시면 좀 더 쉽게 이해하실 수 있습니다. 물론 없어도 무관 합니다. 최적화란 무엇일까요? 최적화란 말 그대로 성능을 개선하여 가장 적은 비용으로 가장 좋은 퍼포먼스를 낼 수 있도록 하는 것입니다. 들어는 봤는데, 너무 어렵지 않나요? 'Webpack을 이용하여 build한 파일을 경량화하고, 의존성을 파악하여 코드 스플리팅을 진행하고.. ' 맞습니다. 최적화는 깊이 파고들면 어려운 방식들이 가득합니다. 하지만 위와 같이 어려운 작업은 하나씩 천천히 진행하면 됩니다. 너무 어려운 작업 말고, 작업 중에서도 가장 쉽게 접근할 수 있는 방법에 .. 2021. 6. 17. CRA를 이용해서 Typescript 프로젝트 만들기 (+ 유사 절대 경로 설정하기(vsCode)) 이번 포스트는 정말 간단하다. Create-React-App(이하 CRA)을 이용해서 Typescript 프로젝트를 만들어 볼 것이다. 0. 이번 프로젝트는 yarn을 사용한다. yarn 다운로드 방법에 대해서는 공식 홈페이지를 참고하자. https://classic.yarnpkg.com/en/docs/install # Typescript React Project 만들기 1. global로 CRA를 설치한다. > yarn global add create-react-app 터미널에 명령어를 입력하면 설치가 된다. mac OS의 경우 권한이 없다고 에러가 나올 수 있는데 global install의 경우는 명령어 앞에 sudo 를 붙여줘야 한다. * mac OS: > sudo yarn global add c.. 2020. 5. 21. 자꾸 까먹는 간단한 Git 명령어들 자꾸만 명령어를 까먹어서, 자주 사용하지만 까먹는 명령어들을 정말 개인 기록 용도로 적어두었습니다. remote branch 삭제 git push origin [:remote] --delete [:remote_branch_name] // 예시 [remote: origin, branch: temp] # git push origin --delete temp local branch 삭제 git branch -D [:local_branch_name] // 예시 [branch: temp] # git branch -D temp CRLF, LF 관련(개행문자) 설정(Config) 윈도우와 맥을 혼용해서 작업하다보면, 다른 운영체제에서 수정한 코드를 pull 하거나 merge 했을때 ERROR: expected lin.. 2019. 10. 31. [HTML|CSS] Input type이 password일 때 입력한 password가 보이지 않는 이슈 이번 포스팅에서는 Input type이 password일 때 입력한 password가 보이지 않는 이슈에 대해서 짧게 다루어 보겠습니다. (본 글은 이전에 업로드 되었던 내용을 좀 더 보기좋게 다듬어 재 업로드 한 글입니다.) 원인 이 현상이 일어나는 환경에서 나눔스퀘어 폰트를 사용하고 있다면, 폰트가 문제의 원인일 수 있습니다. 혹은 나눔스퀘어가 아니더라도 아래에서 서술한 이유와 같은 이유일 수 있습니다. 이런 현상이 발생하는 이유 HTML에서는 input type을 password로 지정하면 입력한 내용은 위와 같이 나름 암호화 되어서 보여집니다. 그런데 문제는 나눔스퀘어에선 위의 기호(●)가 없어 제대로 표기되지 않는 것 입니다. 해결 방법 해결 방법은 단순합니다. 바로 input type이 pas.. 2019. 8. 20. 이전 1 ··· 4 5 6 7 다음
