twingkle

💡문제 input 입력은 되지만 콘솔에서 계속 뜨는 에러메세지 Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components. react_devtools_backend.js:4026 Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide betw..

❓쓰게된 이유 처음 프로젝트를 시작할땐 탭의 수가 별로 많지 않았기에 그냥 하드코딩하는 방식으로 useRef()를 썼는데, 진행을 하다보니 브랜드의 수만큼 탭수가 늘어나고, 브랜드가 추가되면 또 일일이 추가해줘야하는 번거로움이 생겼다. 💡목적 그래서 map으로 돌려주어 한번만 쓰려고하는데 찾아보니 click했을때 이동되는 탭으로 만들어두신 글은 잘 없었다. 여러개의 글들을 참고하여 구현해봤다. 우선 내가 구현해야할 기능은 탭을 눌렀을 때, Ref가 되어있는 곳으로 내려가야 하는 기능이다. 위의 화면에서 아래의 화면같이 저 위의 탭들을 누르면 탭안에 있는 곳으로 스크롤이 이동되는 기능이었다. 아직 헤더높이를 계산하지않아서 제목이 보이지않지만 헤더가 없으면 브랜드이름있는 부분이 헤더의 밑으로 오게되는 것이다..

toast-ui를 쓰면서 생긴 이슈 npm i -S @toast-ui/editor 했을때 오류파티🤗 구글링결과 리액트 18은 안되고 17로 다운그레이드를 시켜야 한다고했다. 우선은 --legacy-peer-deps를 붙여서 해결했지만, 추후 문제가 생긴다면 다운그레이드를 진행해야할 듯 싶다. 다운그레이드 하는 방법은 아래 코드를 쳐서 진행한다. npm install --save react@^17.0.1 react-dom@17.0.1 이후 Edit.js 에서 임포트 진행시켜주고 진행했다. import { Editor } from '@toast-ui/react-editor'; import '@toast-ui/editor/dist/toastui-editor.css'; // Editor 스타일 function ..

POWER 솔루션 function power(base, exponent){ if(exponent === 0) return 1; return base * power(base,exponent-1); } FACTORIAL 솔루션 function factorial(x){ if (x < 0 ) return 0; if (x

Lighthouse 란? Lighthouse는 웹 앱의 성능, 품질 및 정확성을 개선하기 위한 자동화된 오픈 소스 도구입니다. 페이지를 감사할 때 Lighthouse는 페이지에 대해 대규모 테스트를 실행한 다음 페이지가 얼마나 잘 수행되었는지에 대한 보고서를 생성합니다. 여기에서 실패한 테스트를 앱을 개선하기 위해 무엇을 할 수 있는지에 대한 지표로 사용할 수 있습니다. * Lighthouse 사용에 대한 빠른 시작 가이드: https://developers.google.com/web/tools/lighthouse/ Chrome에서 실행하기 크롬에서 검사하고 싶은 페이지의 url을 입력합니다. 개발자 도구를 엽니다. lighthouse 탭을 클릭합니다. ※ Node CLI에서 실행하기 1. Lightho..

너무 늦게 시작한 포스팅이지만......지금이라도 블로깅을 시작해본다..! 숫자로 변환시켜줌! (e => +e) 비트연산자 http://www.tcpschool.com/c/c_operator_bitwise 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com getDay() const birthday = new Date('August 19, 1975 23:15:30'); const day1 = birthday.getDay(); // Sunday - Saturday : 0 - 6 console.log(day1); // expected output: 2 https://developer.mozilla.org/ko/docs/Web..

Webpack에서의 모듈 Webpack?? 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러. ※모듈 번들러: HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 저합해 하나의 묶음으로 번들링하는 도구 **번들링: 여러제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위 Webpack은 왜 필요할까? 웹페이지를 구성하는 코드의 양이 많아지면 우리는 흔히 무겁다고 표현한다. 이렇게 웹페이지가 무거워질수록 로딩속도와 성능은 저하가 되므로 유저들은 기다리지않고 이탈해버린다. 웹팩이 없다면 각 자원들을 일일히 서버에 요청해 얻어와야 하지만, 웹팩이 있다면, 같은 타입의 파일들은 묶어서 요청 및 응답을 받을 수 있기 때문에 네트워크 코스트가 획기적으로 줄어든다. 그래서 웹팩..

개념정리 리플로우 어떤 웹 인터렉션으로 인해 앞서 보았던 렌더링 과정의 레이아웃을 반복해 수행하는 것. 즉, 렌더링을 다시 하는 것. 배치를 위한 연산을 해야해서 실제로 cpu를 많이 차지. 리페인트 페인트 과정을 반복해 수행하는 것. 즉, 페인트를 다시 하는 것. 픽셀을 다시 화면에 찍어 그려야 하기 때문에 GPU를 많이 차지. =>프레임 드랍현상과 연관 예) DOM 조작 최적화 불필요한 레이아웃은 줄이기 레이아웃 과정에서 불필요하게 계산해야 할 것이 많아지면 엔진도 결국 컴퓨팅 파워에 기대기 때문에 과부하가 불가피하게 생기게 때문에 이런 레이아웃을 발생시키는 속성을 피하면 해당 과정이 발생하는 횟수를 줄일 수 있다. CSS에서 레이아웃, 페인트를 발생시키는 속성들 리플로우시 리페인트는 필연적으로 일어..

여러개의 점들이 서로 복잡하게 연결되어 있는 관계 구조 - 직접적인 관계가 있는 경우 두 점 사이를 이어주는 선이 있다. -간접적인 관계라면 몇 개의 점과 선에 걸쳐 이어진다. -하나의 점을 그래프에서는 정점이라고 표현하고, 하나의 선은 간선이라고 한다. Graph의 표현 방식 인접행렬 서로 다른 정점들이 인접한 상태인지를 표시한 행렬로 2차원 배열의 형태로 나타낸다. ex) A와 B가 이어져 있다면 1(true), 이어져 있지않다면 0(false) if) 가중치 그래프라면 1대신 관계에 서 의미 있는 값을 저장한다. 가장 빠른 경로를 찾고자 할 때 주로 사용된다. 인접리스트 각 정점마다 하나의 리스트를 가지고 있으며, 이 리스트는 자신과 인접한 다른 정점을 담고 있다. 메모리를 효율적으로 사용하고 싶을..

단방향 그래프의 한구조로, 하나의 뿌리로부터 가지가 사방으로 뻗은 형태가 나무와 닮아 있다고 해서 트리구조 라고 부른다. 사이클이 없는 하나의 연결 그래프 부모노드 : A는 B와 C의 부모노드 자식노드 : B와 C는 A의 자식노드 리프노트 : 자식이 없는 노드 깊이(depth) 루트로부터 하위 계층의 특정 노드까지의 깊이. 예) A의 depth: 0 / B,C의 depth: 1 / D,E,F,G의 depth : 2 레벨(level) 같은 깊이를 가지고 있는 노드를 묶어서 레벨로 표현한다. 높이(Height) 리프 노드를 기준으로 루트까지의 높이 부모노드 : 자식 노드의 가장 높은 height값에 +1 한 값 위 그림에서 H, I, E, F, J의 높이 : 0 D, G 의 높이 : 1 B, C 의 높이 :..