Just Do IT!

캠프에서 프로젝트 할 때 블로그에 정리해두려고 적어두었던 것들 중 하나를 드디어...쓰게 되었다...ㅋㅋㅋ 최종 프로젝트 닐리리 할 때 적어둔 라이브러리인데, 개인프로젝트나 다른 프로젝트에서도 사용할 것 같아서 이번 기회에 정리하려고 한다! react-beautiful-dnd란? 드래그 앤 드롭 기능을 보다 더 편리하게 구현할 수 있도록 만든 라이브러리이다. https://www.npmjs.com/package/react-beautiful-dnd react-beautiful-dnd Beautiful and accessible drag and drop for lists with React. Latest version: 13.1.1, last published: a year ago. Start using r..

내배캠 프로젝트에서 redux를 주로 사용했는데, 최종 프로젝트가 끝난 뒤 튜터님이 flux 패턴에 대해 아냐고 물어봐주셨고 당연히(?) 대답을 못했다. 그래서 그 이후에 찾아보고 리액트와 동일한 패턴이라고 알게 되었는데 적어두질 않으니 계속 까먹고 다시 찾는 불상사가 생겨서...이 기회에 한번 정리해보려고 한다. Flux 패턴이 나온 배경 Flux 패턴은 2008년 페이스북 F8 컨퍼런스에서 발표된 아키텍처로, Client-Side 웹 애플리케이션을 만들기 위해 사용하는 디자인 패턴이다. 이를 설명하면서 MVC 패턴의 한계를 이야기 했다고 하는데, 우선은 MVC 패턴부터 모르므로 아래에 설명을 남겨본다 MVC 패턴이란? MVC는 Model, View, Controller의 약자이다. Model에 데이터..

과제 전형 진행하던 와중에 저런 문구가 나왔다. useEffect에 나온 경고 문구였고 실행하는데는 문제가 없지만 이상하게 거슬려서(?) 구글에 그대로 쳐보았고, 역시나 같은 경고문을 받은 사람들의 글들이 나왔다. 원인 ' useEffect 내부에서 실행된 함수 ' 에서 사용되는 변수를 useEffect의 배열안에 넣어주지 않았기 때문에 발생한다고 한다. 경고문이 나온 코드에서는 useEffect 안의 함수를 따로 바깥으로 빼내서 작성하고 그 함수만 넣어주었는데, 그래서 이 경고문이 나오지 않았나 싶다. 해결 방법 함수의 선언을 useEffect 내부로 옮겼고, 함수에서 사용되는 변수를 [] 안에 넣었더니 바로 오류가 해결되었다. 다른 방법도 있다. 바로 useCallback()을 사용하는 방법이다. 이..

styled-components 설치하려는데 자꾸 이 에러가 나와서 뭔가 하고 구글링으로 검색했다. 원인은, latest version of styled-components is v6 but there is some issue while doing npm i styled-components styled-components version6 이후로 에러가 발생한다는 것이었다. version6 이후부터는 저 명령어를 써서 설치하면 안된다는 것이었다...! npm install styled-components@latest // use yarn yarn install styled-components 이렇게 @latest 를 추가해서 최신 버전을 다운받으면 해결 완료했다.

margin border의 바깥쪽 여백 content의 영향을 받지 않는다 주변 요소와 거리를 두기 위핸 여백이다 auto, 음수는 margin만 가능하다 auto: 중앙에 배치, 좌우 균형은 균등하게 배치된다 padding content와 border 사이의 여백을 나타내는 영역 padding 역시 content의 일부라고 볼 수 있다 (예) background color가 존재하면 padding 영역도 영향을 받는다 auto X / 음수 X margin과 padding 사용법 속성 4개 : 시계방향(위, 오른쪽, 아래, 왼쪽) 순서 속성 2개 : 첫번째 값은 위와 아래 / 두번째 값은 오른쪽과 왼쪽 여백을 의미 속성 1개 위, 오른쪽, 아래, 왼쪽 모두 같은 값을 사용하게 된다 padding은 안쪽 ..

Intl API란? Intl 개체는 ECMAScript 국제화 API의 네임스페이스로, 언어 구분 문자열 비교, 숫자 형식, 날짜 및 시간 형식을 제공한다. Intl API를 사용하면 각 나라의 언어와 표현에 맞게 날짜 혹은 시간 등을 표시해줄 수 있다. 참고: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl Intl - JavaScript | MDN The Intl namespace object contains several constructors as well as functionality common to the internationalization constructors and other la..

순수함수 (pure function) 입력값에 대해 항상 동일한 출력값을 반환하며, 함수 외부에 영향을 끼치는 부작용(side effect)이 없는 함수 함수의 실행 결과는 오직 입력 값에만 의존하며, 외부의 상태(state)를 변경하지 않는다 불변성(immutability)을 보장한다 불변성 : 데이터나 상태가 변경되지 않는 것을 의미하며, 함수형 프로그래밍에서는 데이터를 변경하는 대신 새로운 데이터를 생성하는 방식을 취한다 순수 함수를 사용하면 상태 변경이 없기 때문에 프로그램의 안정성이 높아지고, 디버깅이 쉬워진다 반면 순수 함수가 아닌 함수는 부작용이 발생할 수 있다 side effect 함수의 실행 결과가 입력값 이외의 외부 상태를 변경하는 것 부작용은 예측하기 어렵기 때문에 코드를 이해하고 디..

state 현재 컴포넌트에서 생성, 변할 수 있는 데이터 state가 생성된 컴포넌트 내에서만 변경이 가능하다 반드시 객체 형태로 생성되거나 null 타입이어야 한다 state 업데이터를 하려면 무조건 setState라는 메소드를 사용해야 한다 특정한 작업이 이루어졌을 때에만 HTML이 업데이트 되도록 만든 규칙 (예제) import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); } return ( {..

this this의 값은 this가 사용된 함수가 어떤 방식으로 "실행"되었는지에 따라 달리진다. 선언된 부분만으로는 무엇을 가리키는 지 알 수 없다. 1. 일반 함수 실행 방식 strict mode가 아니면 무조건 global object를 가리킨다. (브라우저에서는 window) var age = 1; // global object function foo() { console.log(this.age); //this === global object : 브라우저에서는 window를 가리킨다. } foo(); // 1 (글로벌 객체 실행) new foo(); // undefined strict mode (엄격모드) strict mode란? : https://developer.mozilla.org/ko/do..

Hoisting (호이스팅) 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아 유효 범위의 최상단에 선언한다 자바스크립트의 모든 선언에는 호이스팅이 일어난다. let, const, class를 이용한 선언문을 호이스팅이 발생하지 않는 것처럼 동작한다 var 선언 단계와 초기화 단계가 한번에 이루어진다 변수 선언문 이전에 변수에 접근하여도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않는다. (undefined 반환) console.log(text); // ReferenceError text = 'Hell..