본문 바로가기

전체보기

 (286)
본문 왼쪽에 그림을 추가하는 방법 - CSS float float은 코드를 복잡하게 만들기 때문에 사용을 지양해야 한다. 그러나 책에서처럼 긴 문장의 왼쪽 위 구석에 그림을 추가하려면 사용할 수밖에 없다. 이미지에 float: left;를 넣으면 다음에 오는 문장 왼쪽 위에 위치하게 된다. 가나다라 마바사 .image { width: 50px; height: 50px; background: deeppink; float: left; } 다음에 오는 엘리먼트 중 하나에 clear: both;를 넣으면 해당 엘리먼트는 float에 영향을 받지 않는다. 결과적으로 그림 아래쪽에 문자가 오게 된다. 가나다라 마바사 아자차카 타파하 .clear { clear: both; /* 또는 left */ } float 속성을 주면 부모 엘리먼트가 해당 엘리먼트를 인식하지 못하기..
table 태그를 의미론적으로 제대로 쓰는 방법 표 형태로 데이터를 보여줄 때에는 을 써야 한다. 은 테이블의 한 열을 의미하고 와 는 각 열의 한 칸씩을 차지한다. 에는 테이블의 제목이 들어가고 에는 데이터가 들어간다. 제목 1 제목 2 데이터 1 데이터 2 colspan 속성을 넣어서 나 가 두 칸을 차지하게 할 수도 있다. 제목 데이터 1 데이터 2 위의 태그들만 사용하더라도 표를 그리는 데에는 문제가 없지만 검색 엔진이 표의 제목이 무엇인지 내용이 무엇인지 등을 알 수 있게 하려면 , , 도 넣어줘야 한다. 제목 1 제목 2 데이터 1 데이터 2 foot 1 foot 2 CSS , , 모두에 border를 설정하면 테이블 라인이 두 줄로 나타난다. 이를 하나로 묶어주려면 border-collapse: collapse;를 넣어준다. table, ..
이미지에 width와 height 값을 비율에 맞지 않게 넣더라도 찌그러지지 않게 하는 방법 에 width와 height 값을 동시에 넣으면 가로세로 비율이 정확히 맞지 않는 이상 이미지가 찌그러진다. 이를 해결하기 위해 CSS에 object-fit 속성을 넣으면 width와 height 조절 등으로 이미지의 크기가 달라지더라도 찌그러지지 않는다. object-fit: cover;로 할 경우 이미지 박스에 맞게 이미지 내용이 꽉 찬다. 비율도 유지 된다. 대신 가로 양쪽 끝이나 세로 양쪽 끝이 잘린다. 원본 그냥 조절했을 때 object-fit: cover;를 설정했을 때 .fit { object-fit: cover; }
AWS S3를 이용해서 정적 홈페이지 만드는 방법 1. AWS의 S3 콘솔에서 버킷 만들기를 클릭한다. s3.console.aws.amazon.com/s3/home?region=ap-northeast-2 2. 고유한 버킷 이름을 입력하고 리전을 서울로 선택한다. 3. 퍼블릭 액세스 차단을 위한 버킷 설정에서 모든 퍼블릭 액세스 차단을 해제한다. 버킷 생성 이후에도 변경할 수 있다. 4. 버킷 만들기를 클릭해서 버킷을 생성을 마친다. 5. 생성된 버킷에 들어가 속성 탭을 클릭하고 제일 아래의 정적 웹 사이트 호스팅을 활성화 한다. 6. 인덱스 문서 이름을 index.html로 설정하고 버킷에 홈페이지로 쓸 index.html 파일을 올린다. 7. 버킷의 권한 탭을 클릭하고 버킷 정책에서 편집을 클릭해 아래 내용을 붙여넣는다. { "Version": "20..
버튼 클릭시 클립보드에 복사하는 방법 버튼을 클릭 했을 때 특정 글자를 클립보드로 복사하기 위해서는 먼저 복사하려는 글자가 담긴 엘리먼트를 불러와 엘리먼트의 textContent에 담긴 글자를 변수에 넣고 const text = document.getElementById('text').textContent; 류에서만 작동하는 select 메서드를 사용하기 위해 임시로 엘리먼트를 만들어 textarea의 textContent에 글자를 넣는다. const textarea = document.createElement('textarea'); textarea.textContent = text; 브라우저에 생성해야 select 메서드를 쓸 수 있으니 body에 append(추가)하고 document.body.append(textarea); 생성한 te..
React Query 기본 리액트 쿼리를 제대로 쓰기 위해 작동하는 기본 원리를 다룬다. Stale이란 리액트 쿼리는 기본적으로 캐시된 데이터를 stale한 상태로 여긴다. stale이란 최신화가 필요한 데이터라는 의미로 stale한 상태가 되면 다음의 경우에 refetch 된다. - 새로운 query 인스턴스가 마운트될 때 (useQuery가 처음 호출될 때, Whenever a new component that calls useQuery mounts, React Query will do a revalidation) - 브라우저 화면을 이탈했다가 다시 포커스할 때 - 네트워크가 다시 연결될 때 - 특별히 설정한 refetch interval에 의해서 (refetchInterval) refetchOnWindowFocus 옵션 등으..
React Hooks의 State 동작 원리 리액트 컴포넌트는 state가 변할 때마다 다시 실행된다. 잦은 state 변화가 발생하는 경우 내부적으로 어떻게 작동하는지를 알고 있지 못한다면 심각한 성능 이슈를 초래할 수 있다. 한편 2021년 기준으로 함수형 컴포넌트가 메인이 되면서 state 관리는 hooks가 맡아서 하게 됐다. 여기서는 주요 hooks에서 제공하는 state의 변화에 따라 리액트가 어떻게 반응하는지를 다뤄보겠다. State 변화에 따라 어떻게 동작하는가? 리액트의 function 컴포넌트는 최초에 한 번 실행이 되고 나서 초기값으로 설정해 놓은 state를 기억하고 있는다. // 0을 초기값으로 한다. const [state, setState] = useState(0); 버튼 클릭 이벤트 등으로 setState가 호출되면 다..
HTTPS에 대해서 HTTPS를 쓰는 이유1. 암호화클라이언트와 서버는 HTTP를 이용해서 데이터를 보낸다.데이터는 텍스트로 구성된다.만약 중간에 해커가 데이터를 가로챈다면 암호와 같은 중요한 정보가 노출될 수 있다.이를 방지하기 위해 HTTPS를 써서 데이터를 암호화시킨다. 2. 신뢰할 수 있는 사이트Certificate Authority(이하 CA)라는 기관에서 검증된 사이트만 브라우저의 주소창에 HTTPS로 나타나기 때문에공인 사이트로 위장해 사기를 치려는 짝퉁 사이트를 분간해낼 수 있다. 대칭키와 비대칭키암호화를 하는 방식으로 대칭키와 비대칭키를 사용한다. 대칭키클라이언트와 서버에 대칭키를 각각 두고 이를 이용해서 데이터를 암호화하거나 복호화 할 수 있다.대칭키를 갖고 있지 않으면 데이터를 탈취하더라도 암호화 되어 ..

티스토리툴바