HTML body의 기본 Margin(흰 테두리)

열심히 컴퓨터종합설계를 하고 있던 저는 어마어마한 문제를 맞이했습니다. 분명히 모든 컴포넌트의 마진을 0으로 줬음에도 불구하고, 화면의 테두리에 흰색이 조금 남아있는 것입니다!!   잘 보일지 모르겠으나, 마진도 없고 패딩도 없고 백그라운드 컬러를 야무지게 그라데이션으로 설정해놨는데,테두리에 흰 색이 있는 겁니다!! 만능 킹 갓 제너럴 엠페러 지피티 형님한테 여쭤봐도 제대로 된 답을 주지 않더군요... 그러다 개발자 모드를 켜서 요소를 찍어보니 어마어마한 사실을 발견했습니다.아무런 스타일 옵션을 주지 않았음에도 불구하고,이미지와 같이 body에 무려 8px의 마진이 설정되어 있었습니다. 이 얼마나 억울한 일입니까?알아보니 예전엔 이런게 있어야 편해서 기본값으로 설정되어 있는건데, 여전히 이게 남아있는거라..

• format_list_bulleted Upscaling
• · 2024. 5. 1.
• textsms

13. 리액트에서 사용하는 타입스크립트

HTML 타입 const usernameInput = document.getElementById('username') as HTMLInputElement; const submitButton = document.getElementById('submit') as HTMLButtonElement; 다음과 같이 HTML태그Element 형태로 DOM 노드에 대한 타입을 사용 가능. 이벤트 타입의 경우 이벤트에 따라 다양하게 있는데, 뭐 onClick의 경우 MouseEvent임. VSCode에서 하나씩 찾아보면 됨! React 타입 Prop : 인터페이스 이용 interface Props { className?: string; id?: string; children?: ReactNode; onClick: (e:..

• format_list_bulleted Upscaling
• · 2024. 4. 17.
• textsms

12. TS(타입스크립트) 기본 문법 및 타입 정리

TS에서는 변수의 타입을 지정해줘야 한다! JS에서는 아무렇게나 선언하고 초기화하고 바꿔도 상관없지만, TS에서는 그러면 맴매 맞는다! 타입지정 : 기본 자료형들 String, Number, Boolean, Undefined, Null -> 여기서 뒤에 []를 붙여 배열, [number, string] 등을 붙여 튜플 자료형을 지정할 수 있음. 타입 지정 : 객체 let product: { id: string; price: number; membersOnly?: boolean; // 필수가 아닌 프로퍼티 sizes: string[]; } = { id: 'c001', price: 129000, sizes: ['M', 'L', 'XL'], }; if (product.membersOnly) { console...

• format_list_bulleted Upscaling
• · 2024. 4. 17.
• textsms

11. Dependant, Paginated, Infinite Query

Dependant Query : useQuery()의 enabled 옵션 사용 만약 쿼리들이 순서대로 실행되어야 할 경우, useQuery()의 enabled 옵션을 사용할 수 있다. 이 값이 true일 때만 쿼리를 실행시키는 옵션이다. 만약 const { data: projects, } = useQuery({ queryKey: ['projects', userId], queryFn: getProjectsByUser, enabled: !!userId, }); 이렇게 enable 옵션을 설정한다면, userId가 있다면 true, 없다면 false가 되어 userID의 존재유무에 따라 실행유무를 달리할 수 있다. 예제로 확인해봅시다. Q. currentUsername 값이 있다면, 해당 아이디 값을 이용해 ..

• format_list_bulleted Upscaling
• · 2024. 3. 26.
• textsms

10. 리액트 쿼리 기초

리액트 쿼리를 아시나요? 예전에 이 글 을 통해 리액트 상태관리의 역사를 공부하면서 알게되었는데요. 코드잇의 강의를 통해 그 사용법을 학습한 내용을 정리하고자 합니다. 공식문서는 여기 서 확인할 수 있습니다. 우리가 방문하는 웹사이트들은 굉장히 복잡합니다. 수많은 데이터를 다루게 되는데, 편리하게 이 데이터들을 사용할 수 있어야겠죠. 그래서 여러 상태관리 라이브러리들이 등장했습니다. 대표적으로 많이들 사용하는 리덕스가 있겠네요. 그러나 리덕스는 클라이언트 상태 데이터(사용자가 버튼을 눌렀는지, 사용자가 값을 입력했는지 등)를 관리하는데 용이하여, 서버 상태 데이터를 관리하기엔 좋지 못한 부분도 있고 코드가 복잡해질 수도 있다고 합니다. 그래서 리액트 쿼리는 Redux의 과사용으로 복잡성 증가, 비동기 처..

• format_list_bulleted Upscaling
• · 2024. 3. 18.
• textsms

8. 스박사님을 아세욧?

스박사님은 스타일드컴포넌트를 말합니다~ 왜 박사냐고요? 그냥요~~ 스타일드 컴포넌트가 뭐냐? CSS를 React에 그대로 적용하는게 살짝 불편합니다. 이 불편함을 해결하기 위해 새로운 기술들이 등장 했는데, 그중에서도 가장 인기 있는 기술이 바로 스 타 일 드 컴 포 넌 트 다 이말이야! 그럼 어떻게 쓰느냐? import styled from 'styled-components'; const Button = styled.button` background-color: #ededed; border: none; border-radius: 8px; `; function App() { return ( Styled Components! 확인 ); } export default App; //출처 코드잇 강의 이렇게 J..

• format_list_bulleted Upscaling
• · 2024. 3. 10.
• textsms

6. append와 extend

파이썬에서 리스트에서 무언가를 더할 때 그냥 +로 더할 수 있다. 그러나 그렇게되면, 새로운 리스트를 반환하게 된다. 이때, 유사한 기능을 하는 extend나 append는 새로운 리스트를 추가하는 게 아니라, 기존의 리스트에 값을 추가하게 된다. 다만 이 둘도 동작상의 차이는 있다. append는 매개변수 그 자체를 추가하게 된다. extend는 삽입되는 리스트를 풀어서 각각의 엘리먼트로 추가된다. 내 코드는 아래와 같다. def merge(list1, list2): # 여기에 코드를 작성하세요 mer_list = [] i=0 j=0 while ((i list2[j]): mer_list.append(list2[j..

• format_list_bulleted Upscaling
• · 2024. 3. 6.
• textsms