본문 바로가기

업무이야기

 (46)
VS Code 보기 좋은 테마 변경 방법 및 추천 저는 지금까지 VS Code 기본 테마에 딱히 불만이 없어서 테마를 바꿔본적은 없는데요, typescript 관련 스터디를 하다가 추천해주신 테마가 있어서 적용해보고 포스팅을 남겨봅니다 : ) 제가 이번에 추천할 VS code 는 'night owl' 테마과 'material icon theme' 인데요, 적용 후에는 아래와 같은 모습으로 바뀌게 됩니다. 두 플러그인을 적용 시켜준 이후에는 폰트 색도 다르고 좌측 마크다운 파일이나 html 파일 등의 아이콘도 다르게 나타나게 됩니다. 그럼 어떻게 변경시킬 수 있는지 알아보도록 하겠습니다. 다운받아야 할 플러그인 material icon theme : 아이콘을 더 가시성 있고 예쁘게 바뀝니다. Night Owl : 테마의 한 종류입니다. VS Code 테마..
Visual Studio Code Font 바꾸는 방법, 폰트 추천, 특수문자 ligature 적용 - D2coding, Fira 저는 Mac에서 VSCode 라는 에디터를 사용하고 있습니다. Mac 유저로서 apple 고유의 글씨체도 예뻐서 바꿀 생각이 없었지만 아래 Fira code 나 D2Coding 글씨체처럼 특수문자가 예쁘게 표현되는 ligature 옵션이 지원되는 글씨체들이 있습니다. 특히 비교연산자나 arrow function을 사용할 때 ligature 옵션을 적용해주면 예쁜 화살표로 변해서 나오게 되어 저도 설치해보고 싶어서 해보았습니다~! 많이 사용되어지는 글씨체가 두가지 있습니다. 첫번째 추천 글씨체는 코드 가독성이 좋다고 알려진 D2coding 이고 두번째 추천 글씨체는 지인추천 FIRA Code 입니다. 그럼 어떻게 내 visual studio code에 적용시킬 수 있을지 알아볼까요? 1. 마음에 드는 코드..
React background-image 로드 에러 해결하기 url([object Module]) 리액트를 진행하면서 파일 로드가 잘되지 않아 에러를 본것만 두번째입니다. 에러 낼 때마다 구글링을 거듭하게 되어 정리해둡니다. 이번에는 background-image에 파일의 경로를 상대경로로 적어두었는데 파일을 업로드하지 못해서 background-image: url([object Module]); 라는 문구가 나왔습니다. 파일을 업로드하지 못할때의 문제 해결방법에 대해서 적어보겠습니다. 1. npm url-loader 와 file-loader를 터미널 창에 입력해서 설치해줍니다. $ npm install url-loader --save-dev $ npm install file-loader --save-dev 후에 'webpack.config.js' 옵션을 추가해주어야합니다. 그전에 create-rea..
자바스크립트 부드럽게 느려지는 애니메이션 - progress bar 이번에 인프런 애플사이트를 클론하는 코딩 수업을 들으면서 다양하게 활용 가능할것 같은 애니메이션이 있어 한번 정리해두려고 합니다. 애플 사이트는 스크롤 하면서 동영상 사진이나 글자의 효과 또는 위치를 움직이는 효과를 넣어주었는데요. 이것은 기본적으로 화면을 스크롤 가능하도록 스타일로 화면의 높이를 강제적으로(?) 늘려주고 스크롤값에 따라 여러 효과들을 넣어주는 원리입니다. 여기에 동영상을 처리하여 (프레임을 이미지화) 멋진 효과들을 입히는데요, 조금 더 페이지를 고급화 시키기 위해서 부드러운 감속 효과를 넣어주면 한층 더 있어보이는 느낌이 뿜뿜하게 됩니다. 먼저 아래와 같이 기본 마크업 + 스타일 + 스크립트를 입혀보았습니다. 마크업 해놓은 박스를 스타일에서 fixed 로 고정시켜두고 스크립트에서 pag..
타입스크립트 typescript 자바스크립트 적용 및 기본 문법 자바스크립트는 동적언어, 타입스크립트는 정적언어라고 하는데요. 동적언어는 비교적 작은 규모의 프로젝트에 어울리고 java, c++ 과 같은 정적언어는 대규모 프로젝트에 어울린다고 합니다. 동적언어인 javascript는 타입정의를 하지 않아 에러가 발생하는 상황임에도 에러를 뿜지 않아 에러 코드가 그대로 서비스단까지 가서 동작하지 않는 경우가 있어 이런 에러를 줄여주고자 타입스크립트를 도입하는것 같습니다. 먼저, 이 글은 Visual Studio Code를 기준으로 작성되었습니다. 타입스크립트 설치하기 타입스크립트를 설치하기 위해서는 node.js 가 설치되어 있어야합니다. 설치되어있지 않은 분들은 google 검색창에 node.js 검색하시고 먼저 다운받아 주시기 바랍니다. 다운받으셨다면 터미널 혹인 ..
클린코드 정리 클린코드 글을 보고 정리해둡니다. 프로젝트 들어가기 전에 한번씩 읽어보면 잔상이 남아서 좋지 않을까 생각합니다. Naming 함수 그 외 Naming 1. 풀네임으로 작성할것 2. 함수라면 return 값을 보고 관련 이름으로 정할 것 3. 타입 정보는 불필요 ( 타입스크립트의 도움을 받을 수 있으며 타입이 변경될 때마다 변수명도 변경해야 하기에 애매함 ) 4. 중복된 단어는 제거. 완벽함이란 더이상 더할 것이 없는 게 아니라, 무언가를 더이상 뺄 것이 없는 것이다 -생텍쥐페리 5. 사용하려는 전문 용어가 다른 단어로 대체 불가할 때만 사용 6. 단어의 뉘앙스를 고려 (ex_ get , find) 7. 기존팀내 규칙이 좋지 않더라도 따르는 어느정도 유연한 자세 필요 ( 개선은 그 다음 ) 8. 함수는 동..
Git Hub 간편하게 배포해서 포트폴리오 관리하기 - GitHub pages 오늘은 GitHub Pages, 깃허브 배포에 대한 포스팅을 써보려고 합니다. 리액트를 배우면서 GitHub에 자체 url을 만들어 배포 기능이 있다는 것을 처음 알았습니다. Git 블로그를 많이 들어보긴 했지만 저는 티스토리 블로그를 사용하기 때문에 '아.. 그런것이 있군' 정도로만 넘어갔었는데 알고보니 GitHub Pages 배포 기능을 활용한 블로그더라고요. 이번 포스팅에서는 아래와 같은 배포 방법에 대해서 다뤄보려고 합니다. 기본 배포 방법 배포 할 작업이 여러개일 때 배포 방법 리액트 배포 방법 기본 배포 방법 저장소(레파지토리 - reposiotry) 만들 때 저장소 이름을 배포에 맞게 정해주는 방법입니다. 레파지토리의 이름을 아래와 같은 형식으로 지어주시면 됩니다. GitID.github.i..
스타일 폰트 단위 rem em 의 차이, vw 언제 어떻게 사용하면 좋을까 요즘 애플 사이트를 클론 코딩 해보고 있는중입니다. 클론 코딩 중에 제가 잘 사용하지 않는 단위들을 많이 사용하게 되어서 간단하게 정리해봅니다. 저는 퍼블리싱 작업을 할 때 받아온 디자인에 간편하게 그리고 최대한 오차없이 맞추기 위해 고정 px을 많이 사용해왔습니다. 해서 em, rem과 같은 단위는 상대적 단위 혹은 계산을 한번 더 해야하는 단위로 생각되어 단 한번도 작업에 사용해본적이 없는데요. 이참에 좀 더 깊게 알아두면 좋을 것 같습니다. rem 과 em 개발자 도구를 켜서 스타일을 보면 1.2rem 과 같은 단위들을 한번쯤은 보셨을 것 같습니다. 이 rem 의 의미는 무엇일까요? rem 이란, The root element's font-size 라는 의미로 여기에서의 root는 html을 뜻합니..

티스토리툴바