8월 말 프로젝트는 노마드코더의 책을 보며 클론코딩해서 완성해보는 것이었다 기본적인 스타일링은 카드 컨셉으로 만들었다 (box-shadow를 요런식으로 적절히 사용하면 훨씬 고퀄리티 웹을 만들수 있구나 ㅎㅎ) 옆에 HOME, ABOUT 버튼이 보이는데 스크롤을 내려도 위치가 고정되도록 position: fixed 를 이용했다 ABOUT 페이지는 책 그대로 그냥 명언 문구하나만 넣었다 (미루다가 결국 냅둠 하하😅) 이제 남은건 메인 화면에서 카드를 누르면 이동하는 영화 상세 정보 페이지를 만드는 것이었다 (이부분은 책에서 직접 해보라길래 무난한 디자인으로 코딩해봄!) 영화 제목, 년도, 장르, 줄거리 순으로 정렬함 메인페이지와 똑같이 box-shadow를 넣었고 보기 편하게끔 가운데 정렬하여 영화 상세 페..
axios를 이용하여 영화 open api를 가져와서 react로 출력하는 과정을 알아보겠다 open api는 개발에 있어서 필수적으로 알아야하는 부분이라고 생각한다 네이버 검색어, 날씨, 마스크 재고 api 등등 다양하게 응용할 수 있기 때문에 사용하는 방법을 정확히 알고 쓸 필요가 있다! - App.js (전체 코드) import React from 'react'; import axios from 'axios'; import Movie from "./Movie"; class App extends React.Component { state = { isLoading: true, movies: [], } getMovies = async () => { const {data: { movieListResult:..
state를 사용해서 plus, minus 버튼을 클릭하면 동적으로 바뀌는 것을 알아보자 import React from 'react'; class App extends React.Component { state = { count: 0, }; add = () => { console.log('plus'); }; minus = () => { console.log('minus'); } render() { return ( The number is: {this.state.count} Add Minus )} } export default App; 여기까지 따라왔으면 Add와 Minus 버튼을 누를 때 console에 문구가 뜨는 것을 확인 할 수 있다 중요한 것은 JavaScript를 알아서 add() 함수에 th..
map() 함수가 중요하기도 하고 지금하고 있는 프로젝트에서 기본이 되는 함수이기 때문에 정확히 알아 둘 필요가 있다 정의: map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. 출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map map() 의 필요성: 예제 fruits = [ 'apple', 'banana', 'kiwhi', 'melon'] //여기서 각 원소 뒤에 '👍' 를 붙이려고 한다 //map() 함수를 사용할 순간이다 fruits.map(function(fruit) { return fruit + "👍" ; }) ["app..
# 이벤트 생성과 이벤트 막기 {this.state.subject.title} onClick은 버튼을 클릭했을 때 경고창 "hi"가 작동한다 여기서 문제점은 클릭 할 때 마다 리로드가 된다는 것이다 (by a태그) {this.state.subject.title} preventDefault는 기본적인 동작을 막는다라는 뜻으로 이제 해당 태그를 클릭해도 리로드가 되지 않는 것을 알 수 있다. # 이벤트에서 state 변경하기 //오류 코드 {this.state.subject.title} {this.state.subject.sub} 이 코드의 목적는 태그를 클릭했을 때 mode가 'welcome'으로 바뀌어서 state도 함께 변경되는 것이다 하지만 이런식으로 하면 오류가 발생하므로 setState(), .b..
Javascript와 React를 병행해서 공부하기 시작했다 잘은 모르지만 React는 프론트엔드 개발자에게 필요한 것이라고 들었다 생활코딩님의 강좌들을 보며 배운것들을 기록하려고 한다 리액트의 필요성 페이지를 구성하는 요소는 HTML이다. 근데 내가 만드는 것처럼 간단한 웹페이지는 금방 쉽게 파악 할 수 있다. 하지만 좀 더 많은 정보들을 담은 페이지 일수록 그만큼 html 코드양도 많아지고 개발자는 분석하기 더욱 더 어려워진다. 이때 React가 🌟을 발휘한다! 예를 들어서 WEB World Wide WEB! HTML CSS JavaScript HTML HTML is HyperText Markup Language. 로 구성된 html이 있다 지금은 한눈에 구조를 파악할 수 있지만 , , 에 각각 천만..
1. 배열 선언하기 const arr1 = new Array(); arr1[0] = '사'; arr1[1] = '과'; console.log(arr1[0]); // -> 사 또는 const arr2 = ['사', '과'] console.log(arr2[1]); // -> 과 2. 반복문 이용하기 const fruits = ['apple', 'bannana', 'melon', 'cherry']; // 1. for for(i = 0; i < fruits.length; i++) { console.log(fruits[i]); } // 순차적으로 // 2. for of for(let fruit of fruits) { console.log(fruit); } // fruit을 let 하여 fruits의 배열 항목들을..
import pygame import os # 0. 제일 먼저 해야되는 것들 # 기본 초기화 pygame.init() # 화면 크기 설정 # 화면 타이틀 설정 # FPS 설정 # 1. 사용자 게임 초기화 (배경 화면, 게임 이미지, 좌표, 속도, 폰트 등 ) while running: # 2. 이벤트 처리(키보드, 마우스 등) # 3. 게임 캐릭터 위치 정의 # 4. 충돌 처리 # 5. 화면에 그리기 pygame.quit() os는 (OS: Operating System)으로 디렉터리, 파일 등등 제어하는 모듈이다 여기서는 디렉터리를 추출하거나 경로를 생성하는데 쓰인다 위의 주석처리들이 게임 만들 때 뼈대라고 할 수 있다 # 0. 제일 먼저 해야 되는 것들 import pygame import os ##..
파이썬으로 쉽게 게임을 만들 수 있다. 파이썬은 다양한 라이브러리가 있는데 그중에서 pygame을 import 하면 혼자서도 다양한 게임을 만들어 볼 수 있다 이번에 만들 게임은 공 피하면서 터뜨리기이다~ 강좌를 보며 따라 만들어 보았다💻💻 https://www.youtube.com/watch?v=Dkx8Pl6QKW0&t=14s 내가 참고한 유튜브 강좌이다 강사가 쉽게 설명하면서 코드를 작성하니까 누구나 충분히 만들 수 있다~! 다음 포스트부터 코드에 대해서 살펴보겠다👊
마지막 footer영역에 대해 살펴보자! 딱히 어렵다 할 부분은 없는데 나는 글자 위에 가운데 경계선을 어떻게 해야 할지 잘 몰랐다. border로 하자니 footer위 전체가 선으로 표시되니까 이 방법은 쓸 수 없었다. 그래서 코드를 참고해보니 ::before을 이용해서 구현하였다 footer { margin-top: 2rem; margin-bottom: 10rem; } /* 경계선 만들기 */ footer:before { content: ""; border-top: 1px solid rgba(255,255,255, 0.3); display: block; width: 10em; margin: 5rem auto; } /* 경계선 만들기 */ footer p { text-align: center; colo..
