이전다음 < Joyful Development /> 최신 글 CS [네트워크] 모두의 네트워크 : 무선 랜 이해하기 35 무선 랜 구조무선 랜랜 케이블을 사용하지 않고 눈에 보이지 않는 전파를 이용하여 무선으로 컴퓨터를 서로 연결장점케이블을 연결하지 않아 편함케이블이 닿지 않는 곳에도 연결 가능단점유선보다 속도가 불안정전파가 약하면 연결이 안 될 수 있음통신 내용이 해킹될 가능성이 높음구성무선 엑세스 포인트 (Wireless Access Point, WAP)무선 클라이언트 : 컴퓨터 스마트 폰 등컴퓨터가 무선 엑세스 포인트와 통신하려면 무선 랜 칩과 무선 랜 어댑터가 필요최근 나온 컴퓨터에는 대부분 무선 랜 칩을 내장무선 랜 어댑터USB 메모리 방식컴퓨터 카드 방식무선 공유기를 이용해 연결도 가능, 범위가 넓다면 무선 공유기를 여러대 사용해야함무선 랜 연결 방식인프라스트럭처 방식 (infrastructure)무선 엑세.. CS [네트워크] 모두의 네트워크 : 응용 계층 - 애플리케이션에 데이터 전송하기 28 응용 계층의 역할응용 계층의 역할응용 계층은 세션 계층과 표현 계층을 표현하는 것으로 간주클라이언트의 요청을 서버가 이해할 수 있는 데이터로 변환하고 전송 계층으로 전달하는 역할 → 애플리케이션과 데이터를 주고받기 위해 필요클라이언트 측의 애플리케이션이 서버 측 애플리케이션과 통신하려면 응용 계층의 프로토콜이 필요HTTP - 웹 사이트 접속DNS - 이름 해석FTP - 파일 전송SMTP - 메일 송신POP3 - 메일 수신대표적인 프로토콜 29 웹 서버의 구조 (웹 사이트 접속)WWWHTML, URL, HTTP라는 3가지 기술이 사용HTML : 하이퍼텍스트를 작성하는 마크업 언어, 태그 사용하이퍼텍스트로는 문자와 이미지를 표시, 하이퍼링크를 사용할 수 있음HTTP클라이언트는 웹 사이트를 보기 위해 서.. CS [네트워크] 모두의 네트워크 : 전송 계층 - 신뢰할 수 있는 데이터 전송하기 23 전송 계층의 역할전송 계층의 역할목적지에 신뢰할 수 있는 데이터를 전달하기 위해 필요 → 물리 계층, 데이터 링크 계층, 네트워크 계층의 3계층이 있으면 목적지에 데이터를 보낼 수 있지만, 데이터가 손상되거나 유실될 경우의 대비책은 없음오류를 점검하는 기능 (오류가 있을 경우 데이터를 재전송 하도록 요청)전송된 데이터의 목적지가 어떤 애플리케이션인지 식별하는 기능연결형 통신상대편과 확인해가면서 통신 → 신뢰성/정확성TCP 프로토콜 사용 (Transmission Control Protocol : 전송 제어 프로토콜)비연결형 통신상대편을 확인하지 않고 일방적으로 데이터를 전송 → 효율성효율성이 더 중요한 동영상 시청 시 사용 (데이터가 약간 유실되더라도 버벅이지 않고 원할하게 영상을 보는 것이 더 중요.. Joyful 개발 Joyful 개발 [mkcert] localhost에서 https 적용하기 (+ webpack devServer에 설정하는 법) 보안을 위해 현재 개발 중인 프로젝트에서 https를 사용해야만 하는 상황이 생겼다. 기본적으로 개발에 이용하는 localhost 환경에서는 TSL/SSL 인증서가 없어 http를 이용할 수밖에 없지만, 라이브러리를 이용한다면 간단하게 인증서를 발급받아 로컬에서도 https를 사용할 수 있다. mkcert를 이용해 로컬 개발 환경에서 https 통신을 할 수 있는 방법을 알아보자. mkcert 설치와 인증서 발급 (macOS) 1. 터미널을 실행한 뒤 mkcert를 설치한다. brew install mkcert 2. 아래 명령어를 입력하면 로컬 인증 기관(CA)이 생성되고, mkcert로 생성한 로컬 CA는 기기에서 로컬로만 신뢰할 수 있다. mkcert -install 3. 프로젝트의 루트 디렉터리 혹.. Joyful 개발 [AWS] AWS를 이용한 정적 웹페이지 호스팅 및 도메인 연동 방법 (S3 + CloudFront + Route53을 이용한 프론트 프로젝트 배포 방법, 배포 후 403 뜨는 경우 해결 방법) 정적 웹페이지 배포하기 고정된 데이터를 그대로 보여주는 정적 웹페이지(ex. 회사 소개 페이지, 포트폴리오 페이지...)는 AWS를 이용해 간단하게 배포가 가능하다. AWS의 S3와 CloudFront 서비스를 이용해 웹페이지를 배포하고, Route53으로 개인 도메인을 연동하는 방법까지 알아보자! 배포 방법 1. S3 버킷 생성 및 설정 1-1. 우선 AWS 콘솔에 로그인하여 S3 서비스에 접속한 다음 [버킷 만들기] 버튼을 클릭한다. 1-2. 버킷 이름과 AWS 리전을 설정해 준다. AWS 리전은 가까운 곳으로 설정해 주는 것이 좋다. 1-3. 버킷의 퍼블릭 액세스 차단 설정에서 모든 퍼블릭 액세스 차단 체크 박스를 해제해 준다. 우리는 정적 웹 사이트 호스팅을 할 예정이기 때문에 퍼블릭 액세스가 필.. Joyful 개발 2022년 회고 (2년차 주니어 프론트 개발자의 회고) 처음으로 개발자로서 온전한 1년을 보낸 2022년을 기념하기 위해 그리고 지난날을 되돌아보며 셀프 칭찬과 동기부여도 하고, 아쉬웠던 점과 더 노력해야 할 점을 찾아 개선도 할 겸, 2022년 회고를 작성해보려고 한다. 그렇다면 시작! 2022 서비스 개발 2022년 처음으로 맡은 프로젝트는 서비스 전체의 UI 개편 작업이었다. 사실 원래는 UI 개편이 아닌 특정 기능 고도화 프로젝트를 맡을 예정이었지만, 팀 내에 기획자와 디자이너가 없어 개발자가 주도적으로 기획과 개발을 동시에 진행해야 했던 당시 우리 팀 상황을 미루어보았을 때... 아직 입사한 지 얼마 되지 않아 도메인 지식이 깊지 않던 내가, 기능에 대한 이해와 깊은 도메인 지식이 필요한 기능 고도화 프로젝트를 담당하는 것이 걱정되기도 했고, 동시에.. Joyful 디버깅 Joyful 디버깅 [React Router] 리액트 라우터의 URL 파라미터 사용 시 404 오류 해결 방법 (React Router v5, webpack과 함께 사용할 경우 publicPath설정) 문제 상황 상품 리스트 페이지 개발 중, 카테고리번호 별로 다른 상품리스트를 렌더링 하기 위해 리액트 라우터의 URL 파라미터를 사용했는데 같은 방식으로 파라미터를 사용하던 다른 프로젝트에선 볼 수 없었던 아래와 같은 404 오류가 떴다. /categories 까지는 오류 없이 페이지가 잘 나타났지만 /categories 뒤에 '/'와 함께 파라미터를 붙이거나 '/'만 붙여도 해당 오류가 발생했다 해결 방법 이전 프로젝트들에서는 마주친 적 없던 오류였고, 공식문서를 봐도 리액트 라우터의 URL 파라미터 사용법엔 문제가 없었기 때문에 프로젝트 자체의 환경설정 부분이 잘못되었을 확률이 높았다. 관련 키워드로 열심히 검색해본 결과 웹팩에서 사용하는 HtmlWebpackPlugin에 publicPath가 설정되.. Joyful 디버깅 [Heroku] 헤로쿠 배포 시 webpack: not found 에러 해결 방법 (devDependencies와 dependencies) 문제상황 오랜만에 예전 프로젝트들을 확인하던 중, 헤로쿠로 배포해 둔 '북샵' 쇼핑몰 서버가 내려간 것을 발견했다. 어차피 최근 헤로쿠 무료 사용 기간이 종료되어서 서버를 옮기는 작업을 해야 했던 프로젝트라 옮기기 전 문제가 없는지 확인하려 프로젝트를 다시 한번 서버에 올려보던 중이었는데, 이상하게 무료기간과 상관없는 에러인 웹팩을 찾을 수 없다는 'webpack: not found'라는 메시지가 나타났다. 웹팩이 분명히 있는데 없다고요..? 이 전까지는 서버에 잘 올라갔는데... 뭐가 문제일지 알아보자 원인 내 프로젝트의 package.json에는 헤로쿠 서버에 클라이언트 파일을 올리기 전, 클라이언트 빌드 명령어를 아래와 같이 지정해 두었고, "heroku-postbuild": "cd client &.. Joyful 디버깅 [Webpack5] webpack-dev-server 변경 사항 바로 반영되지 않을 때, 개발모드에서 live reloading, Hot Module Replacement, 새로고침 안 될 때. (웹팩 watchOptions) 타입스크립트 공부를 위해 typescript + react + wepack 프로젝트 보일러 플레이팅 작업을 하던 중 평소처럼 설정한 웹팩이 평소와 다르게 동작하는 일이 일어났다. (도대체 왜 🤦🏻♀️) 웹팩 개발 서버에 작업 변경사항이 바로 적용되지 않는다 ? 문제 우리 webpack-dev-server는요... 개발 중 소스 코드의 변경 사항을 바로 적용해주어 변경될 때마다 매번 다시 웹팩 명령어를 실행하지 않아도 알아서 다 해주는! 아주 유용한 도구라죠... 그런데 가장 핵심인 이 기능이 동작하지 않는다. 개발자 도구를 열어보면, 콘솔에 [webpack-dev-server] Hot Module Replacement enabled. [webpack-dev-server] Live Reloading e..