WEB (6) 썸네일형 리스트형 node js 버전 오류 대응 문제의 발단. 평소 react-create-app 으로 만들어진 react web 개발 환경에 익숙해져 있는데, 그러지 못한 프로젝트들을 만났을때 프로젝트를 실행하기 위한 npm 명령어 들이나 패키지 명령어 구성들이 조금씩 달라진다. 이번엔 npm build 후 serve를 해야 하는 상황이었는데, npm run build 를 입력하니 아래와 같이 에러가 난 후 노드 버전을 뱉어내더라. 뭔지 모르지만 구글링해보고 예전에 노드 버전 때문에 고생했던게 생각나서 찾아보니 현재 설치 된 노드 버전이 프로젝트가 요구하는 노드 버전과 달라서 발생하는 문제가 맞는거 같더라. 이참에 여러가지 노드 버전을 자유롭게 변경할수있는 시스템을 구축해두려고한다. 설치 1-1.아래 경로 들어가서 설치 파일 받는다 https://g.. 모든 웹에서 사용 가능한 가장 작은 사이즈의 비 손실 이미지 포맷 WEBP 변환 "모든 웹에서 사용 가능한 가장 작은 사이즈의 비 손실 이미지 포맷 WEBP 변환" 을 해보려 한다. 무료 컨버팅 사이트를 사용 해도 되지만, 이미지를 외부 사이트에 올리는게 찜찜 할 때 아래 방법으로도 변환 가능하다. 1.png를 webp 포맷으로 변경 해 줄 도구를 다운 https://www.gyan.dev/ffmpeg/builds/ffmpeg-release-essentials.7z 2.다운 받은 파일 압축 해제 후 ffmpeg.exe 잘 있는지 확인 3.변환 명령프롬프트 창 열고 "ffmpeg.exe 파일의 전체 경로" -i "png 파일의 전체 경로" 변환 될 webp 파일의 이름과 확장자 순서로 입력 한다 ex) "C:\Users\user\Downloads\ffmpeg-6.1.1-essentia.. AJAX Asynchronous Javascript And Xml 페이지의 일부를 다운로드 받아서 업데이트 하는 기술 리액트 1 FaceBook에서 만든 frontend 제작 언어. 리액트는 자주 사용하는 코드 덩어리를 컴퍼넌트화 시켜둬서 직접 코딩량은 줄이면서 보기좋은 사이트를 만들기 쉽게 해 준다. 1.nodejs 설치 홈페이지 메인에서 설치 2.create-react-app 설치 커맨드 npm install -g create-react-app 3.create-react-app 셋팅 커맨드 create-react-app . 5분 정도 걸리고, 리액트 기본 모듈 패키지 받고, index.html까지 만들어준다. 4.실행 visualcode에서 만들어준 프로젝트 폴더 오픈 터미널에 npm start run 브라우저에 기본 react 샘플 열림 5.코드수정 index.js 에서 사용자 정의 태그를 작성해뒀고, 내용은 App.js 안.. 자바스크립트2 1.리스트 태그 list1 list2 2.배열 var coworkers = ['s1', 's2', 'sv']; for(var i = 0; i < coworkers.length; ++i) { var str = '' + coworkers[i] + ''; document.write(str); } 3.객체 var MyObject = { ID : 34, Name : 'PARK', } document.write( 'ID : ' + MyObject.ID ); document.write( 'NAME : ' + MyObject.Name ); MyObject.Link = "http://"; document.write( 'Link : ' + MyObject.Link ); document.write( 'Link : ' + M.. 자바스크립트 1 1.자바스크립트란 HTML로만 이루어진 웹 페이지는 이론상 사용자에게 보여지는 내용이 변경 될 수 없다. 자바스크립트는 그런 HTML을 변경하고 제어하는 언어이다. 초기의 웹은 HTML로만 이루어져있었고, 다른 페이지로 변경 하지 않으면 현재 보여지는 HTML의 화면을 변경 할 수 없었다. HTML 파일 내에 로 감싸주면 자바스크립트로 인식 된다. 2.개발자도구 단축키 : ctrl+shift+i *element탭 element탭이 활성화 된 상태에서 esc누르면 콘솔 on/off html 원문을 보여주고 커서on 하면 페이지의 어떤 부분을 가리키는지 하이라이트 표시 해 준다 *console탭 debug 문자열출력, 테스트용코드 빠르게 확인, 계산기로 사용 등 3.CSS JAVA SCRIPT style 속.. 이전 1 다음
