본문 바로가기
  • Seizure But Okay Developer

분류 전체보기237

리액트 기본 과정 정리 - 5 [LifeCycle API] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다. LifeCycle API LifeCycle API 는 컴포넌트가 우리의 브라우저에서 나타날 때, 사라질 때, 업데이트 될 때 호출되는 API 입니다. LifeCycle API는 전부 외울 필요는 없고, 이러한 종류들이 있어서 특정 상황에선 이 API를 사용해야겠다는 정도만 숙지하면 충분합니다. 하나하나 살펴보겠습니다. Mounting, Updating, Unmounting 가 의미하는 것은 각각 다음과 같습니다. Mounting.. 2019. 12. 9.
리액트 기본 과정 정리 - 4 [props와 state] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다. Props와 State 리액트 컴포넌트에서 다루는 데이터는 두 개로 나뉩니다, 바로 props와 state 입니다. props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값입니다. 자식 컴포넌트에선 props 를 받아오기만하고, 받아온 props를 직접 수정할 수 없습니다. 자식 입장에서 props는 읽기 전용입니다. state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있습니다. Props props 에 대해서 그림으.. 2019. 12. 8.
리액트 기본 과정 정리 - 3 [JSX] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다. 컴포넌트 파일 파헤치기 JSX에 대해 알아보기 전에 리액트의 컴포넌트 파일에 대해서 먼저 알아봅니다. 지난 글에서 봤던 리액트 보일러 플레이트를 통해 프로젝트를 구성하면 대략 다음과 같은 구조로 만들어집니다. 리액트를 사용하면 여러분의 웹 애플리케이션에서 사용하는 유저 인터페이스를 재사용 가능한 컴포넌트로 분리하여 작성함으로서, 프로젝트의 유지보수성을 우수하게 해줍니다. 여기서 컴포넌트에 해당하는 코드는 App.js 에서 확인해.. 2019. 12. 6.
리액트 기본 과정 정리 - 2 [리액트 프로젝트 시작하기] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다. 참고로 이번 글은 Webpack과 Babel에 대해서만 정리하기 위해 작성하므로 리액트 프로젝트를 어떻게 준비하고 시작하는지에 대해서는 다루지 않습니다. 리액트 프로젝트 시작하기 리액트 프로젝트를 시작하기전 Webpack 과 Babel 에 대해서 알고 가는 것이 필요합니다. 리액트 프로젝트는 우리가 보통 예전에 jQuery 같은 것을 의 형태로 불러와서 사용했던 것처럼 사용하진 않습니다. 그렇게 할 수는 있지만 기능이 굉장히 제.. 2019. 12. 6.
리액트 기본 과정 정리 - 1 [리액트는 무엇인가?] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 목차 개요 프론트엔드 라이브러리 라이브러리/프레임워크 종류 React 소개 React를 특별하게 만드는 점 React를 쓰면서 겪게 될 일들 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 리액트를 공부하시는 다른 분들께 도움이 되었으면 합니다. 프론트엔드 라이브러리란 무엇인가? 프론트엔드 라이브러리는 무엇이고, 이걸 왜 쓰는걸까? 일단 웹 페이지를 만들 때 굳이 라이브러리 없이 네이티브 코드로도 충분히 구현가능한 수준이 있다. 다음을 보자 위 코드는 + 버튼을 누르면 화면에 보이는 숫자가 0부터 점점 증가하는 페이지 코드.. 2019. 12. 4.
thisArg 에 대한 이해 (feat. filter 메소드) 목차 개요 filter 메소드 설명 뭐가 궁금해? 마무리 출처 개요 'thisArg 가 뭐가 그렇게 중요해? 몰라도 filter 메서드 그냥 쓸 수 있는데' 라고 할 수 있다. 나도 그렇게 가볍게 생각했었다..공부를 하다보니 한 개념에 대해 깊게, 제대로 알고 있는 것이 중요하다는 것을 느꼈고 react와 vue의 차이점에 대해서 찾아보다가 예시로 filter 함수가 나왔는데 filter 기능에 대해 알아보다 모르는 개념들을 기록하고 정리하고 싶어 현재 글을 작성하였다. filter 메소드 설명 filter() 메소드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. const words = ['spray', 'limit', 'elite', 'exuberant', 'destr.. 2019. 11. 23.
19512 19년도 내에 읽을(은) IT 관련 책들 - 코드골프 - You don't know JS (스코프) - 성공과 실패를 결정하는 1%의 네트워크 원리 - 다함께 프로그래밍 - 러닝 자바스크립트 - 3장(리터럴과 변수, 상수, 데이터 타입), 6장(함수), 7장(스코프), 8장(배열과 배열 처리), 9장(객체와 객체지향 프로그래밍), 10장(맵과 셋), 11장(예외와 에러 처리), 12장(이터레이터와 제너레이터), 13(함수와 추상적 사고), 14장(비동기적 프로그래밍), 17장(정규표현식), 18장(브라우저의 자바스크립트) - 모던 웹 사이트 디자인 - 그림으로 배우는 Http & Network Basic 5권 다 읽음 (12/31 기준) 2019. 11. 16.
모던 웹 디자인의 정석(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.

티스토리툴바