또라에몽의 개발 주머니

DOM에 ref 걸어놓고 감지되는 것을 감지해서 css를 activate 시키는 기능을 추가 시켜야했다 브라우저 감지 인터페이스는 JS에 여러가지가 있는데 IntersectionObserver : 루트 영역(뷰포트) 와 대상 객체의 겹침을 인지 MutationObserver : 객체 속성 변경을 감지 PerformanceObserver : 프로세스 성능 모니터링 ReportingObserver : 웹 사이트 표준, 정책 준수 현황 감시 ResizeObserver : 객체의 너비, 높이의 변화 감지 오늘은 MutationObserver를 정리해보려고 한다. https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver MutationObserver -..

회사 업무로 ref를 쓰다가 다른 컴포넌트(자식)내에서 ref를 써야하는 상황이 생겼다 하지만 되지 않았다! 그래서 다시 처음부터 Ref를 공부하게 되었다. https://www.daleseo.com/react-forward-ref/ https://www.daleseo.com/react-forward-ref 이 분들의 블로그를 차근차근 따라서 해봤다 이렇게 같은 컴포넌트 내에서 ref를 props로 넘겼을 경우에는 focus가 잘 작동하였다! 하지만 이렇게 자식 컴포넌트로 따로 만들어서 ref를 props로 내리니까 foucus가 되지 않았다 친절하게 이렇게 warning도 내준다 왜 안될까? 정답은 document에 있었다 함수 컴포넌트는 인스턴스가 없기 떄문에 함수 컴포넌트에는 ref attribut..

display 속성이 변하는 경우 1) float 속성 : inline-block으로 변경됨 2) position : inline-block 으로 변경됨 3) 가상 클래스 ::before :: after : inline 으로 변경됨 인라인 요소를 block으로 변경하면 너비는 자동으로 100%로 변경됨 인라인 블락 요소를 block으로 변경해도 너비가 자동으로 바뀌지 않기 때문에 width : 100%를 줘야한다. 여기서 width: 100% 와 width : auto의 차이는 뭘까? 기본 코드가 이렇게 있다고 가정하고 양 옆에 padding-left:40px 씩 주면 width : 100% 를 하면 밖으로 빠져 나온다 display를 inline-block으로 바꾸면 width: auto는 컨텐츠의 크..

https://velog.io/@cookie004/%EB%B2%88%EC%97%AD-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%90%EB%9F%AC-%ED%95%B8%EB%93%A4%EB%A7%81-%EB%B0%A9%EB%B2%95-%EC%86%8C%EA%B0%9C [번역] 자바스크립트 에러 핸들링 방법 자바스크립트에서 에러 핸들링은 간단하지만 종종 미스테리하고 복잡하게 느껴집니다. 피할 수 없으면 즐기지(?) 말고 핸들링하자! 자바스크립트의 Error 객체, 예외를 발생시키고 핸들링 할 수 velog.io export default function App () { function sum(a, b) { if (isNaN(a) || isN..

IE, Chrome, Firefox, Safari .. 각 브라우저마다 html, body에 기본적으로 들어가있는 margin, padding이 다르다 그래서 초기화를 시켜주고 작업을 시작하는 것이 좋다 크롬의 경우 이런식으로 margin: 8px이 처음부터 잡혀있다 react를 사용하고 있다면 간단히 reset을 할 수 있다! yarn add styled-reset npm i styled-reset import * as React from 'react' import { createGlobalStyle } from 'styled-components' import reset from 'styled-reset' const GlobalStyle = createGlobalStyle` ${reset} /* oth..

block ex) div, p , table h1~h6 등등... 기본 너비 값 : 100% 한줄에 하나씩만 배치됨 너비 값, 높이 가질 수 있음 상하좌우 margin 가능 inline ex) span, a,em, string ... 글자 개별적으로 꾸미는 서식 관련 태그 기본 너비 값 : 컨텐츠 너비 값(text의 글자 넓이 만큼) 한줄에 여러 개 배치 가능 크기 값 가질 수 없음 상하 margin 안되고 좌우만 가능 inline-block ex) img, input, button, textarea , iframe ... 이미지, 대부분 폼 요소 기본 너비 값 : 컨텐츠 너비 값 한줄에 여러개 배치 가능 크기값 가질 수 있음 상하좌우 margin 가질 수 있음 셋다 기본적으로 padding은 가능하다!..

안녕하세요. 오랜만에 글을 쓰네요 일주일에 한번씩 꼭 그 주에 업무 했던 내용을 복습차원에서 쓰려고 했지만 응~ 실패 ~ 하반기 새로운 목표로 설정했습니다!! 이번엔 업무 중 js로 계산을 해서 round up 해야하는 일이 있었는데요 아시는 분은 아시겠지만 연산을 했을 때 소수점을 연산을 하면 제대로 값이 안나오는 경우가 있습니다. js에서 숫자를 64비트 IEEE 754 형식으로 다루는데 0.1이라고 하면 0.1에 가장 가까운 2진법으로 표현 하는 방식이라고 합니다 0.1 -> 64비트 IEEE 754 형식에 의한 2진법 -> 10진법 1/3 = 0.333333333.... 이렇게 무한소수가 나와서... js는 이런 무한소수가 나오면 한번 반올림을 해서 값이 다르게 나온다고 합니다 굉장히 cs 지식의..

css rem 을 쓰면 언젠간 한번쯤은 만나는 62.5%에 대해 써보려고 한다. 무지성으로 쓰고 있다가 드디어 정리를 하게 되었다. 보통 globalStyles를 보면 font-size : 62.5% 라고 되어있다. 도대체 저게 멀까 보통 css에서 크기를 주기 위해서 주로 쓰는 것들이 px, rem, em, vw, vh 이 친구들이 있다 초기에 잘 모를때는 px로 도배를 하는데 px은 쓰면 안된다고 한다 왜냐하면 웹 접근성을 저해하기 때문이다. 기본 브라우저 글꼴은 16px인데 사용자가 20px 로 설정을 하면 그에 따라 글꼴 크기가 커져야 한다 근데 픽셀로 단위를 설정하면 브라우저를 통한 사용자의 설정값이 적용이 되지 않는다. 한마디로 px는 절대적인 단위 라는 얘기이다 우리는 모니터 크기나, 모바일..

회사에서 회사 홈페이지와 인스타그램 연동 업무를 주셔서 처음으로 도전하게 되었다! 기존 포스팅을 열심히 봤는데 서버를 구동해야한다는 말도 있고 라이브러리를 써도 된다고 하고,, 아주 복잡해~~~ 2시간 삽질 끝에 드디어 해냈다!!! 내가 해냄!!!!! 일단 인스타그램 api 를 사용하기 위해서는 1. 인스타그램이 프로페셔널 계정으로 전환되어야한다. 2. 적용할 사이트가 HTTPS 사이트여야한다 1. 페이스북(META) 개발자 페이지에 접속 후 로그인 > 내 앱 > 앱만들기 https://developers.facebook.com/?locale=ko_KR Facebook for Developers Messenger를 사용한 로그인 연결 정식 출시 이제 타겟 고객을 위해 더욱 심층적인 고객 관리를 지원하고 ..