jikeun의 등록된 링크

 jikeun로 등록된 티스토리 포스트 수는 43건입니다.

요즘 인기있는 npm 패키지/라이브러리를 비교할 수 있는 사이트, npm trends [내부링크]

npm trends: Compare NPM package downloads Which NPM package should you use? Compare packages download stats, bundle sizes, github stars and more. Spot trends, pick the winner. npmtrends.com 개발자의 길로 접어들면서 사수에게 가장 많이 들었던 말이, 트렌드를 알아야된다는 말이였다. 개발의 세계는 무궁무진하고 업데이트속도가 빨라서 고작 1년만 지났음에도 불구하고 신기한 라이브러리,,AI 등등 신기술들이 등장하게 된다. 그 몇년의 세월을 견디고도 살아남은 라이브러리나 프레임워크도 많지만, 결국 JQuery 가 옛날 언어가 되어버린 것처럼..(최근 부트캠프 학생들..

[Vue Error] npm run serve 오류 vue-cli-service: command not found [내부링크]

git clone 을 실행하고 npm run serve 를 실행했는데 해당 오류가 발생했다. sh: vue-cli-service: command not found npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ERR! [email protected] serve: `vue-cli-service serve` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the [email protected] serve script. npm ERR! This is probably not a problem with npm. There is likely additional logging out..

[Git] gitignore 활용하여 추적되지 않는 파일들 관리하기 [내부링크]

보통 build를 하게되면 버전관리를 하지 않아도 되는 파일들이 생성된다. 예를들어 env 파일이나 cache, node_modules 등의 폴더들은 git에 올리지 않고 로컬에서 관리해주는 경우가 대부분이다. 이런 경우 git push 하기 전에 일일히 파일을 골라내서 push하기 번거롭기 때문에 추적 자체를 제외시킬 수 있도록 git ignore 를 활용할 수 있다. vscode 에서 자체적으로 ignore 파일에 들어있는 폴더들은 추적을 하지 않으니 꽤 유용하게 쓰는 기능 중 하나이다 :-) 1. 파일 만들기 파일 내용 (추적을 원하지 않는 파일들을 선택해서 골라줄 수 있다.) 예를 들어 .cache/ dist/ node_modules/ 이렇게 적으면 위에 파일들은 추적되지 않는다 .DS_Sto..

[Git] git user name / email / password 기본정보 세팅하기 [내부링크]

git 을 사용하다보면 password 가 만료되거나, github gitlab 의 정책이 바뀌면서 token을 기간제로 다시 입력해줘야하는 경우가 종종 일어난다. 그런경우 password 대신 token을 입력하고 세팅하면 되는데, 이런 경우와 컴퓨터를 초기화 시킨 경우 등등 git 세팅을 바꿔줘야하는 경우가 아주 많다. 이럴 때, 터미널을 키고 `git config --list` 를 치면 입력된 사용자 정보를 확인할 수 있다. joeun@joeuns-MacBook-Air ~ % git config --list credential.helper=osxkeychain init.defaultbranch=main user.name=[아이디/이름] user.email=[이메일] 이렇게 쳤는데, user.name..

[확장프로그램] 웹 사이트 컬러를 추출하고싶을때, Color Picker 추천 [내부링크]

확장프로그램중에 퍼블리싱 및 프론트개발을 하면서 매우매우 잘 활용하고있는 도구를 추천해볼까 한다! 개발 과정에서 가끔 원하는 색상을 웹페이지에서 뽑아보고싶은경우가 많은데 그때 유용하다! 사실 다른 기능보다 그냥 컬러만 뽑아내는게 중요하기 때문에 그 기능에 특화된 웹스토어 앱을 찾았다. Native Eyedropper 이란 앱인데 정말 컬러 뽑아내는것에만 특화되어있고, 직관적이라 사용하기 매우 편리하다 해당 컬러피커를 추가해 준 후, 툴바에서 선택해서 피커로 해당 컬러를 바로 추출할 수 있다! > color picker 사이트 Color Picker - Native Eyedropper is used as a native eyedropper tool to detect the color of any pixel..

[React] useEffect 와 CleanUp 작동방식 이해하기 + input 입력완료 후 감지 코드예시 [내부링크]

useEffect 를 먼저 살펴보자면 리액트는 실제 DOM의 렌더링과 상태값의 변경을 감지해 화면에 올바르게 반응하는 것과 관련된 일을 한다. 그리고 이와 별개의 일들 즉, 호출과 통신 등 따른 기능과 그 호출에 따른 반응들의 관련된 이펙트들을 'side Effect' (사이드이펙트)라고 한다. 실제로 직접적으로 컴포넌트 함수에 들어가게 된다면 버그나 무한루프에 빠질 가능성이 높은 사이드 이펙트들은, 사이드 이펙트를 활용하기 위한 도구 useEffect를 사용해서 동작하도록 해야 한다. > useEffect 사용예시 useEffect(()=>{ // 실행 함수 넣어주는 곳 }, [ // 의존변수 넣어주는 곳 ]) useEffect는 두 개의 매개변수와 두 개의 인수와 같이 호출되며, 의존변수를 의 상태를..

[React] 렌더링 상태 체크하기 (크롬 익스텐션 활용) [내부링크]

사실 이전에 리액트로 작업할 땐 렌더링상태를 체크할 수 있다는 사실을 몰랐기 때문에 어느 부분에서 렌더링이 되는지 몰랐었다. 하지만 막상 렌더링감지되는 기능을 깔아놓고 나니 나도 모르게 렌더링에 대해 신경을 많이 쓰게 되더라 이왕 하는거 최적화된 환경을 위해 설치 하는게 좋을 것 같았다. 크롬 웹스토어 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 28ce1c171 on 3/22/2023...

[React] input 상태 업데이트 useState,useRef [내부링크]

ref (reference) 에 대해 알아보자 ref 는 React에서 사용할 때, useRef 로 변수에 담아 사용이 가능하다. ref 기본기능을 간단하게 설명하자면 다른 DOM에 접근해서 작업이 가능하도록 해준다. ( 이외에도 활용되는 기능이 매우 많지만 input에 관해서만 적어내리도록 하겠다) useState 는 우리 모두가 알고 있듯이 React에서 상태를 관리할 수 있도록 도와주는 기능이다. // ref const ref = useRef(); // useState const [state, setState] = useState(null); useState는 이런식으로 상태가 관리된다 입력 > 상태함수 실행 > 함수로 인한 state값 업데이트 > input 필드 값 변경 ( ref에서 삭제가능 ..

[React] createPortal 사용해 효율적으로 모달 관리해주기 [내부링크]

모달은 어디에 넣어야 할까? 사실 퍼블리셔로 시작한 나로써는 최적화적인 면도 중요하지만 DOM 의 구조를 잘 파악하고 체계적이고 직관적인 구조로 짜는것이 가장 베스트의 코드라 생각한다. 특히나 모달의 경우는 머리로는 구현이 쉽지만 상태 모달부터 시작해 기능과 submit 모달 등등 다양한 기능을 가지고 있다. 실시간으로 뿜어져나오는 여러 모달을 처리하기엔 최적화적인 코드를 사용하고싶지만 그것도 쉽지않다. 구조적으로 하위 내용과 div 로 감싸진 곳에선 모달을 사용하지 않는 편이 좋다. css 코드를 만지다보면 가끔 z-index 를 무작위로 사용하는 경우가 많은데 이 점을 고려하지 않고 모달작업을 하면 상위 position에 맞춰 모달이 본인에 위치를 잃어버린다. 하위에서 아무리 z-index 를 우겨넣..

[javascript] 문자열을 숫자형으로 바꾸기 [내부링크]

input 에 들어가는 모든 값들은 자동으로 type이 string 으로 바뀌어서 value 값에 찍히게 된다 이런경우 숫자형으로 변환해주는 가장 쉬운 두가지 방법이 있다. 1. Number()로 감싸준다 let stringNum = "12" let number = Number(stringNum) console.log(stringNum) // "12" console.log(number) // 12 2. string 숫자 앞에 + 를 넣어준다 let stringNum = "12" let number2 = +stringNum console.log(stringNum) // "12" console.log(number2) // 12

[Vue] firebase logEvent 연동하기 + Realtime [내부링크]

최근 하이브리드 앱을 적용하면서 기존에 사용하던 firebase 에 web 이벤트도 트래킹을 적용해야 했다. 사실 겉만 보면 좀 어렵게만 느껴지겠지만 개념만 간단하게 생각하면 매우 간단하다. (그냥 로그 찍는거다) 추후 서비스 업데이트를 위해 사용자들이 어떤 이벤트, 어디로 검색했는지를 보는것이 가능하다. 해당 코드는 Vue 내에 적용하기 쉽게 작동하도록 만들었다. firebase 설치 npm install firebase main.js const app = initializeApp(firebaseConfig(/* firebaseConfig key */)); const analytics = getAnalytics(app); const AnalyLog = (value) => { logEvent(an..

[javascript] 모바일 검색창 숨기기 기능 구현 (터치 떨림 보정) [내부링크]

모바일에서 작동하는 검색창을 구현하려던 도중 터치아웃을 하는 순간 스크롤 감지에 의해 검색바가 깜빡이는 현상에 부딧혔다. 해당 버그를 수정하기 위해서 별의 별 짓을 다햇다.. lodash의 throttle 이나 touchout, touchstart 등등 여러가지 이벤트로 핸들링 하려고 해봤지만 깜빡이는 문제를 잡기 쉽지않았다.(스크롤이 워낙 민감하게 동작하기때문에..) 그러던 도중, 해당 글을 발견했고 jQuery 대신 javascript 로 구현한 로직을 짤 수 있었다. 사실, setInterval을 쓸 생각은 하지도 못했는데 덕분에 좋은 기능 구현을 할 수 있었다. :-) javascript var didScroll; var lastScrollTop = 0; var delta = 5; var navb..

[CSS] 스켈레톤UI 적용하기 (체감 로딩시간) [내부링크]

스켈레톤 UI : skeleton 스플래시 스크린이나 트로버는 단순히 로딩 중임을 알려주기 때문에 사용자들은 언제쯤 로딩이 완료될지 아무런 추측을 할 수 없다. 반면, 스켈레톤 스크린은 완전히 로드된 페이지의 모습을 대략적으로 흉내내어 나타내기 때문에, 사용자에게 실제 로딩 진행 과정을 어렴풋이나마 보여주어 사용자의 체감 로딩시간을 줄일 수 있게 된다. 로딩할 각종 미디어 자원이 많은 유튜브, 페이스북 등에서 사용하고 있다. * 참고 스켈레톤 스크린 - 나무위키 이 저작물은 CC BY-NC-SA 2.0 KR에 따라 이용할 수 있습니다. (단, 라이선스가 명시된 일부 문서 및 삽화 제외) 기여하신 문서의 저작권은 각 기여자에게 있으며, 각 기여자는 기여하신 부분의 저작권 namu.wiki HTML CSS ..

masonry / infinite scroll / imagesLoaded 활용하여 핀터레스트 | 네이버 이미지 리스트화면 구현하기 [내부링크]

벽돌처럼 차곡차곡쌓아진 디자인을 masonry 라고 이야기한다. 이번엔 사이즈가 제각각 다른 이미지를 활용해 이런 피드리스트를 구현해보았다. 추가로 스크롤링시 다음 페이지를 호출하는 방식을 사용했다. (infinite scroll) masonry 만 사용한 경우 발생되는 문제점이 애초에 해당 프로젝트는 pull-refresh 를 사용하고 있어서 제대로 영역을 감지 못하는 상태였다. 게다가 데이터 내부에 이미지를 받아오자마자 뿌려주다보니 이미지가 완전히 load 되기 전에 레이아웃이 실행되어 높이 영역이 계속해서 겹치는 현상이 발생했다. 그럼 어떻게 해결할 수 있을까? 라는 생각을 이것저것 해보다가 이미지가 완전히 load 되어 높이가 지정되었을 때, 적용하면 문제없이 구현이 가능할것이라고 생각했다. 사용..

[React] 클릭(click)이벤트 기초정리 [내부링크]

onClick react에선 이벤트 함수들은 'on~'으로 시작한다. 때문에 click 이벤트를 발생시키려면 onClick 이벤트를 호출해야하는데 onClick을 사용할때 함수명을 clickHandler 또는 clickHandler() 로 선언하는것에 차이가 있다. 보통 react에선 ()를 통해 함수를 식별하기 때문에 ()괄호를 붙여서 함수를 이벤트에 넣은 경우 JSX가 읽혀질때 click이벤트로 같이 호출된다. 때문에 click 시에만 동작하게 하려면 괄호를 제거하고 사용해야한다. 예시 import React from "react"; import Card from "../UI/Card"; import ExpenseDate from "./ExpenseDate"; import "./ExpenseIte..

[axios] 엑셀 파일 다운로드 기능 구현하기 [내부링크]

엑셀 파일 다운로드 javascript 를 사용하여 a 태그에 받은데이터를 넣어서 동작 구현이 가능하다. api에 속성과 입력값에 따라 params 값을 설정해주고 responseType 을 설정해준다 axios({ url: "/report", methods: "GET", params: { year: this.year, month: this.month, xls: "Y", xlsLimit: "300" }, responseType: "blob" //responseType 설정 }).then(res => { const url = window.URL.createObjectURL(new Blob([res.data])); const link = document.createElement("a"); link.href ..

[axios] 이미지 POST 기능이 제대로 동작하지 않을때 확인사항 [내부링크]

이슈 상황 이미지를 다른 객체들과 같이 post 요청을 보내려고 하는데 이미지 post 기능이 정상작동되지 않고 null 값을 찍힌다 1. header 에 Content-Type을 multipart/form-data 로 지정했는지 확인한다 //이미지를 넣는 axios 호출 부분 SetImg(params) { return axiosService.post("v1/files", params, { header: { "Content-Type": "multipart/form-data", }, }); }, 2. FormData로 요청하는지 확인한다. let fd = new FormData(); fd.append("key", img소스 ); //axios 호출 let val = await axiosService.Set..

[javascript | Vue] 이미지 다운로드 기능 만들기 (canvas/url활용) [내부링크]

get으로 받은 소스를 화면에 뿌리고> 그 이미지를 다운로드 받으려면 canvas를 활용해 가능하다. template (표현되어질 부분) template (다운로드 버튼) 다운받기mdi-arrow-down-bold-circle methods a 태그를 임의로 생성해 canvas 속성을 대입해 다운로드 기능을 동작하게 해준다 download() { var a = document.createElement("a"); // a.setAttribute("download", "파일이름" + ".png"); a.setAttribute( "href", document .getElementById("canvas") .toDataURL("image/png") .replace("image/png", "image/..

[javascript] 문자 /n 줄바꿈 변환작업 [내부링크]

백에서 전달받는 데이터중에는 문단의 특성을 전달받지 못한 경우가 많다 그래서 replace로 /n 를 변환해준다 //cardData /n이 포함된 문자열을 포함한 배열 cardData.forEach((el, index) => { cardData[index].cont = el.contents.replace(/\n/g, " "); }); vue 환경이라 v-html를 활용했지만 p태그 안에 적용해줘도된다

[javascript] window.open 팝업권한 사파리 문제해결 [내부링크]

사파리에선 승인을하지 않으면 팝업창이 띄어지지 않는다 이런오류를 해결하기 위해 window.open을 null 값으로 먼저 띄어놓고 async await 비동기 호출을 통해 axios 호출 이후 미리 띄어진 window창에 url을 넣어주는 방식을 사용했다. // 팝업선언 let popup = window.open( undefined, "payment_pop", "top=10,left=10,width=500,height=600,status=no,menubar=no,toolbar=no,resizable=no" //사이즈설정 ); // 비동기로 url 호출 const url = await axiosService .post("post_url", params) .then((res) => { let url = "..

[javascript] youtube embed 소스 자동재생 모바일에서 안된다면 (autoplay 이슈해결) | mobile 자동재생 안됨 [내부링크]

유튜브 소스 자동재생 구현하려면 iframe을 사용해 autoplay를 설정해주는것이라고 알고 있을것이다. 사실 몰랐는데 최근 유튜브 영상 소스가 페이지 로드시 자동재생하는 기능을 구현하면서 현재(2022)는 autoplay가 web에서 지원되지 않는다는것을 알게되었다. 그것도 모르고 과거 블로그글들을 찾아보면서 계속 다른 부분에서 오점을 찾고 있었다. (이래서 공식 문서와 업데이트 사항을 명확하게 파악하는것이 중요하다) 결국 어느 블로그에서 autoplay 기능이 web에서만 제공되고 mobile 환경에서는 제공되지 않는다는 이야기를 듣고 여기저기 소스를 탐색해 본 끝에 youtube에서 지원해주는 iframe_api 소스를 활용해 모바일 환경에서도 자동재생 구현이 가능한 소스를 찾았다. html ..

[javascript] 스크롤 내릴때 사라지고 올라갈때 나오는 검색바 만들기 (앱 호환) [내부링크]

window.addEventListener를 사용하면 매우 많은 이벤트 함수를 실행할 수 있다. 보통은 scroll, mouseWheel 이벤트를 사용해 휠스크린을 내릴시 간단하게 화면을 조작할 수 있다. mouse wheel 이벤트 보기 Element: wheel event - Web APIs | MDN The wheel event fires when the user rotates a wheel button on a pointing device (typically a mouse). developer.mozilla.org mouse wheel 이벤트를 사용할 경우의 문제점이 휠을 사용하지 않는 앱웹에선 작동하지 않는다는점이다. 이런경우 scroll 이벤트를 사용해 처리하는것이 좋다 scroll 이..

[css] input checkbox 스타일 설정하기 :has 부모요소 선택 [내부링크]

input checkbox 스타일을 쉽게 지정할 방법은 어떤것이 있을까? 기존에 작성된 더러운 코드들을 다 뜯어고치고 공통으로 스타일을 찾아보는데 확실시 html구조에서는 label 안에 넣어서 input을 적용해주는게 한눈에 보기에도 직관적이고 좋아보였다.(기존에 내가 짯던 코드들은 요소들이 분리되어있어 한눈에 보기 너무 불편했었다) 문제는 input 에 들어갈 체크박스 스타일을 박아찾아보다가 input type값을 활용해 css에서 부모요소를 찾아 고정 스타일을 주는 방법을 생각해냈다. main.js const TermsWrap = () => { return ( 약관동의 개인정보 수집동의 ); }; input 요소를 체크해 부모 라벨에 스타일을 입혀주었다. input는 타입에따라 스타일을 고정해서..

[svg] 개념과 도형의 기본이해하기 [내부링크]

xml코드 기반의 확장 가능한 벡터 그래픽 (점과 점 사이를 연결해서 라인의 길이를 계산해서 자동으로 연결시켜줌) 아이콘, 로고, 그래프, 사용자 인터페이스에 자주 사용된다. dom의 일부로써 각 객체별로 html 에서 엘리먼트로 추가됨 특징 벡터기반이기 때문에 이미지의 크기에 상관없이 선명하게 유지됨 모양이 복잡하지 않은 경우에는 용량도 작다. css나 스크립트도 다양하게 조작이 가능하다. 아이콘, 로고, 그래프, 사용자 인터페이스 등에서 사용 단점 선 하나하나가 데이터로 표현되기 때문에 복잡하고 개체수가 많을수록 용량이 증가하여 효율성이 떨어진다. (아이템이나 로고정도에만 사용하는 이유다) 그래픽요소이기때문에 fill 색이 그라데이션이 들어간 svg는 이미지가 깨진다 사용방법 태그상에 백그라운드 이미..

[javascript] if 와 switch 에 대해 알아보자 [내부링크]

if 문 / switch 문 지정한 조건이 참인 경우 명령문을 실행한다. 조건이 거짓인 경우 또다른 else if 문이나 else 를 사용해 다른 명령문을 실행할 수 있다. test 값에 따른 명령문 실행 let test = 1; if(test === 1){ alert("1이 맞습니다") } else if(test === 2){ alert("2가 맞습니다") } else { alert("1도 2도 아닙니다.") } test 값에 따른 함수실행 let test = 1; if(test === 1){ test01(); //조건에 맞는 함수 실행 } else if(test === 2){ test02(); //조건에 맞는 함수 실행 } else { another(); //조건에 맞는 함수 실행 } // 함..

[javascript] while 문에 대해 알아보자 [내부링크]

for 문의 특징 배열과 함께 주로 사용 횟수 제한이 있다. 초기값을 주고 이 값에게 주어진 조건을 만족시킬때까지 사용 while문의 특징 반복횟수를 정하지 않아도 된다. 주로 파일을 읽고 쓸때 많이 사용한다. while문은 작동하는 원리는 true / false로 구분해서 작동한다 원래의 for문 for문의 경우 정확한 갯수가 필요하기 때문에 로직생성에 어려움이 있는경우가 종종있다. for(let i=0; i

[Vue] innerWidth 감지해서 resize 이벤트 생성 [내부링크]

우선 resize 이벤트를 실행하려면 nextTick을 알아야한다 VueJs - $nextTick() 이란? doozi316.github.io $NextTick으로 갱신형 이벤트를 사용할때 사용합니다. 자바스크립트는 비동기로 처리되는 특성을 가지기 때문에 vue 내부에서 data가 업데이트 되고 난 직후 Vue 가 DOM을 찾지 못하는 경우가 종종 발생하며 이와같은 문제를 해결해주는 vue에서 제공해주는 콜백함수입니다 data() { return { windowWidth:0 } } 우선 window width 데이터를 담을 변수를 선언해줍니다. mounted this.$nextTick(() => { window.addEventListener("resize", this.onResize); }); m..

[Vue] 이미지 data로 넣는 방법 정리 + vuetify 활용예시 (v-img) [내부링크]

이미지를 상태에 따라 이미지와 관련된 작업을 하다보면 [ active | defult | error ] 등 상태값에 따라 다르게 보여줘야 하는 경우가 있다. 최소한의 코드를 작성하고 최대 효율을 내고 싶어하던 와중에 여태까지 경험해본 이미지 리소스에 대한 활용예시를 공유해보려고 한다. (물론 개발자마다 처리하는 방식이 다르기때문에 이 방법은 공유차원에서만 쓰는 글이다) 우선 기본적으로 v-for 문을 통해 아래처럼 배열 형식으로 소스 닉네임을 가져왔다. 보통 value가 아닌 id 값을 사용하긴 하지만 대충 적어봤다. 아래 예시는 참고용으로만 봐주시길 바랍니다. script data sortItem: [ { value: 1, active: false, }, { value: 2, active: fals..

[javascript] Spread & Rest Operators 연산자 / 배열 재생산 / 전개연산자 [내부링크]

# Spread 연산자 const newArray = [..oldArray,1,2] const newObject = [...oldObject, newProp:5] 더 많은 원소도 추가가 가능하지만 대괄호와 ... 구문만 있으면 새로운 object 할당이 가능하다. spread 연산자는 객체배열이나 배열에 어떤 요소를 합칠때 매우매우 많이 사용한다. 실무를 하면서 매우 많이 사용하는 연산자이기 때문에 필수로 알고있는것이 좋다. 예시 const numbers = [1,2,3]; const newNumbers = [...numbers, 4]; console.log(newNumbers) //[1,2,3,4] 출력 예시2 const Person = { name: 'Max' } const newPerson ..

[javascript] let & const 차이 알아보기 + JSbin 사이트 [내부링크]

ES5 버전까지는 var 를 사용합니다. ES6 버전에서는 let 과 const 라고 var의 최신버전이 나왔다. let 값을 수정할 수 있는 변수를 선언할 때 사용 const 값을 변경할 수 없는 상수에 선언할 때 사용 * 새로운 할당 불가능 *바로 js 를 볼 수 있는 사이트 : ctrl + enter로 console 값을 바로 받아볼 수 있다. JS BinSample of the bin:jsbin.com # var 예시 # let 예시 # const 예시재할당이 불가능해 type 오류를 출력한다. 에러가 호출됨으로써 해당 코드에서 어떤 부분에 오류가 있는지 찾아서 수정이 가능하다.

[Next/image] Next 활용하기 + 전역변수 src 설정 에러 해결과정 [내부링크]

Next에서는 image를 사용할 수 있는 코드가 따로 있다! Error: Failed to parse src "@public/img/common/logo/logo.svg" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://) Next/image 가이드대로 이미지를 첨부했는데 이런 에러가 났다. 전역으로 설정해놓은 @public 경로를 사용했는데 전역변수는 @로 핸들링 되는거 아니엿나? 했는데 / 로 시작하는 path를 입력해 달라고 뜨길래 @public 을 삭제하니 정상 작동했다. 잘못된 경로설정 src 정상작동된 경로설정 src..

[javascript] 이메일 인증 타이머 기능 구현 (+ 애플로그인 구현 썰) [내부링크]

애플로그인은 이메일이 필수가 아니라고요? 요즘 자체 회원가입 및 소셜 회원가입을 거쳐가면서 결국 이메일 인증 기능을 추가하기로 했다. 기존에 구현된 소셜 로그인에는 (카카오,네이버, 구글)은 별도로 이메일을 받기때문에 이런 인증절차를 자체회원가입에만 고민하면 되는 문제였는데 (사실 이 문제도 나중 스탭이였다..)c 애플로그인 기능을 구현 하냐! 마냐의 문제에서 결국 이메일 인증을 바로 다음 업데이트때 붙이기로 했다.. 애플로그인은 이메일을 제공할것인지 아닐것인지에 대해서 사용자가 직접 선택할 수 있다. (카카오의 경우 비지니스 계정을 등록하면 필수로 이메일을 받을 수 있다.) 어쨋든 대부분의 서비스는 이메일을 유니크값으로 사용자를 체크하기때문에 애플로그인에 대한 이메일 인증은 필수사항으로 보여졌다. 더 ..

[css] 화면에서 object 요소가 정리되서 나오도록 하기 [내부링크]

화면에 데이터를 뿌려서 확인할 경우 깔끔하게 정리해서 보고싶을때 사용하기 좋은 css 코드이다 .pre { white-space: pre; }

[javascript] 선택 날짜가 기간 사이에 있는지 체크하는 함수 localeCompare [내부링크]

# 해당 날짜를 선택했을때, 선택된 날짜 기준으로 live 화면인 리스트 출력 로직구현 reconstruction/filters /** * 시작날짜와 종료날짜를 계산해 오늘날짜가 기간 상에 있는지는 반환해줍니다 * live : 기간안에 오늘날짜가 있는 경우 * finish : 종료된 경우 * ready : 준비중인경우 * @param {*} startDate 시작날짜 * @param {*} endDate 종료날짜 * @param {*} today 오늘날짜 * @returns */ export const CheckRange = (startDate, endDate, today) => { let endValue = today.localeCompare(endDate); let startValue = toda..

[환경변수설정] Next + React , Vue 에서 env 파일 설정시 주의해야 할 점/ undefined [내부링크]

최근 여러가지 개발을 진행하다보면서 여러가지 개발환경에 접근하게 됐다. 예를들어 Next 기반의 React 라던가 Vue 환경이라던가. 사실 회사에서 프로젝트를 하면서 얻게 된 상식 중 하나가 Vue 에서는 환경변수명 접두사에 꼭 VUE_APP 을 붙여줘야한다는 사실이였다. ️ Vue 환경변수 설정 접두사에 꼭 VUE_APP 을 붙여줘야한다는 사실이였다. VUE_APP_API_URL= "url" 그리고 이번 사이드 프로젝트에 들어가면서 Next 기반으로 작업해 나가는데 계속해서 환경변수가 읽히지 않는 현상이 일어났다. 보통 env 키를 확인하려면 콘솔에 process.env.{API키명} 을 붙여주면 서버가 콘솔에 찍힌다. 근데 계속해서 undefined 가 표시됐다. ️ .env 를 확인할때 pro..

[Vue] Cookie 설정으로 하루보지 않기 설정 + 테스트 방식 공유 [내부링크]

Vue2 에서 Cookie 설정하기 쿠키 있나 없나 확인 > 오늘하루보지않기 클릭액션 > 쿠키 저장 > 테스트 쿠키 저장에 대한 테스트는 1분으로 잡고 1분 뒤, 쿠키가 정상으로 작동되면서 팝업창의 여부를 체크하면된다! 그리고 다시 하루로 잡고 애플리케이션 > 쿠키 에서 정상적으로 값이 들어가 있는지 확인..! mounted(){ this.getCookie(); }, methods:{ //쿠키확인 getCookie() { let cookiedata = document.cookie; if (cookiedata.indexOf("todayCookie=done") < 0) { this.floatingInfo = true; //쿠키 없으면 띄우기 } else { this.floatingInfo = false; /..

[Vue] mycure/vue-wysiwyg 기본편집기 활용하기 (default 값 넣기) [내부링크]

Vue2로 작업 중, edit 기능을 사용해야 한 경우가 생겼다. 물론 Vue 기능을 사용해 에디터 기능을 내멋대로 구현하면 너무나도 좋겠지만.. 기획 요구사항 날짜를 맞춰야하기때문에 사용한 라이브러리다 ! 사실 에디터 기능을 갖춘 라이브러리가 많은데 일단 사용할때 직관적이지가 않고 vue 전용으로 나온 라이브러리라 예시도 간결해서 너무 좋았다. 간단하게 사용하고 싶은 기능만 추가해서 구현이 가능한 라이브러리라 여기저기 유용하게 사용이 가능 할 것 같다. npm 설치 npm install @mycure/vue-wysiwyg main.js import Vue from 'vue'; import VueWysiwyg from '@mycure/vue-wysiwyg'; Vue.use(VueWysiwyg); test..

[Vue] vue-cli-serve production 빌드 시 스타일 문제 해결과정 [내부링크]

문제를 접하다 기존 dev 환경에서 빌드하고 배포할땐 전혀 문제가 되지 않았는데 이상하게 production 빌드 시 특정 스타일이 무너지기 시작했다. 여러가지 시도를 거쳤지만 뭐가 문젠지 찾지 못하고 요소 하나하나 뒤져보다 발견한게 해당 css 파일 중 reset.css 로 저장된 파일이 컴포넌트 스타일 적용을 막고있는 문제였다. ㅠㅠ (대체 왜..) 여러번의 빌드로 테스트를 해보니 production으로 빌드되면서 min 파일 변환되면서 스타일이 적용되는 순서에서 문제가 있다는것을 발견했다. 프로젝트 기획부터 문제 사실 중소에 다니는 여러 개발자들이 겪는 가장 큰 문제라고 생각하는게, 바로 프로젝트 기획이다. 아무래도 개발자는 적고 앱,웹 사업을 하고싶어하는 회사는 많으니 적은 인원으로 여러가지 사업..

[Vue] interceptors(인터셉터) 구현으로 axios 통신 공통으로 관리하기 [내부링크]

axios 문서 https://axios-http.com/kr/docs/interceptors 인터셉터 | Axios Docs 인터셉터 then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있습니다. axios.interceptors.request.use(function (config) { return config; }, function (error) { return Promise.reject(error); }); axios.interceptors.response.use(f axios-http.com axios를 활용한 통신이 많아지다보면 통신 전처리, 후처리에 대한 고민이 쌓여만간다.. interceptors는 원래는 요청이 주고받을때 통신 틈새에 액션을 취하는 역할이지만 ㅎㅎ 작업을 하다보..

[Vue] 모바일/웹 분기설정 정규식예제 [내부링크]

환경 : Vue2 + [email protected] + vuex@3 main.js const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ) ? true : false; //전역설정 Object.defineProperty(Vue.prototype, "$isMobileDevice", { value: isMobileDevice, }); //this.$isMobileDevice 로 활용이 가능하다 Test.vue if (this.$isMobileDevice === true) { url = res.data.mobile_url; } else { url = res.da..

[Vue] vue-lottie 활용해 json 파일 로딩화면 구현하기 [내부링크]

디자인이 들어간 프론트페이지들은 플랫폼 디자인에 맞춰 json 파일로 만들어진 로딩화면을 구현해야한다. 이 과정에서 lottie를 활용해 적용해보았다! 적용예시 참고 사이트 https://www.npmjs.com/package/vue-lottie/ 로티 사이트 / json 화면 동작 확인 사이트 https://lottiefiles.com/ LottieFiles - Download Free Lottie Animations, Integrations & Plugins The world’s largest platform for Lottie animations. Add free animations anywhere (even if you don’t know motion design) or create, collab..

[Vue] 앱과 웹뷰 통신 [내부링크]

여러가지 작업을 진행하다보면 웹뷰를 앱에 넣는 경우를 선호하는 경우가 생각보다 많다. (아주아주 많다..) 여러가지의 리스크들이 존재하지만 , 하나의 웹뷰를 다방면에서 재사용한다는 것에 아주 큰 매력을 느끼시나보다. 이런경우 웹뷰 환경을 열고, 닫고, 웹뷰에서 앱뷰 환경을 띄우고 등등의 여러가지 액션을 취해줘야 한다. 환경 : Vue2 + 플러터 try { //여기서 webToAppShareUrl 은 앱팀에서 받은 이벤트명이다 window.webToAppShareUrl.postMessage(`앱팀과 협의`); } catch { console.log('웹뷰일경우 이벤트 실행') }

[javascript] Youtube watch url 을 embed 형식으로 바꾸기 [내부링크]

정규식을 활용해 기존 watch_url 정보를 embed 코드로 변환이 가능하다 let youtubeUrl = extractVideoID('watch_url'); let reUrl = `https://www.youtube.com/embed/${youtubeUrl}`; extractVideoID(url) { var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/; var match = url.match(regExp); if (match && match[7].length == 11) { //id 추출이 가능한경우 return match[7]; } else { //id 추출이 불가능한경우 alert("Id ..