솔미는 성장중

프로젝트를 시작하며 패스트캠퍼스 X 야놀자 프론트엔드 부트캠프 1기를 참여하고 2번째 과제이다. 직원 사진 관리 페이지를 만들어보는 JS과제였다. 프로젝트 결과 과제 결과물 (인재관리 사이트) 깃허브 주소 (다른 사람 프로필은 건드리지 말아주시면 감사하겠습니다 (●'◡'●)) 초점을 두고 준비했던 부분 필수 요구사항 만족하기 (firebase사용해 데이터 등록,수정,삭제 / CSS애니메이션 / intersection observer 구현해보기 js를 이용해 애니메이션 만들어보기 Preview & 구현 내용 - Firebase 를 활용한 사진 및 데이터 관리 - 프로필 페이지 제작 - 스크롤이 가능한 형태의 리스팅 페이지 - 반응형 페이지 - modal을 활용한 인재 등록 창 (사진 / 직책 / 깃헙주소 ..

클래스는 객체이고, 그 안에 있는 것은 '속성'이다. 그래서 this.property 형태로 속성에 접근이 가능한 것이다. 변수 - let/const로 선언해줄 수 있는 것 - 객체.변수 형태로 쓸 수 없다 속성(property) - let/const로 선언 불가 - 객체.속성 형태로 쓸 수 있는 것 클래스 내부에서 쓰는건 변수가 아니라 속성(property)이기 때문에 let/ const를 사용하지 않습니다. 속성앞에는 let/const를 쓰지 않으니까요. class내에 메소드를 만들면 그 안에서는 let/const로 변수 선언이 가능합니다.

기본 설정 npm init -y npm i -D webpack webpack-cli package.json의 "scripts"내에 "build": "webpack --mode production" 추가 webpack.config.js 생성 후 아래 코드 추가 const path = require("path"); module.exports = { mode: "development", //시작점 entry: path.resolve(__dirname, "src/index.js"), //웹팩 작업을 통해 생성된 결과물 output: { path: path.resolve(__dirname, "dist"), filename: "main.js", }, }; scss를 사용하고 싶다면? npm i -D style-lo..

문제 상황 오히려 컴포넌트를 나눴더니 성능이 떨어진다? 이것은 렌더링이 최적화되어있지 않기 때문이다. props가 변화하는 곳만 렌더링 해주면 되는데 전부 다 렌더링하고 있는 경우 이런 현상이 발생한다. 해결법 React.memo 컴포넌트를 React.memo()로 둘러싸면 컴포넌트를 메모이징한다. props가 바뀌지 않은 컴포넌트는 새롭게 렌더링되지 않고 메모이징 된 내용을 재사용한다. 언제 사용하면 좋을까? - 새로 업데이트를 잘 시키지 않아도 되는 컴포넌트 예시 const List = React.memo(({ posts, testFunction }) => { console.log("List Component"); return ( {posts.map((post) => ( ))} ); }); useCa..

제네릭은 카멜레온 같은 아이라고 생각하면 된다. 받은 타입을 그대로 반환한다! 라는 컨셉 📌 기본 문법 //함수 function testGeneric(text: T):T{ return text; } testGeneric('hello world'); //hello world //위 코드는 function testGeneric(text: string):string { } 과 동일하다. testGeneric(3); //3 //인터페이스 interface Dropdown{ value: T; selected: boolean; } let product: Dropdown; let stock: Dropdown; let address: Dropdown; 📌 언제 사용하면 좋을까? 함수의 역할과 동작은 같은데 타입을 여러..