React 시작하기 개요 목적 : 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축 리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행합니다. virtual DOM 사용하여 js 객체를 구성, 실제 DOM의 가벼운 사본 느낌 업데이트 처리 간결성 프레임워크 X 라이브러리 O → 뷰 이외의 기능은 다른 라이브러리 사용 ex) react-router Node.js, npm 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임 리액트는 웹브라우저에서 실행되어 직접 연관은 없으나, 프로젝트 개발에 필요한 주요도구가 Node.js를 사용 ECMAScript 6를 호환시켜 주는 바벨(babel) 모듈화된 코드를 한 파일로 합치고(번들..

미디어쿼리 css 사용 방식 혼자 포트폴리오 작업할 때 쓰던 쿼리 방식은 다음과 같았다. @mixin responsive($media) { @media screen and (max-width:$media) { @content; } } .inner { width: 1200px; margin: 0 auto; @include responsive(1200px) { width: 100%; } } 이런 식으로 따로 반응형 작업에 대해서 빼지 않고 각 element 밑에 추가하는 방식이었다. 물론 breakpoint 도 정의해두었지만 필요할때는 정해진 분기 이외에 따로 값을 지정하기도 했다. 이 방법은 내가 그냥 만들면서 편리한 방법이었다. 구조가 복잡해질수록 클래스명을 중복해서 작성할 필요가 없었으니까. // _r..

인터넷의 원리 웹사이트 주소 웹페이지가 가지고 있는 고유한 주소 http://www.google.com https:// 프로토콜 어떤 방식으로 웹사이트에 접속할지, 즉 인터넷 탐색 시의 이동 수단. http와 https는 거의 동일한 프로토콜이지만 https는 암호화를 통해 보안성이 강화됨. www 대부분 붙이지 않아도 상관없지만 완전한 주소를 보여주기 위해. 전화를 걸때 국가번호를 빼고 말해도 되는 것처럼. google.com 도메인 모든 웹사이트는 최소 1개의 ip주소가 존재한다. 컴퓨터는 도메인이 아닌 ip주소라는 숫자코드를 이용해 접속한다. 도메인을 ip 주소로 전환하기 위해 DNS, domain name service를 이용한다. DNS는 주소록이라고 보면 되고, 컴퓨터는 dns를 이용해 ip ..

margin과 padding의 차이점? 아니, margin 과 padding 의 정확한 사용법! 어느덧 코딩한지 8개월차, (학원 다닌 기간 포함) 마진과 패딩의 차이점을 이론적으로는 충~분히 알고 있다. 그런데 실전에서 적용하려고 하니 그 사용 대상이 애매해지는 경우가 많았다. 생각하기에 따라 margin 과 padding을 적용하는 곳이 달라진다. 물론 이것 또한 일종의 방법론이긴 하나 적절하게 나누어서 사용하는 것이 제일이다. 예를 들면, B 박스 안에 A 박스가 있을 때, A 박스의 위치를 잡기 위해서는 어떻게 코딩하느냐. 나는 B 박스에 패딩을 줘서 A 박스의 영역을 잡곤 했는데, 물론 이것도 틀린 방법은 아니다. 박스를 어떻게 볼지 그 관점에 따라 달라지는 것인데, 아래의 그림을 참고하자. 다..

현재 다니는 곳에서는 주로 포토샵, XD로 디자인 시안을 넘겨받는데, 작은 아이콘에서는 문제가 크게 되진 않으나 배경 이미지 등을 저장할 때는 용량이 클수록 리소스도 많이 차지하고 로딩시간도 느려진다. 따라서 최대한 퀄리티를 살리면서 용량을 줄이는 것이 중요하다. 포토샵 작업 시 이미지 저장할 때에는, 무조건 save for web을 사용한다. 이 때 주의할 점은, * 퀄리티는 70~80 정도로 지정한다. - 이렇게 해도 육안으로는 큰 차이가 없다. * metadata는 none으로 설정한다. - 중요하지 않은 데이터는 생략하여 용량을 더 낮춘다. 이렇게 하면 일반 save와 비교했을때 이미지 크기를 반 정도로 줄일 수 있다. 여기서 이미지 압축하는 사이트를 이용하여 한번 더 압축을 해주면, 원본 사이즈..

학원에서 수업하면서 네이티브앱, 하이브리드앱, 웹앱의 차이점에 대해 배운 적이 있다. (출처 : https://m.blog.naver.com/acornedu/221012420292 ) 이제와서 다시 보니 그 차이가 조금 분명하지 못한 것 같아서 좀 더 검색을 해 보았다. 모바일웹은 말그대로 반응형 혹은 적응형 작업이 된 웹페이지이다. 웹앱은 모바일웹과 같으나 겉모습과 구동방식을 마치 앱인 것처럼 꾸며놓은 것이 웹앱이다. 즉, 웹 기술로 네이티브앱을 흉내낸 것. 하이브리드앱은 쇼핑몰 등에서 주로 사용하는 방식으로, 껍데기만 앱이고 내용물은 웹이다. 따라서 웹 기반이므로 잦은 업데이트가 있더라도 앱을 따로 업데이트할 필요가 없어서 유지보수에 용이하다. 또한 네이티브앱에서만 가능한 스토어 등록 등의 기능을 사..