be special ✨

고차 컴포넌트 Higher Order Component https://ko.reactjs.org/docs/higher-order-components.html https://jeonghwan-kim.github.io/2022/05/28/react-high-order-component 컴포넌트를 가져와서 새로운 컴포넌트를 반환하는 함수 함수형 컴포넌트에서도 사용할 수 있다. export default function Button() { const [loading, setLoading] = useState(true); useEffect(()=> { const timer = setTimeout(()=> setLoading(false), 1000)); return ()=> clearTimeout(timer); }..

React Element에 style 적용하기 css로 적용하기 (className) className을 사용하는 것을 추천(HTML에서 이미 사용하는 이름은 React에서 지양) 문자열 inline style 로 적용 props로 전달되어 사용된다. style은 객체로 적용, 카멜케이스로 작성할 것(예 : backgroundColor) const element = ( 버튼 ) ref로 DOM다루기 useRef를 사용 스스로 최적화하는 React DOM조작을 하게 되면, 이를 벗어나게 된다. const inputRef = React.useRef(); const Input = () => { return () } inputRef.current.focus();로 해당 input 요소에 focus DOM? El..

Object 정적메소드(static method) Object.assign()과 같이 prototype이 없는 경우(Object.prototype.assign이 아님) {}.assign()과 같이 사용할 수 없음. Object.assign() mdn: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); source에서 속성이 target으로 복사되어 들어간다. target또한 변경되고 re..

npm 프로젝트 버전 일치시키기 package.json : 수동 모듈 관리 package-lock.json : 수동 모듈과 연결된 다른 외부 모듈 두 파일이 필요하다. 두 파일을 프로젝트 디렉토리의 루트경로에 이동시키고 npm i 명령어를 통해 설치한다. node.js https://nodejs.org/ko/ chrome V8 자바스크립트 엔진으로 만들어진 JavaScript런타임 기존 main.js에 연결한 js(import)한 것들을 한 파일로 만듦 parcel bundler는 웹브라우저에서 동작하는 것x 개발용으로만 사용하므로 "devdependency"로 설치 유의적 버전 Semantic Versioning, SemVer node --version 으로 node 버전을 확인할 수 있다. npm -..

순차적 애니메이션 동작하도록 만들기(GSAP) elments.forEach((element, idx) => { gsap.to(element, 1, { delay: (idx + 1) * 0.7, opacity: 1, }); }); idx는 0부터 시작하므로 +1 해주어 0.7, 1.4, 2.1, 2.7 .... 과 같은 delay(지연시간)을 두고 동작하게 된다. 요소가 최대한 줄어들어있을때 최대 크기를 가지도록 설정 부모요소가 flex이고, 대상요소가 width 값이 따로 없을 때에는 최대한 줄어들어 화면에 표시되지 않게 되는데, 이 경우 flex-grow 속성으로 최대한의 width를 차지하도록 설정할 수 있다. (flex-grow:1;) flex내 높이는 최대한 늘어나려고 한다(align-items ..

파비콘(favicon, favorite icon) 티스토리에서도 확인할 수 있는 파비콘은 따로 설정없이도 화면에 표시된다. 프로젝트의 루트(/)경로에 favicon.ico 라는 이름으로 파비콘으로 설정되길 원하는 아이콘을 저장해 두면 해당 아이콘이 위 티스토리 파비콘처럼 실제로 표시되게 된다. 파비콘을 고해상도(PNG)로 제공하기 위해서는 link 태그로 제공가능하다. (내부에 삽입) 브라우저 스타일 초기화 jsdeliver, cdnjs등에서 link태그로 reset.css를 연결해서 사용할 수 있다. (Eric Meyer's CSS reset.) 오픈 그래프 소셜미디어로 웹페이지를 공유할때 보여지는 정보 여기서 og란 open graph를 뜻한다. 트위터 카드 트위터의 개발자 문서(https://dev..

2주차 수업으로 CSS를 더욱 깊이있게 학습해 보는 시간을 가졌다. 여백 (margin, padding) padding : 요소의 내부 공간을 지정 margin : 요소의 외부 공간을 지정 위 이미지의 경우에는 margin-right: 12px; 의 결과라고 할 수 있다. padding, margin 모두 padding: margin: 과 같이 단축하여 작성할 수 있고, margin-top, margin-right, margin-bottom, margin-left(padding-top, padding-right, padding-bottom, padding-left)를 각각 지정할 수 있다. 단축속성으로 작성한 경우 네 영역을 모두 작성한 경우에는 top, right, bottom, left순으로 적용된다..

이번에 K-디지털 기초역량훈련으로 패스트캠퍼스 프론트엔드 8주 완성 with React를 시작했다. 매주마다 학습일지를 작성하여 나만의 개발노트를 완성해보자!✍ HTML, CSS는 기존에 알고있던 내용에 대해서는 작성하지 않고, 다음 내용들 위주로 정리해 보기로 하자. 알고있었지만, 불확실하였던 내용 이번에 처음 알게된 내용 웹앱의 동작원리 위 1~4 순서로 웹앱이 동작하게 된다. 주소창에 원하는 주소를 입력하면 서버로 HTML을 요청하게 되고, 해당 HTML을 파싱하면서 필요로하는 CSS,JS, 이미지... 등을 추가로 요청하게 된다. 서버는 해당 추가 요청에 대한 추가응답을 해 줄 것이다. 이를 브라우저가 해석하여 사용자 화면에 그려주게 되는(rendering) 것이다. 우리는 1. HTML, CSS..

https://www.youtube.com/watch?v=oaebkkOP2Qg (How to Run C in Visual Studio Code on Windows 10 2021 Best Code Editor) https://www.youtube.com/watch?v=3PjvjNmdgNE ([따배씨] 1.13 비주얼 스튜디오 코드와 gcc의 기본적인 사용 방법) 1. mingw 설치 2. path 설정 3. vscode에서 확장프로그램설치(extensions) c/c++ (microsoft) 4. 실행방법 4-1. 확장프로그램 설치 Code Renner (Jun Han) ▶버튼 혹은 ctrl+alt+n 단축키로 실행 4-2. 터미널에서 명령어로 실행 gcc filename.c 로 컴파일 -> a.exe 와..

e.g. const obj = { name: 'obj', prop: 'Hello', } 이라는 object가 있는 경우 const {name} = obj; console.log(name); // 'obj' const {property} 로 obj안의 property를 가져올 수 있다. 해당 property이름과 같은 variable을 {}안에 넣어야 한다.