꾸준한 개발일기

vue.js 란? 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이다. 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수 있다. Vue 앱은 단일 DOM 요소(#app)에 연결되어 DOM 요소를 완전히 제어하고, HTML은 엔트리 포인트일뿐 다른 모든 것은 새롭게 생성된 Vue 인스턴스 내에서 발생한다. 학원에서 진행하였던 스프링 프로젝트에 vue js를 적용해보았다. 가볍게 db에 있는 데이터를 이용하여 영화 리스트의 전체 수를 view단에서 보여주었다. 1. 프로젝트 세팅 기존에 있는 영화 대여점 프로젝트에 vue를 적용하였다. 밑의 블로그를 참고하였다. https://memme.tistory.com/159 이클립스 Spring 프로젝트에서 Vue.js 사용하기 #Sp..

리액트로 영화 평점 웹서비스를 구현 중 라우터 적용에 오류가 발생하였다. 코드: import React from 'react'; import './App.css'; import { HashRouter, Route } from 'react-router-dom'; import About from './routes/About'; import Home from './routes/Home'; function App(){ return ( ) } export default App; 1. 문제 확인 오류: 1. HashRouter를 사용하면 주소가 http://localhost:3000/#/로 바뀌어야 하는데 바뀌지 않았다. 2. url를 입력하여도 빈 페이지가 로딩되고 개발자 도구에서 에러 메세지가 발생한다. 오류메..

API를 통해 데이터를 받아오는데 문제가 발생했다. 주소 중 "리"에 대한 데이터를 제공하지 않는 것이다. 서비스에서 검색 조건에 리가 있는데 말이다. 시도나 읍면동은 카카오에서 제공하는 데이터를 조인하여 가져올 수 있지만 리는 따로 제공하지 않고있다. 그래서 전체 지번 주소에서 리만 추출하는 기능을 구현해보았다. 1. 자바 문자열 나누기(split) 문자열.split(String regex); regex: 문자열로 regex로 나누어진 문자열은 배열에 저장된다. example에선 " "(공백)을 regex로 사용했다. String fulladdr = "충청북도 청주시 청원구 오창읍 화산리(華山) 어쩌고"; String [] split_fulladdr = fulladdr.split(" "); System..

갑자기 친구한테 카톡이 왔다 친구가 개발, 디자인도 아닌 평범한 연구직인데 갑자기 홈페이지 기획을 맡게 되었다는데 배너 크기를 알고싶다는 것이었다 이런 질문을 하는 사람이 처음이라 재밌고 웃기다 ㅋㅋㅋㅋㅋ 하긴 개발이나 디자인 직무가 아니면 모를 수도 있겠구나 그리고 친구가 검색을 해봐도 제대로 안 나온다길래 블로그에 정리해보기로 했다 1. 홈페이지 접속 먼저 확인하고 싶은 디자인이 있는 홈페이지에 접속한다 2. 개발자 도구 열기 F12를 눌러 개발자 도구를 연다 3. 아이콘 클릭 빨간색 블럭친 아이콘을 클릭해준다 4. 마우스 커서로 정보 확인 원하는 디자인 부분에 마우스 커서를 올리면 정보가 나온다

도서관에서 노마드 코더의 클론코딩을 대여하여 영화 평점 웹서비스 만들기를 시작했다. 초반에는 리액트 개념에 대해 꼼꼼하게 설명해주기 때문에 시간이 좀 걸렸다. 그래도 API로 영화 데이터를 가져와서 페이지에 보여주는데까지 구현했다. 그리고 다시 코드를 보며 새로 알게 된 것들을 정리해보자 한다. state state = { }; - 객체 형태의 데이터로 동적 데이터를 다룰 때 사용한다 - 클래스형 컴포넌트에서 사용할 수 있다 - 리액트는 state를 직접 변경하는 코드를 허용하지 않는다 - state값을 변경하기 위해서 setState() 함수를 이용한다. 예시) class App extends React.Component { state = { isLoading: true, movies: [], }; }..