개발에 AtoZ까지

나는 지금 습관을 형성하는 챌린지 중입니다♥(미션 성공 시 소정의 수수료를 환급 받습니다.)링크 : https://bit.ly/3VJS0X5 MYLIGHTLIGHT MY WAY - 배움이 시작되는 첫 페이지mylight.co.kr 안녕하세요! 저는 일본어 드림팩 Level 1을 통해 12주 동안 일본어를 공부하고 있어요.이번 주는 3주차로, 주제는 "표 파는 곳은 저쪽이에요."였습니다.이번 주 학습의 핵심은 "장소를 나타내는 지시대명사(ここ・そこ・あそこ・どこ)"를 배우고, 실제 대화에서 사용할 수 있도록 연습하는 것이었어요!🏆 학습 내용 & 배운 표현📖 장소를 나타내는 지시대명사 배우기이번 주에는 여기, 거기, 저기, 어디를 나타내는 일본어 표현을 배웠어요.✅ ここ → 여기 (말하는 사람 가까운 곳)..

나는 지금 습관을 형성하는 챌린지 중입니다♥(미션 성공 시 소정의 수수료를 환급 받습니다.)링크 : https://bit.ly/3VJS0X5  안녕하세요! 저는 일본어 드림팩을 통해 12주 동안 일본어를 공부하고 있어요.이번 주는 2Week로, 주제는 "저것은 하나 씨의 노트예요"였어요.사물을 가리키는 지시대명사(これ・それ・あれ・どれ)와 소유를 나타내는 표현(～の)를 배우면서, 실제로 대화에서 활용할 수 있도록 연습했어요!🏆 학습 내용 & 배운 표현📖 지시대명사 배우기이번 주에는 일본어에서 사물을 가리킬 때 사용하는 "これ(이것), それ(그것), あれ(저것), どれ(어느 것)"을 배웠어요.예를 들어, 아래와 같은 문장을 만들 수 있었어요.✅ これは ハナさんの ほん です。 → 이것은 하나 씨의 책이에요..

나는 지금 습관을 형성하는 챌린지 중입니다♥(미션 성공 시 소정의 수수료를 환급 받습니다.)링크 : https://bit.ly/3VJS0X5 MYLIGHTLIGHT MY WAY - 배움이 시작되는 첫 페이지mylight.co.kr  안녕하세요! 저는 일본어 드림팩 Level 1을 시작하여 1주차 공부를 마쳤어요.이번 주의 주제는 "하나 씨는 학생이에요"로, 명사를 활용한 문장 만들기 및 질문/대답하는 표현을 배우는 것이었어요.🏆 학습 내용 & 배운 표현이번 주에는 기본적인 명사 문장과 긍정문/부정문을 익혔어요.특히 "~です" (입니다)와 "~ではありません" (아닙니다)을 활용해 문장을 만드는 연습을 했어요.📖 배운 주요 표현ハナさんは がくせいです。 → 하나 씨는 학생입니다.かいしゃいんです。 → 회사원..

이슈 Error: Text content does not match server-rendered HTML 프로젝트 환경 MonoRepo Next.js 12.3.1 React 18.2.0 M1 Macbook Pro 🔍원인 Next.js의 getServerSideProps를 활용하여 특정 페이지에서 SSR(server-side rendering) 사용했는데 React 트리 간에 차이가 존재하여, React 트리가 DOM과 동기화되지 않아 발생한 이슈였습니다.😭 조금 더 자세히 확인해보면 Next.js는 Pre-rendering이 Default입니다. Pre-rendering이란? 클라이언트측 JS에서 모든 작업을 수행하는 대신 미리 각 페이지에 대한 HTML 파일을 생성합니다. 이렇게 미리 HTML 파일을 ..

문제상황 error - Module not found: Error: Can't resolve 'next-swc-loader' in '파일 디렉토리’ 프로젝트 환경 MonoRepo Next.js 12.3.1 React 18.2.0 M1 Macbook Pro원인 Next.JS는 rust 기반 컴파일러 SWC를 사용하여 컴파일을 하는데 이 컴파일러 SWCsms Babel 보다 최대 17배 빠르고 fast refresh는 최대 5배 빠른 컴파일러 입니다. SWC는 rust(c언어 기반) 기반으로 하고 있기 때문에 시스템과 호환되는 바이너리를 다운로드 받아야 합니다. 다운로드가 실패했거나 아키텍처와의 비호환성으로 인해 로드에 실패할 수 있습니다. 만약 실패시 위와 같은 에러가 발생할 ..

안녕하세요 😀 한동안 웹 최적화에 대해서 관심이 있었는데 그 분야와 연관성이 있는 defer와 async에 대해서 알아보겠습니다. 글은 크게 아래와 같은 소주제로 진행하겠습니다. JS는 언제 다운로드 받을까? defer / async 의 정의와 어떤 차이가 있을까? 각 속성을 적절하게 사용하는 방법은 뭘까? 마무리 JS는 언제 다운로드 받을까? 일전에 브라우저 렌더링 하는 과정에 대해서 공유해 드린 적이 있는데 그 부분에서 HTML이나 CSS에 대해서는 언급이 있었지만, JS에 대한 언급은 없었습니다. 그래서 JS는 언제 다운로드 받고 어떻게 적용되는지 궁금하실 수도 있을거 같아요. 보통 HTML을 다운로드 받고 HTML에서 import 한 JS를 다운로드 받습니다. 그런데 JS는 항상 같은 순서로 다운..

근래에 웹 최적화에 관해 관심을 가지면서 Reflow와 Repaint에 대해서 다시 한번 짚고 넘어가 보려고 합니다. 혹시나 브라우저 렌더링에 대해 상기하고 싶으신 분이 있다면 이전 글을 보고 오시는 것을 추천합니다. 이 글은 아래와 같은 목차로 진행하겠습니다. 1. Reflow가 뭘까? 2. Repaint는 뭘까? 3. 둘의 차이점은 뭘까? 4. 최적화 관점에서 어떻게 해야 할까? 5. 마무리 Reflow가 뭘까? Reflow란 HTML 파일을 불러와 Parsing을 통해 Render Tree를 형성하게 되는데, 어떠한 액션이나 이벤트로 인해 Dom의 크기나 위치 등의 값이 변경되어 Layout 과정을 다시 수행하게 됩니다. 이렇게 다시 수행되는 과정을 통틀어서 Reflow라고 합니다. 말로 하면 감이..

우리가 흔히 알고 있는 chrome, safari, opera 같은 브라우저는 어떻게 렌더링이 되는 걸까?라는 의문에서 시작해서 이 글을 쓰게 됐다. 이 글은 크게 아래와 같은 순서로 진행됩니다. 브라우저란 뭘까? 브라우저의 구조는 어떻게 될까? 브라우저마다 렌더링 엔진은 다를까? 브라우저가 어떻게 렌더링 되는 걸까? 마무리 브라우저란 뭘까? 가끔 이런 경험을 해본 적이 있을 것이다. pdf를 받아서 chrome으로 열기를 누르면 해당 파일이 열린 적이 있을 것이다. 단순히 웹서핑할 때만 브라우저를 이용했던 분은 의아했을 것이다. 하지만 정확히 브라우저의 주요 기능을 알게 되면 왜 브라우저를 통해 pdf 파일을 열수 있는지 이해될 것이다. 브라우저는 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시..