개발일지, 개인 또는 단체 포트폴리오 등
이벤트 버블링 하위 요소의 이벤트가 상위까지 전달되는 현상입니다. 예를 들어 위의 그림에서 <a> 태그를 클릭했는데 <a> 태그에 걸려있는 이벤트가 실행되는 것에 더해 상위 요소 <li>, <ul> 에 걸려있는 이벤트까지 같이 실행되는 현상을 말합니다. 자바스크립트에서 이것을 방지하려면 event.stopPropagation()를 사용합니다. 아래는 이벤트 버블링이 적용되는 코드입니다. <a> 만 클릭해도 모든 이벤트가 발동됩니다. const 더보기…
먼저 상위(부모) 컴포넌트의 이름은 Topic, 하위(자식) 컴포넌트의 이름은 TopicSearch라고 가정합니다. 먼저, 상위 클래스에서 컴포넌트를 삽입할 때 v-on:xxx(약어 @xxx)를 사용해 커스텀 이벤트를 만듭니다. Topic.vue (일부) <template> <div class=”topic”> <TopicSearch v-on:search=”doSearch” v-on:allOrder=”doAllOrder”/> </div> </template> 여기서 search. allOrder 는 나중에 this.$emit에서 사용할 이벤트 이름이며. doSearch, doAllOrder는 상위 컴포넌트에 있는 메소드 이름입니다. 왼쪽이 더보기…
자바스크립트 npm으로 만든 프로젝트에서 package.json의 정보 가져와 웹 페이지에 보여주는 방법입니다. package.json을 import문을 사용하여 불러오면 객체로 사용할 수 있습니다. 다른 json 파일도 마찬가지입니다. import React from ‘react’; import Container from ‘@material-ui/core/Container’; import packageJson from ‘./../../package.json’ const Home = () => { const dependencies = packageJson.dependencies const depElements = [] for(let 더보기…
리액트(React) 새로운 앱 생성하는 방법입니다. 리액트 앱 생성 npx create-react-app [앱_이름] 터미널을 열어 생성하고자 하는 폴더의 상위 폴더에 이동한 후 위의 명령어를 터미널에 입력하면 생성이 됩니다. (Node 8.10 혹은 상위 버전 및 npm 5.6 혹은 상위 버전인 경우) 또는 다음 명령어를 입력해 생성할 수 있습니다. npm install -g create-react-app 더보기…
1) JSON을 배열로 변환 객체(stdClass)로 변환하는 방법 $array_data = json_decode($str, false); // 또는 $array_data = json_decode($str); 배열로 변환하는 방법 $array_data = json_decode($str, true); 2) explode 다른 언어의 String.split과 기능이 비슷합니다. 스트링의 경계기호(delimiter) 문자를 기준으로 배열을 생성합니다. $date = “2020-08-25”; // explode(delimiter, string) $exploded = explode(‘-‘, $date); echo $exploded[0]; // 더보기…
프로그래머스 2020 웹 프론트엔드 데브매칭(Dev-matching) 후기입니다. 후기라기보다는 약간의 변명에 더 가까운 글입니다. 먼저 테스트는 2020년 8월 22일 오후에 3시간(!!)동안 진행되었습니다. 3시간이 말이 안되는게 문제의 첫 부분이 다음과 같았습니다. 참고로 문제의 베이스 코드는 index.html과 index.js 정도의 파일만 주어지고 아주 기초적인 내용만 구현되어 잇었습니다. 즉 이 과제를 제대로 풀려면 맨땅에서 리액트같은 유사 더보기…
원문 바로가기1 바로가기2 원문에서는 프론트엔드 부분을 리액트로 설명하고 있는데, 저는 리액트를 사용하지 않아서 다음 글에서 Vue.js 로 대체해서 올리고, 이 글은 백엔드만 다루겠습니다. 일반 서버 사이드 렌더링에서 구글 로그인 연동하는 방법은 아래를 참조하세요. 스프링 부트(Spring Boot): 구글 로그인 연동 (스프링 부트 스타터의 oauth2-client) 이용 + 네이버 안녕하세요, Spring Boot 더보기…
스프링 부트(Spring Boot) + Vue.js 예제: 게임 정보 제공 사이트 (스타라이트 스테이지) About this site 아이돌마스터 신데렐라 걸즈 스타라이트 스테이지(데레스테) 게임 정보 제공 사이트입니다. Link http://dere.yoonbumtae.com Github https://github.com/ayaysir/deretopic 기술 스택 Contact 이 사이트는 일단은 개인 포트폴리오를 위해 제작되었지만, 계속해서 지금보다 더 발전시킬 용의가 있습니다. 건의사항 더보기…
출처: 바로가기 예를 들어, 어두운 배경색에서는 밝은 글자색을 보여주고 싶고, 밝은 배경색은 어두운 글자색을 보여주고 싶다고 하겠습니다. 그런 조건에서 봤을 때 아래 예제는 글씨색이 눈에 잘 들어오지 않습니다. 어두운 배경색에는 아래처럼 밝은 글자색을 보여줘야 합니다. 색상에 16진수(예: #ffffff) 형태로 주어졌을 때 영상의 밝기차에 대한 정보(luma)를 결정하는 함수는 다음과 같습니다. function getTextColorByBackgroundColor(hexColor) 더보기…
JPA 엔티티에 생성 날짜(createdDate), 변경 날짜(modifiedDate) 필드를 자동으로 추가하는 방법입니다. 1) BaseTimeEntity 추상 클래스 작성 package com.example.awsboard.domain; import lombok.Getter; import org.springframework.data.annotation.CreatedDate; import org.springframework.data.annotation.LastModifiedDate; import org.springframework.data.jpa.domain.support.AuditingEntityListener; import javax.persistence.EntityListeners; import javax.persistence.MappedSuperclass; import java.time.LocalDateTime; @Getter @MappedSuperclass @EntityListeners(AuditingEntityListener.class) public abstract class BaseTimeEntity { @CreatedDate private LocalDateTime createdDate; @LastModifiedDate private LocalDateTime modifiedDate; } 더보기…