분류 전체보기

오늘은 자바스크립트의 Promise가 어떻게 동작하는지에 대해서 공부를 해보려고 합니다.자바스크립트는 싱글 스레드 언어인데 ?자바스크립트의 Promise는 비동기 처리를 할 때 사용합니다. 근데 신기한 부분이 있습니다. 자바스크립트는 싱글 스레드 언어인데 어떻게 비동기 처리를 하는 걸까요 ? 싱글 스레드의 특징 중 하나인 단일 작업 흐름: 한 번에 하나의 작업만 처리할 수 있습니다. 에 따르면 한 번에 하나의 작업만 처리하는데 "하나의 작업이 끝나기도 전에 다른 작업을 실행시킨다." 라는 개념이 이해가 되지 않습니다. 우선 동기 처리와 비동기 처리일 때를 분리해서 이때 자바스크립트가 어떻게 동작하는지 살펴보겠습니다.이 사이트에서 자바스크립트의 동작을 시각화해줘서 이해하기 편한 거 같아요 ! 근데 오류가 ..

오늘은 css 라이브러리 그중에서 개인적으로 제일 좋다고 생각하는 Panda Css에 대해서 작성을 해보겠습니다.Panda Css가 무엇일까요 ?과거 Next js App Router가 처음 나왔을 때 App Router에서 사용할 수 있는 css in js 라이브러리는 어떤 것들이 있을까 찾아봤습니다. 시간이 좀 지나 다시 확인해 보니이렇게 padda css가 있더라고요. 이때부터 Panda Css에 관심이 생겨 찾아보고 테스트도 해보면서 참 좋은 라이브러리 같다는 생각이 들었습니다.이제 본격적으로 panda css에 대해서 알아 보겠습니다 !간단하게 사용해보자이제 한번 사용해 볼까요 ??Next js 세팅 공식 문서 참고하면 쉽게 사용할 수 있어요.panda-config.ts 파일을 만들고 이렇게 세..

혹시 이런 프론트엔드 개발자분들 계신가요 ?주변에 프론트엔드 개발자 동료가 없거나 적어서 아쉬워요.프론트엔드 공부를 하는데 혼자 하니까 어려워요.많은 프론트엔드 개발자분들과 네트워킹 해보고 싶어요.개발 블로그를 키우고 싶어요.📚 우당탕탕 도서관 소개우당탕탕 도서관은 프론트엔드 개발자들이 다양한 코드 스타일과 개발 지식을 공유하며 함께 성장하는 공간입니다. 이 커뮤니티는 각자의 경험과 이론을 바탕으로 매주 주제별 글을 작성하고, 이를 통해 심도 있는 학습과 토론을 진행합니다. 참가자들은 서로의 작업을 검토하고, 다양한 시각을 통해 새로운 인사이트를 얻을 수 있습니다.우당탕탕 도서관은 여기서 확인해 볼 수 있어요.🌟 활동 방식참여 개발자들은 매주 공통된 주제를 가지고 포스팅을 작성합니다. 이를 통해 새로..

안녕하세요 ! 오늘은 수익형 웹사이트를 만들어보려고 합니다. 수익이 생기면 혼자 다 먹고 싶은 마음이 있기 때문에 기획, 디자인, 개발, 마케팅 모두 저 혼자서 할 예정이고요. 앞으로 지속적으로 유지보수, 기능 추가를 하면서 서서히 키우고 싶은 욕심도 있습니다. 무엇을 만들지 확인해볼까요 ? 기획 사실 기획이 제일 어렵고 중요한거 같습니다. 회사에서 일을 하면서 계속 느끼는 점은 “개발보다는 기획이 서비스의 성공 여부를 결정한다”였습니다. 그런데 뭔가 엄청난 것을 기획하고 그것을 완성시키려면 너무 힘들어보이더라고요. 특히 사람들이 사용하는 좋은 서비스를 만들고 그것으로 돈을 벌 비지니스 모델을 설계하고 그것을 디자인, 개발하는게 너무 큰 장벽처럼 느껴졌습니다. 그런데 갑자기 이런 생각이 들더라고요. 근데..

원래 밸로그에서 글을 쓰다가 티스토리에서 처음 글을 써보네요. 오늘은 리액트에서의 추상화에 대해서 공부를 해보겠습니다. 추상화란 ? 위키백과에 나온 내용을 보면 추상화(abstraction)는 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념 또는 기능을 간추려 내는 것을 말한다. 라고 하네요. 리액트의 컴포넌트와 훅에서는 어떻게 할 수 있을까요 ? 리액트에서의 추상화 리액트에서 추상화를 할때 이런점들이 고려되어야 합니다. 한가지의 역활 (단일 책임) 재사용성 (도메인에 종속되면 안됩니다.) 변경에 쉽게 대응 변경에는 닫혀있고 추가에는 열림 (개방 폐쇠) 변경에 쉽게 대응인데 변경에는 닫혀있다는 말은 모순인데요 ? 🤔 변경에 쉽게 대응에서의 변경과 개방폐쇠에서의 변경은 다른 의미입니다. 변경에 쉽게 ..

안녕하세요 이번에는 미루고 미뤘던 번들러에 대해서 공부를 해보고 글을 써보려고 합니다. 번들러가 뭘까요 ? "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일부터 시작을 했다. 원래는 무지성으로 컴공으로 편입을 하려고 편입 공부를 하고 있었는데 "내가 코딩이 적성이 맞을까 ? 힘들게 편입했는데 적성 안맞으면 다시 편입해야하는거 아니야 ?" 라는 두려움이 생겨서 멘토형을 만나 처음 코딩을 시작했다. 내가 공부한 방법은 이렇다 초반 멘토형과 얘기를 하고 일주일 동안 만들 작은 프로젝트를 정한다. 일주일 동안 프로젝트에 필요한 기술들을 독학으로 익히고 프로젝트를 만든다. 만든 프로젝트를 코드리뷰를 ..