Languages/JavaScript
postmessage the target origin provided does not match the recipient window's origin
postmessage the target origin provided does not match the recipient window's origin 개발자도구에서 이런 에러메시지가 나온다면 두 url을 잘 들여다보자. 한 쪽에는 www.가 붙어 있고 한 쪽에는 없는 경우라면 그게 문제다. 사용자가 www.address.com 으로 들어온 경우와 address.com 으로 들어온 경우. 나는 nice module을 붙인 부분에서 이런 문제가 발생했다. 갔다 오면서 뭐가 안 맞은 모양. 변수 설정을 케이스를 나눠 해줘도 먹히지 않아, 리다이렉션 처리를 해줘야 했다. apache 서버 설정을 바꿔주는 방법 링크를 첨부해 둔다. 나중에 같은 일이 생기면 직접 해야 할수도 있으니까.. 카테고리 없음으로 하려다가..
[React] onClick props에 함수형 변수의 () 유무 차이
function ExpenseItem(props) { const clickHandler = () => { console.log('click!'); }; return ( Change Title ); } export default ExpenseItem; button의 onClick에 들어간 clickHandler에 괄호를 함께 입력하여 clickHandler()로 들어가면 JSX를 최초에 읽어올 때 실행하게 된다. 하지만 ()를 삽입하지 않고 const명만 clickHandler로 입력해두면 JSX를 읽어온 뒤 클릭하면 clickHandler 함수를 실행하게 된다.
[Vanilla Javascript Study] # 3. fetch API로 움짤 검색기 만들기
3주차에는 TodoList로 공부한 내용을 바탕으로, fetch API를 ajax 요청하여 움짤 검색기를 만들어보는 미션을 받았다. [필수 구현사항] SearchInput 컴포넌트: input의 내용이 변경되면 fetch API를 호출하여 데이터를 가져오는 컴포넌트 SearchResult 컴포넌트: 생성 시 파라메터로 data, target 두 개의 파라메터를 받습니다. data: 렌더링에 사용할 데이터 target : html string을 렌더링 할 element의 표현식 (ex: #search-result) function SearchResult (data, target) { .... } 이번에 진행했던 것처럼 해당 컴포넌트는 setState, render 함수를 갖고 있습니다. [추가 구현사항] ..
[Vanilla Javascript Study] # 2. TodoList 업그레이드
2주차에는 TodoList를 업그레이드하는 작업을 거쳤다. [필수 구현사항] 미션1 html에 있던 스크립트를 TodoList.js로 분리합니다 new TodoList()를 실행했던 구문은 index.js로 분리합니다 index.html에서 해당 스크립트를 로드합니다 [추가 구현사항] ✎ 데이터 모델, LocalStorage 활용 데이터 모델에 isCompleted 추가 [{ text: 'todo text', // 할 일 이름 isCompleted: false, // 완료 여부 }] todo data가 변경될 때 마다 localStorage에 저장 웹페이지에 처음 들어올 때 localStorage에 저장된 data가 있으면 불러오고, 없으면 빈 data로 시작 새로고침 시에도 작성해 둔 todo 유지 ✎..
[Vanilla Javascript Study] # 1. TodoList Component 작성
첫주차에는 간단하게 TodoList를 구현하는 미션이 주어졌다. [필수 구현사항] TodoList Component 작성 function, class 아무거나 사용해도 좋습니다. new 키워드를 통해 생성해서 사용합니다. 파라미터로 아래와 같은 형태의 data를 넘겨받습니다. const data = [{ text: 'JS 공부하기' }, { text: 'JS 복습하기' }] const todoList = new TodoList(data); 와 같은 형태로 파라미터를 넘기고, 생성해서 사용합니다. TodoList 컴포넌트에 render함수를 작성합니다. 이 함수는 파라미터로 넘겨받은 data를 순회하며 각 배열첨자의 text를 html string으로 만든 뒤, todo-list라는 id를 가진 div에 ..
[Vanilla Javascript Study] # 0. 프롤로그
[개요] 사내 프론트엔드 시니어 분(이하 데이빗, 사내 닉네임)이 바닐라 자바스크립트 스터디원을 모집하셔서 냉큼 신청했다. 자바스크립트를 다루고 싶었던 마음을 좀 해소하고자, 그리고 입사하고 나니까 생각보다 프론트를 다뤄야 할 일이 많아서 도움도 받고자. 데이빗이 유료 스터디를 참고하여 전체적인 틀을 짜셨다고 했고, 서치하다보니 해당 스터디를 발견했는데 유료 스터디보다 약간 간소화된 정도로 정리하신 것 같았다. 깃허브 레포지토리를 파서 소스코드를 공유했고 총 3차 미션으로 진행되었다. [주차별 미션] 기본적인 TodoList 작성 TodoList를 모듈시스템화 하기 Fetch API로 짤방 검색 모듈시스템 만들기 [진행방식] 필수 구현사항과 추가 구현사항을 읽고 참여인원들이 코딩한다. 각자 닉네임을 따서..
[TypeScript] Non-null assertion operator, rxjs 설치 명령어
angular 강의를 듣던 중 그대로 따라쳤는데 오류가 났다. import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Observable, ObservedValueOf } from 'rxjs'; import 'rxjs/add/operator/map'; @Component({ selector: 'app-developer', templateUrl: './developer.component.html', styleUrls: ['./developer.component.scss'] }) export class DeveloperComponent implements OnInit ..
[Apache Echarts] Bar race 작동 오류
과제를 진행하면서 Echarts를 사용해보게 되었다. 가로형 바 차트 중 Bar race라는 차트가 멋져보여서 사용해보고 싶었는데 몇가지 오류가 발생했고, 고쳐지지가 않았다. 내가 소스코드를 잘못 사용하는건가 싶어서 Echarts Example 사이트에서도 수정해가며 지켜봤는데.. 음... option = { xAxis: { max: '100', }, yAxis: { type: 'category', data: medDeptNmList, inverse: true, animationDuration: 300, animationDurationUpdate: 300, max: 6 // only the largest max+1 bars will be displayed }, series: [{ realtimeSort:..
[JavaScript] 자식 요소 개수 카운트
동적으로 생성한 Div에서 카운트 체크해주기 위해.. 자식 요소 개수 세기. 가끔 쓸 데가 있을 거 같아서 남겨둔다. var jikmuDivs=document.getElementById('positionAdd-selectedJikMuBoundDivs'); console.log(jikmuDivs.childElementCount); if( jikmuDivs.childElementCount < 1 ){ alert('직무를 한 개 이상 선택하세요.'); $('#positionAdd-jikgun').focus(); return false; }