React16 리액트 hydrate React에서 "hydrate"는 일반적으로 서버 측 렌더링된 HTML과 클라이언트 측 JavaScript 앱을 연결하는 과정을 의미합니다. 보통 React 앱은 JavaScript로 작성되며, 브라우저에서 JavaScript 파일이 로드되어야 실행됩니다. 이 때, 첫 페이지 로드 시에 React 앱이 화면에 나타나기까지 JavaScript 파일이 다운로드되는 시간이 필요하므로 사용자는 앱이 로드되는 동안 대기해야 합니다. 이는 사용자 경험을 저하시킬 수 있습니다. 이 문제를 해결하기 위해 React는 서버 측 렌더링을 지원합니다. 서버에서 React 앱을 렌더링하여 HTML 문자열로 출력한 다음, 이 HTML 문자열을 클라이언트로 보내어 브라우저에서 JavaScript 파일을 로드하고 React 앱을 .. 2023. 2. 21. useEffect vs useLayoutEffect 렌더링 비밀 유출?!?! 프론트엔드를 하겠다고 마음 먹기 전, useEffect는 그냥 컴포넌트가 마운특라 되면 호출되는 아이라는 것만 알고 있었다. 맞는 말이긴 한데 렌더링 과정의 비밀을 알아버렸다. 비밀은 어그로입니다 죄송합니다. 결론부터 말하면은 호출되는 순서 차이다. 아래 공식문서 사진을 보면 파란줄 표시한 곳에 답이 나와있다. "렌더링이 완료된 후에 수행 될 것입니다." 프로젝트 하면서 그냥 당연하게 여겼던 것이 이것 때문이었다. 아래 예시 코드를 보면 그냥 컴포넌트가 마운트 되면 useEffect를 이용해서 데이터를 받아 오고 출력하는 과정이다. export default function Test() { const [data, setData] = useState(null); useEffect(() => { fetch(.. 2023. 1. 27. React에서 innerHTML을 !?!?! 결론부터 말하자면 아래 코드처럼 해주면된다. 아래 a를 각각 삽입해보면 아래 그림처럼 그냥 a변수만 출력하면 문자열 그래로 출력 되었는데 dangerouslySetInnerHTML를 사용하면 요소로 돔 트리에 추가도이었다. 하지만 이러면 XSS 공격에 취약하니 정신바짝 차리고 써야된다. 2023. 1. 24. Masonry layout(react) 벽돌을 쌓는 것처럼 레이아웃하는 방식을 말하는데 핀터레스트의 레이아웃이라고 보면 된다. 아래 그림은 핀터레스트의 사진이다.(얼굴 나온 사진은 가림) 위에 처럼 화면을 꾸며야할 부분이 생겨서 flex를 이용하여 적용해 보았다. 왼쪽은 코드 오른쪽은 결과 사진이다. 큰 박스가 SkillsContainer가 적용된 박스고 작은 박스들이 SkillsStack가 적용되었다고 보면 된다. 이렇게 하면 안 좋은 점이 max-height를 정해야줘야하고 행마다 채우는 형식이 아니라 열마다 채우는 형식이여서 많이 아쉽다. 그래서 react-masonry-css를 사용하기로 했다. yarn add react-masonry-css Masonry 컴포넌트를 불러와서 아래 코드처럼 만들고 Frontend {skillItems... 2023. 1. 23. 이전 1 2 3 4 다음
