참고. app.js에서 바로 그냥 테스트 하고 있음 기본. 디자인 안 먹인 버전 import './App.css'; import React, {useState} from 'react'; function App() { const [currentTab, setCurrentTab] = useState(0); // 테스트니까 배열로 관리해볼게요 const menuArr = [ {name: 'Tab1', content:'첫번째 탭이에요 👼'}, {name: 'Tab2', content:'두번째 탭이에요 😇'}, {name: 'Tab3', content:'세번째 탭인데요 😊'} ] // 탭 내용 넣어줄거에요 const selectMenuHandler = (index) => { setCurrentTab(index);..

1. 그냥 코드에서 발라줄 때 /** 연결 리스트의 가장 기본인 단일 연결 리스트(Single Linked List) 를 만들어볼게요 */ // 노드 객체 생성 var Node = function(data) { // 데이터와 다음 노드의 주소지를 가지고 있어야 함 this.data = data; this.nextNode = null; } // Head 지정 var Head = null; // 첫번째 노드 만들자 var Node1st = new Node("김멍멍🐶"); // Head에 첫번째 노드 참조 head = Node1st; // 두번째 노드 만들자 var Node2nd = new Node("이냥냥🐱") // 첫번째 노드의 다음 노드 주소지 값으로 두번째 노드를 참조 Node1st.nextNode =..

게시판을 만드려고 하다보면 피할 수 없는 기능 중 하나인 로그인 기능. localstorage를 사용해서 login을 구현해보려고 한다. 먼저 localstorage란? 브라우저 상에서 데이터를 저장해서 사용하는 것 현재 애플리케이션 전역에 접근 가능 브라우저 상에서 데이터를 저장해서 사용하는 LocalStorage 와 SessionStorage 의 기능적 차이는 뭔데 ? Session Storage는 브라우저를 종료하면 저장된 데이터가 사라지는 휘발성 저장공간 Local Storage는 브라우저 청소를 하지 않는 이상 사라지지 않는 저장공간 두개 다 각각 5MB 정도의 text를 저장할 수 있다고 하니 사용할 때 참고해서 적절히 섞어 사용하면 좋을 것 같다. 🖥 How to Use? setItem(ke..

리액트 프론트와 관련한 간단 에러 해결 .. 방법은 쉬우나 정말 예상치도 못한 곳에서 고여 있느라 시간 오래 뺏김 💦 에러 메세지 Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment ...? 💦 발생 원인 리액트 프론트와 관련한 간단 에러 해결 .. 방법은 쉬우나 정말 예상치도 못한 곳에서 고여 있느라 시간 오래 뺏김 💦 에러 메세지 Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment ...? 💦 발생 원인 JSX 사용 시 하나의 태그로 묶여있어야 하는데.. 여러개의 루트 태그를 걸어놓고 애꿎은 TA..

상태 관리 라이브러리로 Redux 를 구현하다가... 문제가 발견되면서 뭔가 내가 수정해서 쓰기에는 구조가 되게 복잡하다는 생각이 들었다. 거기서부터 든 의문점이 왜 상태 관리 라이브러리로 Redux를 많이 사용하는가였고 (구현 용이성은 떨어지나 성능이 뛰어나게 좋다던지 그런 장점이 있는가를 서칭하기 시작함.. ), 그 이유는 단순하게 대부분의 사용자들이 Redux를 사용하니 당연히 기술을 습득하는 입장에서는 '사용자들이 가장 많이 사용하는 라이브러리 = 좋은 라이브러리 혹은 믿을만한 라이브러리'라는 생각을 하게 했기 때문인 듯하다. Redux는 보일러 플레이트 코드를 많이 작성해야하는 아주 큰 단점이 있는데 필요에 따라 Redux를 사용해야할 수도 있겠지만, 서비스 사용량이 그렇게 거대하지 않은 프로그..

우선 JavaScript는 타입 변환에 대해 유연하게 동작한다. 1. "==" 연산자 == 연산자의 경우, 두 피 연산자의 값(value)가 다를 경우 일부 피 연산자의 타입(type)을 변환하여 값을 비교. : 타입을 비교하지 않는다. 10 == 10//true 10 == '10'//true true == 1//true true == '1'//true null == undefined//true 2. "===" 연산자 === 연산자의 경우 타입을 변환하지 않고 값을 비교한다. : 타입과 값을 모두 비교한다. 10 === 10//true 10 === '10'//false true === 1//false true === 'true'//false null === undefined//false NaN === N..

리액트로 웹앱을 개발하기 시작하게 되면, Redux dev tool을 설치하게 된다. 게시글에 들어가기 앞서 Redux에 대한 개념부터 짚고 가도록 하겠다. ✨ Redux(리덕스란)? JavaScript(자바스크립트) 상태관리 라이브러리이며, 본질은 Node.js 모듈이다. ✨ Redux의 3가지 원칙 1. Single Source of Truth - 동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미. 2. State is read-only - 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능. - 같은 맥락으로, 리덕스에서도 액션(action) 이라는 객체를 사용해서만 상태 변경이 가능. 3. Changes are made with pu..

상태를 효율적으로 관리하고 보여주는 것이 프론트엔드 역량의 핵심이라는데.. 여기서 자주 나오는 용어인 '상태 관리'는 무엇인가? Front-End 에서의 '상태관리'란? 1. 데이터를 설계된 UI/UX에 맞게 설계하고 구현하는 일이며, 2. 네트워크를 통해 서버로 전달되는 client의 요청에 따라 변화하는 상태를 관리하는 일. 상태관리 방법 1. 프레임워크 등장 - React, Vue, Svelte 등의 프레임워크 등장 - 앵귤러의 등장으로 상태는 과거의 DOM에서 탈출할 수 있게 되었다. front-end 개발자는 DOM이 아닌 JavaScript에서 상태를 관리할 수 있게 되었다. 즉, DOM에 접근하는 로직이 필요없어지게 되었다는 것이다. 거기에다 필요한 상태들을 controler에 모아서 관리하..

일반 함수는 하나의 값(혹은 return 값이 없을 수도 있음)만을 반환. but. 제너레이터(generator)를 사용하게 되면, 여러 개의 값을 필요에 따라 하나씩 반환(yield)할 수 있게 된다. generator과 iterable 객체를 함께 사용하면 손쉽게 data stream을 만들 수 있다고 함. * 이터러블(iterable) - 반복 가능한(iterable, 이터러블) 객체는 배열을 일반화한 객체. 이터러블이라는 개념을 사용하면 어떤 객체에든 for..of 반복문을 적용할 수 있다. - 배열이 대표적인 이터러블임. 배열 외에도 다수의 내장 객체의 반복도 가능. [ 이터레이터 iterator : obj[Sysbol.iterator]의 결과. 이어지는 반복 과정을 처리한다. ] ** 이터러블..

공부하다가 ?. 라는 첨 보는 문법이 나와서 검색하려고 했더니 ?. 키워드는 검색이 안됨.. 그래서 더 찾아보니 이걸 Optional Changing이라고 한다더라 ~ 참고로 이 문법은 javascript.info 에 검색하면 최근에 추가된 문법이라고 뜰 정도임 처음 보는게 ㅇㅇ 당연함 옵셔널 체이닝(optional Chaining) 인 ?. 을 사용하면, 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다고 한다. 배경) 어떤 페이지에 존재하지 않는 요소에 접근하여 요소의 정보를 가져오려고 하면 문제가 발생한다. // querySelecter(...) 호출 결과가 null인 경우 에러 발생 let html = document.querySelector('.my-element').innerHT..

Module not found Error: Can't resolve 'history' in @type/history 라는 오류가 뜬다 이것을 해결해보도록 하자. 1번. VSCode 같은 경우 다중 언어를 지원하는 프로그램이라 기본 패키지에 대한 유형 정보를 typescipt에 가지고 있지 않다고 함. 고로 history 같은 기능은 포함이 안되어서 따로 설치해주어야 한다는 것 같음. = 사용자가 이런 언어를 쓰겠다 ~~ 라는 정보를 넘겨주고 이런 기능이 필요해요 하는 일종의 과정 powershell 에 npm install --save history npm install react-router-dom --save 를 입력해서 두개를 깔아줌.. 나는 두개 다 깔았지만 계속 같은 오류 발생.. 하지만 뭔가 ..

RFCE 는 React Functional Component Export의 약자로 visual studio code 를 사용할때 빈 js 파일 안에서 rfce 를 치고 tab을 누르면 기본 껍데기라고 불리는 코드들이 또롱~! 하고 생긴다. 사용방법 1. VSCode 에서 ES7+ React/Redux/React-Native snippets 설치해주자. https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace Extension for Visual Studio Code - Extensions for..