스프링부트 이용하여 웹페이지 띄우기 먼저 IntelliJ 가 설치되어 있다는 전제로 시작하겠습니다. https://start.spring.io/ 위 사이트에서 프로젝트를 만듭니다. depenencies 에서 Thymeleaf 와 Spring Web 을 추가합니다. Thymeleaf : 자바기반 템플릿 엔진. => 데이터 + 템플릿 (템플릿 : 틀, html와 같은) Spring Web : web을 빌드하는데 도움 com.example.memeber 패키지 => controller 패키지를 생성 => HomeController 생성 resources => templates => index.html 생성 package com.example.member.controller; import org.springfr..
implementation 'com.squareup.retrofit2:retrofit:2.9.0' implementation 'com.squareup.retrofit2:converter-gson:2.9.0' implementation 'com.squareup.okhttp3:okhttp:3.8.0' implementation 'com.squareup.okhttp3:logging-interceptor:3.11.0' 첫번째는 레트로핏 통신을 위해 필수적이고 두번째는 통신 결과를 json형태로 보기위해 선택적으로 추가 한 것입니다.. 세, 네번째는 로그에 찍히도록 하기 위해 추가해주었습니다. 자신의 baseUrl 위쪽에 먼저 적어 둡니다. public class RetrofitClient { private st..
나만의 앱을 만들고 싶어서 고민을 하다 유입성도 좋고 1인 개발로 하기 쉬운 로또 앱을 선택했다. 플레이 스토어에서 로또 앱들 구경을 해보니 퀄리티 높은 앱들이 많았다. 그래서 디자인쪽으로 컨셉을 잘 잡자라고 생각 하여 귀엽고 깔끔한 인터페이스를 중점으로 만드려고 했다!! 아래 bottomNavigationView로 화면 전환을 할 수 있도록 하였다. 그리고 화면 전환 부분은 Activity로 각 개별 화면을 만드는 것이 아니라 Fragment로 Activity위에 띄우는 식으로 했다. listView 보단 recyclerView를 이용하는게 좋다길래 (책에서) 더 복잡하지만 해당 방식으로 했다. 기존 다른 로또 앱들 보면 리스트에 아무 항목도 없을 때 텍스트 뷰를 띄우길래 어떻게 해야될까 고민 했는데 ..
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:..
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 ##..
