본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


전체 글674

Javascript for in 반복문 자바스크립트에서 사용되는 반복문인 for 명령어는 in 이라는 명령어와 같이 사용할 수 있습니다. 일반적으로 for in 문법을 사용하면 데이터의 인덱스(색인) 을 반환하는 것 으로 알고 있습니다. 그러나 결론부터 이야기하면 for in 반복문을 통해서 나온 대상은 단순한 인덱스라 할 수 없습니다. let array = ['a', 'b', 'c']; for(let i in array) console.log(i); //0,1,2 값이 반환됩니다. 자바스크립트(Javascript)에서 배열은 객체 입니다. 함수나 클래스가 아니기 때문에 prototype 프로퍼티를 갖지 않고 __proto__ 프로퍼티를 가지고 있습니다. 이러한 프로퍼티는 Array.prototype으로 상속을 받고, 이 Array 객체는 O.. 2022. 6. 20.
Javascript 프로퍼티 정의하기 자바스크립트(Javascript) 기초에서 나오는 개념 입니다. 자바스크립트에서 프로퍼티 정의는 프로퍼티를 추가하면서 해당 프로퍼티의 속성(attribute) 명시적으로 정의하거나 기존 프로퍼티의 속성을 재 정의하는 것을 의미 합니다. 쉽게 이해하기 위해 코드를 살펴보아야 하겠습니다! 아래와 같은 객체가 존재한다 가정하여 봅니다. let data = {}; data라는 변수에 속성을 정의하려면 일반적으로 아래처럼 할 수 있습니다. let data = {}; data.textData = '텍스트 데이터'; data.integer = 1234; console.log(data); textData라는 키 값으로 문자열 데이터를 대입하였고, integer라는 키 값으로 숫자 1234를 대입 하였습니다. 이러한 데.. 2022. 6. 20.
리액트 익스프레스 게시판 (React, Express typescript, file drag and drop) 리엑트(React)와 Node.js의 익스프레스(Express)를 활용하여 만든 프로젝트 입니다. 전반적인 기능은 아래와 같습니다. 1. 파일 드래그앤 드롭 2. 리엑트 hook-form을 활용한 데이터 바인딩 3. 데이터 등록은 FormData를 활용한 axios 라이브러리 사용 4. 리엑트 레덕스(redux)를 활용하여 상태 관리 5. 익스프레스 라이브러리를 활용한 서버 구성 6. multer를 활용한 파일 업로드 기능 구현 7. sqlite를 활용한 데이터베이스 구성 게시판(Notice Board) 작업을 한번 하고 나면 라이브러리, 프레임워크에 대한 기능이 좀 더 눈에 잘 들어옵니다. 게시판이라 불리는 기능에는 등록(Create), 읽기(Read), 수정(Update), 삭제(Delete) 의 기.. 2022. 6. 18.
Javascript new 연산자 없이 호출되기 방지 자바스크립트에서 생성자 함수를 만들기 위해서는 new 연산자를 사용합니다. 일반함수는 구현된 함수를 호출하여 사용한다면, 생성자 함수는 함수 자체를 인스턴스화 하여 만들어 사용 합니다. 일반함수 호출방법과 생성자함수 호출방법에서의 차이점 중 중요한 한가지를 꼽는다면, 바로 this 값 여부 입니다. 아래 간단한 함수를 정의하여 보았습니다. function world(){ this.name = 'hello world'; this.print = ()=>{ console.log('print 실행') } } let hello = world(); //hello값은 없습니다. window.name; //전역변수 name이 생성 되었습니다. window.print(); //전역함수 print가 생성 되었습니다. le.. 2022. 6. 15.
React Drag and Drop 기능구현 시 주의 할 점(드래그 앤 드롭) 리엑트에서 파일 드래그 앤 드롭 기능을 구현하기 위해서 아래 속성을 부여하여 보았습니다. * onDrop : 대상이 드랍되면 이벤트가 발생 합니다. * onDragEnter : 드래그한 대상이 드랍영역에 다다르면 이벤트가 발생 합니다. * onDragLeave : 드래그한 대상이 드랍하지 않고 떠나는 경우 이벤트가 발생 합니다. import Reactfrom 'react' import '../App.css'; function DragAndDrop() { const dragFunction = (event, type) => { event.preventDefault(); event.stopPropagation(); console.log(type) } return dragFunction(event, 'drop'.. 2022. 6. 14.
BFS(Breadth-first Search), DFS(Depth-First Search) 너비우선 탐색, 깊이탐색 알고리즘 문제에서 자주 등장하는 단골손님 입니다. 탐색(Search)이란 그래프 구조형태의 데이터에서 특정 데이터를 찾거나 서로의 연결 상태를 확인하기 위한 방법으로 알려져 있습니다. * 물론 그래프 형태의 데이터구조에서만 사용되지는 않습니다 단순한 반복문이나 조건문으로 이루어진 알고리즘이 아니기 때문에 처음 접근하기에는 난이도가 있다고 생각 합니다. 또한 그래프(graph)구조를 2중배열로 표현하는 방법을 만나기 때문에 다차원배열에 대해서 경험이 적다면 역시나 어려울 수 있습니다. 아래와 같은 데이터 구조가 있다고 가정하여 봅니다. 숫자 1은 숫자 2,4와 연결되어 있습니다. 숫자 2는 1,3,4와 연결되어 있습니다. 숫자 3은 2,4와 연결되어 있으며, 숫자 4는 1,2,3과 연결되어 있습니다. 1 .. 2022. 6. 8.