뉴히의 개발 로그

z-index란?z-index는 HTML이 화면에 그려질 때 어떤 요소가 위에 올라가는지를 설정하는 속성이다. z-index의 값이 높을 수록 위에 올라가며 z축 기준으로 순서를 가진다.z-index는 양수, 음수, auto 값을 가질 수 있으며 따로 지정하지 않으면 auto댜. auto는 z-index를 부모 요소와 동일하게 설정한다. 음수 값을 설정하면, 아래로 깔리게 된다.반드시 position 속성이 static(기본값)이 아닌 것으로 설정 되어 있어야 한다. z-index의 숫자가 높을 수록 상위에 올라온다.z-index는 겹치는 요소의 쌓임 순서를 제어한다z-index는 position이 static이 아닌 값을 가진 요소에만 영향을 준다stacking context는 z-index에 영향을 ..

'(id: string) => void' 형식은 'MouseEventHandler' 형식에 할당할 수 없습니다. 'id' 및 'event' 매개 변수의 형식이 호환되지 않습니다. 'MouseEvent' 형식은 'string' 형식에 할당할 수 없습니다. ts(2322) index.d.ts(2424, 9): 필요한 형식은 여기에서 'IntrinsicAttributes & HTMLAttributes & RefAttributes' 형식에 선언된 'onClick' 속성에서 가져옵니다. const onClickItem = (id: string) => { router.push(`products/${id}`); }; 해결 onClickItem(id)}>

useForm resister register 함수의 두번째 인자값으로 옵션을 넘겨줄 수 있다. required : 필수입력 min max minLength :최소길이 maxLength :최대길이 pattern { value: 정규식, message: 형식이 맞지않을때 전할 메세지 } validate aria-invalid aria-invalid={errors.email ? 'true' : 'false'} 웹접근성을 위한 aria-invalid 속성을 추가하면 사용자에게 시각적으로 안내 가능 그러나, aria-invalid사용시에는 isSubmitted 속성을 같이 사용해줘야 한다. 아무 정보가 없어도 박스에 초록불이 들어와 있기때문 isSubmitted 는 submit 버튼을 한번이라도 클릭하면 tru..

클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념에 대해 설명해주시고, 장/단점을 설명해주세요. CSR 클라이언트 사이드 렌더링이라는 뜻으로 구동 방식은 초기 로드 시 빈 HTML과 모든 로직이 담겨 있는 Javascript 다운로드를 합니다. 그 후 빈 HTML에 Javascript를 이용하여 Dom을 동적으로 생성하여 그려 내게 됩니다. 이렇게 클라이언트에서 렌더링한다고 하여 클라이언트 사이드 렌더링입니다.SPA 싱글 페이지 애플리케이션이란 싱글 페이지에 적합한 환경입니다. 장점: Javascript를 사용해서 동적으로 Dom을 그려내기 때문에 원하는 내용만 업데이트를 할 수 있습니다. 예를 들어 링크 이동을 클릭했을 때 헤더, 푸터와 같이 중복되는 내용은 고정으로 두고 안에 콘..

RESTFul API란 HTTP와 URI를 기반으로 정보에 접근할 수 있도록 제공하는 애플리케이션 개발 인터페이스입니다. 플랫폼에 제약을 두지 않고 데이터 통신을 가능하게 하기 위해서 xml, json과 같이 클라이언트 사이드에서 바로 객체로 치환이 가능한 형태로 데이터 통신을 하는것을 restful 하다고 할 수 있습니다.

프레임워크 프레임워크는 애플리케이션을 개발을 하는데 있어 기본적으로 필요한 구조와 구성을 갖추고 있어 개발자가 기능 구현에 집중할 수 있도록 합니다. 프레임워크는 프레임워크만으로 프로그램이 동작하는 것이 아니라 뼈대를 제공하고 그 위에 개발자가 코드를 올려 동작하게끔 합니다. 개발자의 입장에선 좀 더 로직에 집중을 할 수 있게 하고 객체 지향 개발을 하는데 있어 시스템을 일관성있게 관리할 수 있도록 도와줍니다. 여러 명의 다양한 개발자들이 각자의 취향에 따라 설계하고 코딩한다면 관리적인 측면에서 어려움을 겪을 수 밖에 없을 것이고 이는 프레임워크가 제공하는 뼈대와 가이드에 맞게 설계하고 개발함으로써 시스템의 통합, 일관성을 유지할 수 있게 됩니다. 어려운가요? "설계는 내가 할게 너는 구현만 해" 라고 ..

동기와 비동기의 차이에 대해 설명해주시고 비동기프로그래밍의 필요성에 대해 답변해주세요. 동기는 데이터 요청의 결과가 한자리에서 동시에 일어나는 것을, 비동기는 동시에 일어나지 않는 것을 말합니다. 말그대로 동기는 동기적으로 한 작업이 끝난후에 다음 작업을 진행할 수 있으며 비동기는 동기적이지 않게 요청에 대한 완료가 일어나기 전 다른 작업이 가능합니다. 비동기 프로그래밍이 필요한 이유는 요청에 대한 결과가 반환되기 전에 다른 작업을 수행할 수 있어서 자원을 효율적으로 사용할 수있습니다. 참고 답변 핵심키워드: Async/await 콜백 헬(callback hell) 비동기 프로그래밍 방식에 필요성 "동기란 앞선 연산이 끝날 때 까지 기다렸다가 다음 연산이 순차적으로 실행되는 방식입니다. 반대로 비동기는 ..

상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? SPA는 랜더링을 위해 상태관리를 한다. 또한 컴포넌트 단위로 작업을 하는데 각 컴포넌트의 데이터는 부모에서 자식컴포넌트로 데이터를 내려줄 수 있다. 그런데 그렇게 내려주다보면 데이터를 사용하지않는 컴포넌트에서도 데이터를 받아 넘겨줘야하기때문에 props drilling이 발생한다. 이런 비효율적인 props 전달을 하지않기위해 어느 컴포넌트에서든 데이터를 직접 받아 사용할 수 있도록 전역상태 관리 저장소를 만들어 어느 컴포넌트에서도 접근가능하도록 상태관리를 한다. 상태관리 도구는 아주 다양한다. 많은 사람들이 redux(전역상태관리) 상태관리 도구를 이용해 state 관리를 한다. 보일러플레이트가 적고 사용이 쉬운 react que..