Front End
-
[React] React Hooks 의 사용 이유Front End/React 2021. 9. 24. 15:42
# React Hooks 배포 이전 Component 내부에 state가 있다? => Class 로 구현 Component 내부에 state가 없다? + Life-cycle 을 사용해야 한다? => Class 로 구현 Component 내부에 state가 없다? + Life-cycle 과 관계 없다? => function 으로 구현 * Hooks 이전에는 function component 를 stateless functional component 라 명명했었음. # Hooks 이후 function 으로도 state를 사용할 수 있게 됨. => 코드생산성 증가 # Reference - https://ko.reactjs.org/docs/hooks-intro.html#gatsby-focus-wrapper Ho..
-
[React] React 동작원리를 이해하자, Babel, JSX 없이 사용하는 ReactFront End/React 2021. 9. 24. 15:14
# JSX 란 ? - React에서 사용하는 자바스크립트 확장문법이다. - 각종 컴파일도구(Babel compiler)들로 인해 브라우저에서 실행되기전에 JSX는 자바스크립트로 변환된다. - 컴파일도구의 힘을 빌리기 때문에, 문법적오류를 잡아내기도 쉬우며, 가독성도 좋아지는 장점이 있다. # 그렇다면 JSX를 사용하지않고, 순수 자바스크립트로만 React를 사용 가능할까? - 그렇다. JSX는 자바스크립트로 구현이 되어있기 때문에 가능하다. # React 를 사용하는 이유? - Virtual DOM 을 이용한 컴퓨터 자원 사용효율에 대한 우위 (실제 HTML과 변경된 HTML의 차이점만 반영) - Virtual DOM 을 이용하기 위해서는, React를 사용해야하고 그에 맞게 요구되는 React-Elem..
-
Scss 파일 컴파일러 설치방법 및 사용법Front End/CSS 2021. 9. 8. 11:09
# 컴파일러 설치 1. Node.js 사용자 (추천) npm install -g sass 2. MacOS brew install sass/sass/sass # 사용법 1. 단순 컴파일 sass input.scss output.css 2. watch 옵션을 이용한 실시간 컴파일 및 간단한 디버깅 // scss -> css 로 실시간 컴파일 sass --watch 파일명.scss:파일명.css // scss 폴더내의 모든 scss 를 참조하여, css 폴더에 실시간 컴파일 sass --watch scss폴더경로:css폴더경로
-
[React] React & React-native & React HookFront End/React 2021. 8. 31. 16:43
# React - 웹 어플리케이션 만드는 JS 프레임워크 - JSX(JS extension) 문법 사용 (때문에 JS 문법으로 변환시키는 컴파일과정이 필요) ex) const hello = Hi; # React Hook - React 16.8 version 부터 추가 된 react element # React Native - iOS, Android 네이티브 어플케이션 만드는 JS 프레임워크 # Reference - react hook : https://ko.reactjs.org/docs/hooks-intro.html Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org
-
CSS) display : flexFront End/CSS 2021. 8. 31. 15:14
Flex 속성에 대해 아주 잘 정리된 글이 있다. * float 속성은 써보면 알겠지만 부모태그를 무시하기때문에 사용안하는게 좋다라는 나의 사견이다. # reference - https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com
-
CSS) Position 속성Front End/CSS 2021. 8. 31. 14:14
# Position 속성 종류 static, relative, absolute, fixed, sticky # Description 1. static (default) - 디폴트 값으로써, top, right, bottom, left, z-index 속성을 사용 할 수 없다. 2. relative - 자신의 static 위치가 기준점 - 다른 sibling 태그의 위치에 영향을 주지 않는다. 3. absolute - 자신의 부모태그가 기준점 (부모태그가 relative를 가져야함, 아니면 body를 기준으로.) - 부모태그가 없는 경우, body가 부모태그역할 4. fixed - 스크린의 viewport 가 기준 (스크롤 시, viewport가 기준이므로 계속 고정된 위치에 존재) - 고정됨 5. stic..
-
반응형 웹을 위한 폰트 단위 및 미디어 쿼리Front End/CSS 2021. 8. 31. 13:20
# 폰트단위 px 절대값으로 사용 되는 단위. 고정된 값이기 때문에 사용하기 편하고 이해하기도 쉽지만 반응형 웹사이트를 만들때에는 적절하지 않음. em 부모태그의 사이즈를 기준으로 정해지는 길이 단위. rem root(html 최상위 요소)를 기준으로 정해지는 길이 단위. # 미디어 쿼리 주의사항 미디어 쿼리의 중괄호 { } 안에 작성되지않은 css 스타일은 공통 css 스타일로 사용된다. 사용하기 싫다면 재정의 해줘야한다. /* Desktop CSS start*/ body{ display: flex; color : white; } /* .... other css styles */ /* Desktop CSS end*/ /* Mobile CSS start */ /* Destop CSS에 작성된 CSS st..