frontend

안녕하세요 이번에는 미루고 미뤘던 번들러에 대해서 공부를 해보고 글을 써보려고 합니다. 번들러가 뭘까요 ? "Bundle" 은 무슨 말일까요 ? 번역기의 힘을 빌려 한국어 뜻을 확인해 보니 묶음이라는 의미군요. 번들러란 이름에서도 유추할 수 있듯 어플리케이션에 필요한 여러 모듈들을 하나로 묶는 도구입니다. 왜 번들러를 사용해야 하나요 ? 그러게요 왜 모듈들을 묶어야 할까요 ? 그냥 없이 개발하면 안될까요 ? 한번 번들러 없이 만들어보겠습니다 ! 번들러 없이 만들어보기 이 서비스는 덧셈, 뺄셈 기능이 있고 각각 input으로 받을 값을 계산하는 계산기입니다. index.html 계산기 덧셈 버튼 뺄셈 버튼 이렇게 type="module"로 모듈로 바꾸면 됩니다. 모듈은 각각 독립된 스코프를 갖고 있기 때문..

오늘은 제가 전직장, 현직장에서도 유용하게 썼던 라이브러리 React Hook Form을 소개해보려고 합니다 ! Form 처리 다들 어떻게 하시나요 ? 간단하게 이메일과 비밀번호를 받는 회원가입 페이지를 만들어볼게요. function SignUpPage() { return ( 회원가입 ); } export default SignUpPage; 좋습니다 ! 하지만 이렇게만 하면 저 이메일 input과 비밀번호 input의 value를 가져올 수 없습니다. useState를 추가해서 값을 받아오게 처리해보겠습니다. useState로 처리하기 import { useState } from "react"; function SignUpPage() { const [email, setEmail] = useState(""..

Suspense는 React 16.6에서 추가된 기능이에요. 처음에는 코드 스플리팅(lazy)을 위해서만 사용됐으나 나중에는 데이터 Fetching을 기다릴수도 있고 SSR Streaming이라는 기능도 제공되게 기능이 확장되는 중이에요.Suspense란 무엇일까 ? Lazy Data Fetching waterfall Suspense 안써도 똑같은데요 ? 안쓰면 안댐 ? 관심사 분리와 선언형 단순히 코드만 깔끔해지나 ? Suspense를 써도 Waterfall이 발생하는데요 ? useQueries prefetch SSR Streaming Suspense란 무엇일까 ? React Beta 문서에 나온 내용을 보면 Suspense lets you display a fallback until its child..

개요 SSR 관해서 회사 면접을 준비하며 이론을 살짝 검색해서 암기하고 있었습니다. 하지만 실재로 사용하본적이 없고 첫페이지 로딩에 대해서 CSR에 비해 빠르다..!, 검색엔진최적화가 잘되어 있다..! 라고 알고만 있었지 실재로 확인을 해본적이 없어 이번에 진짜 빠른게 궁금해서 테스트를 해보려고 합니다. 간단한 CSR, SSR 설명 CSR CSR은 서버로부터 빈 html파일과 js파일을 받아서 js파일을 이용해 html을 클라이언트에서 처리해 채우는 방식을 의미합니다. 이 동작은 첫 화면에서 유저가 흰화면을 오래 볼 가능성이 있으며 빈 html을 받기 때문에 SEO가 좋지 않습니다. SSR SSR은 서버로부터 완성된 html을 받으며 동작과 관련된 js파일을 따로 받아 브라우저가 js파일을 읽는 동안 유..

전문대생(아직 졸업 안함), 비전공자, 부트캠프 or 국비학원 없는 독학, 6개월이란 짧은 시간 개인적으로 좋은 조건이라고 생각들지 않아 취업이 많이 힘들어 보였지만... 드디어 프론트엔드 개발자로 취업을 했다...!! 🎉🎉🎉 공부 방법 나는 코딩을 2022년02월26일부터 시작을 했다. 원래는 무지성으로 컴공으로 편입을 하려고 편입 공부를 하고 있었는데 "내가 코딩이 적성이 맞을까 ? 힘들게 편입했는데 적성 안맞으면 다시 편입해야하는거 아니야 ?" 라는 두려움이 생겨서 멘토형을 만나 처음 코딩을 시작했다. 내가 공부한 방법은 이렇다 초반 멘토형과 얘기를 하고 일주일 동안 만들 작은 프로젝트를 정한다. 일주일 동안 프로젝트에 필요한 기술들을 독학으로 익히고 프로젝트를 만든다. 만든 프로젝트를 코드리뷰를 ..

네이버 공식 사이트를 참고하여서 만들었습니다 참고 : >>공식사이트깃허브 { const mapDiv = document.getElementById("map"); const map = new window.naver.maps.Map(mapDiv); window.naver.maps.Event.addDOMListener(mapDiv, "click", () => { const coordinate = { x: map.data.map.center.x, y: map.data.map.center.y }; setMapPoint({ x: coordinate.x, y: coordinate.y }); }); }, []); return ( {mapPoint.x} {mapPoint.y} ); 이제 좌표값을 불러올 수 있으니, 좌표..