Languages
문제 있는 조상 엘리먼트 찾기 snippet
// Replace “.the-fixed-child” for a CSS selector // that matches the fixed-position element: const selector = '.the-fixed-child'; function findCulprits(elem) { if (!elem) { throw new Error( 'Could not find element with that selector' ); } let parent = elem.parentElement; while (parent) { const { transform, willChange, filter, } = getComputedStyle(parent); if ( transform !== 'none' || willChange ..
테이블이 꼼짝도 하지 않는다면 table-layout: fixed 를 조심하기
테이블 사이즈를 어떻게 바꿔도 (개발자도구에서 직접 바꿔봐도) 꼼짝도 하지 않는다면 table-layout: fixed; 로 설정한 부모나 조상이 없는지 확인할 것.............
데이터 수집 방법 참고페이지
1. open api 의 데이터를 가져온다. 참고 페이지▼ 공공데이터포털 오픈 API 사용법 : 인증키 생성, XML 파일 접속 데이터를 수집하는 방법에는 여러 가지가 있습니다. 그중 하나는 직접 크롤링하는 것이고 하나는 오픈 API를 사용하여 크롤링하는 것입니다. 직접 크롤링을 하는 경우에는 여러 문제가 발생할 bigdata-doctrine.tistory.com [Python] 공공데이터포털 API 사용하여 데이터 수집하기 이전 시간에 공공데이터포털에서 인증키를 받아 XML파일을 열어보는 것까지 진행하였습니다. 이번 포스팅을 읽기 전에 이전 포스팅을 보고 오시는 것을 추천드립니다. https://bigdata-doctrine.tistory.c bigdata-doctrine.tistory.com
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 유지 ✎..
ModuleNotFoundError
requests 모듈을 import하려고 했으나 아래와 같이 모듈낫파운드에러가 떴다. ModuleNotFoundError: No module named 'requests' 구글링을 조금 해보니 아래와 같은 명령어를 입력하면 된다고 했지만 인스톨 에러 남. python3 -m pip install requests >> 에러 내용 >> ERROR: Could not install packages due to an EnvironmentError: [Errno 13] Permission denied: 'RECORD' Consider using the `--user` option or check the permissions. 더 구글링을 해보니 --user 명령어를 삽입하자 구동이 되었다. 위 에러 문구를 읽어보..
[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로 짤방 검색 모듈시스템 만들기 [진행방식] 필수 구현사항과 추가 구현사항을 읽고 참여인원들이 코딩한다. 각자 닉네임을 따서..