프론트엔드 첫걸음

깃은 누가 어떤 작업을 했고, 체크포인트와 변화를 만든 사람이 누구인지 아ㅏㄴ다. 그래서 깃에 올리고 싶은 이름은 중요하다. 사용하고 있던 이름이 마음에 안들면 바꿀 수 있다. 기존 사용자명 확인 git config user.name 이름 최초 설정 또는 수정 git config --global user.name "바꾸고 싶은 이름" 기존 사용자 이메일 확인 git config user.email 이메일 최초 설정 또는 수정 git config --global user.email "바꾸고 싶은 이메일"

https://ko.reactjs.org/docs/react-api.html React.PureComponent React.PureComponent는 React.Component와 비슷합니다. React.Component는 shouldComponentUpdate()를 구현하지 않지만, React.PureComponent는 props와 state를 이용한 얕은 비교를 구현한다는 차이점만이 존재합니다. React 컴포넌트의 render() 함수가 동일한 props와 state에 대하여 동일한 결과를 렌더링한다면, React.PureComponent를 사용하여 경우에 따라 성능 향상을 누릴 수 있습니다. shouldComponentUpdate - props와 state 얕은 비교하여 업데이트 할지 말지 결정하..

막상 열어보면 기능은 쉬워보일 수 있다. 그런데 내가 생각한 코드랑 너무 다르게 (깔끔하게!!!) 짠다는 점이 특징이다. 화면상에서 이미지의 padding과 background-Color와 blur값을 변동시키는 자바스크립트 함수를 만들 때 나같으면 함수 3개 나왔다.. 그리고 그 함수마다 dom 객체 불러오는 코드 다 한번씩 써줬다.. 우리 웨스 코드 깔끔한거 보세요.. Update CSS Variables with JS Spacing: Blur: Base Color 1. 첫번째로 input을 다 한번에 querySelectorAll로 가져와서 nodeList를 만들었다. 2. 'px' 등의 suffix가 필요한 input은 HTML에 data-sizing이라는 dataset을 넣었다. 3. nodeL..

NodeList와 Array 차이점 1. NodeLists는 DOM 요소에 접근하는 언어에 구애받지 않는 객체(브라우저 API)이며, Arrays는 항목 모음을 포함하는 데 사용할 수 있는 JavaScript 객체다. 2. NodeList는 정적 콜렉션, Node.childeNodes는 동적인 콜렉션이다. 경우에 따라, NodeList는 라이브 콜렉션으로, DOM의 변경 사항을 실시간으로 콜렉션에 반영합니다. 예를 들어, Node.childNodes 는 실시간입니다: var parent = document.getElementById('parent'); var child_nodes = parent.childNodes; console.log(child_nodes.length); // let's assume ..

input 박스에서 색을 변경할 때마다 화면 색이 바뀌게 하려고 한다. 바꾸려는 화면은 상위컴포넌트(App)에, 바뀌게 하는 input 태그는 하위 컴포넌트(Navbar)에 있는 상황이다. 하위컴포넌트에 prop으로 콜백함수(bgColorHandler)를 넘기려고 한다. 이 때 콜백함수는 style.setProperty를 사용해야 할까 , 아니면 useState로 상위컴포넌트에서 화면색에 대한 변수를 관리한 다음 inline으로 style을 넣는게 나을까? 아무튼 둘 다 되긴 한다. - 코드를 단순화해서 올리지 않고 그대로 복붙하는 이유는.. 개린이에게는 nodeList를 forEach돌리는 것도 새삼스러운 코드이기 때문에... (님들 nodeList와 array의 차이점 알아? 난 몰랐어..) setP..

연산자 ?? 는 검색이 잘 되지 않는다. "자바스크립트 ?? " "자바스크립트 연산자 ??" 어떻게 검색해도 삼항연산자 할때 '?' 만 나오고 .. function head(arr) { return arr[0] ?? '' } 이런 코드에서 ??는 바로 null 병합 연산자이다. 이제 키워드를 알았으니 검색할 수 있다. https://ko.javascript.info/nullish-coalescing-operator nullish 병합 연산자 '??' ko.javascript.info [모던자바스크립트 딥다이브 9.4.3 p.123] ES11에서 도입된 null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined 인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한..

자바스크립트를 제대로 , 잘 하기위해 필요한 강의이다. 가성비 , 가심비 오지고 지리는 udemy의 킹갓제네럴..어쩌고..하는 강의... 나도 드립 잘치고 블로그 글 재밌게 쓰고 싶다. 솔직히 당첨되어서 채택된 공짜강의라 기대치도 낮았고, 온라인 강의는 수강률이 20퍼센트에 수렴하는(...)지라 '이번 강의도 다 못볼거같은데 뭐하러 후기를 작성해~' 했었다. 하지만 그런거 있잖아..동네 맛집 망할까봐 구글에 상호명 검색해서 후기 좋게 다는 기분..너무 맛있어서 뭐 어디 당근마켓 동네생활에라도 좋게 입소문 내줘야할거같은 기분 ...rgrg?? 퇴근 후에 짬짬이 보느라 앞부분 초반만 조금 봤지만 이건 돈내고 들었어도 돈 안아까웠겠다는 생각이 들어서 수강후기를 남긴다. 리액트를 공부하자면 ES6문법에 익숙해야..