miscellany

Key와 리랜더링 알아보기 Key는 Value를 특정하는 이름. 재사용:키를 제대로 줘야 재사용 가능 제대로 준다는 것은? 중복없고, 바뀌지 않는 상태 끌어올리기 형제 컴포넌트의 상태 궁금: 필요하면 부모로 lifting up props drilling: 과도한 lifting은 drilling을 야기하기 때문에 정말 좋을까? 데이터 fetch 해보기 Fetch API: 네트워크 통신 도구 상황별 핸들링: 로딩/데이터/에러 리액트 맛보기 마무리 Dom 다루기/ element 생성하기 react/react-dom : element생성/ appendChild jsx와 banila / jsx 다루기 jsx: react.createElement 표현식 Babel: JavaScript 컴파일러 Element 찍어내..

React 맛보기 드뎌 리액트 시작이다. 자바스크립트도 현재 따라가기 힘든데,,, 확장프로그램 추천 Wappalyzer: 웹사이트에 어떤 라이브러리를 사용하고 있는지 알 수 있다. React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 - stactoverflow: https://stackoverflow.com/ - framer motion: https://www.framer.com/motion/ - swr: https://swr.vercel.app/ko DOM(Document object Model): 문서를 논리 트리로 표현한다 w3schools:https://www.w3schools.com/ CodeSandBox:https://codesandbox.io/ react CDN:http..

ECMA스크립트 :ECMA스크립트(ECMAScript, 또는 ES[1])란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표준화하기 위해 만들어졌다. 액션스크립트와 J스크립트 등 다른 구현체도 포함하고 있다.[2] ECMA스크립트는 웹의 클라이언트 사이드 스크립트로 많이 사용되며 Node.js를 사용한 서버 응용 프로그램 및 서비스에도 점차 많이 쓰이고 있다. https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8 ECMA스크립트 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. ECMA스크립트(ECMAScript, ..

스타벅스 웹사이트 따라하기 1. 순차적 애니메이션 - 순차적으로 요소 보이기(js) .fade-in 요소가 0.7초에 한 번씩 순차적으로 나타나는 애니메이션 js //나타날 요소(.fade-in)들을 찾기 const fadeEls = document.qureySelectorAll('.visual .fade-in'); fadeEls.forEach(function(fadeEl, index) { // gsap.to(요소, 지속시간, 옵션); gsap.to(fadeEl, 1, { delay: (index+1) *.7, opacity: 1 }); }); 수직 슬라이드(swiper) https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper ..

js 선행- 표기법 - dash-case/ snake_case/ camelCase/ PascalCase 주석: //한 줄 주석, /*한 줄 주석*/, 여러줄 주석이 있다. 변수: 데이터를 저장하고 참조(사용)하는 데이터의 이름(var, let값(데이터)의 재할당, const-값(데이터)의 재할당 불가) //재사용이 가능! 예약어:특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어 함수: 특정 동작(기능)을 수행하는 일부 코드의 집합-function function name() { } 형태로 선언, functionName();형태로 호출하고, 함수는 값을 리턴한다. //함수 선언 function helloFunc() { //실행 코드 console.log(1234); } //함수 호..

1. CSS 속성으로 제어 박스 모델/ 글꼴,문자/ 배경/ 배치/ 플렉스(수평 정렬)/ 전환/ 변환/ 띄움/ 애니메이션/ 그리드/ 다단/ 필터 2. 박스 모델 max-width, max-height(요소가 커질 수 있는 최대 가로/세로 너비) min-width, min-height(요소가 작아질 수 있는 최소 가로/세로 너비) 3. css 단위 px: 픽셀/ %: 상대적 백분율/ em: 요소의 글꼴 크기/ rem: 루트 요소(html)의 글꼴 크기/ vw:뷰포트 가로 너비의 백분율/vh:뷰포트 세로 너비의 백분율 4. margin: 외부 여백(마이너스 값을 가질 수 있다) 5. padding: 내부 여백(여백이 생기는 만큼 요소의 크기가 커질 수 있다) 6. border: 선-두께 선-종류 선-색상; e..

드디어 시작이다. 디자인 뿐만 아니라 코딩 스킬도 업그레이드 시켜서 내가 만들고 싶은 사이트 한번 만들어보자~~~ 1주차 vscode 사용하기 vscode를 잘 사용할 수 있게 만드는 플러그인 vscode 단축키 사용 DTD 이해하기 Codepen.io 활용 css reset 사용 https://www.jsdelivr.com/package/npm/reset-css Emmet 사용 빈 태그 /를 뒤에 붙인다. ex. :html5에서는 /를 붙이지 않아도 정상적으로 동작. 속성과 값을 이용해서 추가적인 기능을 확장해서 작성해야 한다~ 인라인(inline) 요소 / 블록(Block) 요소-글자 / 상자 인라인 요소: 요소가 수평으로 쌓임, span, 가상 클래스 선택자 - :hover, :active, :fo..