리덕스란? 리액트 상태 관리 라이브러리로 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있습니다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 할 수 있습니다. 리덕스 왜 쓸까? 예를 들어 아래와 같은 TodoList 프로젝트가 있다고 가정해보면 대부분의 작업에서 부모 컴포넌트가 중간자 역할을 하게 됩니다. 컴포넌트끼리 직접 소통하는 방법이 있긴 하지만, 그렇게 하면 코드가 꼬여버리기 때문에 권장하지 않는 방법이다. 이런식으로 App 컴포넌트를 거쳐서 건너건너 필요한 값을 업데이트하고, 리렌더링 하는 방식으로 프로젝트가 개발되면 부모 컴포넌트에서 모든걸 관리하고 아래로 내려주..

React의 컴포넌트에서 상태의 불변성을 유지하는 것은 매우 중요합니다. 불변성은 기존 값을 직접 수정하지 않으면서 새로운 값을 만들어내는 것을 의미합니다. 따라서 배열이나 객체의 값을 변경할 때는 새로운 배열이나 객체를 만들어 필요한 부분을 변경해주어야 합니다. 불변성이 유지되지 않으면 값이 변경되어도 감지하지 못하게 되고 렌더링 성능을 최적화하지 못하는 문제가 발생합니다. 위의 불변성에 대한 정의로, 우리는 불변성을 지키기 위해 필요한 값을 변형해 사용하고 싶다면 어떤 값을 복사본을 만들어 사용해야 합니다. const user = { name: 'Yeum', age: 25 }; const copyUser = user; // user와 copyUser 변수에는 같은 참조값 즉, 같은 힙 영역의 메모리를..

6. PropTypes props구성 요소에는 React에서 호출되는 많은 특정 속성이 있으며 모든 유형이 될 수 있습니다. 때때로 이러한 props를 검증하는 방법이 필요합니다. 사용자가 구성 요소에 아무 것도 입력할 수 있는 자유를 원하지 않습니다. React에는 이에 대한 솔루션이 있으며 이를 PropTypes라고 합니다. class MyTitle extends React.Component { static propTypes = { title: PropTypes.string.isRequired, } render() { return {this.props.title} ; } } 위의 구성 요소 MyTitle에는 title있습니다. PropTypes는 제목이 필수이고 값이 문자열(PropTypes.stri..

1. Render JSX React의 템플릿 구문을 JSX라고 합니다. JSX에서는 HTML 태그를 JavaScript 코드에 직접 넣을 수 있습니다. ReactDOM.render()는 JSX를 HTML로 변환하고 지정된 DOM 노드로 렌더링하는 메소드입니다. 실행결과 2. JSX에서 자바스크립트 사용하기(Use JavaScript in JSX) JSX에서 JavaScript를 사용할 수도 있습니다. HTML 구문의 시작으로 꺾쇠 괄호( < )를 사용하고 JavaScript 구문의 시작으로 중괄호( { )를 사용합니다. Tips. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map map() 메서드는..

항상 인지는 하고 있는데 해결 방법을 매일 고민하게 만드는 자바스크립트의 객체에서 키값 자체를 없애버리는 방법에 대해서 포스팅 하고자 합니다. 예시를 들어서 tableData라는 객체의 키값에는 name, city, age이 있고 각 키에 맞는 데이터가 있다고 가정하겠습니다. 해당 객체에서 delete 를 사용하여 해당 객체의 키값을 입력해주면 해당 객체에서 해당 키값이 삭제가 됩니다. delete 원하는객체.삭제를 원하는 키값 delete연산자는 오브젝트로 부터 해당 프로퍼티를 삭제합니다. 삭제를 하면 true를 반환, 아니면 false를 반환합니다. - 만약에 존재하지 않는 속성을 삭제하려고 하면 delete는 어떠한 작업도 없이 ture를 리턴합니다. - non-configurable 속성은 del..

Vue에서 text파일 .txt로 저장하고 text로된 .txt파일을 불러와서 Vue의 data영역의 데이터에 바인딩을 하기 위해 만든 코드입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 불러오기 저장 export default { name: 'TextFile', data() { return { /** * textarea에 보여줄 텍스트 * @type {String} */ textData: '', }; }, methods: { /*..

vue에서 배열 데이터에 특정 인덱스에 값을 넣었는데도 리렌더링이 안되서 값의 변경을 감지 못해서 데이터가 그대로 남아있는 경우일 때 해당 현상에 대해서 원인과 해결방법을 살펴보겠습니다. 1 2 3 4 5 6 7 data() { return { steps: [ {name: 'step1', number:1}, {name: 'step2', number:2}, {name: 'step3', number:3} ], } } Colored by Color Scripter cs 이렇게 steps 객체 배열이 있다고 가정하고 해당 스텝의 특정 인덱스에 원하는 객체 배열을 넣으려고 했습니다. 다른 컴포넌트에서 stepData를 받아왔다고 가정해서 editStep의 인자에는 스텝데이터로 {name: 'step2', numb..

이번에도 토이프로젝트 진행과정중에서 발생했던 겪었던 문제 중 하나에 대해서 다뤄보려고 합니다. 화면을 마우스로 당겨서 넘기게 해주는 라이브러리입니다. 블라인드에서 해당 부분처럼 당겨서 밀어내는 방식을 사용하길래 찾던 중 알게된 것이 swiper입니다. https://swiperjs.com/ 처음에 공식문서에 나와있는 그대로 코드를 프로젝트에 적용해봤지만 적용이 안되는 현상이 있길래 또 당황... 결과적으로는 또 vue의 버전과 맞지않는 문제가 발생해서 vue2에서는 현재(2021.08.19 기준) swiper의 버전이 swiper6버전이 맞지 않아서 swiper 5버전대를 받아서 사용하였습니다. https://swiperjs.com/vue Swiper Vue.js Components Swiper is t..

프론트엔드 개발을 할 때 아이콘을 많이 사용합니다. 프론트엔드 라이브러리내에서 아이콘들을 제공하긴 하지만 종류가 제한적이고 원하는 아이콘이 없을때가 많습니다. 회사에서 Font Awesome 라이브러리를 사용하는데 개인 프로젝트에서도 사용할려고 했었을때 사용방법을 남기면 좋을 것 같아서 포스팅을 해보려고 합니다. | 설치 방법 yarn이나 npm을 통해서 fontawesome라이브러리를 설치합니다. (fontawesome일것 같지만 fortawesome인점 주의해주세요) npm npm install --save @fortawesome/fontawesome-free yarn yarn add @fortawesome/fontawesome-free main.js에 추가 main.js에 아래 코드를 추가해줍니다...

Vue에서 Bootstrap Vue를 사용하다가 메뉴바를 적용하다가 계속 적용이 안되는 현상이 있어서 애초에 Bootstrap Vue가 적용이 안되어 있다는 것을 알게되었습니다. 검색을 해봐도 알 수 없어서 깃허브에 Bootstrap Vue 의 repository에 issue를 통해 얻은 이유와 해결방법에 대해서 공유해보고자 하겠습니다. https://bootstrap-vue.org/docs/components/navbar#navbar BootstrapVue Quickly integrate Bootstrap v4 components with Vue.js bootstrap-vue.org 부트스트랩의 navbar예제를 구현하고자 했었습니다. 이게 왜 그런지 모르겠는데 계속해서 검색부터해서 오른쪽정렬이 전혀 ..

이번에는 Vue 개발할때 자주 사용하는 개발 도구인 Vue devtools에 대해 포스팅해보겠습니다. 크롬에서 확장 프로그램 플러그인으로 제공하는 Vue devtools는 Vue로 만든 웹의 구조를 파악하거나 데이터 파악하고 디버깅을 할 수 있게합니다. 설치 주소 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd Vue.js devtools Chrome and Firefox DevTools extension for debugging Vue.js applications. chrome.google.com 설치주소로가서 확장프로그램을 추가해줍니다. 확장프로그램을 보시면 Vue.js devtools가 ..

노드가 무엇인지에 대해 여러가지 의견이 많지만, 어떠한 설명도 노드 공식 사이트(https://nodejs.org/ko/)의 설명보다 정확하지는 않을 것입니다. 노드 공식 사이트에서는 노드를 다음과 같이 설명하고 있습니다. 노드는 자바스크립트 런타임입니다. 여기서 런타임이란 특정 언어로 만든 프로그램들을 실행할 수 있는 환경을 뜻합니다. 따라서 노드는 자바스크립트 프로그램을 컴퓨터에서 실행할 수 있습니다. 쉽게 말해 노드는 자바스크립트 실행기라고 생각하면 됩니다. 기존에는 자바스크립트 프로그램을 웹 브라우저 위에서만 실행할 수 있었습니다. 브라우저는 기본적으로 자바스크립트 런타임을 내장하고 있으므로 자바스크립트 코드를 실행할 수 있습니다. 브라우저 외의 환경에서 자바스크립트를 실행하기 위한 여러 시도가 ..