림찌의 개발일기 💻

props란? 간단하게 설명하자면 Component에서 Component로 전달하는 데이터를 말한다. props를 사용하면 효율적으로 component를 재사용할 수 있다. 부모 component에서 자식 component에서 데이터를 전달해 줄때 사용하는데, 여기서 큰 특징은 자식 컴포넌트는 부모 컨포넌트에게서 내려받은 props의 데이터를 직접 수정할 수 없는 것이다. React는 단반향 데이터로, 데이터가 한 방향으로만 흐르기 때문이다. (반면 state는 컴포넌트 내부에서 선언하는 값으로 해당 컴포넌트 안에서 값을 변경할 수 있다.) 쉽게 생각하면 그냥 부모의 유산을 자식에게 전달해준다고 생각하자. 알기 쉽게 예제를 보며 살펴보자. import React from 'react'; function ..

리액트는 component 기반이다. component를 통해 UI를 재사용 가능한 개별적인 조각으로 나눌 수 있다. component를 정의하는 방법은 두 가지가 있다. 1. Javascript 함수형 컴포넌트 function ImComponent(props){ return Hello, {props.name} } - state와 라이프사이클 사용이 불가하다. (단, Hooks 사용시 사용가능하다) - 컴포넌트 선언이 클래스보다 간편하고 직관적이다. 2. ES6 클래스형 컴포넌트 class ImComponent extends React.Component { render(){ return hello, {this.props.name} } } - state 와 라이프사이클 사용이 가능하다. - 임의 메서드를 ..

2차원 배열 : 배열 안에 또다른 배열이 들어있는 것 자바스크립트 2차원 배열 포스팅에 들어가기 앞서, 자바스크립트의 2차원 배열에는 다음과 같은 특징이 있다. 1. 자바스크립트엔 진정한 2차원 배열은 없다. 2. var arr = [][]; 와 같은 2차원 배열 선언은 불가능하다. 3. 약간의 트릭을 통해 2차원 배열과 비슷한 배열을 만든다. 1. 초기값을 변수에 할당하여 배열을 생성한다. var fruit = [['사과', '빨간색'], ['바나나', '노란색'], ['포도', '보라색'], ['키위', '초록색']]; // fruit[4][2] 2. 반복문을 사용하여 빈 배열을 생성한다. var fruit = new Array(4); for(var i =0; i < fruit.length; i++)..

[화살표 함수] Javascript 화살표 함수에 대해 알아보자. 화살표함수란 ES6부터 쓸 수 있는 함수이다. 화살표 함수의 특징 1. function 키워드를 생략한다. 2. 익명함수이다. 3. this, arguments, super, new.targer을 바인딩하지 않는다. [화살표 함수의 구조] const plusNum = function(num1, num2){ return num1 + num2; } // function 함수 일단 기존의 `funtion` 함수이다. const plusNum = (num1, num2) => { return num1 + num2; } // 화살표 함수 그리고 이것이 화살표 함수이다. 한 눈에 알 수 있듯이 화살표 함수는 function 키워드를 생략함으로써 fun..

코드를 고치고 실행할때마다 명령어를 사용하는건 참 귀찮은 일이다. 그래서 리액트에선 하나의 플러그인을 설치할 수 있는데, 바로 react-refresh 이다. 이 플러그인은 코드를 고치고 새로고침이나 새로 빌드를 해주지 않더라도 변경된 사항이 자동으로 수정되는 아주 놀라운 기능을 가지고 있다. (이래서 리액트 리액트 하는구만...) 깨알 tips 👀👀 기존엔 react-hot-loader 라고 불리고 설치법도 달랐지만, webpack-cli가 4.xx 로 올라가면서 hot loader 대신 refresh를 사용하게 되었다. 이 편리한 플러그인을 깔아보자! (webpack의 설정은 [21.04.12]에 작성한 티스토리 글을 기준으로 한다) 1. react-refresh, react-refresh-webpa..

제로초님의 React 기본강좌 webgame 만들기 강의를 들으면서 웹팩 설치 관련 내용을 정리한 글입니다. 문제가 생길시 글 내리겠습니다 :) 웹팩이란? 🤔 최신 프론트엔드 프레임워크에서 가장많이 사용되는 모듈 번들러이다. 모듈 번들러란 웹 애플리케이션을 구성하는 요소를 모두 각각의 모듈로 보고 이를 조합하여 병합된 하나의 결과물을 만드는 도구를 말한다. 웹팩에서 모듈은 HTML, CSS, Javascript, Images, Font 등등 을 모두 포함한다. 이 요소 하나하나가 모듈인셈이다. 웹을 만들다보면 이러한 모듈들이 수십개에서 큰 프로젝트라면 수백개가 생성될수 있는데 이 수많은 요소들을 하나의 파일로 합쳐주고 압축시켜주는 역할을 한다. 이렇게 압축 시켜주는걸 `모듈 번들러` 라고 한다. Webp..

flexbox 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식 위의 그림처럼 레이아웃을 잡을때 사용하는 속성이 몇가지 있다. 1. float: left, float: right 2. flex 3. grid 이 포스팅은 이 중 display: flex; 에 대해 알아보는 글이다. 단, flex는 보시다시피 IE6-9에서 지원을 하지 않으니 크로스 브라우징에 유의해서 사용할땐 사용을 지양하는 편이 좋다. 하지만 굉장히 편리한 css 속성이므로 과감하게 IE6-9를 버리는 것도 좋다고 생각한다... 1. Flexbox 구성 flex container : 부모(상위) 요소 flex item : 복수의 자식(..

여러가지 문서를 읽고 제가 이해한대로 작성한 글입니다. 잘못된 정보가 있으면 댓글로 정정해주세요 :) React.js 란? 페이스북에서 제공하는 컴포넌트(component) 기반의 프론트엔드 라이브러리이다. 컴포넌트에 데이터를 내려주어 개발자가 설계한 대로 조립하며 사용자에게 보여진다. 프론트엔드 라이브러리엔 React를 포함해 Vue.js 등도 있다. React를 써야하는 이유? React는 Javascript 기반으로 이루어져 있기 때문에 동적인 웹페이지를 만드는 것에 있어 최적이다. HTML과 CSS(Scss), 순수 자바스크립트로 이루어진 웹페이지는 정적인 페이지를 만들기에 적합하다. 그러나 최신 웹은 복잡하고 동적이므로 최신 웹을 만들기 위해서는 더 복잡하고 많은 상태를 관리해야한다. 이런 최..

react 공부를 시작하면서 js map()에 대해 제대로 짚고 넘어가고자 작성하는 포스팅이다. map() "배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다." -MDN 설명 인용- map()의 매개변수 - callback 함수 ⎿ currentValue (현재 처리할 요소) ⎿ index (현재 처리할 요소의 인덱스) ⎿ array (map()을 호출한 배열) - thisArg (callback을 실행할 때 this로 사용되는 값) map() 함수는 다음과 같다. 1. 배열의 각 원소마다 특정 작업을 하는 함수를 적용하고 2. 그 함수가 반환한 결과를 모은 뒤 3. 배열로 반환을 해준다. const array1 = [1, 4, 9, 16]; //화살표 함수..

현재 회사에선 Smart Git 이라는 프로그램을 사용 중이지만, 개인 공부를 위해 알아둔 Git Setting 법을 정리하는 글이다. 1. Git 초기 설정 - 설정시 터미널, 명령 프롬프트, PowerShell, GitBash 등 사용하는 프로그램을 이용한다. 1-1 [email 과 user name 등록하기] // user name git config --global user.name "이름" // user email git config --global user.email "이메일" Git Repository에 파일을 올리기 위해선 Author, Committer에 대한 정보가 필요하다. 해당 정보가 없을 시엔 정보를 세팅해달라는 에러 메세지가 뜨니 커밋하기 전에 user 정보가 제대로 등록되어 있..