프론트엔드 공부한 거 정리하기

.map() 사용시 key값을 요소에 부여해야 함. key: 고유성을 유지해야 하기 때문에 중복된 번호 사용 불가. index의 경우 단순 출력이 필요한 경우에만 사용하며 삭제, 수정, 호출 등에서는 index가 아닌 key 사용. 대부분 안정적인 고유성을 부여하기 위해 배열 내부 프로퍼티로 id값을 작성해서 key로 사용한다.

React 이벤트 on-접두어 + 첫글자 대문자 이벤트명으로 작성 클릭 function Ex3_event(props) { const handleClick1 = () => { console.log("handleClick1"); }; const handleClick2 = () => { console.log("handleClick2") } const num = (param) => { console.log(param + param) } return ( event 'on-접두어 + 첫글자 대문자 이벤트명 {/* js: onclick / react: onClick*/} 클릭 클릭 console.log("직접작성")}>버튼 num(100)}>숫자 출력 ); } export default Ex3_event;

컴포넌트 생성 rsf: 함수선언문 컴포넌트 rsc: 함수표현식 컴포넌트 컴포넌트명의 첫 글자는 반드시 대문자로 작성해야 컴포넌트로 인식한다. // 함수표현식 컴포넌트 const 컴포넌트명 = () => { return ( // fragment /* 여기 작성되는 내용은 JSX로 화면에 보이는 영역 개발을 쉽게 하기 위해 태그 형식으로 사용하나 html과 달리 태그가 아님 */ ) } export default 컴포넌트명; // --------------------------------------------------- //함수선언문 컴포넌트 function 컴포넌트명(props) { return ( ); } export default 컴포넌트명; import 파일 연결 컴포넌트 포함 .js, .jsx, ..

JSX는 리액트 컴포넌트를 작성하면서 return 문에 사용하는 문법 HTML과 비슷하나 자바스크립트 객체. ​ JSX 규칙 1. 태그는 반드시 닫아줘야 한다. 빈요소인 경우 xml 방식으로 처리 ​ 2. 최상단에서는 반드시 div 혹은 Fragment() 로 작성 hello react! ​ 3. JSX 안에서 자바스크립트 값을 사용하고 싶을때는 { }를 사용 hello {name} ​ 4. 조건부 렌더링을 하고싶으면 &&연산자나 삼항 연산자를 사용 권장 { true ? console.log('참') : console.log('거짓') } ​ 5. 인라인 스타일링은 항상 객체 형식으로 작성 react 6. 별도의 스타일파일을 만들었으면 class 대신 className 을 사용 react 7. JSX의 ..

프로미스를 쉽게 사용할 수 있게 만든 비동기 함수로 일반 함수 앞에 async를 붙이면 해당 함수를 프로미스로 반환한다. async function isAsync() { return "프로미스로 반환됩니다" } isAsync().then(alert); // "프로미스로 반환됩니다" await await는 async 함수 내에서만 작동하며 Promise가 처리될 때까지 기다렸다가 구문을 실행한다. async function isAsync() { const isPromise = new Promise((res, rej) => // new Promise로 promise 함수 호출 setTimeout(() => { // 3초 딜레이 후 resolve 값 반환. res("3초 기다렸다가 출력."); }, 3000)..

비동기 작업을 위한 패턴으로 이행에 성공했을 때와 실패했을 때의 동작을 미리 약속하는 것. 이 때 동작은 콜백함수로 이루어지며 성공했을 시 resolve, 실패했을 시 reject로 실행된다. new Promise() 생성자 함수로 프라미스 객체를 생성하면 그와 동시에 콜백함수가 호출되는데 이 때 전달되는 함수는 executor(실행자, 실행 함수)라고 한다. resolve, reject는 자바스크립트가 제공하는 자체 콜백 함수로 함수의 이행 결과에 따라 resolve 혹은 reject 중 하나의 값은 무조건 호출된다. new Promise가 생성하는 promise 객체의 내부 프로퍼티. state 기본값 'pending(대기 상태)' resolve 호출 시 fulfilled(이행 상태) reject 호..

스크립트에 에러가 있을 경우 에러 발생 구문을 실행한 후 스크립트를 중단 없이 진행하는 구문. 스크립트는 에러가 있을 경우 그 즉시 실행을 멈추고 죽어버리는데 try..catch문을 사용하면 스크립트가 죽는 걸 방지할 수 있고 코드를 디버깅하기도 유용함. 단, 런타임 에러에만 동작하며 중괄호 짝이 안맞는 등 작성 방식이 잘못된 경우에는 동작하지 않음. 또 setTimeOut처럼 스케쥴 된 코드는 엔진이 try...catch 구문을 떠난 후에 실행되므로 작성한다면 setTimeOut 코드 내부에 try...catch문을 작성해야 한다. 자바스크립트는 에러가 발생하면 에러 객체를 생성한다. 그 후 catch블록에 에러를 인수로 전달한다. try { // } catch(err) { // 에러 객체로 err 대..

처음 야놀자 홈페이지를 봤을 때 솔직히 이 정도로 오래 걸릴 거라고 생각하지 못했다. 이 모션에는 이런 코드를 쓰고 저 모션에는 저런 코드를 쓰면 되겠다고 쉽게 생각했는데 바디의 높이나, 콘텐츠의 레이아웃을 유지하면서 스크롤 이벤트를 적용하는 일은 HTML구조를 여러 번 수정하게 만들었고 overflow와 transition으로 만들면 되겠다고 생각한 페이지 전환 효과는 거의 이틀의 시간을 잡아먹었다. 단순한 화살표 애니메이션조차 디테일하게 구현하는 데에 애를 먹었기에 패스로 일일이 작업된 애니메이션들은 사실상 포기했었다. 하지만 시작이 어려웠던만큼 하나씩 차근차근 해나가는 과정에서 전혀 몰랐던 기능들도 알게 됐고 결국 해냈을 때는 약간의 쾌감도 느꼈던 것 같다. 또 팀원들과 공유하고 고민하며 완성도를 ..

WheelEvent.deltaY : 세로 스크롤 시 값 반환. (읽기 전용)