본문 바로가기
728x90
반응형
생산성 Ai 툴 추천(2), 유용한 툴, 유용한 사이트, Ai 1. Speechify 한국어, 영어 등 다양한 언어의 텍스트를 음성으로 변환할 수 있는 서비스입니다. 문서, PDF, 기사 등 다양한 텍스트 변환이 가능합니다. https://speechify.com Best Free Text To Speech Voice Reader | Speechify The leading text to speech app with millions of downloads on Chrome, iOS, & Android. Hear the Internet on any device. Try Speechify for free today. speechify.com 2. Scribble Diffusion 직접 그린 드로잉을 AI를 통해 퀄리티 높은 이미지로 바꾸어줍니다. https://scrib.. 2023. 7. 10.
firebase 게시판 만들기(6)-읽기 권한 수정하기 읽기 권한 수정하기 html 게시판과 페이지 이동 css 2023. 6. 24.
firebase 게시판 만들기(5)-게시판에 글쓰기 1. 게시판 만들기 html 게시판과 페이지 이동 번호 제목 작성자 작성일 조회수 1 2 3 4 css /********************** pagination *********************/ .pagination { margin-top: 2.5em; justify-content: center; } .page-item.active .page-link { background-color: rgb(194, 197, 229); border: 1px solid rgb(201, 201, 201); } /**********************list-wrapper *********************/ .list-wrapper { } .list-wrapper table > thead > tr > :.. 2023. 6. 23.
firebase 게시판 만들기(4)-구글로그인 만들기 1. 로그인 버튼 만들기 Login LogOut /******************************* 글로벌 설정 ********************************/ var auth = firebase.auth();//firebase의 auth(인증)모듈을 불러온다. var googleAuth = new firebase.auth.GoogleAuthProvider(); //구글로그인 모듈을 불러온다. /******************************* 사용자 함수 *******************************/ /******************************* 이벤트 등록 ******************************/ $('.bt-login').click.. 2023. 6. 23.
firebase 게시판 만들기(3)-리얼타임 데이터 베이스 설정하기 1. 데이터베이스 룰스 설정하기 사용자가 있거나 작성자가 있으면 2. 리얼타임 데이터베이스 설정 2023. 6. 22.
firebase 게시판 만들기(2)-라이브 서버 보기 1. index.html 연결하기 1. public 폴더 안의 index.html과 html 폴더 안의 index.html 연결하기 public 폴더 안의 index.html 안의 코드 html 폴더 안의 index.html 안의 코드 2. 터미널 입력 firebase serve → firevase 오류가 브라우저 콘솔창에서 사라진다. firebase serve 가 실행되지 않고 vsc의 라이브 서버 익스텐션을 사용할 경우, firebase의 스크립트들이 불러와지지 않는다. 2023. 6. 21.
firebase 게시판 만들기(1)-설치 1. 폴더 생성 2. firebase 프로젝트 생성 3. firebase authentication(인증) 설정 로그인 제공업체 설정 도메인 설정 4. git repository 연결하기 git init git add remote origin https://github.com/깃허브사용자아이디/레포지터리이름.git5. firebase 설정 5. firebase 설정 1. realtime database 설정 2. Storage 설정 - 시작하기 - cloud storage 보안 규칙 설정 - cloud storage 위치 설정 asia-southeast3 -Storage 설정 완료 6. firebase init 1. 터미널에 firebase init 입력 2. firebase ... === Project.. 2023. 6. 20.
JSX const Title = ( console.log("mouse enter")} > Hello I'm a title ); html과 비슷한 구조 html element의 tag 생성 담고자 하는 메시지를 h3 태그 안에 넣어준다 html element의 id 생성 property는 html의 태그의 속성처럼 적는다 const Button = (console.log("I'm clicked")} > Click me ); 2023. 6. 19.
firebase(vsc에서 firebase에 배포하기) 1. 터미널에 파이어베이스 설치 코드 입력하기 sudo npm install -g firebase-tools(window에서는 sudo필요 없음) 2. 파이어베이스 로그인 후 프로젝트 추가 firebase login 프로젝트 이름은 바꿀 수 없음 3. firebase init 터미널에 firebase init 입력 firebase 하위 설정에서 호스팅 선택 (깃허브는 선택하지 않는다) 방향키로 누른 다음 스페이스로 선택하고 엔터 4. firebase deploy init 후 생성된 public 폴더에 html, css, js, json, img, webfont 폴더 옮긴다. public 안에 따로 생성된 index.html 문서의 firebase 포맷을 지우고 로 바꾼다 저장 후 터미널에 firebase.. 2023. 6. 19.
react local repository 만들기 1. 설치하려는 파일의 경로 확인하기 맥: 설치하려는 폴더를 마운트한 상태에서 command + option + c 누르면 자동 경로 복사 예시) /Users/사용자/Documents/Adobe 💡 왠지 모르겠지만 icloud drive의 documents를 제외한 다른 경로는 연결이 안된다. 2. 터미널 창에 경로 입력 cd /Users/sulkikim/Documents/react 3. npx 설치 코드 입력 예시)npx create-react-app movie_app_2021 npx create-react-app app_name 4. vsc에서 열고 vsc의 터미널 창에 입력 npm start 5. github에서 새로운 저장소 만들기 6. vsc 터미널 창에 입력 git init git remote.. 2023. 6. 18.
colors[Math.floor(Math.random() * colors.length)];랜덤값 출력하기 colors[Math.floor(Math.random() * colors.length)]; 2023. 6. 18.
삼항 연산자 ternary 함수 실행 true 판정: 문자열, 0이외의 숫자 등 false 판정: '', 0, null, undefined if(5 2023. 6. 17.
react 설치하기 node 설치하기 터미널 창에 코드 입력하여 노드 설치가 되어있는지 확인한다. 없다면 Node.js 에서 다운로드 node -v npm 설치하기 npm이 설치되어 있는지 확인한다. npm 은 node와 함께 설치된다. npm -v npx 설치하기 node와 npm이 설치된 것을 확인한 후 npm install npx -g 만약 이런 에러 메시지가 뜬다면(이미 npx가 있다는 뜻)\ git 확인하기 git --version 최종 확인하면 끝 2023. 6. 16.
Array 배열 배열의 추가, 삭제 push, pop, shift, unshift, splice let arr = [1, 2, 3, 4, 5]; 1. 배열의 뒤에 추가, 삭제 arr.push() 배열의 맨 뒤에 요소를 넣는다. arr.push(6); console.log(arr); //[1, 2, 3, 4, 5, 6] arr.push(7,8); console.log(arr);//[1, 2, 3, 4, 5, 6,7,8] arr.pop() 배열의 맨 뒤의 요소를 하나만 삭제한다. let el =arr.pop(); console.log(arr, el);//[1, 2, 3, 4, 5, 6, 7] 8let arr =[1,2,3,4,5]; 2. 배열의 앞에 추가, 삭제 shift의 리턴값 => 빼낸 값 arr.unshift() 배.. 2023. 6. 15.
JavaScript 란? Mocha→Livescript→JavaScript JavasScript 문법 JavasScript의 실행문은 세미콜론(;)으로 구분된다. var x = 10; var result = x + 3 JavasScript는 대소문자를 구분한다. 변수나 함수의 이름, 예약어 등을 작성하거나 사용할 때에는 대소문자를 정확히 구분해서 사용해야 한다. var javascript = 10; // 변수 javascript와 JavaScript는 서로 다른 두 개의 변수로 인식됨. var JavaScript = 20; 리터럴(literal) 리터럴은 직접 표현되는 값 그 자체를 의미한다. 다음 예제에서 등장하는 값들은 모두 리터럴이다. 12 // 숫자 리터럴 "JavaScript" // 문자열 리터럴 '안녕하세요' // 문.. 2023. 6. 15.
JavaScript 출력 JavaScript 출력 자바스크립트는 여러 방법을 통해 결과물을 HTML 페이지에 출력할 수 있다. 자바스크립트에서 사용할 수 있는 출력 방법은 다음과 같다. window.alert() 메소드 HTML DOM 요소를 이용한 innerHTML 프로퍼티 document.write() 메소드 console.log() 메소드 window.alert() 메소드 자바스크립트에서 가장 간단하게 데이터를 출력할 수 있는 방법은 window.alert() 메소드를 이용하는 것이다. window.alert() 메소드는 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달해 준다. window 객체의 모든 메소드나 프로퍼티를 사용할 때는 window라는 접두사를 생략할 수 있다. HTML DOM 요소를 이용한 i.. 2023. 6. 14.
Javascript 규칙 javascript 문 기본 형태 세미콜론은 생략 가능하지만 쓰는 것이 안전하다! alert('Hello'); //주석의 시작은 슬래쉬 두개 /*여러 줄 할 떄는 이렇게! */ 변수 변수란? 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’ 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다. 첫 글자는 숫자가 될 수 없다. 카멜규칙 ex)mouseOver let message; message = 'Hello!'; message = 'World!'; // 값이 변경되었습니다. alert(message); let Hello = 'Hello world!'; let message; // Hello의 'Hello world' 값을 message에 복사합니다. message = Hello; //.. 2023. 6. 14.
생산성 Ai 툴 추천, 유용한 툴, 유용한 사이트, Ai 반응이 뜨거웠던 Chat GPT 가 전세계적으로 널리 알려진 후에 생산성 관련 Ai툴에 대한 관심도 높아졌습니다. 하루에도 수백 개씩 만들어지는 인공지능 앱 가운데 유용한 인공지능 사이트를 추천합니다. 1. 인보이스 자동 변환 Documentpro DocumentPro | Automate data entry with AI DocumentPro uses AI to extract information and tables from documents and emails. www.documentpro.ai 인보이스의 이미지, pdf 파일을 업로드하면 자동으로 엑셀 파일로 변환시켜주는 툴입니다. 엑셀로 변환하기 전 구체적인 항목 설정도 가능합니다. 고정적인 지출이 있는 경우에 인보이스 항목을 동일하게 설정하여 활용.. 2023. 6. 7.
Operator 연산자 String conatenation console.log('my' + 'cat'); //my cat console.log('1' + '2'); //12 console.log(`string literals: 1 + 2 = ${1 + 2}`); //string literals: 1 + 2 = 3 Numeric operators console.log(1 + 1); console.log(1 - 1); console.log(1 * 1); console.log(1 / 1); console.log(5 % 2); //remainder 나머지 값 1 console.log(2 ** 3); //제곱 8 Increment 증가 연산자 /감소도 같은 방식 let counter = 2; const preIncrement = ++.. 2023. 4. 24.
Data Type data type let name = 'sulki'; console.log(name);//sulki name = 'hello'; console.log(name);//hello {let name = 'sulki'; console.log(name);//sulki name = 'hello'; console.log(name);//hello} console.log(name);//출력되지 않음 global variable 전역변수는 블록(컬리브라켓 안)에서도 호출되고 밖에서도 호출되나 local 지역변수는 블록 안에서만 가능하다. 전역변수는 최소한으로 설정 let VS var 변수(mutable data type) read & write var은 유연하지만 문법이 붕괴되어 있어 let을 사용하기를 권장 hoisti.. 2023. 4. 24.
Return const easyCalcualtor = { plus : function (a, b){return(a + b);}, minus : function (a, b) {return(a - b);}, multiply : function (a, b) {return(a * b);}, devide : function (a, b) {return(a / b);}, power : function (a, b) {return(a ** b);}, }; const plusResult = easyCalcualtor.plus(2,3); const minusResult = easyCalcualtor.minus(plusResult,3); const multiplyResult = easyCalcualtor.multiply(2,minusRe.. 2023. 4. 24.
CSS in JS CSS in JavaScript! const h1 = document.querySelector("h1") function handleTitleClick(){ const currentColor = h1.style.color; //currentColor는 getter로 최근 color값을 복사한다. let newColor; //setter, 변수에 대입된 값을 최종적으로 h1.style.color에 할당시킴 if (currentColor === "blue"){ newColor = "tomato"; } else{ newColor = "blue"; } h1.style.color = newColor; } h1.addEventListener("click",handleTitleClick); click event 발생.. 2023. 4. 24.
Event Event 💡 웹브라우저에서 일어나는 사건 2023. 4. 24.
축약연산자 축약연산자 i = i + 1 => i++ i = i - 1 => i-- i = i + 2 => i += 2 i = i - 2 => i -= 2 sum = sum + i=>sum += i 2023. 4. 23.
date, setInterval, localStorage 윈도우창에 시계만들기 const clockContainer = document.querySelector(".js-clock"), // clockContainer는 도큐먼트 안의 js-clock클래스 clockTitle = clockContainer.querySelector("h1"); // clockTitle은 clockContainer 안의 h1 function getTime() { const date = new Date(); const minutes = date.getMinutes(); const hours = date.getHours(); const seconds = date.getSeconds(); clockTitle.innerText = `${hours}:${minutes}:${seconds}`.. 2023. 4. 14.
toggle const title = document.querySelector("#title"); //title id를 title이라고 변수 설정 const CLICKED_CLASS = "clicked"; //'clicked'라는 class명 변수 설정 function handleClick() { const hasClass = title.classList.contains(CLICKED_CLASS); //title에 class 리스트로 CLICKED_CLASS(=clicked 라는 class명 가지고 있을 때)일 때를 //변수 hasClass라고 한다 //다시 말해 hasClass는 clicked라는 클래스가 있을 때 if (hasClass === false) { //hasClass는 clicked라는 클래스가 없을 .. 2023. 4. 14.
Objects object는 property를 가진 데이터를 저장해주며, { } 를 사용한다. const player = { const player = { name : "tomato", color : "red", food : true }; console.log(player); property를 불러오는 방법은 2가지가 있다. console.log(player.name); => tomato console.log(player["name"]); => tomato 또한 property를 바꾸는 것은 가능하지만 선언된 object를 바꾸는 것은 불가능하다. const player = { name : "tomato", color : "red", food : true, }; console.log(player); player.col.. 2023. 4. 14.
Array Array는 variables 안에 list를 추가하는 것 데이터를 나열하기 위한 방법 중 하나. 항상 [ ] 안에 콤마(,)로 데이터들을 나열한다. 변수도 쓰일 수 있고, boolean, text, 숫자 등 데이터 정렬이 가능하다. ex) const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"]; //daysOfWeek이라는 변수 안에 배열 작성 console.log(daysOfWeek[5]); //5번째 인덱스는 =>fri daysOfWeek.push("sun"); //배열에 sun을 추가하면 const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"]; 2023. 4. 14.
addEventListener 활용하여 크기별로 글자 와 배경이 변하는 윈도우 창 만들기 const title = document.querySelector("h2"); // import "./styles.css"; const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"]; // /* ✅ The text of the title should change when the mouse is on top of it. ✅ The text of the title should change when the mouse is leaves it. ✅ When the window is resized the title should change. ✅ On right click the title should also change. ✅ The colors.. 2023. 4. 13.
merge branch 💡만들어진 branch 를 master로 병합해보자 1. 지금 branch 가 아닌 master branch 에 체크아웃을 한다❗ 2. 메뉴(아이콘 •••)을 눌러 branch 메뉴의 Merge Branch 클릭❗ 3. merge할 branch를 눌러 병합한다 4. commit & push! master에 체크 아웃한 상태에서 merge 할 branch 오른쪽 클릭하여 merge into 눌러도 된다 2023. 4. 13.
728x90
반응형

티스토리툴바