최신 글
-
Joyful 개발
Tailwind vs styled-components, 무엇을 선택해야 할까?
Tailwind vs styled-components, 어떤 것을 선택해야 할까? 프론트엔드 개발자라면 누구나 한 번쯤 이런 고민을 해봤을 것이다.“이번 프로젝트엔 Tailwind가 나을까, styled-components가 나을까?” 나 역시 예외는 아니었다.styled-components로 개발을 이어오던 중, 지난 회사에서 새로운 프로젝트를 시작하게 되었다.그 시점에 Tailwind는 이미 많은 팀이 사용하고 있는 기술 스택이었고, 나 또한 직접 사용해보며 어떤 점이 그렇게 편리한지, 왜 그렇게 선호되는지 경험해보고 싶었다. 그래서 새로운 프로젝트에 Tailwind를 도입했지만, 프로젝트의 특성상 상태 변화가 잦고 동적인 UI가 많은 구조였던 탓에 Tailwind로 상태별 스타일을 제어하는 과정은 ..
-
CS
[네트워크] 모두의 네트워크 : 무선 랜 이해하기
35 무선 랜 구조무선 랜랜 케이블을 사용하지 않고 눈에 보이지 않는 전파를 이용하여 무선으로 컴퓨터를 서로 연결장점케이블을 연결하지 않아 편함케이블이 닿지 않는 곳에도 연결 가능단점유선보다 속도가 불안정전파가 약하면 연결이 안 될 수 있음통신 내용이 해킹될 가능성이 높음구성무선 엑세스 포인트 (Wireless Access Point, WAP)무선 클라이언트 : 컴퓨터 스마트 폰 등컴퓨터가 무선 엑세스 포인트와 통신하려면 무선 랜 칩과 무선 랜 어댑터가 필요최근 나온 컴퓨터에는 대부분 무선 랜 칩을 내장무선 랜 어댑터USB 메모리 방식컴퓨터 카드 방식무선 공유기를 이용해 연결도 가능, 범위가 넓다면 무선 공유기를 여러대 사용해야함무선 랜 연결 방식인프라스트럭처 방식 (infrastructure)무선 엑세..
-
CS
[네트워크] 모두의 네트워크 : 응용 계층 - 애플리케이션에 데이터 전송하기
28 응용 계층의 역할응용 계층의 역할응용 계층은 세션 계층과 표현 계층을 표현하는 것으로 간주클라이언트의 요청을 서버가 이해할 수 있는 데이터로 변환하고 전송 계층으로 전달하는 역할 → 애플리케이션과 데이터를 주고받기 위해 필요클라이언트 측의 애플리케이션이 서버 측 애플리케이션과 통신하려면 응용 계층의 프로토콜이 필요HTTP - 웹 사이트 접속DNS - 이름 해석FTP - 파일 전송SMTP - 메일 송신POP3 - 메일 수신대표적인 프로토콜 29 웹 서버의 구조 (웹 사이트 접속)WWWHTML, URL, HTTP라는 3가지 기술이 사용HTML : 하이퍼텍스트를 작성하는 마크업 언어, 태그 사용하이퍼텍스트로는 문자와 이미지를 표시, 하이퍼링크를 사용할 수 있음HTTP클라이언트는 웹 사이트를 보기 위해 서..
Joyful 개발
-
Joyful 개발
Tailwind vs styled-components, 무엇을 선택해야 할까?
Tailwind vs styled-components, 어떤 것을 선택해야 할까? 프론트엔드 개발자라면 누구나 한 번쯤 이런 고민을 해봤을 것이다.“이번 프로젝트엔 Tailwind가 나을까, styled-components가 나을까?” 나 역시 예외는 아니었다.styled-components로 개발을 이어오던 중, 지난 회사에서 새로운 프로젝트를 시작하게 되었다.그 시점에 Tailwind는 이미 많은 팀이 사용하고 있는 기술 스택이었고, 나 또한 직접 사용해보며 어떤 점이 그렇게 편리한지, 왜 그렇게 선호되는지 경험해보고 싶었다. 그래서 새로운 프로젝트에 Tailwind를 도입했지만, 프로젝트의 특성상 상태 변화가 잦고 동적인 UI가 많은 구조였던 탓에 Tailwind로 상태별 스타일을 제어하는 과정은 ..
-
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 디버깅
-
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..
