최근에 서비스 중인 웹 페이지를 모바일 디바이스에 맞게 변형하는 작업을 진행했다.기존 메인 페이지를 모바일 환경에 다 담지 못하므로, 모바일용 메인 페이지를 만들고,게시판도 모바일 디바이스에서 유연하게 사용할 수 있도록 UI를 전면 수정했다. 전반적인 디자인은 웹 디자이너께서 해주셨지만 이를 적용하는 건 나의 몫이었다😂웹 화면과 모바일 화면을 구분하기 위해서 사용한 방법은 미디어 쿼리(Media Query)였다.미디어 쿼리는 CSS에서 화면의 크기나 기기의 특성에 따라 다른 스타일을 적용할 수 있게 해주는 기능이다.즉, 화면의 크기에 따라 달라지는 "반응형 웹(responsive web)"을 만들 수 있다. 미디어 쿼리는 @media 으로 CSS에 작성하면 된다.@media (조건) { /* 조건을 ..

⚠️ 에러 상황 ✅ 해결 방법 1) webpack.config.js 에 fallback 추가 // \node_modules\react-scripts\config\webpack.config.js ..., resolve: { fallback:{ "child_process": false, "os": false, "path": false, "stream": false, "fs": false, "util": false, } } 2) package.json에 추가 // package.json ... "browser":{ "child_process": false, "os": false, "path": false, "stream": false, "fs": false, "util": false } 📋 참고자료 https..

참고자료 : https://www.youtube.com/watch?v=KF6t61yuPCY 10. 함수 1) 함수의 정의 함수의 keyword : function 함수명 : sayHello 매개변수 : name function sayHello(name){ console.log(`Hello, ${name}`); } 2) 함수의 사용 함수명(매개변수)로 사용 sayHello("Mike"); 3) 함수의 활용1 function showError를 정의하고, showError()로 함수 사용 function showError(){ alert('에러가 발생했습니다. 새로고침 해주세요.'); } showError(); 4) 함수의 활용2 - 매개 변수 함수를 정의할 때 매개 변수를 사용할 수 있음 매개 변수가 있는..

참고자료 : https://www.youtube.com/watch?v=KF6t61yuPCY 5. 기본 연산자 1) 기본 연산자 + (더하기), - (빼기), * (곱하기), / (나누기), ** (거듭제곱) 2) 연산자 우선순위 * → / → + → - 순 3) 증감 연산자 증가 연산자 : ++ 감소 연산자 : -- let num = 10; let result1 = num++; console.log(result1); //10 증가되기 전의 값 console.log(num); //11 증가된 후의 값 let result2 = ++num; console.log(result2); //12 증가된 후의 값 console.log(num); //12 증가된 후의 값 6. 비교 연산자, 조건문 1) 비교 연산자 < ..

참고자료 : https://www.youtube.com/watch?v=KF6t61yuPCY 1. 변수 변수를 선언할 때에는 '변수명 = 값'으로 작성한다. 문자열을 선언할 때에는 큰따옴표나 작은따옴표로 값을 둘러싼다. alert(변수명)을 실행하면 화면에 알림창에 값이 뜬다. console.log(변수명)을 실행하면 콘솔에 값이 뜬다. name = "Mike"; age = 30; alert(age); console.log(age); team 단위로 작업을 하다보면 같은 변수명을 사용하게 될 수도 있다. 변수명 앞에 let으로 선언하면 동일한 변수명을 선언했을 때 SyntaxError를 발생시킨다. let name = "Mile"; // 1000 lines.. let name = "google"; let으..