1. 각 태그들이 block 요소인지, inline 요소인지 구분하는 것 중요 Inline 속성 : 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향 태그 태그들이 줄을 넘기지 않고 한 줄에 나란히 붙는 결과 codepen으로 실행을 해보니 한 줄에 하나씩 태그로 링크를 작성하였는데 브라우저 결과는 나란히 링크가 4개 나온다. 도 inline 태그! > inline 요소를 가진 태그들이 서로 나열되었을 때 최소한 같은 줄에 같은 높이로 가지런히 위치 + 약간의 좌우 간격으로 서로를 분별할 수 있도록 하기 위한 웹 브라우저의 기본 설정 (나는 링크와 링크 사이에 간격을 설정하지 않았는데도 링크 링크 사이의 어느정도 간격이 웹 브라우저의 특성으로 인해 간격이 디폴트로 설정되어 있는 것이군) blo..

220321 모바일로배우는 JSP TIL 작성 1. 웹 문서를 스마트폰으로 보기 위해서는? 예를 들어 hello.html을 스마트폰의 웹브라우저에서 실행하면 콘텐츠가 작게 보이기 때문에 접속하는 디바이스에 최적화된 크기로 출력되도록 태그 내에 작성하고 적용 external style sheet -> 이 방법을 가장 많이 사용. 같은 디렉토리 내에서나 다른 디렉토리에서 해당 css 파일을 불러와서 연결하기만 하면 어디서든지 적용 가능(이것의 모듈화의 장점) 로 해당 css 파일 연결 -> 주로 밑 태그 위에 작성한다. 8. width 속성 %는 상대 단위를 나타낸다. 가용 너비가 있다면 그에 비례해서 커지거나 작아지게 하고 싶을 때 상대 단위인 %를 사용한다 ex) 가용 너비가 400px인 상황에서 wid..

1. React에서 CKEditor 사용하기(짱 신기) VSCode에 npm install ~ 해서 ckeditor 설치해주고 아래 코드 내용 import 해주고 render() 함수 안에 붙여넣어주면 된다. CKEditor은 콘텐츠를 웹 페이지나 온라인 애플리케이션에 직접 작성할 수 있게 하는 위지위그 리치 텍스트 에디터 핵심 코드는 JS코드로 작성되어 있다. 이지윅이란 WYSIWYG What You See Is What You Get 2. React 프로젝트 내의 public > index.js 파일에 있는 태그이다. 지워도 아무런 에러가 생기지 않는다. StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구이다.Fragment와 같이 UI를 렌더링하지 않으며 자손들에 대한 부가적..

1. 비연결성 HTTP의 특징 - stateless (클라이언트의 이전 정보를 기억하지 않고, 클라이언트의 요청이 들어오면 그 요청에 대한 응다배주고 바로 연결을 끊어버림) 비연결성의 장점 - 클라이언트의 기존 정보를 포함하고 있지 않으니 서버 과부하가 걸리지 않는다. 서버 자원의 효율적 사용 비연결성의 단점 - 클라이언트가 웹 브라우저를 요청하면 서버는 HTML만 보내는게 아니라 CSS,JS,이미지파일 등 다양한 형식의 것들을 보내는데이 자원을 하나하나 받을때마다 연결하고 다시 끊고 하면 비효율적 => HTTP는 기본적으로 지속연결을 한다. 2. HTTP 메시지 위에서도 언급했듯이 HTTP는 텍스트,이미지,음성 파일 등 바이너리 형식의 데이터를 모두 다 보낸다. HTTP 요청 메시지와 HTTP 응답 메..

1. 리액트는 컴포넌트로 구성되어 있으며 컴포넌트는 UI를 독립적이고 재사용이 가능하도록 나눈 조각이다. 2. JSX 영역이 실제 화면에 그려지는 부분이며 return() 함수 안에 작성한다. html 처럼 생겼지만 자바스립트이다. JS 영역의 처음 시작은 태그로 감싸주거나 로 작성한다. 한 줄은 상관이 없지만 한 줄 이상은 그룹형(Fragment) 또는 Div로 묶어야 한다. Fragment에 큰 뜻은 없으며 단순히 태그 감싸기 용이다. 3. webpack은 html,css,js 등을 하나로 묶어 (파일들을 묶어) 한 번에 실행시켜주는 도구이다. 4. ex) let [추천,추천변경] = useState(0); 과 같은 경우는 맨 앞에 있는 값인 '추천'의 초기값을 0으로 셋팅하겠다는 의미이다. 5. 리..

1. React에서 Node.js를 사용하는 이유? Node.js를 설치하게 되면 npm(Node Package Manger)이 설치된다. Node.js와 React가 직접적인 관련은 없지만, React 프로젝트 개발 시 필요한 주요 도구들(바벨,웹팩 등)을 Node.js의 npm이 설치해주는 것이다. 2. 리액트 프로젝트를 VSCode에서 쉽게 생성하는 방법 Terminal에 npx create-react-app 프로젝트 이름 npx는 npm의 아들이며 npm@5.2.0 버전부터 새로 추가되었다고 한다. npx가 없을 당시에는 npm을 통해 React app을 생성했는데 npm install -g create-react-app ~ 을 했었는데 문제점이 있었다. CRA(Create React App:리액..