본문 바로가기

frontend4

[React] 동적 화면 넓이 구하기 const [innerWidth, setInnerWidth] = useState(window.innerWidth); useEffect(() => { const resizeListener = () => { setInnerWidth(window.innerWidth); }; window.addEventListener("resize", resizeListener); }); console.log("innerWidth", innerWidth); 높이는 Width를 Height으로 바꿔서 구하면 됨 출처 : https://velog.io/@bunny/%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%99%94%EB%A9%B4-%EC%82%AC%EC%9D%B4%EC%A6%88-%EA%B5%AC%ED%95%98%.. 2023. 8. 16.
[React]줄바꿈 안 됨 오류 - 개행문자(\n) 인식하게 하기 문제 리액트에서 줄바꿈이 인식이 안 되는 경우가 있다. 어떤 블로그를 참고하여 {"\n"}, , 컴포넌트 분리의 방법을 모두 써봤는데 소용이 없었다. 해결 css에 white-space: pre-line; white-space: pre-line; 을 추가해주니 개행문자를 인식할 수 있게 되었다. 2023. 8. 13.
[모던자바스크립트] 코드 블록 만들기 이 글은 모던자바스크립트https://ko.javascript.info/structure를 참고하여 작성되었습니다. 오류가 있다면 댓글로 말씀 부탁드립니다. 문(statement) : 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command) 예: alert('Hello, world') 코드엔 원하는 만큼 문을 작성할 수 있고, 서로 다른 문은 세미콜론으로 구분 'Hello World'를 두 개의 alert문으로 나눈 예시 alert('Hello'); alert('World') 코드의 가독성을 높이기 위해 각 문은 서로 다른 줄에 작성하는 것이 일반적 alert('Hello'); alert('World'); 세미콜론 //에러 없이 동작하는 코드 alert('Hello') a.. 2023. 8. 11.
[모던자바스크립트] Hello, world! 이 글은 모던자바스크립트https://ko.javascript.info 를 참고하여 작성되었습니다. 오류가 있다면 댓글로 말씀 부탁드립니다. 요약 웹 페이지에 자바스크립트 코드를 추가하기 위해 와 같이 삽입 ‘script’ 태그 스크립트 후 태그 옆에 붙은 주석은 "/path/to/script.js” : 사이트의 루트에서부터 파일이 위치한 절대 경로 “script.js” : 같은 폴더에 있는 파일일 경우의 상대 경로 url전체를 속성으로 사용하는 것도 가능 복수의 스크립트를 HTML에 삽입하고 싶다면 스크립트 태그를 여러 개 사용하면 됨 ⚠️ HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용, 스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋음. 스크립.. 2023. 8. 11.