syleemomo의 IT 블로그 syleemomo의 IT 블로그

* 루트 폴더생성하기 CMD 창을 열고 아래와 같이 명령어를 입력한다. netflix 라는 루트 폴더를 생성하고 해당 폴더로 이동한다. mkdir netflix cd netflix * 보일러플레이트 코드 내려받기 루트 폴더 내부에서 아래와 같이 명령어를 입력한다. git clone https://github.com/sssssqew/react-webpack.git 그런 다음 dir 명령어를 입력하면 react-webpack 이라는 폴더가 생성된다. react-webpack 이라는 폴더 이름을 client 로 변경하자! 그런 다음 명령창에서 client 폴더 내부로 이동한다. * 패키지 설치하기 >npm install client 폴더 내부에서 위와 같이 명령어를 입력하면 package.json 폴더에 기술..

import './App.css'; import React, { Component } from 'react'; import Word from './Word' class App extends Component { state = { words: [] } componentDidMount(){ const BASE_URL = 'https://dictionary-search.herokuapp.com/api/words' fetch(BASE_URL, { headers: { "Content-Type": "application/json", // "Access-Control-Allow-Origin": "*" // 이 코드 때문에 CORS 에러가 발생한것임. 이 코드 주석처리하면 프론트엔드에서 곧바로 외부 API 접근가능하다..

참고 블로그 '프로젝트/할일목록(TODO) 앱' 카테고리의 글 목록 syleemomo.tistory.com 해당 프로젝트는 할일목록 앱 프로젝트의 연장선에 있다. 그래서 서버 구조나 서버 설정은 할일목록 앱 프로젝트를 참고하면 된다. * 모델 구현하기 const mongoose = require('mongoose') const wordSchema = mongoose.Schema({ r_seq: { type: String, trim: true }, r_word: { type: String, trim: true }, r_link: { type: String, trim: true }, r_chi: { type: String, trim: true }, r_des: { type: String, trim: true..

프로젝트 구조 food-recipe-app ___ index.html |___ style.css |___ app.js 프로젝트 구조는 간단하다. food-recipe-app 이라는 루트폴더 아래 HTML, CSS, JAVASCRIPT 파일 3개가 있다. 웹페이지 레이아웃 설계 프로토타이핑을 참고하여 웹페이지 레이아웃을 간단하게 설계하였다. 네모 박스는 모두 div 요소(element)를 가리킨다. 우선 헤딩(heading)과 검색창이 들어가는 상위 div 요소와 사진 리스트가 들어가는 하위 div 요소로 분리하였다. 그 다음은 상위 div 안에 헤딩과 검색창을 화면 중앙에 정렬하기 위한 div 요소가 들어간다. 그리고 중앙에 정렬된 div 안에 헤딩을 담기 위한 div 요소와 검색창을 담기 위한 div ..

* 사진 Hover일때 마우스 포인터 두기 li:hover{ opacity: 0.7; transform: scale(1.02); cursor: pointer; } cursor: pointer 코드를 추가하면 마우스 Hover일때 손가락 모양이 생긴다. * 사진 클릭시 팝업창 띄우기 const li_collection = document.getElementsByTagName('li') Array.from(li_collection).forEach(li => { li.addEventListener('click', () => { alert('hello !') }) }); app.js 파일에 위와 같은 코드를 추가한다. 사진은 li 요소에 있으므로 모든 li 요소를 가져와서 반복문으로 순회하면서 각각의 요소에 c..

* 마우스 Hover li:hover{ opacity: 0.7; transform: scale(1.02); } style.css 파일 하단에 위 코드를 추가한다. 사진 위에 마우스가 위치하면 사진이 살짝 흐려지고 크기가 조금 커진다. * 음악 삽입하기 프로젝트 폴더에 듣고 싶은 음악을 추가한다. body 태그 바로 아래 위 태그를 추가한다. 해당 음악을 audio 태그로 가져와서 자동으로 플레이한다. 현재까지의 html 전체코드는 위와 같다.

* html 코드로 리스트 보여주기 body{background: white} console.log("hello world !") 이후 작업을 위해 위와 같이 style.css app.js 코드를 각각 변경한다. 사진 1 사진 2 사진 3 사진 4 사진 5 ul 태그는 쇼핑몰 의류 목록이나 넷플릭스 영화 목록과 같은 데이터 목록을 나열할때 많이 사용하는 태그다. ul은 unordered list의 약자로 순서가 없는 리스트라는 의미다. 한글문서나 PPT의 순서가 없는 목록과 같다. 사진 1 사진 2 사진 3 사진 4 사진 5 리스트를 추가한 현재까지의 코드는 위와 같다. 편집기에서 ctrl + s 키를 동시에 눌러 코드를 저장하면 브라우저 화면이 업데이트 되고 아래와 같은 사진 리스트가 표시된다. * 리..

* 비주얼 스튜디오 코드(vsc) 설치 비주얼 스튜디오 코드(vsc) 설치 가이드 비주얼 스튜디오 코드 설치하기 다운로드 사이트 Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio C.. syleemomo.tistory.com * 프로젝트 루트 폴더 생성 윈도우 검색창에서 CMD를 검색하고 CMD 명령창을 오픈한다. 위와 같이 mkdir 명령어로 gallery라는 폴더를 생성한다. dir 명령으로 폴더가 제대로 생성되었는지 확인한다. 또..