본문 바로가기
반응형

개발 공부34

Mac, MacBook M1, M2, M3, 맥에서 외장하드 연결 시 인식 및 쓰기 권한 확인 하기 맥에서 외장하드 사용하기 1.MAC에서 외장하드가 인식되었는지 확인하는 방법Finder -> 설정바탕 화면에서 확인 : 상단 일반탭 데스탑에서 항목 보기 중 외장하드 체크 폴더 사이드바에서 확인 : 상단 사이드바탭 아래쪽 위치 항목 중 외장 디스크 체크   2.mac에서 외장하드 연결은 됐는데 쓰기가 안된다면?Dock에서 Launchpad 클릭 디스크 유틸리티를 더블클릭 해주세요!사용할 외장하드를 선택 후 오른쪽 상단에 지우기 클릭  이름 : 사용할 외장하드 이름 입력포멧 : Mac만 사용하신다면 Mac OS 확장(저널링) 클릭  (윈도우와 맥을 동시에 사용하려면  EXFAT)후 지우기 클릭 2024. 12. 16.
안드로이드 스튜디오 버전 업데이트 후 실행 오류 해결방법 (Gradle 파일과 동기화) 안드로이드 스튜디오 프로그램을 실행하려면 최신 gradle 파일하고,안드로이드 스튜디오 최신 버전(컴파일에 필요한 AGP 버전)이 필요한데이를 업데이트 후에 제대로 실행이 안되는 경우 실행 오류 발생 이유는?업데이트 후 캐시 파일들이 엉켜서 제대로 된 gradle 프로그램 패키징이 안됨그러서 캐쉬를 다 지운 후 gradle 패키징을 다시 해야 함 해결방법은1. File -> Invalidate Caches... 클릭 Invalidate Caches 팝업창이 뜨면 Invalidate and Restart 클릭하면 안드로이드 스튜디오가 꺼졌다가 재시작 됩니다. 2. File -> Sync Project with Gradle Files 클릭 싱크 진행이 완료될때까지 기다리면 끝! 2024. 12. 10.
완성된 앱 빌드하기! 안드로이드 스튜디오 사용해서 쉽게 빌드하기, apk 만들기 ( feat. 안드로이드 앱 서명 Key Store 만들기 )  두근두근첫 앱을 개발하고 게시하기 전에꼭 필요한 안드로이드 앱 빌드를 진행해 보겠습니다. 1. 안드로이드 앱 개발하기안드로이드 앱을 만들기 위해서안드로이드 스튜디오로 안드로이드 앱 개발을 진행 해주세요 2. build.gradle (Module :app) 파일 수정하기왼쪽 폴더 리스트에서 Gradle Scripts > build.gradle (Module :app) 파일을 선택해 주세요build.gradle (Module :app) 파일에서 android > defaultConfig > 버전코드(versionCode)와 버전네임(versionName) 숫자를  필수로 올려주세요.(플레이스토어에 업데이트 하기 위함) 3-1. 안드로이드 앱 첫 빌드하기 ( 완성 후 처음 빌드 ) 빌드 전에Key Stor.. 2024. 12. 3.
아이폰에 적용된 기본 UI 아이콘 쉽게 사용하기! Figma, XD, 개발할 때 사용법 ( feat. SF pro font ) iOS 관련 디바이스에 사용되는 아이콘은 아이콘 폰트를 사용하고 있습니다.SF Symbols을 설치하고 복사해서 사용할 수 있습니다. (사용 시 폰트 설정은 SF pro로 해주셔야 보입니다) 매번 아이콘을 찾아 헤멜 필요가 없습니다.다만, 폰트 크기 조절에 따라 아이콘 굵기도 달라질 수 있어서 확인이 필요합니다.SF FontsiOS에서는 애플에서 디자인한 샌프란시스코 서체가 사용됩니다.그 중 SF Pro 폰트를 설치 해주세요! ( 폰트 설정을 SF pro로 해주셔야 아이콘이 표현됩니다 ) Fonts - Apple DeveloperGet the details, frameworks, and tools you need to use system fonts for Apple platforms in your ap.. 2024. 11. 13.
1일 1커밋 잔디심기를 위해!!! 깃허브 가입하기 (feat. github 크롬확장툴 추천) 깃허브?개발자라면 안 쓰는 사람이 없는 소스코드 저장소이자 개발자들의 놀이터로여러 개발자가 동시에 작업이 가능하며, 코드 히스토리 및 버전 관리, 코드리뷰 또는 이슈트래킹에 편리한 장점을 가지고 있습니다.1. 깃허브 가입하기 GitHub · Build and ship software on a single, collaborative platformJoin the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.github.com ① 깃헙 사이.. 2024. 11. 12.
구글 신원 인증! 개발자 인증! 현재 주소가 표시된 서류 업로드 오류 ㅜㅜ ( 미친듯한 삽질 끝에 해결 ) 구글은 때때로 협박 메세지를 보낸다 ㅇㅇㅇ을 하지 않으면삭제해 버리겠다!!다행히 오늘은 파란색이라 심플하게 생각했었던게...보통은 빨간색으로 오는데 말이지요. ( 이때까지만 해도.... 난 이게 이렇게 빡치는 여정일 줄은 몰랐다...)( 총 소요 시간 두 달 정도 걸린 듯.. ) 2024년 11월 13일까지 개발자 계정 확인모든 개발자는 업데이트된 Play Console 요구사항 정책을 준수하기 위해 계정 확인을 완료해야 합니다. 2024년 11월 13일까지 계정 확인을 완료하지 않으면 개발자 프로필과 앱이 Google Play에서 삭제됩니다. 계정 확인에 관해 자세히 알아보려면 고객센터를 방문하세요.  인증하기는 쉬웠다.전화번호 인증하고, 메인 주소 인증하고..그러나 문제는.. 현재 주소가 표시된 서류.. 2024. 11. 1.
SCSS / @each 반복문으로 태그 쉽게 만드는 방법, CSS Flex를 이용해서 태그 리스트까지 만들어봅시다 ( 태그 정렬, 줄넘김 한방에 해결하기! ) SCSS @each (반복문)텍스트를 태그로 만들어 사용하기줄넘김 처리 설정 flex-wrap기본형줄바꿈 - 범위가 넘어갈경우 아래로줄바꿈 - 역순flex-wrap: nowrap;flex-wrap: wrap;flex-wrap: wrap-reverse;넘치면 오른족으로 쭈욱 연결됩니다.컨텐츠가 영역 범위를 넘어갈 경우위에서부터 차례대로줄바꿈이 됩니다.컨텐츠가 영역 범위를 넘어갈 경우위에서부터 차례대로줄바꿈이 되지만, 역순 즉 아래쪽에더 많은 컨텐츠를 배치하게 됩니다. _mixin.scss// 텍스트 태그 만들기// @each $각각 정의된 변수값 in $정의된 변수 데이터 그룹 // 클래스명, 모서리라운드사이즈, 좌우여백, 상하여백, 폰트크기, 행간높이, 폰트두께, 폰트색, 선색, 배경색@each $cla.. 2024. 10. 26.
시맨틱 태그란? 기본 개념부터 기능 태그까지 Semantic Tags를 알아보자! 시맨틱 태그?프로그래밍에서, 시맨틱은 코드 조각의 '의미'를 나타냅니다.  이 HTML 엘리먼트가 가진 목적이나 역할은 무엇일까요?많은 의미적 HTML 태그는 페이지의 레이아웃을 전달하게 됩니다.이러한 "구조적" 태그는 HTML4가 HTML5로 업그레이드되었을 때 도입되었으며,일반적으로 의미적 HTML5 태그 또는 의미적 HTML5 요소라고도 합니다.  시맨틱 태그 (Semantic Tags) 종류는 다음과 같습니다.시맨틱 태그 (Semantic Tags) 종류header헤더 태그는 페이지 상단에 위치하며 로고나 제목 등이 포함 navNavigation의 약자로 탐색 링크 즉 메뉴 링크를 모아놓은 영역을 말하며 태그 내에서 사용하기도 하고, 보조 탐색 태그로도 일반적으로 사용합니다.mainmain헤더와.. 2024. 10. 7.
html 링크 연결 방법 정리 ( a 태그, button 태그 ) 코딩을 하다보면 링크 연결해야 할 일이 많은데요!대표적으로 a태그와 button태그가 있습니다. 생각보다 button 태그 경로 입력하는게 잘 안외워지네요;;;   1. a 태그태그 페이지의 이동, 페이지 내의 다른 영역으로의 이동 등 상호작용이 필요할 경우 사용됩니다.a 태그 링크 연결 속성값절대 주소(absolute URL) href="https://code-ruach.tistory.com"상대 주소(relative URL)href=“/lecture/logo.png”같은 페이지 내 연결에서 (id) href=“#top” ( 위치로 이동 됨)스크립트href=“javascript:alert(‘안녕하세요!’)”   2. button 태그단순 클릭 이벤트, form요소에 입력된 내용을 서버로 전송할 때 사.. 2024. 10. 6.
정책 위반 광고 게제 중단 방지를 위한 조치 필요! (feat. google AdMob) 헐...애드몹에서 빨간 메일이 왔다.그것도 광고 게제 중단이라니 ㅠㅠGoogle AdMob : 즉각적인 광고 게재 중단을 방지하기 위한 조치 필요필요한 조치: AdMob 정책을 준수하도록 고객님의 앱 을 수정하였거나 정책 위반이 잘못된 결정이라고 판단 되면 AdMob 정책 센터에서 위반사항을 확인하고 재 검토를 요청하세요. 위반사항이 추가로 발견되면 위의 앱에서 광고 게재가 제한되거나 중지될 수 있으니 유의 하시기 바랍니다. 위의 앱은 예로 제시된 것이며, 동일한 위반사항이 고 객님의 다른 앱에도 있을 수 있습니다. 앞으로 이러한 경고를 받지 않으려면 고객님의 모든 앱이 AdMob 프 로그램 정책을 준수하고 있는지 확인하시기 바랍니다. 역시나 애드몹 접속하니 정책 위반에 해당하는 문제가 발견 되었다고 알.. 2024. 8. 9.
정책 위반 앱이 Android 14(API 수준 34) 이상을 타겟팅해야 함 (feat.안드로이드 앱 빌드하기) 앱을 출시하다 보면 구글 콘솔에서 다양한 메시지가 오는데1년에 적어도 한번은 정책위반 메시지를 받게 되는 것 같아요 작년 이맘때쯤 Android 13(API 수준 33)을 타겟팅해야 한다고 해서이게 뭔지 몰라서 헤메던 내가 생각나네요;;이 메세지는 빨간색 느낌표로 오지만,사실 해결 내용은 간단합니다.  온더바디 코튼풋 발을 씻자 풋샴푸 레몬민트향, 1개입, 385ml, 5개 - 핸드/풋케어 | 쿠팡현재 별점 4.8점, 리뷰 22,588개를 가진 온더바디 코튼풋 발을 씻자 풋샴푸 레몬민트향, 1개입, 385ml, 5개! 지금 쿠팡에서 더 저렴하고 다양한 핸드/풋케어 제품들을 확인해보세요.www.coupang.com 위반 : 앱이 Android 14(API 수준 34) 이상을 타겟팅해야 함 해결 방법 규정을.. 2024. 8. 8.
자바스크립트로 다국어 언어 적용하기 (with copilot) 자바스크립트를 이용해서 영어, 한국어 등 언어를 설정하면 모든 화면에서 적용되도록전역 상태로 관리하기 위해 copilot과 함께 코딩을 해보겠습니다. ..프롬프트 :list.html, setting.html,  language.js 파일을 만들어주고,setting.html 파일에서 영어와 한국어 중 사용할 언어를 선택하면list.html화면에도 적용시켜줘list.html  setting.html 개인 설정 English 한국어  language.jsi18next.init({ lng: 'en', debug: true, resources: { en: { translation: { title:.. 2024. 7. 15.
무료 움직이는 애니메이션 아이콘 사용하기 (feat.lordicon) lordiconhtml에 쉽게 사용 가능한 무료 애니메이션 아이콘 사이트!움직이는 아이콘을 html에 삽입해 봅시다! 더브레드블루 발효종 순수 통밀빵 2개입 (냉동)COUPANGwww.coupang.com1.  로드아이콘 사이트에 접속하기 21,500+ animated icons - LordiconLordicons work seamlessly with your project, responding to a range of interactions - whether in, hover, morph, loop, or more.lordicon.com 2. 애니메이션 아이콘 선택하기- 원하는 아이콘을 클릭하면 오른쪽 패널에서 아이콘 컬러를 변경, 일러스트 선두께 및 동영상 스타일을 변경할 수 있습니다.- 사용할 리.. 2024. 7. 14.
SCSS / @mixin, @for문으로 하단 고정 탭바 만들기 (하단 네비게이션) Scss에서 for문으로하단 탭바 만들기를 해볼께요!하단 탭바는 버튼 갯수가 변경될 여지가 있으므로 for문을 사용해보겠습니다. 보통 직관적인 이름을 사용하는 것을 추천드리며버튼은 3개에서 최대 5개까지만 사용하시길 권장드립니다._mixin.scss// 이미지 경로$imgurl : '../images/';//배경 이미지@mixin bg($imgfile, $x:null, $y:null, $bgcolor:null, $width:null, $height:null, $boradi:null,){ background: url(#{$imgurl}#{$imgfile}) no-repeat $x $y $bgcolor; background-size: $width $height; border-radius: $.. 2024. 7. 9.
SCSS / @mixin 아이콘 배경 이미지로 사용하기 ( 아이콘 버튼 ) 믹스인을 활용해서배경이미지로 만들어진 버튼을 만들어 볼께요이미지 삽입보단 편하더라구요._mixin.scss// 이미지 경로$imgurl : '../images/';//배경 이미지//파일명, 가로정렬, 세로정렬, 배경색, 가로사이즈, 세로사이즈, 보더라운드@mixin bg($imgfile, $x:null, $y:null, $bgcolor:null, $width:null, $height:null, $boradi:null,){ background: url(#{$imgurl}#{$imgfile}) no-repeat $x $y $bgcolor; background-size: $width $height; border-radius: $boradi;}  _button.scss.btn{ displa.. 2024. 7. 6.
즐겨찾기 / 퍼블리싱 작업에 폰트 적용 폰트어썸 사이트로 종결! (무료폰트, 자세한 라이센스 범위까지 한번에 확인) 매번 폰트 찾아서 임베딩 시키기 바빴는데여기로 해결하면 될 것 같다웹 폰트 사용하기에서 CSS 설정하기, Link 방식, Import 방식, Font-face 방식총 4가지 모두 사용가능합니다.원하는 폰트를 바로 다운로드 가능하며,라이센스 사용 범위까지 한눈에 확인하실 수 있습니다. 폰트 어썸웹 폰트 사이트입니다.wess.tistory.com 2024. 6. 26.
무료 아이콘 / 아이콘 저장소 서비스 폰트어썸 사용해보기 ( 설치없이 벡터 아이콘 사용 가능 ) 오픈 소스 프로젝트 사이트를 통해서 코딩 시 벡터 아이콘을 무료로 사용해 보기 클론 코딩 할때 좋습니다.아이콘 원본 없이 사용하기 이름은 폰트어썸인데.. 아이콘을 사용하기 위한 오픈 프로그램입니다.폰트어썸font awesome Font AwesomeThe internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.fontawesome.com 1.  폰트어썸 사이트 가입하기폰트어썸 사이트 접속 -> 무료 사용 클릭 -> 이메일주소 입력 -> 메일확인 -> 비밀번호 입력 -> 개인정보입력 -> 끝 -> 메인에서 start for f.. 2024. 6. 20.
프론트엔드 / UI 애니메이션 코드 참고 사이트 (html, css) 코드 몰라도 ui 애니메이션을 만들 수 있습니다.상업적 활용도 가능하며 피그마로 복사까지 가능합니다. html 코드와 css 코드를 확인할 수 있습니다.당연히 복사하기도 가능하니 복사해서 사용해 보세요!  Explore 3000+ Free UI Elements: CSS & TailwindLibrary of free and customizable UI elements made with CSS or Tailwind. It's all open-source, and it's all free. Try it out to save you many hours spent on building & customizing UI components for your next project.uiverse.io 2024. 6. 5.
워드프레스 / 워드프레스 첨부파일 개념 알기 (미디어 라이브러리 사용법) 워드프레스는 첨부파일이 독립적인 콘텐츠라던데?워드프레스에서는 첨부파일을 독립적으로 사용할 수 있습니다.이 부분이 다른 블로그와 차별화된 점입니다.같은 이미지를 계속 올리기는 그만, 한번 올려서 계속 사용해 보세요미디어를 클릭하면 여태까지 글에 쓰였던 모든 이미지 및 첨부파일을 보실 수 있습니다. 새 미디어 파일 추가하기를 클릭하고 워드프레스에 사용할 이미지들을 글보다 먼저 추가해 놓을 수 있습니다. 글을 쓸 때마다 이미지를 첨부하는 방법도 있지만,이미 많이 그림을 그려 놓은 상태라면 또는 썸네일을 선 작업 해놓고 글은 나중에 쓰실 때 편히 합니다매번 확인하고 올리는 작업을 하지 않아도 됩니다.  글을 쓰시다가 중간에 이미지를 삽입해야 할 때 미디어 라이브러리 클릭으로 원하는 이미지를 바로 삽입할 수 있.. 2024. 6. 2.
워드프레스 / 워드프레스 URL 공유를 위한 주소 셋팅 방법 (한글보단 슬러그를 사용하세요) 워드 프로세스 주소 셋팅 방법에 대해서 알아보겠습니다.워드프레스에서 주소 셋팅은 선택이며, 기본은 글 제목이 됩니다. 한글일 경우 검색에 유리하나, URL 공유시 한글 깨짐 현상으로 주소가 길어지는 경우가 있는데주소를 간결하고 명확하게 사용하기 위한 방법입니다.1. 알림판 접속하기왼쪽 상담에 워드프레스 로고를 클릭하면 알림판에 접속 할 수 있습니다2. 워드프레스 주소 및 URL 공유를 위한 슬러그 알아보기워드프레스는 기본적으로 글을 작성하면 글 제목이 URL에 반영 되는데 한글로 작성되면 검색에는 유리할 수 있지만글을 복사해서 공유했을때 한글은 URL이 길게 깨져보입니다.(복사했을때 %는 알파벳이 아닌 다른 글짜를 표현) 워드프레스 기본 URL복사해서 공유시 URL이 길어짐 (한글이 깨짐)소개 페이지 접.. 2024. 6. 1.
워드프레스 / 4. 워드프레스 데이터베이스와 연결하기, 워드프레스 사이트 정보 입력 후 로그인까지 해보기 워드프레스 설치 후 초기   MAMP 웹서버 만들기1. MAMP 시작 2. MySQL 확인 (MAMP가 설치되면서 기본 셋팅을 해 놓은 것을 확인)사이트 아래로 내려보면 MySQL을 클릭하면 Host, Post, Usename, Password 기본값이 나와있는 것을 확인할 수 있습니다호스트는 localhost, 127.0.0.1 두가지가 있는데 우리는 로컬 호스트를 사용하겠습니다.상단을 보면 You can administer your MySQL databases with phpMyAdmin 을 클릭합니다.(기억하기!! Host는 localhost, Usename은 root, Password도 root) 3. 작업할 데이터베이스 만들기① phpMyAdmin 클릭하면 사이트가 열립니다. (왼쪽에 4가지는 .. 2024. 5. 26.
반응형