FrontEnd51 리액트 기본 과정 정리 - 2 [리액트 프로젝트 시작하기] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다. 참고로 이번 글은 Webpack과 Babel에 대해서만 정리하기 위해 작성하므로 리액트 프로젝트를 어떻게 준비하고 시작하는지에 대해서는 다루지 않습니다. 리액트 프로젝트 시작하기 리액트 프로젝트를 시작하기전 Webpack 과 Babel 에 대해서 알고 가는 것이 필요합니다. 리액트 프로젝트는 우리가 보통 예전에 jQuery 같은 것을 의 형태로 불러와서 사용했던 것처럼 사용하진 않습니다. 그렇게 할 수는 있지만 기능이 굉장히 제.. 2019. 12. 6. 리액트 기본 과정 정리 - 1 [리액트는 무엇인가?] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 목차 개요 프론트엔드 라이브러리 라이브러리/프레임워크 종류 React 소개 React를 특별하게 만드는 점 React를 쓰면서 겪게 될 일들 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 리액트를 공부하시는 다른 분들께 도움이 되었으면 합니다. 프론트엔드 라이브러리란 무엇인가? 프론트엔드 라이브러리는 무엇이고, 이걸 왜 쓰는걸까? 일단 웹 페이지를 만들 때 굳이 라이브러리 없이 네이티브 코드로도 충분히 구현가능한 수준이 있다. 다음을 보자 위 코드는 + 버튼을 누르면 화면에 보이는 숫자가 0부터 점점 증가하는 페이지 코드.. 2019. 12. 4. 모던 웹 디자인의 정석(1장) 1장 웹 페이지의 단 구조. 1-2 박스 가로 정렬 clearfix(클리어픽스)는 플로팅 박스가 뒤에 있는 박스의 레이아웃에 영향을 주지 않게 만드는 기술입니다. 다시 말하자면 특정 박스 C에 clearfix를 적용하면, 그 앞에 있던 박스들의 float 속성을 모두 취소합니다. 바로 앞에 있던 것 하나만 취소하는게 아니라 앞서있는 모든 것을 취소합니다. 그림을 예로 들면 다음과 같습니다. clearfix 값을 왼쪽, 오른쪽 각각 줬을 때를 비교해보면서 확인하겠습니다. box1, box2 가 각각 float:left, right 속성이 적용되어 있고 box4 는 box2 다음에 위치해있습니다. 만약 앞서 있는 것만 취소한다면 clear:right 속성을 준 것과 같으므로 다음과 같이 그려질 것입니다. c.. 2019. 11. 10. 코드스피츠 76-4(Transform 3D & SCSS & Compass) 목차 개요 전체적인 흐름 Post Process 개요 CSS 코드스피츠 4강 강의를 듣고, 내용을 복습하고 정리하는 차원에서 글을 작성하였습니다. 해당 강좌를 학습하시는 분들께도 도움이 되었으면 합니다. 전체적인 흐름 먼저 Post process 라는 추가적인 단계가 geometry, fragment 단계 외에도 존재하는 것을 배웁니다. 그리고 CSS 속성 중 transform 내에서 3D 속성을 줄 수 있는 perspective, perspective-origin, transform-style, transform-origin, backface-visibility 에 대해 배웁니다. 그리고 실습 예제로 드럼통을 만들어 봅니다. 3D를 구현하려면 2D 보다 더 많은 개념이 필요합니다. 특히 수학적인 개념이.. 2019. 11. 5. 코드스피츠 76-3 (CSSOM & Vendor Prefix)-2 Keyframes Keyframes에 대한 문법을 간략히 짚고 넘어가겠습니다. 이렇게 정의한 keyframes는 다음과 같이 사용할 수 있습니다. animation-name에 keyframes로 선언한 이름을 설정하면 사용할 수 있습니다. 다시 강의로 돌아가보겠습니다. from, to 는 keyframe-animation 셀렉터로 일반 DOM 셀럭터와 다릅니다. 문법에서 봤듯이 from, to, %만 사용할 수 있습니다. 그래서 DOM 셀렉터와 다른 방법으로 parsing을 합니다. 어떻게 이걸 객체화 시킬지 살펴보겠습니다. 일단 keyframes 속성은 기존에 우리가 CSS 속성을 담기위해 만들었던 Sheet 객체에 그대로 담긴 어려우므로 기존 Sheet 클래스에서 분기를 시켜줘야 합니다. select.. 2019. 10. 31. 코드스피츠 76-3 (CSSOM & Vendor Prefix) ** Vendor prefix 참고자료 (출처 : TCP School, 지구별 안내서) 벤더 프리픽스(vendor prefix)란? 크롬이나 익스플로러 같이 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다. 즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다. 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 됩니다. 사용방법을 예를 통해서 조금 더 살펴보겠습니다 ( 나중에 Vendor-prefix 를 갖고 framework를.. 2019. 10. 20. 코드스피츠 76-2 (Box model & Absolute Position) 개요 Box model Box-sizing Box shadow 예제 Offset Offset Parent Offset Value 예제 개요 코드스피츠 CSS 수업 2강을 듣고 핵심적인 내용을 정리하고, 추 후에도 보고 기억이 날 수 있도록 기록하기 위해서 정리하였습니다. Box model과 Absolute Position이 주된 내용인데, 한번 같이 살펴보겠습니다. (이 블로그 내용을 보실 때 코드스피츠 76-2 교안을 같이 보시면 내용 진행에 대한 이해가 더욱 잘 되실 수 있습니다) 다음 두 가지 키워드를 염두해두면서 보시면 학습에 더욱 도움이 될 수 있습니다. geometry 단계 : 영역을 잡는 단계 fragment 단계 : 그림을 그리는 단계 브라우저 렌더링 시스템은 geometry 단계를 거친 .. 2019. 10. 8. 코드스피츠 76 - 1 (Graphic system) 강의 정리 보호되어 있는 글 입니다. 2019. 9. 30. 코드스피츠 s80 - 2 역할모델 정리 엔트로피의 증가방향을 컨트롤 해서 완화시키고 복잡한 상황을 포함해 여러가지 상황의 변화를 잘 받아들일수 있는 구조를 짜는 것을 '디자인' 또는 '아키텍처'라고 함. 객체지향에선 역할을 분리하여 엔트로피 증가를 막는다. 역할을 분리하는 요소 3가지 - 변화율 (가장 중요) : 변화율이 같은 것들끼리 모아놓으면 어떤 변화가 일어날 때 다른 것들에 변화를 주지 않으므로 엔트로피 증가가 최소화 됨. - 그외 2가지 복잡한 문제를 나눠서 분석하기 위한 도구 : 추상화 도구 - 카테고라이징 - 모델링(많이 사용) 2019. 6. 12. 이전 1 2 3 4 5 6 다음
