IT 개발 지식

홈페이지를 만들었는데 크롬에서는 css적용이 잘되었는데 이상하게도 Edge랑 익스플로어는 css적용이 안된채로 적용되어있어서 찾아보았는데 이 소스만 넣으면 호환성 랜더링 모드가 적용이 되어서 웹표준에 맞게 작동하게 된다고 했는데 저는 그대로 더라구요ㅠㅠ 그런데 더 자세히 파고드니깐 어떤게 문제인지 알아냈습니다. 바로 경로 인데요 이것이 상대경로, 절대경로 어떤 경로를 적어도 크롬은 알아서 잘되지만 익스플로어, Edge는 무조건 상대경로를 적어야지만 인식이 된다는 사실! 그런데 이렇게만 들으면 헷갈리시기 때문에 조금더 확실하게 설명을 해드리자면 절대경로 '절대경로'는 웹페이지 및 파일이 가지고 있는 고유한 경로 입니다. 예를들어서 http:/www.google.com, C:\user\document\pyt..

※ 무료 HTML 템플릿 HTML5 UP: https://html5up.net/ 디자인이 정말 다양하고 세련되어 있어서 가장 인기가 많습니다. 특히 다운로드도 압축파일로 받을수 있기 때문에 수정하기도 편하다는 장점 start bootstrap: https://startbootstrap.com/ Free Bootstrap Themes, Templates, Snippets, and Guides - Start Bootstrap Landing Page A clean, functional landing page theme startbootstrap.com 블로그 형식과 admin 형식 모두 정말 다양합니다 그리고 HTML 템플릿 뿐만 아니라 REACT, VUE.JS, ANGULAR 템플릿도 제공되고 있습니다. b..

① React redux 란 ? Flux 개념을 바탕으로 하여 State 관리 라이브러리이다. 그래서 React는 컴포넌트에서 관리를 하지만 Redux 라이브러리를 사용하게 된다면 store에서 상태를 관리를 해주기 때문에 React Component에서 보여주기만 하는 용도로 사용이 되고 있다. ② redux 장점 웹 사이트 상태관리를 고민할 필요가 없다. state에서 쉽게 저장하고 불러올 수 있다. 읽기 전용으로만 취급하기 때문에 이전 상태로 돌아가고 싶다면 덮어쓰면 된다. 상태 변경을 전송할 수 있도록 자바스크립트 객체로 구성을 강제로 부여한다. ③ redux 단점 강제하는 방식때문에 반대로 코드가 복잡해 질 수 있어서 개발자에게 제약이 발생한다. ④ redux 예제 ※ 1. 우선 라이브러리를 다..

① React 코드 분할을 하는 이유는? 사용자가 웹 페이지를 접속을 하여 main.js 파일이 로드가 된다면 프로젝트 파일이 크면 클수록 로드하는 시간이 많이 걸리고 퀼리티가 저해될 수 있기 때문이다. 그래서 main.js를 여러 파일로 나누어서 용량을 줄일려고 코드 분할을 한다. ② 코드 분할의 방법은? bundler가 설치되어야 한다. 여기서 bundler는 파일을 하나로 병합한 번들 된 파일을 웹 페이지를 포함해 한번에 전체 앱을 로드시켜준다. ③ bundler 예제 App.js import Top from './components/Top'; import Bottom from './components/Bottom'; import './App.css'; import { useState } from ..

App.js import React, { useState } from 'react'; let init = 0; const App = () => { console.log('리빌드 됨'); const [num, setNum] = useState(1); const increase = () => { setNum(num + 2); }; const decrease = () => { setNum(num - 2); }; const increase2 = () => { console.log('increase2'); setNum(num + Number(init)); }; const decrease2 = () => { setNum(num - Number(init)); }; const numHandle = (e) => { co..

JSX 문법 정리 ① return에는 하나의 엘레멘트만 담을 수 있다. ② const, let, var 1. const : 한번 선언된 상수는 다시 재정의 할 수 없다. const good='good'; hello='change good'; // 오류 const good ='good!'; { const good = 'inner good!'; console.log(good); // inner good! } console.log(good); // good! 괄호안에 good을 선언하였고 const의 scope은 괄호 블록 안에 있기 때문에 괄호를 벗어나 바깥에 good 상수를 선언할 수 있다. 2. let : 선언해도 값이 재정의가 가능하다. let good ='first good'; // first goo..

[React] 리액트 설치방법 및 사용방법을 알아보자 ① Node.js 다운로드 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org ② VScode 다운로드 Visual Studio Code - Code Editing. Redefined Visual Studio Code is.. soulno.tistory.com 설치와 사용방법을 어느정도 알았다면 ① React 이름규칙 이름 규칙 : CM + 태그명 이름 규칙 : Join + CM + 태그명 이름 규칙 : Join + CM + 태그명 + ? ② CMButton.js import React from 'react'; import styled fr..

① Node.js 다운로드 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org ② VScode 다운로드 Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstu..

Documentation - Materialize materializecss.com Materialize 사용방법 Materializecss 색상, 정렬 Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Materializecss 이미지 ⭐여기에 상황에 맞게 아이콘을 사용하 실 수 있습니다. Icons - Materialize materializecss.com call Materialize Grid 1 2 3 4 5 6 7 8 9 10 11 12 Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Offset..

반응형 중에서 가장 많이 쓰이는 container와 container-fluid 차이는 ? container은 여백이 존재한다. 하지만 화면 사이즈가 모바일처럼 줄어든다면 똑같이 보이며 container 안에 다른 container 클래스를 사용이 불가하다. 부트스트랩 Grid layout content 1 content 2 부트스트랩 container, container-fluid Grid 비율 첫번째열 두번째열 세번째열 ※ 부트스트랩의 그리드 시스템에서는 화면사이즈가 작을때(모바일) 우선적으로 적용이 되며 설정한 화면 사이즈 이상일때 원하는 비율로 표시가 된다. 여러개의 그리드 비율을 적용 예시 화면 크기에 따라서 sm 화면기준보다 작을때는 모바일 기준으로 표시가 되고 화면이 점점 커지게 된다면 sm..