또라에몽의 개발 주머니

나중에 까먹지 안기 위해 기록용으로.. 인터넷에 태블릿에 vscode 검색하고 나오는것들이 있는데 그대로 따라하면 안된다 ㅎㅎ 1. 구글 스토어에 가서 Termux 설치하기 Android 터미널 에뮬레이터라고 한다.. 나는 설치 후 패키지 설치가 계속안되서 여기서 고생함ㅠㅠ 그럴땐 termux-change-repo 이렇게 뜨는데 3개 다 클릭하고 ok 누르기 그리고 또 여기서 고민했다.. 뭘 누르라는건지 근데 정말 아무거나 눌러도 된다 아무거나 누르면 패키지 설치 안되던게 갑자기 된다 2. 명령어대로 치기 pkg remove game-repo pkg remove science-repo 이렇게 두개를 치면 위에서 3가지 클릭하라고 했던것중 game-repo랑 science-repo가 사라진다 pkg upd..

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..

https://www.quicksprout.com/creating-website-sitemap/ 5 Easy Steps to Creating a Sitemap For a Website Our content is reader-supported, which means that if you click on some of our links that we may earn a commission. www.quicksprout.com 웹 사이트 순위를 매길때 여러 seo 해킹을 이용한다. sitemap 만드는 방법은 seo를 향상하는데 도움이 되는 기술이다 sitemap이란 뭘까? 몇몇은 다른것보다 sitemap이 더 익술할수도 있다. web sitemap 만드는 걸 알려주기전에 sitemap의 기초를 먼저 알려주겠..

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은 가능하다!..

출처 : https://www.freecodecamp.org/news/html-page-width-height/#:~:text=With%20no%20height%20value%20provided,results%20in%20full%20page%20width HTML vs Body: How to Set Width and Height for Full Page Size CSS is difficult but also forgiving. And this forgiveness allows us to haphazardly throw styles into our CSS. Our page still loads. There is no "crash". When it comes to page width and height, ..

안녕하세요. 오랜만에 글을 쓰네요 일주일에 한번씩 꼭 그 주에 업무 했던 내용을 복습차원에서 쓰려고 했지만 응~ 실패 ~ 하반기 새로운 목표로 설정했습니다!! 이번엔 업무 중 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 지식의..