yelm-ing

css [CSS] 토글 ON/OFF 버튼 만들기 어플 UI에서 많이 볼 수 있는 토글버튼을 만들어보자!See the Pen Untitled by 최예림 (@kbzqsugj-the-scripter) on CodePen. 공부내용을 기록하는 블로그입니다.피드백은 언제든지 환영합니다😊
JavaScript [JavaScript] 10분마다 실행되는 함수 서버 자원을 최대한 적게 사용하며 알람을 업데이트시킬 수 있는 스크립트를 구현하라는 업무를 요청받았다. 알람은 실시간으로 업데이트되지 않아도 된다고 하여 일정한 시간 간격에 따라 업데이트된 내용을 가져오는 방식을 구현해 보았다. 로직 흐름 함수가 실행되면 현재 시간을 sessionStorage에 저장 저장된 시간과 현재 시간의 밀리초 차이가 600000 (10분) 이상일 시 알람 업데이트 알람 업데이트 시간을 sessionStorage에 갱신 function FnTimeCheck() { //현재시간 var nowDate = new Date(); //세션스토리지에 저장된 시간 var saveDate = new Date(sessionStorage.getItem("saveDate")); if (nowDate...
css [CSS] page-break (after, before, inside) 속성 프린트 시 요소의 분할여부를 설정할 수 있는 css page-break-after/before/inside 속성을 알아보자! page-break-after 요소의 이후 분할 여부 page-break-after: auto; //자동 page-break-after: always; //항상분할 page-break-after: avoid; //분할하지않음 See the Pen page-break-after by yelim (@yelm) on CodePen. page-break-before 요소의 이전 분할 여부 page-break-before: auto; //자동 page-break-before: always; //항상분할 page-break-before: avoid; //분할하지않음 See the Pen pa..
JavaScript [JavaScript] PDF다운로드 기능 구현하기 (html2pdf) 오류 해결! 지난번 html2pdf를 사용하여 PDF다운로드 기능을 만들어봤다. 그런데 파일명이 변경되지 않는 오류가 생겼는데 이유를 알게 되어 기록하기로 한다! 다양한 예제들을 찾아보니 출력할 엘리먼트를 하나의 html에 담아 해당 요소를 가져오는 방식을 사용한다는 걸 알게 되었다. `[document.querySelectorAll()]` 을 사용하면 요소들이 배열에 담겨 출력되어서 생긴 문제였다…! 오류 수정과 함께 로딩이미지 삽입과 페이지 나누기도 추가해 보았다. 📢 수정 및 추가 내용 오류 수정 다운로드 진행 중일 때 로딩이미지 삽입 페이지 나누기 👉 css page-break 보러 가기 html, css pdf 다운로드 What is Lorem Ipsum? Lorem Ipsum is simply dummy ..
JavaScript [JavaScript] PDF다운로드 기능 구현하기 ( html2pdf ) html2pdf는 html2canvas 와 jsPDF를 사용하여 웹페이지나 요소를 PDF로 변환할 수 있다. html2Pdf를 활용하여 PDF 다운로드 기능을 구현해 보자! 1. 필요한 스크립트 //기본세팅 2. html과 css .page 엘리먼트를 a4용지 크기로 설정해서 총 4장의 pdf가 출력되면 된다! pdf 다운로드 1 2 3 4 3. PDF 다운로드 스크립트 function FnPDF() { const pages = document.querySelectorAll('.page'); //.page 전부 찾기 html2PDF(pages, { jsPDF: { format: 'a4',//pdf사이즈 }, html2canvas: { scrollX: 0, scrollY: -window.scrollY, /..
JavaScript [JavaScript] 전개구문(Spread syntax)이란? JavaScript 전개연구문에 대해서 알아보자! 전개구문이란? 말 그대로 전개하는 것, 객체나 배열을 펼칠 수 있다. 사용법은 아주간단하다! 배열이나 객체 앞에 점세개만 붙이면 된다. 함수에 적용하기 함수의 파라미터에 전개구문을 넣으면 개수를 초과한 모든 파라미터를 가져온다. function myFunction(a, b, c, ...arg) { console.log(a, b, c); //1 2 3 console.log(arg); //[4, 5] } const arr = [1, 2, 3, 4, 5]; myFunction(...arr); // myFunction(1, 2, 3, 4, 5);와 같음. 배열 합치기 //전개구문 없이 배열을 합치려면 .concat() 사용함. var arr1 = [1, 2]; ..
Read-ing [노개북 DAY14] IT 5분 잡학사전 - 회고 2주 동안 진행된 IT 5분 잡학사전 책 읽기 챌린지가 끝이 났다. 무엇을 하던 항상 작심 3일인 경우가 대부분이었고, 매번 해야지.. 해야지.. 의 굴레에서 벗어나지 못해 자신감도 뚝뚝 떨어지고 있었다. 그런 찰나에 챌린지 마감 D-1이라는 걸 보고 홀린 듯 신청하고 e-book도 바로 구매했다. 2주면 거뜬하지! 하는 생각이 드는 반면 내가 주말에도 거르지 않고 챌린지를 할 수 있을까? 하는 걱정도 들었다. 생각이 많아지면 아무것도 못하는 내 성격을 알기 때문에 생각을 그만하기로 했다. 챌린지가 시작되었다. 전체적인 챌린지를 끝내고 난 후 생각은 수월하네였다. 평소에도 책 읽는 걸 좋아했던 것과 책 내용이 IT관련 도서라고 느껴지지 않게 쉬운 것도 한몫했다. 하지만 가장 어려웠던 건 예상했던 대로 주..
Read-ing [노개북 DAY13] IT 5분 잡학사전 노개북 챌린지 day13! 드디어 마지막 챕터를 모두 읽는 날이다. 그럼 힘차게 시작해 보자! 오늘 읽은 범위 : 에피소드 39~45 책에서 기억하고 싶은 내용 인공지능 일반 인공지능(강한 인공지능) : 영화나 드라마에서 볼법한 인공지능. 대화, 게임, 판단 등이 가능 좁은 인공지능 (약한 인공지능) : 한 가지만 잘하는 인공지능. 빅스비 시리와 같은 음성인식 기술, 페이스북의 얼굴인식기능 등.. 머신러닝 인공지능을 학습시키는 방법 지도학습 : 인간이 기계에게 준 라벨을 토대로 학습해서 대답함. 비지도학습 : 라벨이 없는 다량의 데이터를 제공 후 스스로 학습. 딥러닝 : 머신러닝을 달성하기 위한 방법. REST API REST 방식으로 설계한 API HTTP메서드, 쿼리를 도입하여 url를 통일성 있게 ..
Read-ing [노개북 DAY12] IT 5분 잡학사전 노개북 챌린지 day12 시작합니다! 오늘 읽은 범위 : 에피소드 35~38 책에서 기억하고 싶은 내용 비밀번호를 저장하는 방법 비밀번호는 시스템을 구출한 사람도 볼 수 있어서는 안 된다. 해시함수 : 입력한 값을 무작위로 변경. 일대일 대응관계가 유지됨. 입력값이 조금만 바뀌어도 출력값이 완전히 달라짐. 레인보우 테이블에서 찾아보면 원래 값을 알 수 있음 솔트 : 작은 무작위 텍스트. 비밀번호에 솔트를 합쳐 해시함수에 통과시키면 더욱 안전하게 암호화할 수 있다. 객체지향 프로그래밍 프로그래밍 패러다임 : 프로그래밍을 하는 사고의 틀. 대표적으로 절차지향, 객체지향, 함수영 프로그래밍이 있다. 클래스 (class) : 같은 속성 다른 데이터를 가지고 있을 때 관리가 용이함. 상속 : 같은 속성을 가진 클..
etc [Git] 깃허브로 새 repository 만들기 깃허브를 사용하여 새로운 리포지토리 만드는 방법을 알아보자! 1. 일단 깃허브 로그인을 한다.(계정이 없다면 생성 후 로그인) 2. 오른쪽 상단에 더하기 버튼(+)을 누르고 New repository를 선택한다. 3. Repository name 칸에 새로운 리포지토리 이름을 작성한다. 4. 하단에 Create repository 클릭한다. 5. 생성완료! 리포지토리 만들었으면 커밋한번 해봐야겠죠?? 다음 글을 참고해서 commit과 push 해봅시다 깃 커밋과 푸시방법 보러가기 참고글 💁‍♀️ https://docs.github.com/ko/get-started/quickstart/create-a-repo 리포지토리 만들기 - GitHub Docs You can store a variety of pro..
Read-ing [노개북 DAY10] IT 5분 잡학사전 노개북 챌린지 day10 시작합니다! 오늘 읽은 범위 : 에피소드 30~34 책에서 기억하고 싶은 내용 레거시 시스템 현재 유행 중인 언어도 미래에는 레거시 시스템이 될 수 있다. ex) 코볼 개발자는 코드를 살아있는 생명체처럼 생각하며 끊임없이 관리해야 한다. SQL SQL : 데이터베이스를 다루는 언어 (DBMS와 소통하기 위한 언어) DBMS : 데이터 베이스 관리 시스템 데이터베이스는 단순히 데이터를 저장하는 역할만 수행 개발에 꼭 필요한 데이터와 데이터베이스를 이해할 수 있게 해주는 언어이기 때문에 공부해 보는 것도 좋은 방법이다! NoSQL : 언어의 특징뿐만 아니라 데이터 베이스의 성질 자체도 다름 도큐먼트 데이터베이스 (document DB) 데이터 형식이 매우 자유로움 ex) 몽고 DB ..
Read-ing [노개북 DAY9] IT 5분 잡학사전 노개북 챌린지 day9 시작합니다! 8일차는 복습 겸 퀴즈데이여서 블로깅 패스-! 오늘 읽은 범위 : 에피소드 26~29 책에서 기억하고 싶은 내용 정렬 알고리즘 버블정렬 배열의 왼쪽부터 시작해서 값 두개를 비교, 큰값을 오른쪽으로 한칸씩 밀면서 정렬. 위의 과정을 한 사이클이라고 하며 모두 정렬될때까지 사이클 반복 수행 선택정렬 전체 데이터 중 가장 작은 데이터 또는 가장 큰 데이터의 위치를 따로 기억하는 방식 자리를 바꾸는 연산이 사이클당 1번으로 버블정렬보다는 효율적 삽입정렬 앞에있는 데이터를 보면서 배치하는 특성이 있음. 앞에있는 데이터와 하나씩 비교하여 데이터가 작으면 해당 위치에 밀어넣음.(한사이클) 선택정렬, 버블정렬보다 빠름.⇒ 속도의 차이가 있지만 세 방법 모두 시간복잡도는 O(N²) 시..
etc [TStory] 티스토리에서 인라인 코드블록 사용하기 (정규식사용) 나는 평소 노션을 잘 사용한다. 데스크탑에서 글 정리 하기에 진짜 최적화 되어있다고 해야하나... 편리한 기능이 너무많다. 평소에 블로깅을 할 때도 노션에 미리 초안을 작성하고 티스토리로 옮기는 작업을 하는데 노션에서 자주 사용하던 인라인 코드블록이 티스토리엔 없다....? 알고보니 마크다운 모드나 html 모드를 통해 따로 적어줘야 가능하다고 한다..... 마우스를 움직이게해..? 넘모귀찮아.... 단축키 내놔..... 근데 역시 세상엔 똑똑한 사람들이 많다. 스크립트를 사용하여 기본모드에서도 적용할 수 있는 방법이 있다!!!! 감사합니다🥺 참고블로그 데굴데굴님 https://haruisshort.tistory.com/253 본론 1. 티스토리 스킨편집으로 들어가 html 편집을 클릭한다. 그러면 이렇..
Read-ing [노개북 DAY7] IT 5분 잡학사전 어제 에피소드 21까지 읽었어야 하는데 착각해서 20까지만 읽었다... 오늘 포함해서 올립니당😘 노개북 챌린지 day7 시작합니다! 오늘 읽은 범위 : 에피소드 21~25 책에서 기억하고 싶은 내용 서버리스 : 우리가 직접 관리하지 않는 서버 아마존 EC2의 등장으로 개인이 관리하던 서버가 없어지기 시작했다. 단점1 콜드스타트로 인해 응답속도가 조금 느리다. 응답시간이 중요한 서비스라면 적절하지 않다. 단점2 다른 회사의 서버리스 서비스로 이동하는 과정이 쉽지 않다. (의존도 높음) 사이드프로젝트를 진행하는 사람이나 프로토타입을 최대한 빨리 출시하고 싶은 기업이 사용하면 좋음. 알고리즘: 컴퓨터에게 내리는 지시사항을 나열한 것 자료구조 : 데이터를 정리하는 방식 (프로그램의 목적에 따라 다양한 자료구조가..
Read-ing [노개북 DAY6] IT 5분 잡학사전 오늘도 힘차게 챌린지 6일차 시작합니다! (졸려서 문장이 두서없을 수 있습니다.......😥) 오늘 읽은 범위 : 에피소드 16~20 책에서 기억하고 싶은 내용 브라우저는 엔진이라는 것을 장착해서 HTML, CSS, JavaScript를 이해할 수 있다. 인터넷 익스플로러는 시장점유율이 95%였지만 보안문제에 빠르게 대응하지 않았다. 엣지 웹 브라우저의 엔진이 크롬브라우저의 엔진인 블링크이다. 쿠키는 어떠한 웹 사이트에 방문했을 때 브라우저를 통해 내 컴퓨터에 보관하는 기록이다. HTTP는 인터넷에서 사용자와 서버가 정보를 주고받기 위한 일종의 규칙이다. 쿠키의 규칙 쿠키는 도메인 1개에만 한정한다. 쿠키는 자동으로 보낸다. 쿠키는 컴퓨터에 자동으로 저장된다. 서버는 항상 켜져 있는 컴퓨터이면서 인터넷에..
Read-ing [노개북 DAY5] IT 5분 잡학사전 노개북 챌린지 day5 시작합니다! (4일 차는 복습과 퀴즈데이라 블로깅 패스합니다-! 😁) 오늘 읽은 범위 : 에피소드 11~15 책에서 기억하고 싶은 내용 라이브러리와 프레임워크 공통점 : 개발속도를 더 빠르게 만들어준다. 차이점 : 내가 제어하는가 제어당하는가. API는 프로그램끼리 소통하도록 도와준다. 프로그래밍 초보자가 하기 쉬운 실수 5. 기한 없이 공부한다. 도메인은 ip주소를 쉽게 기억하기 위해 만들어짐. 레지스트리 : 도메인을 제작, 관리함. 리셀러 : 도메인의 계약관리, 결제처리, 도메인 비용 지급 등의 일을 함. 유튜브가 플래시를 사용하며 위상이 높아졌다. 스티브잡스는 플래시 의존도가 너무 높다고 생각하는 등 여러 이유로 ios에서 플래시 사용을 배제시켰다. 소감 및 떠오르는 생각 개..
Read-ing [노개북 DAY3] IT 5분 잡학사전 노개북 챌린지 day3 시작합니다! 오늘 읽은 범위 : 에피소드 6~10 책에서 기억하고 싶은 내용 오류가 나서 화난 그 마음은 알지만 코드로 돌아가지 말고 오류 메세지부터 읽는 습관을 기르도록 해. 2가지 방법으로 번역되는 프로그래밍 언어 동시 통역사처럼 해석하는 인터프리트 언어 (interpreted language) 도서 번역가처럼 해석하는 컴파일언어 (compiled language) 소감 및 떠오르는 생각 프로그래밍을 하면서 가장 많이 마주치게되는건 콘솔창에 뜨는 빨간 영어들이 아닐까 싶다. 물론 한번에 실행될거라는 기대는 잘 하지 않지만 아주 사소한 실수로 인한 오류라는것을 알게되었을땐 허무하기까지 하다. 오류메세지를 보면 해석하기 귀찮은 마음과 복잡한 코드를 다시 뜯어봐야 한다는 조급함에 내..
JavaScript [JavaScript] 구조분해할당이란? 오늘은 JavaScript의 유용한 기능인 구조분해할당을 알아보자! 구조분해할당이란? 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 구조분해 할당을 사용하면 배열이나 객체를 반복문을 통해 일일이 꺼내어 변수에 담을 필요 없이 바로 할당이 가능하다! 👍 예제 배열 구조분해할당 변수 one, two, tree에 array의 인덱스 순서대로 값이 담긴다. var array = [1, 2, 3]; var [one, two, three] = array; console.log(one); // 1 console.log(two); // 2 console.log(three); // 3 기본값 할당하기 변수를 선언할 때 기본값을 할당할 수 있다. 배열에 값이 없을 때 ..
Read-ing [노개북 DAY2] IT 5분 잡학사전 노개북 챌린지 day2 시작합니다! 오늘 읽은 범위 : 에피소드 1~5 책에서 기억하고 싶은 내용 개발자는 논리적 사고와 문제해결을 즐겨야 한다. 좋은 개발자는 암기력이 아니라 개발 과정을 잘 이해할 수 있어야 한다는 것 천재 해커만 개발자가 될 수 있는 건 아니다. 개발에서는 재능이 아니라 포기하지 않음이 더 중요하다는 것. 새 프로그래밍 언어를 쉽고 빠르게 공부하는 방법 공식문서 살펴보기 문법확인하기 다른 언어와 비슷한 특징 집중해서 보기 새 언어로 코딩 시도하기 튜토리얼 시작하기 나만의 프로젝트 만들기 소감 및 떠오르는 생각 비전공자로써 항상 내 능력을 낮게 판단하는 경향이 있었다. 이게 문제가 되는 점은 해결할 수 있는 문제임에도 내가 건드릴 수 있는 영역이 아닌 거 같은데? 하며 포기하는 순간이..
etc [vsCode] vsCode에서 터미널열기 vsCode에서 터미널 여는 방법을 알아보자! 사실 설명할 것도 없이 너무 간단하다. vsCode를 실행 좌측 상단의 메뉴중 Terminal > New Terminal을 클릭 단축키 : `[ Ctrl + Shift + ` ]` 또는 `[ Ctrl + ` ]` 단축키를 기억해두면 편하더라…! 공부내용을 기록하는 블로그입니다. 피드백은 언제든지 환영합니다😊
Read-ing [노개북 DAY1] IT 5분 잡학사전 노마드코더 개발자 북클럽 챌린지에 도전한다! 노마드코더 개발자 북클럽 챌린지란? 2주동안 많은 챌린저분들과 함께 IT 5분 잡학사전이라는 책을 읽고 매일 독후감을 남기고 퀴즈를 푸는것! 개발공부를 하면서 항상 용어에대한 어려움을 느끼던 찰나 이런 좋은 기회를 발견하게되어 참여하게되었다. 아무래도 혼자서 읽을땐 독서를 자꾸 미루게 되는데 챌린지가 걸려있다보면 덜 지루하고 더 의욕있게 읽을 수 있기 때문에 책 한권을 완독할 수 있는 가능성이 높아진다고 생각한다! 무료 챌린지인만큼 참여에 부담이 없으므로 예비 개발자, 업무상 개발자와 소통이 필요한 분들 모두 한번쯤 참여해보는게 어떨까? 2기도 모집한다고 하니 관심있으신 분들은 한번쯤 들여다 보기를..! 노개북 2기 참여하기!
React [React] useState를 알아보자 리엑트를 공부하며 알게된 기능 중 useState를 정리해보자. useState는 구성요소에 상태변수를 추가할 수 있는 React Hook 이다. 일단 useState를 사용하기위해선 react의 다양한 Hook들 중 useState를 호출해주어야한다. 쉽게 말하자면 리엑트 안의 해당 기능을 내 프로젝트로 가져오는것 //useState import시키기 import { useState } from 'react'; //useState 선언 const [state, setState] = useState(initialState); JavsScript를 알고계신다면 익숙하실 구조분해할당으로 useState에 변수를 지정해주었다 👍 구조분해할당 알아보기 initialState: 초기상태값. 최초 랜더링 시 보여질..
React [React] 리엑트를 설치하는 방법 지난번 블로깅 내용에선 리엑트를 간단하게 방식으로 가져올 수 있다는 것을 알았다. 지난번 블로깅 내용 확인하기 이번엔 터미널에서 명령어를 사용해 설치하는 방법을 알아보자! 1. 설치 전 사전준비 리엑트를 설치하기전 Node.js를 먼저 설치해야한다. Node 홈페이지에 접속하면 메인화면에 두가지 다운로드 버튼이 뜬다. LTS : Long Term Support의 약자로 장기지원되는 버전 현재버전 : 가장 최신버전으로 언제든지 기능이 생기고 사라질 수 있다. 약간 카카오톡 실험실 같은 느낌..? (개발 중 기능이 사라지면 소스코드를 재수정해야하는 일이 생길 수 있음😥 ) 안정성이 높은 LTS를 설치하는게 좋다! Node.js 설치하러가기 설치가 완료되었다면 터미널에 node -v를 입력하여 설치되어있는 n..
React [React] React를 공부해보자 리엑트는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. react는 인터렉티브웹을 위한 최적의 도구 html을 작성 후 이벤트를 등록하는것이 아니라 script 내부에서 html을 생성 후 ReactDOM에 삽입하는 형태로 이루어진다 React를 간단하게 사용할 수 있는 방법은 두개의 URL을 import 시킨 후 스크립트를 작성하는 것이다. //React 기능 //ReactDOM 이걸 보면서 jQuery가 생각이 났다. jQuery는 JavaScript의 여러 메소드들을 간단하게 사용할 수 있게 해주는 라이브러리라면 React는 여러번 사용되는 html 코드를 매번 작성할 필요가 없게 해주는 코드 캡슐화가 주 기능인 것일까? html을 여러번 반복해서 작성하지 않아도 된다니.. 생..
JavaScript [JavaScript] data- 속성을 이용한 그래프 바 만들기 250점 만점에 내 점수가 120점이라면 그래프에는 어떻게 표시해야할까? - 각 그래프 바 마다 해당하는 점수를 data-num 속성에 저장. 진단결과 총점: 250점 평균: 100점 내 점수: 120점 //base .width100{ width: 100%; } .width90{ width: 90% } .space_between{ display: flex; justify-content: space-between; align-items: center; } //그래프 스타일 .progress_wrap { display: flex; justify-content: space-between; align-items: center; } .progress_bar_wrap { height: 20px; border: 1p..

티스토리툴바