Kimyeongkyung

textarea의 기본 enter event가 줄바꿈인 줄 알고 있었으나, 아무리 엔터를 눌러봐도 줄바꿈이 안되는 현상이 발생했다. 2022.12.09 수정 줄바꿈이 안됐던 이유를 찾았다.Form 태그 안에서 textarea를 사용하면 엔터 이벤트가 안된다고 한다.Form태그가 있는 상위컴포넌트로 가서 textarea가 들어있는 하위 컴포넌트만 Form 바깥으로 빼줬더니 아래에서 엔터 이벤트를 적용하기 위해 짰던 코드가 필요가 없어졌다.(단, 이 textarea를 Form 태그안에 담아서 POST를 보내야 하는 경우엔 다른 방법을 생각해봐야 할 것 같다.) 찾아본 결과 textarea에 직접 onkeyDown으로 enter event를 만들어 보내주는 방법이 있어서 적용해보았다. const handleK..

React Query : 데이터 Fetching, 캐시, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어주는 라이브러리 장점 기존에 직접 만들어야 했던 기능들을 react-query가 지원하는 별도 옵션들을 통해 짧은 코드로 작성할 수 있다. 프로젝트 구조가 기존보다 단순해져 애플리케이션을 유지 보수하기 쉽고, 새로운 기능을 쉽게 구축할 수 있다. 별도의 설정 없이 즉시 사용 가능하다. 같은 데이터에 대한 여러번의 요청이 있을 시 중복을 제거한다. const { data, isFetching } = useQuery(queryKey, queryFn, { options }) => useQuery는 파라미터로 queryKey, queryFn, options를 가진다. 1) queryKey 배열 또는 str..

class와 id의 차이점을 설명해 주세요. id와 class의 차이는 id는 유일한 요소에 적용할 때, 그리고 css는 복수의 요소에 적용할 때 사용한다는 점이다. 하나의 id는 한 문서에서 한 번만 사용이 가능하지만, 하나의 class는 여러 번 사용이 가능하다. 우선순위는 id가 class보다 높다. float가 어떻게 동작하나요? float 속성은 현재 위치의 왼쪽이나 오른쪽으로 shift되어 배치되는 박스의 일종이다. 이 때 컨텐츠는 float 속성이 적용된 요소의 주변에 위치하게 된다. 클리어링(Clearing)에는 어떤 것들이 있으며, 각각은 어떨 때 사용하나요? float 속성의 영향에서 벗어나기 위해 사용하는 clear 속성은 float의 특성을 지워주는 역할을 한다. 총 4가지 값이 있..

Button .imgbox label { display: inline-block; padding: .5em .75em; color: #999; font-size: inherit; line-height: normal; vertical-align: middle; background-color: #FDFDFD; cursor: pointer; border: 1px solid #EBEBEB; border-bottom-color: #E2E2E2; border-radius: .25em; } .imgbox input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); bor..

렌더링이란? => 서버로부터 받은 내용을 브라우저 화면에 표시하는 것 사용자가 볼수 있는 화면을 렌더링 하는 위치가 서버인지 클라이언트인지에 따라 서버 사이드 렌더링과 클라이언트 사이드 렌더링으로 구분됨 서버 사이드 렌더링(Server Side Rendering) 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링하는 방식 과정 1) 클라이언트 => 초기화면을 load하기 위해 서버에 요청 보냄 2) 서버 => 화면에 표시하는 데 필요한 데이터를 얻어와 모두 삽입하고 css까지 적용해 렌더링 준비를 마침 HTML과 JS코드를 브라우저에 응답으로 전달 3) 브라우저는 전달받은 페이지를 바로 띄우고 JS 코드 다운로드 후 html에 실행 4) 여기서 만약 세모를 네모로 변경하고 싶다면? ..

HTTP : 웹사이트를 이용할때 사용하는 프로토콜 HTTP는 stateless로 상태값을 가지고 있지 않다. 클라이언트가 서버에 요청할 때 이전의 상태를 소멸시키고 접속함 => 사용자의 히스토리를 기억하고 있지 않는다는 것 브라우저에서 서버로 요청(request)을 보낼때 응답을 받는 순간 연결이 끊김 그래서 서버는 이 요청만으로는 누가 요청을 한건지 알 수 없기 때문에 응답도 할수 없다. 하지만 가끔 누가 요청했는지 기억해야 할 필요가 있음(ex. 로그인이 필요한 곳) 내 웹사이트를 사용하는 유저가 누구인지 알기 위해 cookie가 생김 쿠키 cookie : 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 key:value 형태의 저장소. 4KB 저장 가능 매 요청마다 서버에 쿠키가 함께 ..