CheolCheol Dev Note

React Native는 그리드 시스템에 flexbox를 이용하는데그 기본에 대해 공부하고 정리해본다. 물론 웹에서 지원하는 flexbox와는 약간 다르지만그 기본에 대해 공부하는 것이다. Flexbox 모델은 뷰포트(viewport) 및 엘리먼트 (elemnt) 크기가 동적이거나 알려지지(unknown) 않은 경우에도 문서 내의 엘리먼트간에 공간을 배치(layout), 정렬(align) 및 분산(distribute)하는 효율적인 방법을 제공한다. Flexbox 모델을 사용하려면 부모 엘리먼트를 flex container (AKA flexible container)로 만들어야한다. Flexbox에서는 두가지 개념을 알면 좀 더 이해하기 쉽다. Flex container: {display: flex}를 설..

EO는 Search Engine Optimization(검색 엔진 최적화)의 약어로 사이트를 구글, 네이버, 다음 등등의 검색엔진에 검색이 잘 되도록, 상위에 노출이 되도록 사이트를 수정하는 것을 말합니다. 사이트를 검색엔진에 등록해서 접속자를 늘려야 하는 경우에 필요하며, 그렇지 않는 경우에는 신경쓰지 않아도 됩니다.그런데 Angular사이트는 사이트의 컨탠츠가 검색엔진에서 아예 검색되지 않습니다. 그 이유는Angular가 SPA로 되어 있어 서버는index.html만 전달할 뿐 모든 컨탠츠가 사이트에 접속한 다음 생성되기 때문입니다. 검색엔진들은 서버에서 생성되는 파일을 수집하기 때문에Angular 사이트는 기본적으로SEO가 아예 불가능합니다. 그래서 해결책 => Server Side Renderin..

브라우저마다 CSS 지원되는게 달라서 확인해주는 사이트에서 확인을 해야한다. https://caniuse.com/#home 여기서 사용할 CSS를 적어주면 다음과 같이 브라우저마다 나온다.

웹 애플리케이션 파일 업로드는 크게 두가지의 방식이 있다. multipart/form-data FormData 객체를 사용하여 요소로 부터 취득한 file 정보를 append하여 서버로 전송하는 방식이다. applecation/x-www-urlencoded 클라이언트는 바이너리 파일을 Base64 인코딩하여 문자열화한 후, 서버로 전송하고 서버는 Base64 인코딩된 문자열을 디코딩하여 저장하는 방식이다. 인코딩으로 인한 성능 이슈가 발생할 수 있다. applecation/x-www-urlencoded 방식은 인코딩으로 인한 성능 이슈가 발생할 수 있다. multipart/form-data 방식을 사용하여 파일을 전송하는 예제를 작성하여 보자. view 이미지 추가 2. component onFileCh..

웹페이지를 만든다면 모달과 팝업을 만드는 일은 흔한일인것 같다. 나같은경우는 주로 팝업보다 모달을 생성을 많이 했는데 이게 개인적으로는 어렵게 느껴졌다. 여러가지 방법이야 있겠지만 나는 주로 부트스트랩을 이용해 모달을 띄우는 형식을 사용했었다. 부트스트랩을 이용한 방법은 다음과 같다. 1. bootstrap.js 또는 bootstrap.min.js 를 import 2. 모달을 띄우기 위한 이벤트를 주는 버튼에다가 data-toggle 및 data-target 지정 밑에는 예제 소스이다. Large modal ... 예제 모달 이걸 Angular에도 적용하는 법은 비슷하다. 1. bootstrap.js 또는 bootstrap.min.js 를 import 2. 하위 컴포넌트 지정 3. 상위 컴포넌트의 이벤트..