NYchicken's blog ;

간단하게 요약하자면, 웹서버란 클라이언트로부터 HTTP 요청을 받아들이고, 해당 요청에 따라 웹페이지, 이미지, 문서 등등 정적/동적 컨텐츠를 제공하는 소프트웨어 또는 하드웨어 기반의 서버이다. http 요청이란? 네트워크 장치간 정보를 전송하도록 설계된 통신 규약이다! 웹서버의 주요 역할 1. HTTP 요청 처리 클라이언트로부터오는 HTTP 요청을 수신하고, 이를 처리한다. 2. 정적 컨텐츠 제공 정적인 컨텐츠란 ? HTML 페이지, 이미지, CSS, Javascript 파일 등이다. 정적인 컨텐츠를 클라이언트에 제공하는 것도 웹서버의 역할이다. 이러한 컨텐츠들은 서버측에 미리 생성되고, 저장되어있으며 요청에 따른 변경이 발생하지 않는다. 정적인 파일을 웹서버의 저장소에 업로드하여 클라이언트에 효율적으..

우리가 개발하는 웹 애플리케이션에는 크게 2가지 서버가 존재한다. 프론트엔드 서버, 그리고 백엔드 서버로 구성된다. 프론트엔드 서버라고 부를수 있는 것은 바로 서버 컴포넌트이다. 일단 프론트엔드 서버와 백엔드 서버 각각의 목적과 역할을 정리한다. [프론트엔드 서버] 프론트엔드 서버는 주로 정적이니 파일을 제공하는 역할을 한다. 이때의 정적인 파일이란 HTML, CSS, Javascript 등이 있다. 이 서버는 웹 페이지의 초기 렌더링을 처리하며, 사용자 브라우저로 정적 리소스를 제공한다. 주요 역할은 클라이언트 측 렌더링을 가능하게 하는 것이며, 초기 페이지 로딩을 하기 위해 필요한 HTML 및 정적 리소스를 제공하는 것이다. 프론트엔드 서버는 주로 웹서버 소프트웨어인 Apache와 Nginx 등을 사..

오랫동안 미뤄뒀던 프로젝트를 시작하려고한다. 사용할 기술 스택을 정리하는데 Next.js 13 이 beta에서 stable 이 되어 해당 버전을 사용하기로 했다! Nextjs12 버전과는 차이가 있기 때문에 이부분을 한번 정리하고 넘어가려고 한다. 💡 Next.js 는 리액트 문법을 사용하는 프론트 + 백엔드 프레임 워크이다. 1. /pages 폴더 삭제 /app 폴더 신규 생성 예약된 폴더명을 통해 주로 사용되는 기능 추가 가능 [이전] 기존 /pages 폴더 내부에 원하는 경로명으로 폴더를 생성해 페이지를 생성 (각각의 파일이 개별적인 경로가 되었었음) [현재] page.tsx 파일이 url을 나타내도록 변경되었음 /app 하위에 page.tsx 로 지어진 파일만 경로로 인식되어 접근 가능함 이전에는..

TCP (Transmission Control Protocol) 인터넷 초기의 데이터 교환 방식에는 신뢰성이 없었다. 이때 컴퓨터 간의 신뢰할 수 있는 정보 교환을 보장하는 전송 제어 프로토콜 (TCP) 가 개발되었다. 컴퓨터가 TCP 로 다른 기계(컴퓨터) 에 메시지를 보낼때 메시지는 목적지 주소와 함께 작은 데이터 조각(블럭)으로 쪼개지게 된다. 이것을 데이터 패킷 packet 이라고 한다. 전체 메시지를 최종 목적지에 보내는 것이 아니라, 데이터를 패킷으로 나눈 뒤 순서 번호를 부여한 후 전송한다. 수신 시스템이 패킷을 받으면 프로토콜은 각 패킷의 순서 번호에 따라 순서대로 조립하게 된다. 수신자가 패킷을 받을 때마다 수신을 보낸다. 수신자가 패킷의 수신을 거부/승인하지 않은 경우 송신자는 다른 네..

재밌는 api 를 찾았다. 무료로 이용가능하고, 인증키도 따로 필요없는 포켓몬스터 api! 이건 못참지 ^v^ 냅다 시작해버렸다. https://www.notion.so/3645dafa6f2c408c93860c2c96025a70 나만의 포켓몬 도감 쉬는 기간 최대한 귀여운 페이지에 최대한 많은 기능을 때려박은 페이지를 만들고자 시작했다! www.notion.so 일단 필요한 부분(기획/설계) 는 노션에 정리하고자 한다. https://github.com/mirro97/playground-w-ts-react-vite GitHub - mirro97/playground-w-ts-react-vite Contribute to mirro97/playground-w-ts-react-vite development by..

회사에서 firebase 로 간단한 작업을 하다가 발견한 이슈이다. 동적 라우팅을 한 페이지에서 새로고침을 하면 홈화면으로 가는 이슈... 정말 세상에 진심으로 기겁할 뻔 했다. 이전 포스팅(https://nychicken.tistory.com/23) 에서 설정한걸로 끝난건줄 알았는데 전혀 아니었던 것! https://github.com/firebase/firebase-js-sdk/discussions/4980 NextJS Dynamic Routing with Firebase · Discussion #4980 · firebase/firebase-js-sdk Edit: Consider reading this comment first: #4980 (reply in thread) Hi, I just have ..

페이지 테스트하느라 배포하고 경로 직접 접속했더니 뜨는 페이지. 분명 local 에서는 문제 없었는데.... 기록용으로 간단하게 해결방법 남긴다! 🔥 이거면 끝! 루트 경로에 firebase.json 파일로 가서, "hosting" 안에 "rewrites" 이 부분을 추가하자. 배포하게 되면 이 경로를 읽고 404 페이지는 안뜨게 된다. { "hosting": { "public": "out", "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } 해결 완료. 다시 개발하러.. 🧨 세상에;;; 새로고침했는데 자꾸 홈 화면이 뜬다??..

Library 란? 사용자가 파일 이름이나 구조등을 정하고, 모든 결정을 내린다. 공통으로 사용될 만한 유용한 기능을 모듈화해서 제공하는 것이다. 코드의 자율성이 높지만, 다른 개발자와 협업시 이 자율성이 문제가 될 수도 있어 반드시 협의가 필요하다. -> React.js Framework 란? 파일 이름이나 구조등 정해진 규칙에 따라 만든다. 기능뿐만 아니라 프로그래밍 방식도 규칙으로 제한해, 개발의 생산성을 높이고, 유지보수를 편하게 도와준다. 자율성은 낮지만, 다른 개발자들과 협업시 유지보수 및 개발 방식 통일이 용이해진다. -> Next.js, Vue.js, Nuxt.js create react-app 을 사용하게되면 App Component 로 시작하게 된다. 우리는 이때 Components 폴..

📌 _app.js 파일을 만들자. 무조건 저 이름이어야한다. _app 은 서버로 요청이 들어왔을 떄 가장 먼저 실행되는 컴포넌트이다. 페이지에 적용할 공통 레이아웃의 역할을 한다. import '../styles/globals.css' function MyApp({ Component, pageProps }) { return } export default MyApp 여기서 Component 속성값은 서버에 요청한 컴포넌트들이다. import "../styles/globals.css"; import NavBar from "../components/NavBar"; function MyApp({ Component, pageProps }) { return ( // 공통 Navigation 설정 ); } expor..

Next.js 에서는 특별한 방법으로 css 를 사용할 수 있다. 바로 Module. 🍎 CSS Module 파일 만들기 원하는 위치로 가서 모듈을 만들자. 이름.module.css 그리고 이 모듈을 사용할 곳으로 가자. 🍎 CSS Module 연결하기 사용해줄 파일에 module css 파일을 import 해온다. 그리고 쓴다! import Link from "next/link"; import { useRouter } from "next/router"; // css 모듈 사용하기 import styles from "./NavBar.module.css"; export default function NavBar() { return ( // 이렇게 중괄호 안에 자바스크립트 객체의 포로퍼티 형식으로 작성한다...