컴알못의 슬기로운 온라인 생활

LG 그램 드라이버 업데이트 : 화면 깜빡거림 증상 해결

행복군자 — Mon, 20 May 2024 19:28:48 +0900

오랜된 LG 그램 노트북을 사용하다 보니 어느날 회면이 깜빡거리는 증상을 발견하게 되었습니다. 특히 전체 화면이 아닌 엣지나 크롬을 사용할 때 그런 현상이 발생하더군요.

이를 해결하기 위해 다양한 솔루션을 찾아보고 그 방법중에 하나인 노트북을 구성하는 부속품에 대한 최신 드라이버 업데이트를 통하여 해결하는 방법을 공유하고자 합니다.

1. 화면 깜빡거림의 원인

원인을 추정해 보면 깜빡거린다는 것은 상시적으로 노트북에 들어오는 전력이 불안정하다고 추정할 수 있습니다. 불안정한 전력이라는 것은 해당 전력을 수용하는 기계(하드웨어)의 불량을 추정할 수 있고 하드웨어가 이상이 없다면 소프트웨어를 움직이는 운영파일인 드라이버가 업데이트 되지 않았기 때문입니다.

하드웨어의 문제인 경우 서비스를 받는게 가장 효율적인 방법이며 소프트웨어의 드라이버는 해당 제품회사에서 최신버전으로 설치해 주면 됩니다.

오늘은 소프트웨어 업데이트 관련 내용을 먼저 진행해 보고자 합니다.

(LG 그램을 기준으로 업데이트 해 본 내용이나 대부분의 PC의 업데이트 방법과 같다고 보면 됩니다.)

2. 최신 드라이버 상태 확인 및 설치

장치관리자에서 각 부품에 대한 최신 드라이버를 확인하고 설치할 수 있으나 가장 손쉽게 학인할 수 있는 소프트웨어를 소개하고자 합니다.

구글에서 '3dp chip'으로 검색하여 최신 버전을 다운로드하여 전체적으로 구성된 드라이버의 최신여부를 확인할 수 있습니다.

다운로드하고 실행을 하면 다음과 같이 어느 부분이 업데이트가 필요한 지 확인할 수 있습니다.

위 그림을 보면 노란 경고표시가 되어 있는게 보일겁니다. 그래픽카드와 멀티미디어에서 최신 버전 드라이버 업데이트가 필요하다고 하네요. 사실 이 글을 쓰기 전 확인하여 메인보드도 업데이트가 필요하다고 되어 있었는데 이미 설치를 해서 2개만 떠 있는 상황입니다.

해당 항목을 클릭하면 자동으로 해당 제품의 최신 드라이버를 찾아줍니다. 그래픽카드를 예로 클릭해 보죠

최신 드라이버를 다운로드 받을 수 있으며 설치할 수 있습니다. 참고로 3dp-chip에서 노란 경고등이 뜬 것은 노트북에 설치된 날짜가 2017년이었고 업데이트 필요 날짜는 2023년으로 나와 있기때문입니다. 하지만 설치를 해 보면 최신버전으로 나오는 경우도 있는데 이는 드라이버 내용은 변하지 않고 설치된 날짜와 배포된 날짜의 차이로 노란 경고등이 뜨는 이유이기도 합니다.

하지만 일단 노란 경고등이 뜨면 최신 드라이버 설치를 시도하는게 제일 낫겠죠.

3. 최종 확인 (LG 그램용 드라이버 확인 필요)

3dp-chip으로 웬만한 드라이버는 전부 설치 할 수 있습니다. 추가로 현재 사용하고 있는 노트북이 LG 그램이기에 인텔제품에서 좀 더 업데이트가 필요할 수 있습니다.

컴퓨터 시스템에서는 확인할 수 없습니다. 전부 최신 버전이라고 나오기 때문인데 좀 더 구체적으로 확인할 필요가 있습니다. 다음 링크에서 확인할 수 있습니다.

Intel® Driver & Support Assistant

This application provides driver and software updates for your Intel hardware.

www.intel.com

이 곳을 방문하면 인텔 제품에 한하여 자동으로 내 컴퓨터를 스캔하여 필요 드라이버를 최신으로 업데이트 하고 설치해 줍니다. 만일 자동 스캔이 되지 않으면 스캔하는 파일을 직접 다운로드 할 수 있습니다.

3dp-chip에서 나오지 않은 Dual Band의 Bluetooth 드라이버와 무선 Wi-Fi 드라이버를 찾아내어 설치해 주었습니다.

이제는 드라이버가 업데이트 안되어 발생되는 문제는 해결이 되었습니다.

일단사일표음 (一簞食一瓢飮) : 바구니 밥과 표주박 물로 행복을 느끼다

행복군자 — Mon, 13 May 2024 12:26:06 +0900

일단사일표음에서 일을 빼고 '단사표음'이라는 사자성어가 많이 사용됩니다. 여기서 단(簞)은 대나무로 만든 바가지 그릇을 말하고 표(瓢)는 표주박같이 작은 바가지를 뜻합니다.

즉, 바구니 밥과 표주박에 물을 떠서 먹는 가난한 상황을 일컫는데 공자의 제자 안회가 이런 생활을 했다고 합니다.

물론, 당시 안회의 능력과 자질은 충분히 호의호식을 할 수 있을만큼 출중했다고 하고 공자도 이런 안회의 능력을 인정하였다고 합니다. 안회는 외형적으로 부가 행복을 가져다 줄 수 없다고 판단하고 진정한 행복은 자신이 정진하고 있는 공부와 그에 대한 실천에서 온다고 믿은 듯 합니다. 물질적인 측면에서 가난한 마을에서 먹는 단사표음을 하는 것은 아무런 영향을 끼치지 않고 오히려 그렇게라도 먹을 수 있다는 현실에 감사함을 느끼면서 산 것 같습니다.

신정근 교수님의 일단사일표음의 해석은 오늘날 현실에 맞게 '라면을 먹고 맹물을 마실지언정'으로 해석합니다.

많은 생각을 하게 하는 문장인 듯 합니다.

지금 현실이 힘들때

물질적으로 풍요로운 사람들이 정말 행복할까라는 의문점이 생기기도 합니다.

물론, 내 자신이 성인이 되지 못한 미생이기에

물질에 대한 욕망은 지울 수 없지만

한걸음 한걸음 마음의 행복을 찾는 훈련이 필요하겠네요..

귀가 열리는 이순(耳順)을 바라보는 나이에도 마음의 행복을 찾지 못하고 있는 내 모습이 부끄럽기 한이 없습니다.

글을 쓸 수가 없네요

행복군자 — Mon, 29 Apr 2024 12:42:24 +0900

고통은 삶의 본질이라고 했는데
모든 면에서 힘이 드는 시기가 또 한번 찾아왔습니다.

그래도 힘내보고자 여러 사람을 만나고 스스로 나의 목적함수를 찾는 여정을 갑니다.

글도 마음이 안정되고 해야 써지는 것을 이제 알았습니다.

다시한번 본 블로그를 운영하는 모티베이션을 기대해 봅니다.

[React 기초] 끝말잇기 게임 React로 만들기

행복군자 — Mon, 22 Jan 2024 19:30:15 +0900

바로 지난시간 끝말잇기 게임에 대한 자바스크립트로 과거 공부한 것을 복습해 보았습니다. 이제 이 부분을 React Hooks로 만들어 볼 차례입니다. 지금 참고하고 있는 강좌에서는 좀 더 간단한 예제로 진행을 해서 스스로 만들어 본 자바스크립트를 React로 적용하는 과정에서 많은 시행착오를 겪었내요. 시행착오를 다시 겪지 않기위해 이 곳에 정리해 봅니다.

▒ React 끝말잇기 게임

1. 함수 콤포너트 변수 설정

초보자로서 React를 한다는 것은 어떤 변수가 사용될지에 90%이상 성공확률이 있다고 볼 수 있습니다. 자바스크립트에 사용되었던 변수가 그대로 변수로 된다면 더할 나위 없겠지만 그렇지가 않다는 겁니다.

지난번 자바스크립트로 만든 결과물은 아래와 같았습니다.

위 그림을 기준으로 고민을 해 보면

각각의 숫자는 <div>태그와 <input>태그 <button>태그가 반영이 되는 곳으로 React의 render( ) 함수내에 적용될 그림입니다. 총 7개의 영역으로 나뉩니다.

이제 React에서 사용될 변수를 확인해야 하는데 변수로 잡는다는 것은 state를 확인하는 과정입니다. state는 어떠한 반응에 의해 변하는 상태를 말하는데 위 그림에서 주황색 사각형이 변하는 state입니다. 따라서 총 5개의 변수가 필요합니다.

참고로 그림에서 표현되는 CSS는 나중에 적용되어도 되기때문에 여기서는 다루지 않겠습니다.

2. HTML 영역 : 7개의 <div>영역내 5개의 state 변수 적용

render( ) 함수내 HTML 영역을 설계해야 합니다. 이 곳은 최종적으로 id가 root인 최초 <div>태그에 그려지는 곳으로 외부 함수로 사용될 부분도 이곳에서 설정합니다.

상기 코드에서 변수로 설정된 내용 5개가 전부 반영이 되었는데 word 대신 lastWordColor( )라는 함수가 객체로 변수 자리에 반영이 되었습니다. 이는 끝말에 다른 색을 표시하기 위한 함수로 만일 색을 지정하지 않았다면 기존의 변수인 word가 사용되었을 겁니다.

각각의 함수에 대해 이야기 나눠 보죠.

3. addEventLisner와 같은 반응형 함수 작성

자바스크립트에서는 input을 할때 value의 변화가 있었고 이에 따른 button에서 onClick함수를 통해 반응형 콜백함수(addEventListner)를 사용하였는데 지금 만들고 있는 React에서 함수로 처리하면 됩니다.

① <form>태그에 반영 함수

<form> 태그 안에는 <input>태그와 <button>태그를 지정해 봅니다. 먼저 <input>태그는 직접 단어를 입력하는 곳으로 e.target.value가 사용되는 곳이죠.

set변수명을 사용하는 것은 알고 있겠죠.

보통 입력하고 결과를 확인하는 경우 button에서 클릭하는데 엔터키를 사용해도 되는 함수를 다음과 같이 만들어 줍니다. 이는 입력한 단어를 form에서 제출(submit)할때 같이 연동 시킵니다.

이제 <form>태그에 submit할때 사용하는 함수를 작성하는데 이 곳이 결국 main이겠죠. 모든 프로그램이 반영이 되는 곳이니까요.

다른 부분은 이해가 될 것으로 보고 단어 끝 색깔을 바꾸는 함수를 lastWordColor( )로 반영을 하였고 순서가 바뀌는 함수를 updateOrder( ) 함수로 반영을 하였습니다.

② last WordColor( ) 함수

이는 기존에 설명한 것 처럼 두글자 단어의 끝 색깔에 변화를 주는 함수입니다. slice( ) 함수로 맨 끝단어를 선택하고 자바스크립트의 css 반영 툴을 이용해서 다음과 같이 만듭니다.

이는 자바스크립트에서 JSX문법으로 가는 과정인데 JS에서 innerHTML 삽입하는 일반적인 문구를 함수안에서 return시킬때 사용하는 dangerouslySetInnerHTML을 사용하였습니다.

③ updateOrder( ) 함수

순서를 바꾸어주는 함수입니다.

기준이 되는 것은 order변수에 최초 시작을 '1'로 반영을 하고 나머지 수를 구한 값에 순서를 늘려가는 과정입니다. 즉, 다시 참가자수를 넘게 되면 1로 돌아오는 구조이지요.

물론 지금 적용한 함수들은 생각해 볼 내용이 많고 공부해야 할 부분도 많습니다. 이러한 원리를 이해하는데도 많은 시간과 노력이 필요하구요.

4. 전체 코드

이제 전체코드를 공유하도록 하겠습니다.

[React 기초] 끝말잇기 게임 (JS복습) : 클릭하면 게임이 시작됩니다!

행복군자 — Mon, 15 Jan 2024 19:30:09 +0900

이 페이지를 실행하면 참가인원수 입력하는 창이 뜹니다. 참고하세요~

두번째 React를 공부하기 위해서 지난시간 구구단 게임이후 과거 끝말잇기를 자바스크립트로 공부하였습니다. 강좌의 내용을 그대로 베껴가면서 공부하였는데 이는 거의 암기과목처럼 해서 머리에 거의 남지 않은 상태가 되었네요. 결국 React 또한 자바스크립트가 기본이 되어야 하기때문에 복습하고 자신의 것으로 만들어야 합니다.

이번 시간에는 과거 공부한 끝말잇기 게임에 대한 자바스크립트를 간단히 복습하고 넘어가야 할 것으로 보여집니다.

1. 끝말잇기 구조

하나의 프로그램을 만들기 위하여 과거 순서도를 만들어 진행을 한 기억이 있습니다만, 순서도 그리는데 집중했지 하나하나 어떤 코드가 필요한지는 잘 몰랐던 것 같습니다. 그렇다고 초보자들이 머리속으로 코드의 흐름을 그린다는 것은 불가능 하기때문에 필요한 코드를 유추하기 위해서 자신만의 순서도 개념이 필요합니다.

끝말잇기란 첫단어를 입력하고 첫단어의 끝에 맞춰서 다른 단어 입력하는게임입니다.

상기 사항이 가장 Main이 되며 나머지는 부수적으로 꾸며준다고 보면 됩니다. 각각을 보면서 어떤 코드가 필요한지 유출할 수 있습니다.

2. 각 단계별 필요 코드 유추

<HTML>

기본적인 뼈대가 되는 작업입니다.

여기서 필요한 코드는 몇개의 <div>태그로 나눌것인가 입니다. 제목, 순서, 입력, 결과 등 개인별 설계에 맞추어 HTML 파일을 만들어 줍니다.

깊이 다시 공부하고자 하는 분은 자바스크립트 강좌를 참조헤 주시기 바랍니다. 여기는 복습의 단계이니까요...

<CSS>

스타일 태그는 자바스크립트 코드를 완성하는 후에 작업을 해도 무방합니다. 단지 약간의 테크닉 등이 필요한데 이는 지속적으로 공부를 해 나가면서 know-how를 키워나가야 합니다.

<javaScript>

프로그램이 돌아가기 위한 가장 key가 되는 작업이기도 합니다. 서두에서 이야기 하였듯이 첫번째 단어가 입력이 되면 그 단어에 맞추어 두번째 단어가 이어지고 하는 이런 방식의 게임입니다.

그러기 위해서는 순서대로 고민해 보아야 할 것은 다음과 같을겁니다.

① 게임참가 인원

아직 컴퓨터와 직접 할 수 있는 프로그램 능력이 안되기에 참가할 인원을 정하면서 하는 방식으로 진행합니다. 이는 prompt( ) 함수를 이용하면 가능합니다. 참가자수를 정한다는 것은 지금 몇번째 참가자가 게임을 하는지 연결하기 위함입니다.

② 첫단어를 입력하는 코드

첫단어의 뜻은 input창에 아무것도 쓰여있지 않은 상태를 말합니다. 단어를 나타내는 변수를 설정하여 단어가 없다면이라는 if문으로 처리합니다. 첫단어가 확실하면 그때 입력하는 새로운 단어가 곧 단어를 뜻하는 변수로 바뀌고 input창은 다시 빈칸으로 만드는 과정이며, 첫단어가 아닌경우는 바로 두번째 단어라는 개념으로 출발하면 될 듯 합니다.

여기서 추가할 점은 여러가지 상황이 있으니 한글로만 한정을 하고 거기에 두글자인 단어로 한정하는 추가적인 게임방식을 고민할 수 있을겁니다. 이는 다음과 같은 정규표현식을 통해 정릐할 수 있습니다.

cosnt 변수명 = /^[가-힣]{2}$/

입력한다는 것은 input창에 입력하고 버튼을 통해 반응을 시키는 작업입니다.

항상 다음과 같은 구조를 염두에 두어야 합니다.

input하기 위한 콜백함수

클릭하기 위한 콜백함수 구조

③ 첫단어의 끝에 맞춰서 다른 단어 입력

단어의 끝을 나타낼 수 있는 것과 그 다음 단어의 첫글자가 같다라는 개념으로 진행하면 되고 그렇지 않으면 경고창을 뛰웁니다.

④ 결과창

단어가 맞다면 결과창에 '정답'같은 표시를 나타내게 만들면 됩니다. 물론 이 게임은 국어사전 서버에 연결시켜 하는 게임이 아니기에 약간의 필요 경고문 또는 안내문을 곁들인다면 그나마 프로그램으로 보일 수 있을 겁니다.

⑤ 꾸미기

배경색을 어떻게 할지 각각 나타낼 수 있는 CSS효과를 고려하면서 진행하고 추가로 만들어지는 내용들은 자바스크립트에서 innerHTML을 사용할 수 있기에 다양하게 꾸밀 수 있을 것으로 보여지네요.

3. 자바스크립트 코드

다음은 전체 자바스크립트 코드입니다. 상기 내역을 고민해서 새롭게 업데이트 해 보았습니다.

4. 실행결과

다음 실행결과를 참조하기 바랍니다.

[React 기초] Webpack 설치 및 실행 : 9탄 - Hot Reloading

행복군자 — Fri, 12 Jan 2024 19:30:19 +0900

지난 시간 5탄에서 자체 서버를 설정하여 웹팩 실행결과(build)를 볼 수 있는 환경설정에 대해 알아 본적이 있습니다.

2023.12.31 - [컴퓨터 알아가기/React] - [React 기초] Webpack 설치 및 실행 : 5탄 - 웹팩 개발 서버 (devServer) 설치

[React 기초] Webpack 설치 및 실행 : 5탄 - 웹팩 개발 서버 (devServer) 설치

웹팩과 관련하여 시리즈별로 나누어서 진행을 하고 있는데 보통 개발자가 아닌 초보자들은 한번 따라해도 금방 잊어버리기 일수입니다. 따라서 차근 차근 자기것으로 만들지 않는 한 그냥 모래

happygunja.tistory.com

그런데 이 개발서버는 쉽게 말해서 코드가 수정이 되면 바로 새로고침이 되어 결과를 볼 수 있는 장점이 있지만 단계별로 수정되는 프로그램에서는 새로고침후 수정이 필요할 시 처음부터 전부 수정을 해야하는 번거로움이 있습니다.

이런 경우 좀 더 효율적인 작업이 될 수 있게 웹 브라우저에 반영되는 메모리에 보내서 결과를 바로 바로 확인할 수 있으면서도 작업해 왔던 코드를 처음부터 수정하지 않아도 되는 기능을 React에서 Hot Reloading이라는 표현을 사용합니다.

금일은 Hot Reloading 설정에 대해 공부하고 개발서버(devServer)에도 추가 설정을 하도록 하겠습니다.

이 분야는 제로초 TV의 강좌를 기본으로 공부 하였으나 내용이 오래되고 내 컴퓨터 환경에 안맞는 경우는 좀 더 고민해서 만들어 보았습니다. .

▒ React Hot Reloading 설정

1. 프로그램 설치

다음과 같이 필요한 플러그인을 설치합니다.

2. 명령어 설정

package.json에서 refresh를 시킬수 있는 명령어를 등록합니다.

build 명령어를 사용하고 있으니 다른 명령어를 하나 더 등록해 봅니다.

3. 플러그인 설정

webpack.config.js에서 플로그인을 설정해 줍니다.

우선 맨 상단에 require( )시키고 설정이 필요하겠지요. require( ) 안에는 미리 설치했던 플러그인을 불러오면서 그에 맞는 적당한 변수이름으로 하면 됩니다.

그 후 plugins에 반영합니다.

4. Module내 plugin 설정

Module내에 rules에서 presets 밑에 plugin을 하나 반영한 곳이 있습니다. 이 곳에 react-refresh를 설정합니다.

5. 개발서버(devServer) 설정

기존에 이미 개발서버는 설정 하였으나 Hot Reloading을 위해 추가로 다음과 같이 설정합니다.

이제 설정이 끝났습니다.

이제 실행해 보도록 하겠습니다.

다음과 같이 localhost가 나옵니다. 여기를 클릭(Ctrl + 클릭)이나 브라우저에 주소를 붙혀서 할 수 있습니다.

브라우저를 보면 작동이 잘 됩니다.

Hot Reloading을 시험해 보기 위해 일부 코드를 수정해 봅니다. 다음과 같이 곱하기 대신 더하기로 기입했더니 바로 devServer에서 내용이 변합니다.

[React 기초] Webpack 설치 및 실행 : 8탄 - Babel preset-env 환경 설정

행복군자 — Thu, 11 Jan 2024 19:30:27 +0900

지금까지 공부해 온 웹팩으로 기본적인 설치 및 실행은 가능합니다만 가능한 다양한 소스를 통하여 설정하는 법을 정리해 놓으면 향후 발생될 수 있는 에러에 대한 대처능력도 향상될 수 있다고 봅니다. 오늘은 일반 자바스크립트가 아닌 React에서 사용되는 Babel에 대한 플러그인 설정을 확인할 예정입니다.

이런 설정들을 한번 해 놓으면 향후 사용하는 프로그램에 복사하여 좀 더 쉽게 사용할 수 있을겁니다. 이 내용은 제로초 TV의 React강좌를 기본으로 현 시점 현 환경에 맞게 공부하면서 정리한 내용입니다.

▒ Babel / preset-env 설정

1. Babel / preset-env 란

React내 JSX문서를 읽을 수 있는 환경설정을 해주는 역할이 Babel인데 웹에서 표시되는 결과물이 크롬이나 익스플로러 등 다양한 브라우저들에 대한 호환설정을 해 주는 곳입니다.

2. 환경설정

webpaack.config.js에서 module안에 기존에 설정된 preset/env에서browser를 추가해 줍니다.

상기 코드에 뜻은 한국에서 사용되는 브라우저 상위 5%이상에서 호환되는 설정입니다.

이제 build를 해보면 Terminal 창에서 다음과 같이 한국에서 사용되는 브라우저 상위 5%를 확인할 수 있습니다.

참고로 ios는 애플기기, samsung은 삼성기기를 나타냅니다.

[React 기초] 구구단게임 웹팩으로 실행하기

행복군자 — Wed, 10 Jan 2024 14:05:44 +0900

현재까지 이론적으로 공부해 본 웹팩과 관련하여 실제 예제를 가지고 웹팩을 만들고 실행을 해 보도록 하겠습니다. 구구단게임을 기준으로 만들어 보는게 좋을 듯 합니다.

제로초TV와 코딩앙마 강좌를 혼합하면서 공부한 내역을 바탕으로 만들어 보고 에러가 있을 경우 여러가지 루트로 찾아 수정하는 방식을 갖도록 하겠습니다.

1. React 구구단 게임

React 구구단 게임은 다음과 같이 함수 콤포넌트를 사용하는 Hooks 위주로 만들어 보았습니다. CSS까지 적용한 내용은 필요시 이전글을 참조 바랍니다.

2023.12.25 - [컴퓨터 알아가기/React] - [React 기초] React 간단 예제 - 구구단 게임 : React Hooks

[React 기초] React 간단 예제 - 구구단 게임 : React Hooks

구구단 게임은 임의의 랜덤한 두개의 숫자가 화면에 보이면 답을 입력하여 정답 또는 오답을 나타내는 간단한 웹게임입니다. 지난 시간 자바스크립트로 구성을 복습 하였기에 이제 본 목적인 Re

happygunja.tistory.com

2023.12.26 - [컴퓨터 알아가기/React] - [React 기초] React 간단 예제 - 구구단 게임 : Hooks 및 CSS 적용

[React 기초] React 간단 예제 - 구구단 게임 : Hooks 및 CSS 적용

지난시간까지 만들어 본 구구단 게임관련 CSS를 적용하여 좀 더 시각적으로 만들어 보는 연습을 해 보겠습니다. 아직까지는 HTML 구문에서 React를 사용하기 때문에 태그를 이용하여 만들 수 있습

happygunja.tistory.com

2. Webpack의 각 폴더 구조

지금까지 공부해 온 웹팩 설정 및 실행 폴더를 기준으로 구구단 웹팩을 샐행해 봅니다. 구구단 React 소스 코드가 반영된 곳은 src 폴더에 gugudan.jsx 파일입니다.

참고로 웹팩에서 외부에 배포하는 파일은 dist 폴더안에 있는 3개의 파일만 배포하면 됩니다.

일단 구조는 다음과 같습니다.

dist폴더안 3개의파일(html, css, js) 만 배포하면 결과가 나오는지 확인해 봅니다.

작동이 잘 됩니다.

[React 기초] Webpack 설치 및 실행 : 6탄 - CSS Loader 설치하기

행복군자 — Sun, 31 Dec 2023 20:00:14 +0900

지금까지 순조롭게 웹팩 설치에 대한 순서를 같이 공부한 분들은 이해도가 상당히 높아졌을것으로 판단됩니다. 이제는 CSS 파일을 웹팩에서는 어떻게 연결할 수 있을지 알아볼 차례입니다.

이 부분은 코딩앙마의 프론트엔드 개발 과정을 공부하면서 React 웹팩에 적용하면서 확인한 내용입니다.

▒ 웹팩 CSS Loader

1. <head>태그내 <style>태그로 연결 : Inner 방식

이 방식은 하나의 HTML 파일 <head>태그 사이 <style>태그를 생성하는 inner CSS loader방식입니다.

어찌되었던 CSS Loader설치가 필요해 보이네요. 다움과 같이 진행합니다.

① Node에서 설치

상기 설치모듈중 css-loader는 CSS파일을 찾아서 읽어내는 역할을 하고 style-loader는 <head>태그내 <style>태그를 만들어 내는 역할을 합니다.

package.json에 설치가 잘 된 것을 확인할 수 있습니다.

설치가 되었으면 이제 설정을 해야겠지요.

② webpack.config.js 설정

CSS Loader는 module에서 설정합니다. 지난번 Babel설정이 되어 있는 형태로 하면 됩니다.

정규표현식을 통하여 CSS파일을 test하고 loader를 사용(use)한다라는 개념으로 설정합니다. 배열은 뒤에서부터 읽어 오기에
CSS파일을 찾아내는 css-loader사용이 뒤에 있어야 합니다.

③ 실행 확인

이제는 간단한 CSS 파일을 만들어 확인해 볼 수 있습니다. src폴더에 만들어야 되는것은 이제 이해 하겠죠?

그런데 이 방식은 <style>태그를 삽입하는 방식으로 dist폴더만 배포하는 원래 취지에는 맞지 않습니다. 별도의 CSS파일을 src폴더에 만들고 배포용 CSS파일을 생성시키는 방식으로 우선 먼저 해보겠습니다.

2. 외부 CSS 파일 연결

일반적으로 외부에서 CSS파일을 연결해서 사용하는 경우가 많기 때문에 이 부분부터 정리를 해 보겠습니다. 이후 예제를 통해서 확인하면서 에러가 있을 경우 수정하는 방식으로 진행하겠습니다.

① 외부 CSS확인 플러그인 설치

역시 노드에서 플러그인 설치가 필요합니다.

② webpack.config.js 설정

일단 require( ) 함수를 사용 플러그인을 선언해야 되겠죠.

플러그인에서 설정 작업을 진행합니다.

상기 그림에서 filename은 최종 dist폴더에서 만들어지는 파일명입니다.

다시 rules로 가서 use를 다음과 같이 바꾸어줍니다.

이는 inner에 삽입하는 style-loader대신 외부에서 가져오는 MiniCssExractPlugin로더를 사용한다는 의미입니다.

entry도 설정이 필요합니다.

src폴더에 gugudan.jsx 파일을 완성해 봅니다.

③ 실행

이제 빌드를 해서 확인해 봅니다.

dist폴더에 gugudan.css 파일이 생성이 되고 index.html 파일을 보면 외부로 CSS파일 링크가 만들어졌습니다.

웹상에서 보여지는 모습은 다음과 같습니다.

작동이 잘 되고 있습니다. 경고가 하나 떠 있군요. client.jsx에서 수정해 주면 완성이 되는 것을 볼 수 있습니다.

[React 기초] Webpack 설치 및 실행 : 5탄 - 웹팩 개발 서버 (devServer) 설치

행복군자 — Sun, 31 Dec 2023 19:30:57 +0900

웹팩과 관련하여 시리즈별로 나누어서 진행을 하고 있는데 보통 개발자가 아닌 초보자들은 한번 따라해도 금방 잊어버리기 일수입니다. 따라서 차근 차근 자기것으로 만들지 않는 한 그냥 모래성같이 머리속에서 사라집니다.

웹팩을 실행할 때 npm run build 라는 명령어를 사용하긴 했지만 코드 내용중 조금만 내용이 바뀌어도 결과를 보기위해 계속 build를 해 줄 수 밖에 없습니다. 이를 보완하기 위해 자체 서버를 만들어 작업한 내용을 실기간으로 볼 수 있게 만든 도구가 웹팩개발서버입니다. 자신의 PC에 설치하고 향후 웹팩작업에 반영하면 되겠습니다.

마찬가지로 본 내용은 코딩앙마의 프론트개발과 제로초 TV 강좌를 통해서 공부하면서 응용한 글입니다.

▒ 웹팩 개발 서버

1. 웹팩 개발서버(webpack devServer) 설치

노드에서 다음과 같이 설치합니다. 설치 후 항상 package.json에서 확인합니다.

package.json에서는 다음과 같이 설치가 되었음을 확인할 수 있습니다.

2. webpack.config.js 설정

모듈을 설정하는 webpack.config.js로 이동하여 modul.exports에서 다움과 같이 설정합니다.

3. 서버 설정

웹팩 개발서버를 작동시키기 위한 명령어를 만들어 주는 곳은 package.json에 'script'에서 만들어 줍니다. 다음과 같이 만듭니다. 개발 서버이기에 mode는 개발용으로 지정해 줍니다.

4. 실행

이제 웹팩 개발서버를 실행(npm start)하고 웹팩도 실행(npm run build)해 봅니다.

웹팩서버오픈

웹팩실행을 해 봅니다.

잘 작동하고 있는것을 볼 수 있습니다.

만일 실행시 경고나 에러가 발생하면 그때마다 대응하면 됩니다.

다음시간 CSS 모듈설치를 공부해 보고 구구단게임을 웹팩을 통해 만들어 보도록 하겠습니다.