WEB: Frontend
자바스크립트, HTML: 이벤트 버블링, 캡처링, 위임(delegation) – 동적 요소에 이벤트 할당
이벤트 버블링 하위 요소의 이벤트가 상위까지 전달되는 현상입니다. 예를 들어 위의 그림에서 <a> 태그를 클릭했는데 <a> 태그에 걸려있는 이벤트가 실행되는 것에 더해 상위 요소 <li>, <ul> 에 걸려있는 이벤트까지 같이 실행되는 현상을 말합니다. 자바스크립트에서 이것을 더보기…
WEB: Frontend
Vue.js: this.$emit으로 하위 컴포넌트에서 상위 컴포넌트로 정보 전달
먼저 상위(부모) 컴포넌트의 이름은 Topic, 하위(자식) 컴포넌트의 이름은 TopicSearch라고 가정합니다. 먼저, 상위 클래스에서 컴포넌트를 삽입할 때 v-on:xxx(약어 @xxx)를 사용해 커스텀 이벤트를 만듭니다. Topic.vue (일부) <template> <div class="topic"> <TopicSearch v-on:search="doSearch" v-on:allOrder="doAllOrder"/> </div> </template> 여기서 search. 더보기…
WEB: Frontend
자바스크립트 npm: package.json의 정보 가져와 웹 페이지에 보여주기
자바스크립트 npm으로 만든 프로젝트에서 package.json의 정보 가져와 웹 페이지에 보여주는 방법입니다. package.json을 import문을 사용하여 불러오면 객체로 사용할 수 있습니다. 다른 json 파일도 마찬가지입니다. import React from 'react'; import Container from '@material-ui/core/Container'; import packageJson from './../../package.json' 더보기…
WEB: Frontend
리액트(React): npm(npx)에서 새로운 앱 생성, 컴포넌트 파일 생성
리액트(React) 새로운 앱 생성하는 방법입니다. 리액트 앱 생성 npx create-react-app [앱_이름] 터미널을 열어 생성하고자 하는 폴더의 상위 폴더에 이동한 후 위의 명령어를 터미널에 입력하면 생성이 됩니다. (Node 8.10 혹은 상위 버전 및 npm 5.6 더보기…
WEB: Backend
PHP: JSON 스트링을 객체 또는 배열로 변환, explode, str_replace, 대소문자 변경방법
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) 문자를 기준으로 더보기…
etc.
프로그래머스 2020 웹 프론트엔드 데브매칭(Dev-matching) 후기
프로그래머스 2020 웹 프론트엔드 데브매칭(Dev-matching) 후기입니다. 후기라기보다는 약간의 변명에 더 가까운 글입니다. 먼저 테스트는 2020년 8월 22일 오후에 3시간(!!)동안 진행되었습니다. 3시간이 말이 안되는게 문제의 첫 부분이 다음과 같았습니다. 참고로 문제의 베이스 코드는 index.html과 index.js 정도의 더보기…