Suyeon BLOG

쇼핑몰 프로젝트에서 가장 대표적인 기능 중 하나인, 최근 본 상품 기능을 만들기 위해 LocalStorage와 Set을 활용했습니다. 📌LocalStorage 활용법 LocalStorage에 값은 항상 문자열만 저장 가능하고, 값을 넣을 때 key: value 형태를 가집니다. LocalStorage에 값을 넣는 법: localStorage.setItem('key', 'value'); LocalStorage에 값을 가져오는 법: localStorage.getItem('key'); LocalStorage에 값을 삭제하는 법: localStorage.removeItem('key'); 📌Set 활용법 Set은 대부분 중복없이 저장하고 싶을 때 자주 사용됩니다. Set으로 배열의 중복 없애는 법: new Set..

See the Pen Untitled by OhGod-23 (@ohgod-23) on CodePen.

출처: Do it! 클론 코딩 영화 평점 웹서비스 1. 구조 분해 할당을 하지 않았을 때 2. 구조 분해 할당을 했을 때 - 점 연산자 적용한 순서대로 하면 됩니다.

출처: Do it! HTML + CSS + 자바스크립트 See the Pen Untitled by OhGod-23 (@ohgod-23) on CodePen. 만약 버튼을 만들어서 한다면, 버튼을 이모티콘도 좋지만, 여기서 참고해서 필요한 걸 찾아 쓰는 것도 좋을 것 같습니다. https://dev.w3.org/html5/html-author/charref Character Entity Reference Chart dev.w3.org

출처: Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 [특별부록] 1. 웹 디자인 기능사 자격시험의 실기 기출 문제를 풀자. - 처음 웹 사이트를 만들 때 웹 사이트를 모방해서 하는 것도 좋습니다. 하지만 초보자에게는 복잡하고 어렵습니다. - 아래 url에 들어가서 문제를 다운받으면서 감을 잡아 나갑니다. - http://www.q-net.or.kr/cst006.do?id=cst00602&gSite=Q&gId=&artlSeq=5199079&brdId=Q006&code=1204 공개문제 자료실 상세 | Q-net BODY { FONT-SIZE: 10pt; FONT-FAMILY: Malgun Gothic; COLOR: #000000; MARGIN: 0px } P { MARGIN-BOTTOM..

map() -1. 배열의 모든 원소마다 특정 작업을 하는 함수를 적용하고, 그 함수가 반환한 결과를 모아서 배열로 반환합니다. let lists = ['Hi', 'March', 'Blue', 'Love']; lists.map((current)=>{console.log(current); return 0;}) //console 창에 원소 값이 출력되고, 출력한 개수만큼 0으로 채워진 배열을 반환합니다. lists.map((current) => `${current}❤`) //['Hi❤', 'Margin❤', 'Red❤', 'Blue❤'] 2. React JS에서 map을 사용했을 때 - React 원소들은 유일해야 하는데 list에 들어가면서 유일함이 사라졌습니다. - 따라서 각 리스트에 key값이 주어져야 ..

출처 : 노마드코더 - React JS로 영화 웹 서비스 만들기 1. gh-pages 다운받기 - TERMINAL에 npm i gh-pages 입력해서 다운받습니다. - 결과물을 git hub에 올릴 수 있도록 도와줍니다. 2. 폴더에 packages.json이 있는지 확인합니다. - TERMINAL에 npm run build 하면 build라는 폴더가 생성됩니다. - 폴더 안에 여러 파일이 있는데 여기에는 우리가 사용했던 코드들이 있습니다. - build를 GitHub에 올려주면 되지만 작업을 다 한 후에 해야 합니다. 3. 올리기 전에 우선 packages.json에 작업해야할 것이 있습니다. //scripts에 작성 "scripts" : { "deploy" : "gh-pages -d build", ..

출처: 노마드코더 - React JS로 영화 웹 서비스 만들기 프로젝트 흐름 1. 처음 시작할 때 '로딩 메시지'가 화면에 출력됩니다. 2. '로딩 메시지'를 숨기고 코인 리스트를 나열합니다. - 암호화폐 리스트 출처 : https://api.coinpaprika.com/v1/tickers 주의할 점 1. useEffect로 API 한 번만 가져옵니다. 2. useState() 초기값을 안정해주면 undefined로 되고, undefined는 길이(length)를 가지고 있지 않습니다. import { useState, useEffect } from "react"; function App() { const [loading, setLoading] = useState(true); const [coins, s..

출처: 노마드코더 - React JS로 영화 웹 서비스 만들기 import { useState, useEffect } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if (toDo === "") { return; } setToDos((currentArray) => [toDo, ...currentArray]); setToDo(""); }; console.log(to..

출처 : Do it! 인터랙티브 웹 페이지 만들기 //HTML에 작성 //script에서 작성 window.addEventListener("load", () => { //window가 load될 때 수행 const grid = new Isotope("section", { //배치할 요소를 감싸고 있는 부모 요소명 itemSelector: "article", //배치할 요소명 columnWidth: "article", //너비값을 구하는 요소명 transitionDuration: "0.5s", //화면 재배치 시 걸리는 시간 }); //grid에 저장된 값으로 재정렬 grid.arrange({ filter: ".odd" //odd 클래스를 가진 것만 정렬 }); });