생계유지형 개발자 67

[git] .gitignore 생성 (node_modules 같은거 적용 안될 때)

새로운 node 프로젝트 생성하고 최초 commit 하기 위해 .gitignore 파일을 생성했고 node_modules 디렉토리나 .DS_Store 같은 파일들을 추가했는데 아무리 해도 커밋제외 대상으로 적용이 안 되었다. 인터넷 찾아보니 캐시 지우는 것 같은 명령어를 실행하길래 그대로 가져왔다. .gitignore 파일 생성하고 node_modules/ 추가하기 touch .gitignore && echo "node_modules/" >> .gitignore && git rm -r --cached node_modules ; git status

[Java] 문자열에서 URL 찾아서 치환하기 (정규 표현식 제일 정확함)

자바로 문자열에서 URL을 찾아서 다른 문자로 치환하는 기능이 필요했다. 당연히 인터넷 검색해서 이것저것 찾아봤는데 다양한 url 형식을 모두 찾아내는 정확한 정규식은 잘 없었다. 검색해서 찾은 것 + 내가 수정 및 변형해서 최종적으로 아래 정규식이 제일 정확했다. 문자열 속에서 2차, 3차 도메인과 쿼리스트링은 물론 URL에 한글 포함된 경우도 찾을 수 있다. 정규 표현식 Regular Expression ((http[s]?|ftp):\/\/)?(?:www\.)?[-a-zA-Z0-9@:%._\+~#=가-힣]{1,256}[:|\.][a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+,.~#?&\/=가-힣]*) as a Java string "((http[s]?|ftp):\\/\\/..

[Webpack5] 배포환경 별 빌드 설정 및 실행하기 (webpack-merge, dotenv)

내가 일하는 곳에서는 배포환경을 주로 다음과 같이 셋 또는 넷으로 설정한다. Local Develop Real Staging 이번에는 webpack 사용하여 공통 js모듈을 개발했는데 빌드 설정 하면서 웹팩에서 기본으로 사용하는 mode 이름 때문에 조금 애먹었다. 웹팩에서 사용하는 mode는 none | development | production 세 종류가 있는데, none은 말 그대로 논이고, development가 이제 내가 생각하는 Local 느낌이고 production이 real 같은 배포용이다. mode를 저 세개 외에 다른 이름은 사용할 수 없다. 다른거 입력하면 웹팩 실행할 때 에러난다. 나는 개발환경에 배포하는거 이름을 굳이굳이 development로 하겠다고 package.json 스..

[Javascript] input=file 첨부한 이미지 섬네일 보기

옛날엔 뭐 톰캣 임시폴더 경로에서 파일 찾아서 가져오고 그랬던 것 같은데... FileReader 사용하니까 되게 간단하네. HTML Javascript document.getElementById("id_input_file").onchange = (inputEvent) => { let file = inputEvent.target.files[0] var reader = new FileReader() reader.onload = (readerEvent) => { doucment.getElementById("id_img").setAttribute("src", readerEvent.target.result) } reader.readAsDataURL(inputEvent.target.files[0]) } https..

[webpack5] HtmlWebpackPlugin 사용하여 html 번들링 시 js 골라서 삽입하기

하나의 프로젝트 안에서 디바이스 별로 디렉토리를 나누어 pc용 모듈, mobile용 모듈을 따로 개발하려고 한다. 즉, 한 번의 빌드로 pc.js, mobile.js 라는 산출물을 만들어야 한다. 2개 이상의 js 파일로 번들링 하기 위한 설정이다. // webpack.config.js entry : { index: ! isDev ? './dist/index.js' : './src/pc/index.js', mobile: ! isDev ? './dist/mobile.js' : './src/mobile/index.js' }, output: { filename: "[name].js", chunkFilename: '[name][id].js', path: path.resolve(__dirname, 'dist'),..

[Svelte] .env 빌드환경 설정 및 프로퍼티 사용하기 (dotenv, rollup)

빌드환경에 해당하는 .env 파일 사용하기 먼저, 필요한 노드모듈을 설치한다. npm install --save-dev dotenv @rollup/plugin-replace 빌드환경은 로컬PC(local), 개발서버(development), 운영서버(production) 총 3가지로 분류할 것이며 이를 Mode라 명칭할 것이다. 프로젝트 루트경로에 모드별 .env 파일을 생성하고 프로퍼티를 작성한다. .env.local (mode: local) .env.dev (mode: dev) .env.real (mode: real) 앱 실행 스크립트에 mode 환경변수를 추가한다. --environment MODE:[모드] // package.json { "scripts": { "build-development":..