12.24 the moment 12.24 the moment

UI 디자인 패턴 (== 자주 사용되는 UI 컴포넌트) 프로그래밍 시 자주 반복되어 나타나는 문제점을 해결하고자 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴 익혀두면 UI를 디자인하기 쉬워지고 협업 효율도 높아짐 ex) 재귀로 구현해보았던 Tree UI 1. 모달 (Modal) 기존에 이용하던 화면 위에 오버레이 되는 창 닫기 버튼, 혹은 모달 범위 밖을 클릭하면 모달이 닫히는 것이 일반적이며, 모달을 닫기 전에는 기존 화면과 상호작용 못함. 또 다른 브라우저 페이지를 여는 팝업창과는 구분되는 개념. 팝업은 브라우저에 의해 강제로 막힐 수 있지만, 모달은 브라우저 설정에 영향을 받지 않아, 꼭 보여주고 싶은 내용이 있다면 모달을 사용하는 것이 좋습니다. 2. 토글 (Toggle)..

UI(User Interface, 사용자 인터페이스) 사람들이 컴퓨터와 상호 작용하는 시스템 화면상의 그래픽 요소 컴퓨터와 상호 작용하기 위한 시스템 = 우리는 모두 UI 👻 물리적 요소 (키보드, 마우스 등) 모바일 디바이스에서는 물리적 UI는 볼륨, 전원, 홈 버튼 정도만 남고, 그래픽 UI가 매우 중요해짐. 컴퓨터는 꾸준히 그래픽 UI가 중요했음. 터미널과 같은 CLI(Command Line Interface, 명령 줄 인터페이스)와 키보드를 이용해서 텍스트만으로도 컴퓨터와 상호 작용할 수는 있지만, 그래픽 UI가 직관적이고 간편하기 때문. 현대 사회에서는 그래픽 UI = GUI(Graphical User Interface)가 매우 중요. 스마트워치, 키오스크 등 워낙에 많이 쓰임 GUI (Grap..

https://www.w3schools.com/cssref/sel_marker.asp https://developer.mozilla.org/en-US/docs/Web/CSS/::marker https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_marker W3Schools online HTML editor The W3Schools online code editor allows you to edit code and view the result in your browser www.w3schools.com 위에 가서 눈으로 확인해보는게 더 빠름 :: marker li 스타일을 바꿔주는 선택자 ::marker { color: red; font-size:..

14 실패코드 function unpackGiftbox(giftBox, wish) { // TODO: 여기에 코드를 작성합니다. for (let i = 0; i < giftBox.length; i++) { if (giftBox[i] === wish) { return true; } else if (Array.isArray(giftBox[i])) { return unpackGiftbox(giftBox[i], wish) } } return false; } 왜 틀렸을까? else if (Array.isArray(giftBox[i])) { return unpackGiftbox(giftBox[i], wish) } 이렇게 하면 문자열인 엘리먼트 순회도 문제없고, 배열인 giftBox[i]가 처음 등장했는데 내부에 문..

for in 객체에 주로 사용 let object = { a: 1, b: 2, c: 3 }; for (const property in object) { console.log(`${property}: ${object[property]}`); } // expected output: // "a: 1" // "b: 2" // "c: 3" // 여기서 property라는 변수명은 임의로 변경 가능 for of 배열에 주로 사용 문자, arguments, NodeList(getElementByClassName,querySelectorAll),Map, Set과 같은 자료형에도 사용 const array1 = ['a', 'b', 'c']; for (const element of array1) { console.log(..

Goal section 1에서 장기 목표 & 구체적이지 않은 목표를 설정해서 약간 무의미했던 것 같다. 1) 프로젝트 구간 전까지 / 리액트 인강 안에 있는 미니 프로젝트 다 해보기 2) 그날 이해 못한 개념 -> 이해 못해도 되니까 1번 이상은 이해 재시도하기 (외면 금지) Keep 1) 수업에 집중 (최대한 하나라도 더 알아야 한다는 간절함?) 2) 인강 활용 (사람 1의 강의를 못 알아먹으면 사람2,3,4 ... 의 강의도 들어보면 어느 순간 아 하는 것 같다.) 3) 스터디 (스터디 안했다면..? 좀 어렵다 싶으면 레퍼런스 보고 대강 이해한 기분만 내고 외면했을 듯) Problem & Try 무엇보다 공부 자체에 대한 문제가 큰 것 같다. 공부를 안해봐서! 공부를 할줄 모르는거다 ; 1) 못하면 ..

SOP (Same-Origin Policy) : 동일 출처 정책 = 같은 출처의 리소스만 공유가 가능 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여주기 위해 사용 반드시 프로토콜, 호스트, 포트 모두 같아야 동일한 출처(Origin) Failure 1. 프로토콜이 다른 경우 https://www.minions.com vs http://www.minions.com ( https / http ) 2. 호스트가 다른 경우 https://urclass.codestates.com vs https://codestates.com ⇒ 두 URI는 호스트가 다르기 때문에 동일 출처가 아닙니다. ( urclass.codestates.com / codestates.com ) 3. 포트가 다른 ..

Side Effect : 부수 효과 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다. React에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 Side Effect가 발생했다고 말한다. let foo = 'hello'; //전역 변수 foo function bar() { foo = 'world'; } // 수정하는 함수 bar(); // 함수 호출. // bar라는 함수는 foo를 'hello'에서 'world'로 수정했음 => Side Effect를 발생시켰다. Pure Function : 순수 함수 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수. 예측 가능. 1. 네트워크 요청과 같은 ..