JavaScript.9 반응형 웹 연습하기 - 개념 정리 반응형 웹이란 다양한 기기나 브라우저의 크기에 맞게~~스마트 모바일 기기의 등장으로 데스크톱 화면을 위해 존재했던 웹 문서의 설계에도 변화가 요구되기 시작했다. 변화의 초기에는 모바일 전용 url을 제공하는 방법으로 주로 사용됨. 예시 (naver.com)태블릿, 스마트 워치,. 자동차모바일 환경과의 격리가 성공적으로 정착한 사례도 물론 있지만, 기기의 유형이 갈수록 다양해짐에 따라 한계를 드러낼 수 밖에 없다.기기에 최적화된 콘텐츠 생성해내는 것이 현실적으로 어려움가변성 이 핵심 키워드뷰포트 변화의 첫걸음현재 화면에 보여지고 있는 영역을 의미배율 조정 문제로 기기별로 다르게 보임메타 태그를 통해 뷰포트 설정을 해줄 수 있다.문서 기본 구조~기기의 너비에 맞게 기본 스케일을 잡겠다.기기에 따라 다른 화면.. 2024. 10. 4. JavaScript Math.trunc()메서드와 틸트(tilt) 연산자 숫자를 다루는 연산을 할 때, 소수점을 버릴 경우 Math.trunc()연산자를 사용한다. 비트 연산에서는 주로 쓰이는 틸트 연산자 중 이중 틸트 연산자의 경우 숫자의 소수점을 버리는 방법으로 알고리즘 문제를 풀이를 할 시 간단하게 사용할 수 있다.1️⃣ ~ (비트 반전 연산자)~ 는 비트 반전 연산자(bitwise NOT)라고 부른다. ~ 연산자는 숫자의 모든 비트를 반전시킨다.0은 1로, 1은 0으로 바뀐다.예를 들어, 8비트로 표현된 숫자 5가 있다고 하면, 이진수로는 00000101이다. ~5를 연산하면 각 비트가 반전되어 11111010이 된다. 11111010을 십진수로 표현하면 -6이다.~5 = -62️⃣ ~~ (이중 틸트 연산자)~는 비트 반전 연산자인 ~를 두 번 적용한 것이다.숫자의 소.. 2024. 8. 23. JSX 유의사항 ☑️ React 컴포넌트는 하나의 값만 출력할 수 있다.자바스크립트는 두 개의 값을 반환하지 않기 때문이다. 따라서 JSX는 반드시 단일 루트 요소만 반환되어야 한다. 모든 JSX요소는 하나의 요소안에 내포 요소로 포함되어있다. 아래는 잘못된 예시이다.const App = ()=> { return ( 모던 리액트 프로그래밍 개념 정리하기 좋은 책이다 ) // 단일 요소로 이루어져 있어야 한다.const add = (a, b) => { return ( a+b a-b ); // 자바스크립트는 2개의 반환값을 가질 수 없다.} JSX는 실제로는 React.createElement 호출로 변환되는데 이때 호출이 단일 객체를 반환해야 한다. 동적인 컨텐츠 출력을 위해 자바스크립.. 2024. 8. 9. useReducer로 useState 지옥 벗어나기 useReducer로 useState 지옥 벗어나기const [state, dispatch] = useReducer(reducer, initialQrg, init);useState 지옥에서 벗어나기기존 코드아래는 달력 이벤트를 업데이트하는 컴포넌트 예시입니다.import { useState } from "react";function EditCalendatEvent() { const [startDate, setStartDate] = useState(); const [endDate, setEndDate] = useState(); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); cons.. 2024. 7. 26. Styled-components 태그에 속성 추가하는 법 매번 className으로 모달 관리하기 번거로울 때매번 className으로 모달 관리하기 번거로울 때는 Styled-components 태그에 속성을 추가할 수 있다. 단, 단순 string 타입으로 작성할 경우, 대문자로 작성이 안된다던지 string 값 작성이 안되는 에러가 발생함으로 html 태그에서 변수값으로 인식하지 못하게 하는 $문자를 입력해주면 에러없이 잘 속성으로 이용할 수 있다.예시 : 모달interface ModalProps { isOpen : boolean; onClose: ()=> void; onClick: ()=> void;}function Modal ({isOpen, onClose, onClick}:ModalProps) => { return ( .. 2024. 7. 10. 🎯 Trouble Shooting 컴포넌트 리턴 후 발생하는 렌더링 에러 페이지가 첫 렌더링 된 후에 새로고침을 하면 위와같은 에러가 발생하는 이슈가 생겼다.🚨 Rendered more hooks than during the previous render.채팅 페이지 정보를 가져오다 발생한 에러.페이지 렌더링 후 새로고침 시 바운더리 에러 발생.로직 순서는useParams를 통해 채팅방 정보를 가져온다.currentUser를 이용해 로그인한 유저의 정보를 가져온다.유저의 정보와 채팅방 정보가 없다면 그대로 return 한다.유저의 역할에 따라 이름, 채팅방 권한 상태를 관리한다.채팅방 페이지를 렌더링한다.에러가 발생한 지점은 if 조건문으로 리턴을 한 후, 아래 useState hook이 발생하여 일어난 에러다.☑️ 문제 코드const ChatRoomPage = ()=> {c.. 2024. 7. 1. prev 1 2 next
