데이터와 한걸음씩

배열을 localStorage에 그냥 setItem 으로 저장하면 텍스트 형식으로 저장돼서 불러올때 for문으로 돌리면 한글자씩 출력된다. 배열을 배열형태로 저장하기 위해 JSON.stringify() 로 감싸주었다. array = [1,2,3] localStorage.setItem('name',JSON.stringify(array)); var todo = localStorage.getItem('name'); JSON.parse(todo); 아래 캡쳐에서보면, localStorage의 todo 라는 Key 에 값이 배열형태로 저장된걸 확인할 수 있다. 전체 코드 https://github.com/choihana/backendschool/blob/main/todolist.html GitHub - choih..

Todo List 추가 전체 삭제 Copyright 2023 TodoList by Joey. 1. Input 을통해 todo 입력 받기 2. 추가 버튼 누르면 li 로 항목 추가하기 *li 생성코드: document.createElement("li") *ul에 추가: list.appendChild(item); 3. 삭제 버튼 누른 항목 지우기 *list.removeChild(this.parentNode) 4. 전체 삭제 *list.remove()

1. setting -> python interpreter 에서 add interpreter 클릭 2. virtualenv environment 추가해주기 3. 터미널에서 서버 구동 명령어 입력 python3 -m http.server (+) 가상환경 지우고 싶을때 터미널에 입력 : rm -fr venv

개발자들은 귀찮은 걸 싫어한다. 코드가 복잡해지고, 똑같은 코딩을 또 하는걸 싫어한다. 함수로 중복 코드를 제거해보자! 1. 중복 제거하기 전 if와 else 안에 컬러를 변경해주는 코드가 중복으로 작성되어 있다. hana duri 2. 중복 제거 후 screen_mode 함수를 추가해서 반복적으로 작성됐던 컬러를 변경해주는 코드 담아서, 중복을 제거해주었다. mode_change 함수에서는 screen_mode 함수의 인자로 원하는 컬러를 전달해주어서 결과를 얻고 있다. hana duri 이렇게 코드의 중복을 없애고 간결하게 하는 과정을 리팩토링이라고하고, 리팩토링을 하는 규칙이 있다. 참고 👇🏻 위키백과: 리팩토링 리팩터링 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 리팩터링..

HANA's JS day 🌞nigth 🌛 👉🏻버튼을 클릭해보세요! 자바스크립트는? HTML, CSS 로 작성된 정적문서에 동적인 이벤트를 만들어주는 언어이다. 사용자가 버튼을 클릭하거나, 댓글을 작성하거나, 스크롤을 하거나, 특정 행동을 했을 때 반응하여 사용자와의 상호작용을 만들 수 있다. [버튼 코드 참고] day 🌞 nigth 🌛 위 코드에서 button tag의 속성인 onclick에 원하는 이벤트를 작성해서 동적인 페이지를 만들 수 있다. [script 태그에 함수로 작성하기] 자주쓰는 기능은 함수로 빼놓으면 재사용 가능하다. day 🌞 nigth 🌛 [기본 이벤트] 콘텐츠 변경: .innerHTML = "바꾸고싶은 문구"; 링크 변경: .src ="바꿀링크"; 스타일 변경: .style 참고 ..

Git을 설치하고, Github에 파일을 올리기 시작한지는 5개월 정도 되었지만 그 엄청난 기능들을 몰라서 구글드라이브 수준으로 사용하고 있었다. 흑흑 오늘은 깃을 깃답게 처음 써본 기념일이다. Visual Studio Code에서 작업한 파일을 어떻게 버전관리할 수 있는지 순서를 보자. 1. 코드 수정 2. Source control 영역에서 change 일어난 파일 + 눌러서 커밋 대기열에 추가 * git graph 볼 때, 순서 1) 헤드 (동그라미): 현재 작업 위치 2) 마스터: 최신 버전 3) origin: remote 저장소에 푸시한 버전 3. 커밋 대기열에 있는 파일 커밋하기 4. Github에 Push 하기 * 에러 발생 및 해결 에러 코드: can't push refs to remote..

수업을 듣고 이해한 내용을 바탕으로 작성되었습니다. 최대한 제가 이해한 언어로 풀어서 쉽게 작성했습니다. 잘못된 부분이 있으면 댓글로 알려주세요 🙌🏻 호스트 (Host) 인터넷에 연결 된 디바이스들을 호스트 라고 한다. (IP 주소를 가진 기기) 컴퓨터뿐 아니라 스마트 폰, 스마트 TV 등 인터넷에 연결되어 있는 기기들은 모두 호스트라고 할 수 있다. 웹 서버와 클라이언트 (Server & Client) 웹 정보들을 저장하고 있는 물리적인 공간 웹 서버가 있다. 클라이언트는 이 서버에 정보를 요청합니다. 그러면 서버에서 그 정보를 클라이언트의 컴퓨터에 뿅 띄워준다. 우리가 구글에 "강아지" 라고 검색하면, 강아지 관련된 정보가 쭈르륵 뜨는 것이 그런 과정! 현재의 우리에게는 너무나 자연스러운 일이지만, ..

포트폴리오 홈페이지 제작에 위해 필요할 것 같은 사이트 링크 모음 CSS 템플릿 활용 TEMPLATED A collection of 867 Creative Commons-licensed CSS, HTML5 and Responsive site templates created by Cherry, Doni, AJ, and co. templated.co 무료 폰트 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 무료 랜덤 이미지 Unsplash Source A simple API for embedding free high-resolution photos from Unsplash. ..

이전글 참고: 2020/09/02 - 이미지 랜덤으로 가져와서 점심 추천받기(1) 이전글에서 HTML 로 블로그를 작성해보았는데, 그 위에 CSS로 악마의 디자인을 입혀보았습니다. 이 글의 순서 오늘 뭐 먹지? 유튜브 노래 추천 이 블로그 작성 된 HTML 이미지 오늘 뭐먹지? ♥️ 아래 버튼을 누르면 이미지가 달라집니다. ㅎ 먹고싶은게 나올때까지 새로고침 해보세요. (주의: 취향고려안함, 2초 정도 뒤에 클릭해야 사진바뀜 ㅠ) 다른거 먹을래요 활용한 사이트 참고 유튜브에서 좋아하는 노래 가져오기 HTML 작성 이미지 이 블로그는 HTML 모드로 작성되었다. 오늘 이고잉님의 html 강의를 듣고, html로 작성해보았다.

이 글의 순서 오늘 뭐 먹지? 유튜브 노래 추천 이 블로그 작성 된 HTML 이미지 오늘 뭐먹지? ♥️ 아래 버튼을 누르면 이미지가 달라집니다. ㅎ 먹고싶은게 나올때까지 새로고침 해보세요. (주의: 취향고려안함, 2초 정도 뒤에 클릭해야 사진바뀜 ㅠ) 다른거 먹을래요 활용한 사이트 참고 유튜브에서 좋아하는 노래 가져오기 HTML 작성 이미지 이 블로그는 HTML 모드로 작성되었다. 오늘 이고잉님의 html 강의를 듣고, html로 작성해보았다.