개인공부
-
[React] Typescript #01개인공부/react 2024. 2. 22. 20:06
타입스크립트가 등장 배경을 간략히 설명하면 기존의 자바스크립트에서 발생하던 런타임 에러를 최소화하고 개발자의 실수를 최대한으로 줄여 웹애플리케이션의 품질을 보다 향상 시키는것을 목표로 한다. 기존의 자바스크립트의 문제점은 개발자가 코드를 작성하는 대로 실행 후 런타임때에 에러를 발생시킨다. -- 대표 예시 1 Q. 숫자와 문자를 더하기 function test(a, b){ return a + b; } console.log(test(1,"A")); 결과 "1A"라는 문자열을 리턴한다. -- 대표 예시2 Q. 문자와 문자 나누기 function test(a, b){ return a / b; } console.log(test("A","B")); 결과 이러한 에러는 타 언어에서는 런타임(Runtime)시점이 아..
-
[React] props개인공부/react 2024. 2. 14. 19:21
React의 기능에는 props라는 부모와 자식 컴포넌트 간의 통신을 할때, 부모 컴포넌트가 자식 컴포넌트한테 원하는 데이터를 보내는것을 의미한다. 이러한 점은 커스텀 버튼 이나 다양한 함수로서 사용이 편리하다 .하지만 props는 오브젝트로 오직 한개의 props만 보낼 수 있고, props 오브젝트안의 파라미터 구성은 여러개 가능하다. props는 기본 방법이 있고, 단축어 방법이 있다. function Btn(props) { console.log(props.text, "이 렌더링되었습니다."); return ( {props.text} ); } const MemorizedBtn = React.memo(Btn); function App() { const [value, setValue] = React.u..
-
[React] memo function개인공부/react 2024. 2. 14. 19:06
ReactJS에는 memo라는 유용한 기능이 있다. 만약 커스텀 버튼을 여러개를 생성 하고 클릭을 할경우, 특정 버튼의 이름이 변경되는 함수가 있다. 특정 버튼의 이름이 변경되는 작업을 할 때, 브라우저에서는 매번 새로운 렌더링을 통해 다시 컴포넌트를 그리는데 이러한 작업은 경우에 따라 서비스를 매우 느리게할 수 있는 중요한 문제점으로 인식된다. 해당 문제점을 해결 하기 위해서 ReactJS에서는 변경이 필요하지않은 컴포넌트는 다시 그리지 않고 변경된 컴포넌트만 다시 그리는 작업을 해주는 함수가 React.memo 라는 함수이다. function Btn({ text, onChangeValue }) { console.log(text, "이 렌더링되었습니다."); return ( {text} ); } .....
-
[CSS Grid] Grid Template개인공부/css 2024. 1. 12. 19:20
flex의 경우, 주축을 기준으로 다양한 옵션을 설정할 수 있지만 grid에 비해 많은 제한사항이 있다. 물론 주축을 기준으로 위치를 설정할때는 justify-content, 교차축을 기준으로 설정할때는 align-items가 있고 서로 같은 옵션의 파라미터를 공유하고 대상의 주축 기준에 따라 엘리먼트의 위치가 변경된다. 1. grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns는 요약하면 " 열 = width = 넓이 = 가로 " 단어로 설명할 수 있다. ㅇ 2. grid-template-rows: 1fr 1fr 1fr 1fr;