반응형 💻 Programming34 [Nuxt.js] Nuxt.js에서 KakaoMap API 사용하기 💻 🗺 Nuxt.js 에서 KakaoMap API를 사용하는 데 어려움을 겪고 있는 분들을 위해,, 또 똑같은 실수를 반복하게 될지도 모를 미래의 나를 위해 정리해 보는 글입니다. 📝 혹시 잘못된 부분이 있다면 알려주세요! Nuxt.js란? Vue Application을 위한 강력한 프레임워크! 조금 더 손쉽게 Vue application을 제작할 수 있습니다. 🔗 Nuxt.js 공식 페이지 The Intuitive Vue Framework Build your next Vue.js application with confidence using Nuxt. An open source framework making web development simple and powerful. nuxtjs.org Nuxt.js Ap.. 2021. 9. 17. [카카오톡 OpenGraph] 링크 공유 시 나오는 썸네일 이미지 및 텍스트 수정하기 (+ 적용이 잘 안될 때 확인해볼 사항들) 오픈그래프(Open Graph)란? 오픈 그래프 프로토콜은 특정 HTML 문서의 정보(제목, 설명, 문서 타입, 대표 URL 등)를 통일해서 사용할 수 있도록 페이스북이 개발한 프로토콜이다. 아래와 같이 SNS에서 링크를 공유할 때 뜨는 이미지와 제목 및 설명 등을 오픈그래프를 통해 설정할 수 있다. 오픈그래프 설정 방법 기본적으로 많이 쓰이는 오픈 그래프 요소 // 사이트 제목 // Type // 대표 url // 이미지. 이미지 사이즈는 410x200px 을 권장한다. 추가적인 요소들에 대해 알아보고 싶은 경우, 아래 사이트를 확인해보면 된다. https://ogp.me/#optional Open Graph protocol The Open Graph protocol enables any web pag.. 2021. 7. 13. [Issue 해결] React Slick 사용 시 Prev 버튼이 동작하지 않는 경우 ❗️ Issue React Slick 라이브러리 사용 시, Next 버튼은 정상적으로 작동하는데, Prev 버튼은 마우스 오버 시 CSS도 동작하지 않고, 클릭을 하여도 슬라이드되지 않음 💡 Solution Prev 버튼의 css 속성인 z-index를 수정해 주면 됨. Prev 버튼의 클래스명이 'slick-prev'로 설정되어 있으므로 아래의 코드를 삽입해 주면 해결 됨! .slick-prev { z-index: 9999; } 충분히 큰 숫자인 9999를 넣어주었는데, 9999로 설정 시에도 정상적으로 작동하지 않을 시, 더 큰 수를 입력해볼 수 있다. 2021. 6. 20. [MongoDB] Atlas에서 MongoDB 외부 접속 허용하는 방법 💡 잘 되던 DB 연동이 갑자기 안될 때, 이 부분을 확인해 보세요! Atlas에서는 IP 주소를 기반으로 접속 권한을 설정할 수 있습니다. 저의 경우, 왕왕왕오앙초보라서 이 부분을 전혀 생각하지 못하고 있었는데,, 집에서는 잘 되던 게 카페에 가니까 안되길래 혼란스러워하던 중에 친구의 도움을 받아 해결할 수 있었습니다,, 😅😅 왼쪽 사이드바에서 Network Access를 클릭한 후, Add IP Adress 버튼을 클릭해 주세요. 그리고 나서 접근을 허용하고자 하는 IP 주소를 직접 입력하거나 Add current IP address 버튼을 통해 현재 IP 주소의 접근을 허용하거나 Allow access from anywhere 버튼을 통해 모든 IP 주소에서의 접근을 허용할 수 있습니다. 너무 간단.. 2021. 6. 20. 프론트엔드 개발자를 위한 Visual Studio Code 확장 프로그램(Extension) 설치 방법 및 추천 안녕하세요 😁 이번 포스팅에서는 Visual Studio Code에서 제가 유용하게 사용하고 있는 확장 프로그램을 추천해드리려고 합니다. 저는 홈페이지 관리를 하고 있어서 주로 HTML, CSS, JavaScript 코딩 작업들을 하고 있어서 프론트엔드 쪽 작업하시는 분들께 유용할 것 같아요~! 목차 Visual Studio Code 확장 프로그램(Extentions) 설치 방법 Visual Studio Code가 이미 다운로드 된 상태라고 생각하고 시작할게요! 우선 확장 프로그램 설치하는 방법부터 보여 드릴게요. 1. Visual Studio Code 좌측에서 아래 모양과 같은 아이콘을 클릭해주세요. 2. 검색창에 원하는 확장 프로그램명을 검색하고, Install 을 클릭해 주면 끝입니다. 엄청 간단해.. 2021. 1. 19. [Flutter로 iOS 앱 개발하기] 재사용가능한 위젯 만들기 Udemy 사이트에서 Flutter 강좌를 수강 중입니다! 공부하는 내용을 최대한 정리하여 업로드 하려고 합니다. * Mac을 기준으로 합니다. 반복적으로 사용되는 위젯을 함수처럼 정의해놓고 필요할 때마다 가져와서 쓸 수 있는 방법이 존재한다. 예를 들어, 아래 코드와 같은 Container 위젯을 반복적으로 사용해야 한다고 생각해보자. Container( margin: EdgeInsets.all(15.0), decoration: BoxDecoration( borderRadius: BorderRadius.circular(10.0), color: Colors.black, ), ) Container 위에 커서를 위치시켜 놓고, Android Studio 우측에 있는 Flutter Outline을 클릭해준다... 2020. 11. 3. [Flutter로 iOS 앱 개발하기] Flutter Themes (Flutter 테마) 적용하기 Udemy 사이트에서 Flutter 강좌를 수강 중입니다! 공부하는 내용을 최대한 정리하여 업로드 하려고 합니다. * Mac을 기준으로 합니다. 참고 문서 : Flutter 개발자 문서 - Theme 사용법 💡 Flutter Themes : 컬러 팔레트와 앱의 스타일을 커스텀할 수 있는 간단한 방법 MaterailApp 위젯에 ThemeData 위젯을 추가하여 다양한 속성들을 커스텀할 수 있다. 어떤 속성들을 변경할 수 있는지 개발자 문서에서 확인 가능하다. Summary 웹 페이지에서 특정 색상 코드 가져오기(ColorZilla 사용법) 색상을 Hex 코드로 설정하는 방법 배경색, 강조색 등 색상 설정 시, 사전 정의되어 있는 색상이 아닌 색상을 사용하고 싶은 경우, hex 코드로 설정할 수 있다. 범.. 2020. 11. 2. [Flutter로 iOS 앱 개발하기] Class(클래스) Udemy 사이트에서 Flutter 강좌를 수강 중입니다! 공부하는 내용을 최대한 정리하여 업로드 하려고 합니다. * Mac을 기준으로 합니다. 연관되어 있는 두 개의 리스트가 있을 때, Class를 활용할 수 있다. 예를 들어, 퀴즈 어플을 만드는 경우, 아래와 같이 두 개의 리스트를 만드는 것이 아니라, question, answer 라는 속성을 갖는 클래스를 만드는 것이 좋다. List questions = [ 'You can lead a cow down stairs but not up stairs.', 'Approximately one quarter of human bones are in the feet.', 'A slug\'s blood is green.' ]; List answers = [fa.. 2020. 10. 30. [Flutter로 iOS 앱 개발하기] Android Studio에서 Show Context Actions / opt + Enter 키가 작동하지 않는 이유 Udemy 사이트에서 Flutter 강좌를 수강 중입니다! 공부하는 내용을 최대한 정리하여 업로드 하려고 합니다. * Mac을 기준으로 합니다. Android Studio에서 작업 시 Show context actions (opt + enter 키)가 작동하지 않는 경우가 종종 있었다. 구글링을 해봐도 원인을 잘 모르겠어서 그럴 때마다 깊은 분노를 느끼면서 Android Studio를 껐다 켰다.. 🤬 그런데 이제 원인을 알게 되어서 기쁜 마음으로 포스팅을 한다!!!!! 🎉 끼야호 첫번째 FlatButton 위젯을 Expanded 위젯으로 감싸고 나서, 두번째 FlatButton 위젯도 동일한 작업을 하려고 했는데 아무리 opt + Enter 키를 누르고 우클릭 후 Show Context actions .. 2020. 10. 18. 이전 1 2 3 4 다음 반응형
