본문 바로가기

전체 글

[Node] React 정리(10) - useEffect를 사용하여 마운트/언마운트/업데이트 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 클래스 컴포넌트의 경우에는 저번에 배웠던 리액트의 생명주기의 메소드를 호출하여 Mount 될 때의 과정들을 구현할 수 있었습니다. 하지만 함수 컴포넌트의 경우에는 다음과 같은 useEffect 함수를 호출하여 리액트 사이클을 구현할 수 있습니다. 진부한 예제이지만 useEffect의 기초와 사용법 에 대해 배워보도록 합시다. # Contents useEffect 기초와 사용법 # useEffect 기초와 사용법 useEffect를 사용하기 위해.. 더보기
[Node] React 정리(9) - useState를 사용하여 배열 랜더링 및 추가/삭제 예제 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 컴포넌트에서 useState를 이용하여 배열을 랜더링 하는 예제를 담았습니다. 진부한 예제이지만 useState의 기초와 사용법 에 대해 배워보도록 합시다. # Contents 코드 작성 및 테스트 # 코드 작성 및 테스트 리액트의 모든 코드는 src에서 정의할 수 있습니다. 따라서 코드를 수정하거나 추가할 때에는 src 폴더 안에 코드를 작성하거나 수정 하시면 되겠습니다. 먼저 App.js 코드는 아래와 같습니다. import "./App.c.. 더보기
[Node] React 정리(8) - useRef 를 이용하여 특정 DOM 포커스하기 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 컴포넌트에서 useRef를 이용하여 이름과 닉네임을 초기화 하는 과정에서 포커스 하는 예제를 담았습니다. 진부한 예제이지만 useRef의 기초와 사용법 에 대해 배워보도록 합시다. # Contents 의존 라이브러리 설치 코드 작성 및 테스트 # 의존 라이브러리 설치 먼저 의존하는 라이브러리를 설치하는 것이 당연지사입니다. 현재 문서부터 JSX 문법을 이용하여 리액트를 시작할 것이기 때문에 create-react-app 명령어를 통해 기초적인 .. 더보기
[Node] React 정리(7) - SetState와 jQuery 사용하여 렌더링 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 컴포넌트에서 동적인 메소드인 setState를 이용하여 숫자가 변경되는 예제 및 버튼을 눌렀을 때 초기화 하는 예제를 담았습니다. 진부한 예제이지만 setState의 기초와 사용법에 대해 아는 것이 아주 중요한 만큼 바로 시작해보도록 하겠습니다. # Contents 의존 라이브러리 설치 코드 작성 및 테스트 # 의존 라이브러리 설치 먼저 의존하는 라이브러리를 설치하는 것이 당연지사입니다. 현재 문서부터 JSX 문법을 이용하여 리액트를 시작할 것.. 더보기
[CSS] box-sizing 개요 box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 box-sizing: content-box | border-box | initial | inherit content-box : 콘텐트 영역을 기준으로 크기를 정합니다. border-box : 테두리를 기준으로 크기를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 content-box border-box 둘 다 width 값을 500px로 정하였으나, box-sizing 속성값에 따라 크기기 달라집니다. 첫번째 박스는 콘텐트 영역이 500px이고 테두리.. 더보기
[CSS] Reset CSS 프로젝트를 새로 만들 때 필요한 리셋 CSS입니다. 웹 브라우저가 기본적으로 제공하는 CSS 를 초기화 해주는 코드로써 나의 코드를 보다 더 자유롭게 꾸밀 수 있다는 장점이 있습니다. 또한 브라우저 간의 최소한의 차이를 제거함으로써 브라우저 요소들의 스타일이 존재하지 않는 처음 상태에서 디자인할 수 있습니다. # Contents Reset CSS 코드 # Reset CSS 코드 아래 코드를 reset.css 파일로 저장하여 사용하세요 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, .. 더보기
[CSS] Flex 웹페이지의 레이아웃을 잡을 때 보통 display, float, position과 같은 css 속성들을 이용하지만 이러한 속성은 특성 상 한계와 복잡도가 존재합니다. 그 한계를 극복하기 위해서 css3에 flex라는 방식이 새롭게 추가되었습니다. flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex CSS는 부모 요소인 flex 컨테이너 와 자식 요소인 flex 아이템으로 구성됩니다. flex 컨테이너가 flex 태그의 영향을 받는 공간이고, 그 안에서 flex 아이템들의 배치, 정렬이 설정된 속성에 따라 변경되는 것이기 때문에 flex 를 사용하려면 부모먼저 정의한 후 자식 요소에 배치를 고려해야 하겠습.. 더보기
[Node] React에서 jQuery 사용 방법 Javscript에서는 실제로 jquery가 너무 많이 필요하지 않으며 React에서 많이 지원하기 때문에 자주 사용하진 않습니다. 그러나 여전히 이 거대한 jQuery 플러그인 지원 때문에 jQuery를 완전히 피할 수는 없습니다. 이 때문에 jquery를 거의 느끼지 못할 수도 있습니다. jQuery를 리액트 프로젝트에 적용시키는 방법을 알아보도록 하겠습니다. # Contents react에서 jQuery 적용 # react에서 jQuery 적용 먼저 jQuery 라이브러리 혹은 패키지를 설치하도록 하겠습니다. 리액트를 편하게 사용하기 위해서는 라이브러리 CDN 설치보다는 npm 설치를 권합니다. npm install --save jquery 그런 다음 jquery 패키지의 $ 로 jquery를 가져.. 더보기

티스토리툴바