[FrontEnd6] yts-movie-api를 사용하여 영화 리스트 만들기 (yts-api, axios, pagination) 안녕하세요~ 보라해바라기입니다:) 저는 코딩 학원 마지막 수업을 듣고 있는데요 ㅎㅎ 프로젝트를 만드는 수업이라 오늘은 제가 만든 프로젝트를 보여드리려 합니다 ㅎㅎ (아주 작긴 하지만) 대략의 내용은 axios, pagination, yts-api를 사용하여 영화 리스트를 만드는 것입니다! 1. App.js import axios from 'axios'; import { Component } from 'react'; import './App.css'; import MovieList from './components/MovieList.js' import Pagination from './components/Pagination.js'; class App extends Component { constructor.. [Do it!] HTML+CSS+JS 웹표준의 정석 실전 프로젝트 2 목표 이미지 슬라이드 쇼 만들기 css로 버튼 스타일 지정하고 js로 이미지 이동하도록 탭 메뉴 만들고 내용과 연결하기 (css 사용) 1. html Dream Jeju 단체 여행 ▼ 회사 연수 수학 여행 맞춤 여행 ▼ 4.3 평화 기행 곶자왈 체험 힐링 워크숍 갤러리 문의하기 ⬅ ➡ tab-area quick-link footer 2. css @import url('https://fonts.googleapis.com/css2?family=Merienda:wght@700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; } a { text-decoration: none; } ul { list-style-type: none; } #cont.. [Do it!] HTML+CSS+JS 웹표준의 정석 실전 프로젝트 1 웹 사이트 기획하기 전체 레이아웃 만들기 로고 만들기 내비게이션 만들기 1. html Dream Jeju 단체 여행 ▼ 회사 연수 수학 여행 맞춤 여행 ▼ 4.3 평화 기행 곶자왈 체험 힐링 워크숍 갤러리 문의하기 tab-area quick-link footer 2. css @import url('https://fonts.googleapis.com/css2?family=Merienda:wght@700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; } a { text-decoration: none; } ul { list-style-type: none; } #container { margin: 0 auto; /* 화면 중앙에 배치 */ .. [FrontEnd3] 미로 만들기 3x3 2차원 배열을 만들어 "★"이 9칸 안에서 돌아다닐 수 있도록 빈 칸은 "□"로 표현 idx 값이 벗어났을 때, (0~2값을 벗어났을 때) 경고창을 띄우고 그 전 값에 머물도록 함. [FrontEnd3] "keydown" 이벤트로 간단한 피아노 만들기 안녕하세요:) 보라해바라기입니다. 요즘 저는 제이쿼리를 배우고 있는데요. keydown을 이용해 간단한 피아노를 만들어보니 재미있더라고요? 그래서 제가 만든 것과 코드를 공유하려 합니다. (정말 허접합니다 ㅎㅎㅎ) [FrontEnd2] JS 연습문제 (대수의 법칙 _ 주사위) 안녕하세요:) 보라해바라기입니다~ 오늘은 대수의 법칙 중 하나인 주사위 확률 구하기!를 각 단계별로 develop 해보았습니다. 연습문제를 풀기 전, 대수의 법칙에 대한 간단한 설명을 하나 적고 시작해보겠습니다. * 대수의 법칙 모집단이 커질수록 통계적으로 증명된 확률 값과 가까워진다는 통계 법칙 예를 들어, 각 주사위의 수가 나올 확률은 통계적으로 16.666....%인데 시행 횟수를 늘릴수록 16.666...%와 가까운 값이 도출됩니다! 1. 랜덤함수를 이용해 6번 주사위 굴리기 2. 랜덤함수를 생성한 값을 배열에 저장하고 출력 3. 배열에 저장된 랜덤값을 확률로 계산 4. 주사위 시행 횟수가 100번일 때, 확률 계산 5. 사용자에게 시행 횟수를 입력받아 그에 따른 확률 계산 [FrontEnd2] JS 연습문제 (객체) 안녕하세요:) 보라해바라기입니다~! 오늘은 JS의 객체에 대한 연습문제를 풀어보았습니다. 1. 좌표 정보를 가진 객체를 생성하고 정보 출력 함수도 객체 안에 생성해서 정보 출력 2. 사람의 이름, 나이, 키 정보를 가진 객체를 생성하고 정보 출력 함수도 객체 안에 생성해서 정보 출력 3. 개의 종류와 나이 정보를 가진 객체 배열을 생성하고 조건에 따라 정보 출력 [FrontEnd2] JS 연습문제 (함수) 안녕하세요:) 보라해바리기입니다! 오늘은 함수와 관련된 문제를 풀어보았습니다 ㅎㅎ 함수 문제를 풀기에 앞서 함수에는 몇몇 중요한 개념들이 있는데요. 바로 함수의 정의, 호출, 입력, 매개변수(parameter)입니다. 오늘은 이 개념들을 제 방식대로 간단히 정리하고 문제를 풀어보도록 하겠습니다 :) 1. 정의 이 함수는 어떤 기능을 수행하고 어떤 매개변수를 필요로 하는지 등을 정리하는 과정 이 과정에서 매개변수가 필요 없는 경우도 있음 일반적으로 function 함수 이름 (매개변수) { 실행 코드 } 의 형식 function add (num1, num2) { return a + b } 2. 호출 실인자 값을 넣어 함수를 실행하고자 할 때 수행하는 과정 var 변수이름 = 함수 이름 (매개변수) 형태로 .. [FrontEnd2] 함수를 이용해 최대공약수, 최소공배수 구하기 안녕하세요:) 보라해바라기입니다. 오늘은 함수를 이용해서 최대공약수와 최소공배수를 구하는 프로그램을 만들어보았습니다. 1. 최대공약수 구하기 2. 최소공배수 구하기 [FrontEnd2] JS 연습문제 풀이 (중첩 반복문 2) 안녕하세요~ 보라해바라기입니다:) 저번 게시글에 이어 이번에도 중첩 반복문을 연습해보았습니다. 1. 중첩 반복문 (1) 입력횟수만큼 문자 출력 (2) 입력횟수만큼 문자 출력 (가운데 정렬) (풀이 후 업데이트) (3) 규칙에 따라 입력 횟수를 적용하여 문자 출력 (4) 규칙에 따라 입력 횟수를 적용하여 문자 출력 (역순으로) (5) 규칙에 따라 입력 횟수를 적용하여 문자 출력 [FrontEnd2] JS 연습문제 풀이 (중첩 반복문 1) 안녕하세요:) 보라해바라기입니다~ 오늘은 중첩 반복문을 연습해보았습니다. 1. 중첩 반복문 1 (1) 시작 단, 끝 단 입력받아 (시작 단과 끝단을 포함한)그 사이에 해당하는 구구단 출력 (2) 시작 단, 끝 단 입력받아 짝수 단에 해당하는 구구단 출력 (3) 시작 단, 끝 단 입력받아 그 사이에 해당하는 구구단 출력 (4) 시작 숫자와 끝 숫자를 입력받아 그 사이에 해당하는 완전수 출력 (5) 시작 숫자와 끝 숫자를 입력받아 그 사이에 해당하는 소수 출력 (문제 풀이 후 수정) [FrontEnd2] JS 연습문제 풀이 (switch, while ,for 문) 1. Switch (1) 1,2,3 출력 (2) 조건에 따른 지하철 요금 출력 (3) 성적에 따른 학점 출력 (4) 알파벳에 따른 단어 출력 (5) 사칙연산 1. While (1) 입력 숫자만큼 문장 출력 (2) 입력 숫자의 구구단 구하기 (3) 시작 숫자와 끝 숫자 사이의 짝수 출력 (4) 시작 숫자와 끝 숫자 사이의 홀수 출력 (5) 시작 숫자부터 끝 숫자까지의 합 출력 1. For (1) 입력 횟수만큼 문장 출력 (2) 입력 숫자의 구구단 구하기 (3) 시작 숫자와 끝 숫자 사이의 짝수 출력 (4) 시작 숫자와 끝 숫자 사이의 홀수 출력 (5) 시작 숫자부터 끝 숫자까지의 합 출력 이전 1 2 다음
