분류 전체보기
-
[React.js] ESLint와 Prettier를 이용한 React 환경 설정 (VSCode)development/React 2021. 6. 19. 23:13
들어가며 프로젝트를 진행할 때 꼭 필요한 Lint 설정을 진행합니다. Lint란 무엇이고, 왜 필요한 지에 대해서 학습합니다. 최종적으로Prettier, ESLint를 사용하여 VSCode에서 저장 할 때마다 자동으로 원하는 스타일로 Auto formating 해주는 설정 방법에 대해서 알아봅니다. 본 글에서는 React + Typescript 설정을 기준으로 하며, JS 설정을 하고 계신다면 typescript 관련된 내용을 제외하고 적용하시면 됩니다. Lint가 필요한 이유 설명에 들어가기 앞서, Lint/Linter의 개념부터 알아봅니다. Lint, Linter란 소스코드를 분석하여 문법적인 오류나 스타일적인 오류, 적절하지 않은 구조 등에 표시를 달아주는 행위이고, Linter란 Lint의 동작을..
-
[React.js] Shallow compare와 Class component에서의 최적화 (22.04.13. 내용 수정 및 추가)development/React 2021. 6. 17. 22:44
들어가며 안녕하세요. 이번 포스팅에서는 Shallow compare 와 Class component 에서의 최적화에 대해 말씀드리려고 합니다. 메모리에 대한 이해가 있으시면 좀 더 쉽게 이해하실 수 있습니다. 물론 없어도 무관 합니다. 최적화란 무엇일까요? 최적화란 말 그대로 성능을 개선하여 가장 적은 비용으로 가장 좋은 퍼포먼스를 낼 수 있도록 하는 것입니다. 들어는 봤는데, 너무 어렵지 않나요? 'Webpack을 이용하여 build한 파일을 경량화하고, 의존성을 파악하여 코드 스플리팅을 진행하고.. ' 맞습니다. 최적화는 깊이 파고들면 어려운 방식들이 가득합니다. 하지만 위와 같이 어려운 작업은 하나씩 천천히 진행하면 됩니다. 너무 어려운 작업 말고, 작업 중에서도 가장 쉽게 접근할 수 있는 방법에 ..
-
[공지] 글 일부 삭제 및 재업로드공지 2021. 6. 15. 12:43
2019년부터 운영했던 개발 블로그 포스팅의 일부를 삭제하고 있습니다. 기존 미흡한 실력으로 작성됐던 글들이 다시 돌아보니 부정확한 정보들인 경우가 많은 것 같다는 생각이 들엇습니다. 그래서 남겨두어도 괜찮을 것 같은 글들을 제외하고는 삭제하거나 비공개 처리 하였습니다. 새로이 작성하는 글들로 정확한 정보로 많은 도움이 되는 개발 블로그가 되겠습니다. 블로그 방향성은 변하지 않고 이전과 동일하게 JS 위주의 개발 정보 글이 올라갈 것 같습니다. 블로그에 남겨주신 댓글은 비공개지만 감사히 잘 보관하고 있습니다.
-
CRA를 이용해서 Typescript 프로젝트 만들기 (+ 유사 절대 경로 설정하기(vsCode))development/React 2020. 5. 21. 10:43
이번 포스트는 정말 간단하다. 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..
-
자꾸 까먹는 간단한 Git 명령어들development/기타 2019. 10. 31. 11:15
자꾸만 명령어를 까먹어서, 자주 사용하지만 까먹는 명령어들을 정말 개인 기록 용도로 적어두었습니다. 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..
-
[HTML|CSS] Input type이 password일 때 입력한 password가 보이지 않는 이슈development/HTML | CSS | Vanilla JS 2019. 8. 20. 17:04
이번 포스팅에서는 Input type이 password일 때 입력한 password가 보이지 않는 이슈에 대해서 짧게 다루어 보겠습니다. (본 글은 이전에 업로드 되었던 내용을 좀 더 보기좋게 다듬어 재 업로드 한 글입니다.) 원인 이 현상이 일어나는 환경에서 나눔스퀘어 폰트를 사용하고 있다면, 폰트가 문제의 원인일 수 있습니다. 혹은 나눔스퀘어가 아니더라도 아래에서 서술한 이유와 같은 이유일 수 있습니다. 이런 현상이 발생하는 이유 HTML에서는 input type을 password로 지정하면 입력한 내용은 위와 같이 나름 암호화 되어서 보여집니다. 그런데 문제는 나눔스퀘어에선 위의 기호(●)가 없어 제대로 표기되지 않는 것 입니다. 해결 방법 해결 방법은 단순합니다. 바로 input type이 pas..