김평범's OrdinaryCode

프로젝트를 진행하다 보면 이미지를 업로드해서 프로필 사진을 적용한다던지 하는 기능을 만들 경우가 있다. 오늘은 input 으로 받은 이미지를 밸리데이션으로 체크하는 샘플 코드를 작성해보았다. ⚠️이미지 업로드 시 주의 사항 동일한 파일이 업로드 되었을 때 어떤 식으로 처리할 것인지 파일 용량이 큰 파일 업로드를 허용할지 아닐지 이미지 업로드 시 확장자는 어디까지 받을 것인지 이러한 부분을 고려를 해서 개발을 해야 한다. ✨이미지 파일 업로드받기 이미지 파일을 업로드받으려면 input type을 file로 변경하면 윈도 파일 브라우저가 뜨는 input 박스가 생성된다. input accept 처리하기 만약 파일 처리에서 accept 속성을 넣으면 여기서 적용시킨 형태의 파일만 파일 브라우저에서 뜨게 된다...

주소 검색해서 입력하는 사이트에서 자주 보는 카카오 우편번호 서비스가 이번 프로젝트에 필요해서 연동해보기로 했다. 🔎카카오 우편번호 서비스 카카오우편번호 서비스는 키를 발급할 필요도 없고 사용량 제한도 없고 기업도 무료료 사용할 수 있다.👍 🔑카카오 우편번호 서비스 스크립트 연동하기 카카오 우편서비스는 사용법도 너무 간단하다! 제공되는 자바스크립트 파일을 추가한 다음 바로 실행이 가능하다. 우편번호 서비스 연동 자바스크립트 샘플 코드 // 버튼 클릭 시 주소검색 팝업 띄우기 주소검색 onComplete data 형태 주소를 선택 한 다음 들어오는 결과 화면이다. address 에서 주소를 이용할 수 있고 addressEnglish에는 영어 주소도 들어와 있다. zonecode는 우편번호이다.

🤔서버리스 컴퓨팅(Serverless computing)이란? 서버리스 컴퓨팅이란 보통 클라우드 모델 중하나이다. 단어 자체로는 서버리스이지만, 실제로는 서버는 존재하나 서버에 관련된 부분을 크게 신경 쓰지 않아도 된다라는 의미로 서버리스라는 단어를 사용한다. 클라우드 서비스 플랫폼에 서버리스 컴퓨팅을 제공하는 서비스에 소스를 올리게 되면 바로 애플리케이션이 돌아가게 된다. 서버리스 컴퓨팅을 이용하면 서버를 구매할 필요도 없으며, 배포 후에 user 수에 따른 스케일링이라던지 프로비저닝도 자동으로 제공되어 소스 외 서버에 관련된 부분은 개발자가 신경 쓸 필요가 없다는 것이 장점이다. ✨AWS Lambda 아마존 람다는 아마존 웹서비스에서 제공하는 서버리스 클라우팅 서비스이다. 아마존 람다는 서버를 프로비..

📑 태그란? hr 태그를 이용하면 콘텐츠 중간에 선을 그을 수 있다. 보통 주제가 변경이 될 때 이용하는 태그이다. 태그는 기본적으로 검은색으로 제공되고 있다. 만약에 해당 색상을 바꾸고 싶다면? 🧡태그 선 색상 변경 코드 hr { background:pink; height:1px; border:0; } hr 태그를 변경하려면 background나 color 속성만 변경하면 색상이 변하지 않는다. height를 1px을 주고 background를 주면 색상이 변하는 걸 확인할 수 있고 이때 border는 0으로 맞춰준다. 줄 넓이를 키우고 싶을 경우 height를 조절해주면 끝!

input에서 체크박스, 라디오 버튼의 백그라운드 컬러를 바꾸고 싶을 때가 있다. 그냥 생각으로는 background 속성을 사용을 하면 변경이 되지 않을까라고 해서 적용을 해봤지만 input의 기본 color는 원래 css로 변경이 불가능했다. checkbox, radio button의 색상을 바꾸려면, 단순 css로 원래 불가능했는데 최근 새롭게 출시된 css 기능 중 accent-color가 추가되었다. 🎨css accent-color accent-color는 HTML 요소 기본 색상을 변경할 수 있는 새로운 기능의 css이다. 기존 css의 디자인을 바꾸려면 Label 등을 이용한 편법으로 수정해야 되고 가장 기본적인 컬러 변경 자체도 안돼서 브라우저에서 제공하는 기본 디자인을 사용해야 되었다. ..

글래스모피즘이란? 반투명한 유리를 댄듯한 효과를 말한다. "얼린유리" 효과라고 해서 배경에 불투명한 유리를 올린 것 같은 효과를 말한다. 🙂글래스모피즘을 잘 활용하려면? 어느정도 배경 투영되어야 되서 비비드한 컬리와 패턴이 있는 배경 위에 사용을 해야 효과가 난다(배경 위에 떠있는 효과) 내부 쉐도우를 넣어서 테두리는 살짝 밝게 처리해준다. 글래스모피즘은 불투명도와 블러를 조절해서 효과를 낼 수 있다. 손 쉽게 글래스모피즘 효과를 보고싶다면 아래 링크에서 확인해보자. 👉https://hype4.academy/tools/glassmorphism-generator 클레이모피즘 클레이모피즘은 좀 더 부풀려진 말랑해보이는 3D모양의 UI 트랜드를 말한다. inner shadow, outerShadow를 활용해서..

🙋‍♀️JavaScript alert 이용하기 자바스크립트에서 알람을 발생하는 것 중에 가장 많이 사용하는 것이 바로 alert이다. alert으로 알람을 발생시키면 해당 웹에 들어가면 바로 알람을 확인할 수 있다. 하지만 alert의 문제의 경우는 해당 탭에 포커싱이 되어있을 때는 잘 볼 수 있지만 해당 탭에 포커싱이 안되어있을 경우 해당 알람창이 뜨는지를 알 수가 없다. 🤔HTML5 Web Notification API HTML에서는 웹페이지에서 알람을 표시하면 페이지 외부에서 표시가 되는 Notification API를 제공한다. 해당 웹페이지가 백그라운드로 돌고 있어도 내가 쓰는기기에서 알람을 볼 수 있는 기능이다. 📝Web Notification 사용 조건 해당 기능을 이용하려면 하지만 조건이 ..

Vue $router.push 오류가 나서 수정 방법을 찾다가 못 찾아서 일단은 Javascript로 Redirect 하는 소스로 변경해놨는데 오늘은 Javascript redirect와 Vue 에서 redirect를 하는 방법 정리하기로! 🧐Vue.js에서 page redirect 하는 방법 this.$router.push('/') Vue.js 에서 page를 이동하는 방법은 this.$router.push('경로')를 이용한다. 문제는 해당코드가 모바일에서 해당 코드가 작동하지 않는 이슈가 발생했다. 이것저것 코드를 바꾸다가 못 찾아서 :( 일단 Javascript 코드로 변경하기로 했다. 🐳Javascript에서 Page redirect 하는 방법 window.location.href = `${wi..

moment.js를 걷어내고 day.js를 메인 날짜 라이브러리로 사용 중이다. https://ordinary-code.tistory.com/60 [javascript/Vue] moment.js 지원 중단으로 dayjs로 변경하기 🙅‍♀️moment.js 나의 프로젝트의 날짜 시간 계산을 하는 라이브러리는 moment.js를 사용했다. 오늘 기준 다운로드 수가 18,204,885 많은 개발자들에게 사랑받은 라이브러리였다. 나 역시 프로젝트마 ordinary-code.tistory.com 👩‍🏫dayjs에서 요일 표시하기 기본 날짜 포맷의 경우 영어든 한국어든 상관없이 사용하고 있었는데 dayjs를 이용해서 요일을 표시하게 되었는데, dayjs에서 요일을 표시하면 기본적으로는 영어 약어로 표시가 된다. 만..

📌최근 발생한 문제점 $ref undefined mounted()에서 $ref에 접근을 해서 무언가를 적용을 하려고 해 봤는데, $ref에 접근이 안되고 undefined가 뜨는 오류가 발생했다. 무엇이 문제인지 찾아본 결과 안에 있는 $ref에 접근을 할 때, 초반에 undefined가 발생할 수 있다는 점을 찾아냈다. 이러한 상황은 왜 발생하는걸까? 먼저 이 문제를 알기 위해서는 를 왜 사용하는지를 알아야 했고, SSR과 CSR의 차이를 먼저 이해해야 되어서 오늘은 이 부분을 정리해보기로 했다! ⚙️SSR이란? Server Side Rendering이라고 해서 Server에서 렌더링이 된 HTML 화면을 만들어서 보내주는 방식을 말한다. SSR로 처리가 된다고 하면 모든 리소스를 서버에서 랜더링 한 ..