더보기궁금한 점Next.js로 웹 개발을 하고있는데 나는 NGINX를 사용하고 있는걸까...구성을 내가하지않아서 쓰고있는건지 아닌지도 모르겠다.NGINX는 웹 서버라고 알고있지.. 언제 쓰는걸까... 도커로 Next.js를 서버를 실행할 때 꼭 써야하는건가?..1. NGINX란Nginx는 오픈 소스 웹 서버 소프트웨어로, 주로 HTTP 및 리버스 프록시 서버로 사용됩니다. 또한, 이메일 프록시(IMAP, POP3, SMTP)와 로드 밸런서로도 동작할 수 있습니다.  Next.js와 Nginx는 함께 사용하기에 좋은 조합입니다. Nginx는 Next.js 애플리케이션의 프론트엔드 및 백엔드 요청을 효율적으로 처리하고, 성능과 보안을 향상시키는데 도움을 줍니다. Next.js와 Nginx를 통합하는 일반적인..

Next.js는 React를 기반으로 한 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 쉽게 구현할 수 있게 돕습니다. 이 글에서는 Next.js의 주요 동작 원리를 분석하고, Next.js 개발 팀이 설정한 목표와 철학을 탐구합니다.Next.js의 동작 원리App Router와 파일 기반 라우팅Next.js는 App Router를 통해 파일 기반 라우팅의 유연성을 한 단계 발전시켰습니다. app 디렉토리를 기반으로 한 계층적 라우팅 구조는 레이아웃(layout)과 ㅔ이지를 명확히 구분하며, 다음과 같은 특징을 제공합니다.레이아웃 구조: 각 라우트마다 고유한 레이아웃을 정의할 수 있으며, 공통 레이아웃은 상위 디렉토리에서 재사용 가능동적 경로와 중첩 라우트: 동적 경로([id]..

당신이 몰랐던 Heartbeat과 Ping-Pong의 차이현대의 네트워크와 시스템에서는 효율적인 상태 점검과 연결 유지가 필수입니다. 그 과정에서 자주 등장하는 용어가 바로 'Heartbeat'와 'Ping-Pong'입니다.하지만 이 두 가지 개념이 정확히 어떻게 다르고, 언제 사용해야 할까요? 이번 글에서는 Heartbeat와 Ping-Pong의 차이점과 특징을 쉽게 이해할 수 있도록 정리하겠습니다.  Heartbeat란 무엇인가요?Heartbeat은 시스템의 상태를 주기적으로 확인하는 일종의 "생존 신호"입니다.주요 특징단방향 신호: Heartbeat은 특정 시스템이 작동 중임을 다른 시스템에 알리기 위해 단방향으로 전송됩니다.응답이 필수적이지 않음: 수신자는 반드시 응답할 필요가 없으며, 단지 He..

React Native는 Facebook에서 개발한 오픈 소스 프레임워크로, 하나의 코드베이스로 iOS와 Android와 같은 여러 플랫폼에서 네이티브 애플리케이션을 개발할 수 있게 해줍니다. 리액트 네이티브는 리액트 라이브러리를 기반으로 동작하며, "한 번 작성하면 어디서나 실행된다"는 원칙보다는 "한 번 배우면 어디서나 작성할 수 있다"는 철학을 따릅니다. 아래는 리액트 네이티브의 동작 원리에 대한 자세한 설명입니다.  1. 리액트의 기본 원리 활용리액트 네이티브는 React와 동일한 핵심 개념(컴포넌트 기반 아키텍처, 상태 관리, Virtual DOM 등)을 사용합니다.Virtual DOM: 리액트에서 사용하는 Virtual DOM은 실제 DOM과의 차이를 계산한 후 필요한 변경 사항만 반영합니다...

번역: https://react.dev/blog/2024/12/05/react-19 React v19 – ReactThe library for web and native user interfacesreact.dev React 19가 이제 npm에서 stable 버전으로 출시되었습니다!이전에 4월에 공유된 React 19 릴리즈 후보(RC) 이후 다음과 같은 기능이 추가되었습니다. - Suspense 트리 사전 로드(Pre-warming): Suspence 개선 사항을 통해 비동기 데이터 로딩 시 사용자 경험이 향상되었습니다.- React DOM 정적 API: 새로운 정적 API를 도입하여 서버 사이드 렌더링과 정적 사이트 생성이 더욱 효율적으로 개선되었습니다.이 게시물의 날짜는 stable 버전 출시일에..

React Strict Mode란?React Strict Mode는 React가 개발 중에 "내가 작성한 코드에 문제가 없는지 확인"하는 도구이다. React Strice Mode가 하는 일 1. 컴포넌트를 두번 실행해요.엄격모드는 컴포넌트를 두 번 실행해서 문제가 있는지 확인해요(캐릭터가 잘 움직이는지 확인)예를 들어, "내 코드가 너무 느리지 않나?", "실수로 데이터를 잘못 계산하지는 않나?" 같은 걸 찾아줍니다.(비유: 캐릭터가 다른 환경에서도 문제없이 작동하는지 확인)function MyComponent() { console.log("컴포넌트 실행!"); return 안녕!}// 엄격모드에서는 "컴포넌트 실행!"이 두번 출력됩니다. 2. useEffect를 다시 한 번 확인해요useEffe..

Day2🏷️ 오늘 읽은 범위: 시작 ~ 1장, 깨끗한 코드책에서 기억하고 싶은 내용을 써보세요.르블랑의 법칙: 나중은 결코 오지 않는다.보이스카우트 규칙: 캠프장은 처음 왔을 때보다 더 깨끗하게 해놓고 떠나라.한꺼번에 많은 시간과 노력을 투자해 코드를 정리할 필요가 없다. 오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요.제가 짜놓은 나쁜코드 때문에 퇴사한 이후 후임자에게 굉장히 미안해했던 기억이 있습니다. 결국 그 후임자는 코드를 다 갈아엎었다고 하더라구요. 개발할 당시에는 너무 시달리기도 했고 개발일정이 빠듯해 일단 동작은 되니까 다음에 리팩토링하자는 생각으로 넘어간적이 많았는데요. 그러다보니 나중에는 어마어마한 스파게티 소스가 되어버려 어디서부터 손을 대야할지 막막했습니다. 제가 르블랑의 법칙..

저의 성장일기를 시작해보려고 합니다. 저는 5년차 개발자에요. 왜 이제야 성장일기를 시작하는지 의아해 하실 거같아요.1년 8개월은 일본에서 개발자라고 할 수없는 일을 했었지만 IT업계에 종사했다는 이유로 경력을 인정받았어요.그리고 2년 6개월을 프론트앤드 개발자로 중소기업에서 일했어요. 그 회사는 소스코드의 질보다 기능개발이 급급한 회사였기 때문에 어떻게 해야 더 좋은 코드일지 고민해본적이 없었던 거 같아요. 그냥 잘 돌아가면 거기서 끝이었어요. 그런데 이번에 이직한 회사에서는 코드의 질을 굉장히 중요하게 생각해요. 제 사수가 저의 코딩스타일을 별로 안좋아합니다. 처음에는 이해가 안되서 많이 부딪혔어요. 잘 돌아가는데 대체 뭐가 문제라는건지 모르겠더라고요.과장님은 그렇게 개발하면 나중에 알아보기 어렵다...