보통 초기 프로젝트를 세팅할 때, 폴더 명이나 파일명을 임의로 작성해서 깃 레파지토리에 올려놓는데요. 이후 폴더 명이나 파일 이름이 변경되는 경우가 있습니다. 깃에서는 폴더/파일명에 대소문자를 구분하지 않는데, 로컬 환경에서 폴더/파일명의 대소문자를 구분할 수 있어 개발도중 오류가 생길 수 있습니다. 맥 환경에서 개발서버나 빌드 할 때 잘 되는 반면 다른 환경에서 경로 오류가 나더라고요. 확인해 봤더니 파일 누락 오류였습니다. 해결방법으로는 깃 자체에 대소문자 구분해주는 설정과 레파지토리에 변경된 폴더/파일명으로 다시 푸시해 주는 방법입니다. 1. 깃 대소문자 구분 설정 git config core.ignorecase false 2. 변경된 폴더/파일명으로 레파지토리 업데이트 git rm -r --cac..
2022.06.19
안녕하세요. 꾸생입니다 :) 오늘은 회사 업무 중 배우게 된 내용에 대해 포스팅해보려 합니다. 드디어 첫 SI 프로젝트의 개발이 마무리됐습니다. 이후 수정사항이나 버그 정도 잡아주면 될 거 같지만 나중에 DB 쪽에 큰 문제가 생길 거 같은 불길한 예감이 듭니다만... 프론트 수준에서 어떻게 할 수는 없었습니다. 여차저차 마무리되고 이후 알고 보니 일정이나 기획 등 구멍 나있는 프로젝트였습니다. 수주한 쪽에서도 일정을 못 맞출 거라 생각했다고 합니다. 1차 프로젝트를 이어 다음 2차 프로젝트도 1차와 연관되어 Vue.js를 사용하는데요. 1차 때에는 프로젝트 셋팅이 된 상태에서 개발을 진행했지만 이번에는 텀이 생겨 다시 셋팅을 해봤습니다.(신입이지만 가능했습니다..^^) 동일한 vue-element-adm..
2022.06.18
이번 포스팅에서는 리액트 18 버전을 기준으로 웹팩 설정을 수동으로 진행해 보겠습니다. 리액트가 18 버전으로 나온지 조금 지났는데, 저는 회사에서 Vue를 계속 쓰다 보니 리액트를 공부할 시간이 없었습니다. 먼저 간략하게 CRA(create-react-app) 폴더 구조와 비슷하게 구성해보고 수동으로 웹팩설정과 가장 유용한 기능 중 하나인 HMR(Hot Module Replacement)도 설정해보겠습니다. 마지막으로 이미지 파일을 Webp 확장자로 변환해주는 웹팩 플러그인이 있더라구요. 이 것도 적용하려고 했으나.. 다음 포스팅으로 양보하겠습니다 :) 1. 폴더 구조 //React18 ├─ dist ├─ package-lock.json ├─ package.json ├─ public │ └─ index..
2022.06.08
요즘 회사에서는 Vue를 사용해 프로젝트를 진행하고 있습니다. 이번 1차 프로젝트가 곧 끝나가는데요. 2차도 마찬가지로 Vue를 사용해 개발한다고 합니다. 저는 리액트가 좋은데 말이죠? 아니면 최소한 IE를 배제하고 vue 3.0을 쓸 수 있도록 해주면 좋은데 말이죠 이 부분은 어쩔 수 없는 SI 프로젝트라 선택권이 없습니다. 그래도 모든 부분에서 득과 실이 있다고 생각하는데요. 취업하기 전 찍먹만 했던 뷰를 제 기술 스택으로 인정할 수 있게 됐습니다. 이 부분이 가장 큰 장점이라 열심히 해야겠습니다. 이제 기본을 단단히 하기 위해 다시 공부 기록용 포스팅을 이어나가도록 하겠습니다. 이전 트랜스파일러와 바벨에 대해서 포스팅했는데요. 오늘은 모듈 번들러인 웹팩에 대해 다시 공부해봤습니다. 모듈 번들러 리액..
2022.06.05
자바스크립트를 공부하다 보면 쉽게 들을 수 있는 폴리필과 바벨에 대해서 다시 공부해보며 기록해봅니다. 자바스크립트는 현재까지 계속 업데이트되고 있고 인기있는 언어인데요. 그리고 브라우저마다 자바스크립트를 실행하는 엔진이 다르기 때문에 하나의 코드가 서로 다른 브라우저에서 작동이 안 될 수 있습니다. 간단하게 브라우저별 JS 엔진 종류 눈에 익히고 넘어가봅니다. Chrome : V8 Safari : JavaScriptCore Firefox : 스파이더 몽키(Spidermonkey) Edge : 차크라(Chakra) 이제 트랜스파일러와 바벨, 폴리필이 무엇인지 알아보자 트랜스파일러(Transpiler) 컴파일러는 들어봤어도 트랜스파일러를 잘 모르는 사람이 많은데요. 컴파일러는 사람이 이해할 수 있는 고수준 ..
2022.05.29
안녕하세요. 꾸생입니다. 요즘 티스토리 스킨을 다시 만들고 있는데요. 인파님의 티스토리 스킨을 보며 분발하고 있습니다. 인파님처럼 화려하게 꾸미지는 못하지만 꾸안꾸 느낌으로 소소하게 재밌는 디자인을 넣고 있는데요. 비교적 간단하게 귀여운 고양이를 만들어보려 합니다. 사실 검색으로 들어오셨다면 본인이 찾던 그 고양이가 아닐 수 있습니다. 아무튼 제가 자주 애용하는 Boxicons라는 오픈소스 아이콘 라이브러리가 있습니다. CDN이나 npm 라이브러리 설치로 간단하게 사용할 수 있는데요. 대략 1000개 이상의 아이콘들이 준비되어 있어 원하는 아이콘을 검색해 사용하실 수 있습니다. 아래 링크로 접속해 확인해보세요. Boxicons : Premium web friendly icons for free Boxic..
2022.05.28
background-image 프린트 할 때 안 보이는 현상 background-image 속성으로 이미지를 표시해놨고 프린트할 때 미리보기에서는 해당 이미지가 안보이며, 프린트 출력에도 나오지 않는 현상이 있었다. 이유는 이랬다. 브라우저에서 기본적으로 배경색과 이미지를 인쇄하는 옵션이 꺼져있으며, 이것을 우회하기 위해서 아래 CSS 코드를 적용하면 간단하게 해결 할 수 있다. * { -webkit-print-color-adjust: exact !important; /* Chrome, Safari, Edge */ color-adjust: exact !important; /*Firefox*/ } 출처 How can I force browsers to print background images in CSS..
2022.05.25
sheet.js 셀 스타일 및 셀 병합 sheet.js 말고 excel.js 라이브러리를 사용한다면 셀 스타일과 병합하는 과정이 간단합니다. 그리고 github에 사용 방법도 자세히 나와있는 편이라 쉽게 찾아보며 엑셀 기능을 구현할 수 있습니다. 하지만 sheet.js를 사용해야 한다면 그 것은 IE 때문이지 않을까 생각됩니다. 바로 저 처럼 말이죠.. sheet.js 브라우저 호완성 위 이미지는 sheet.js의 브라우저 호완성 표입니다. 정말이지 끈질긴 IE녀석... GitHub - exceljs/exceljs: Excel Workbook Manager Excel Workbook Manager. Contribute to exceljs/exceljs development by creating an ac..
2022.05.23
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev