우당탕탕 개발일지

JS에서의 깊은복사, 얕은 복사를 공부해보자 . 그 전에, 구조분해할당과 spread 연산자를 알아보자.구조분해할당구조화 되어있는 배열, 객체와 같은 데이터를 destructuring 시켜서 각각의 변수에 담는것을 의미한다. //배열의 구조분해 할당.let arr = [1,2]let[one,two] = arrconsole.log(one,two) // 1, 2//객체의 구조분해 할당.//key와 변수이름이 동일해야한다.let obj= {name:"otter", gender:"male"};let {name, gender} = obj;console.log(name, gender) // otter, male값을 단순히 복사해서 넣는것이기 때문에 원본 데이터에 영향을 주지 않는다.let arr = [1,2]let..

Unity 에서 제공하는 라이브러리인 ScreenCapture를 이용해 스크린샷을 찍고, 이를 저장하는 기능을 만들어보자. ScreenCapture의 공식 문서는 아래에 있다.https://docs.unity3d.com/ScriptReference/ScreenCapture.CaptureScreenshot.html Unity - Scripting API: ScreenCapture.CaptureScreenshotIf the screenshot exists already, ScreenCapture.CaptureScreenshot overwrites it with a new screenshot. Add .png to the end of filename to save the screenshot as a .png ..

!section 1.FreeCamp 강의노트프론트앤드와 백앤드의 이해프론트앤드웹 : HTML, CSS, JavaScript , Angular, Vue, React앱 : 코틀린(android) ,swift(ios), React native (cross) , 플러터 (cross)인터넷 브라우저 : html, css 로 작성된 파일을 유저가 보기 편하게 로드하는 역할을 한다.반응형 브라우저 : 유저의 해상도에 따라 UI구성이 달라지게끔 만들어진 브라우저.HTMLhtml 은Hyper Text Markup Language의 약자로,웹페이지에서 문서를 작성,조회,공유하기 위해 만들어진 체계이다.인터넷 브라우저는 이 html을 그려주는 도구이다.구역을 나누는 태그. block element로, 가로 전체를 차지한다...

추가))react-beautiful-dnd 로 구현을 끝냈을 때 계속 아래와 같은 warning이 나타났다. 실행하는데는 문제 없지만, 난 빨간색 로그를 굉장히 싫어하므로 없애고싶다. 이유를 검색해보니 현재 react-beautiful-dnd는  react-redux의 오래된 버전을 사용하고 있다고 한다. 그런데 beautiful-dnd 에서는 더이상 라이브러리를 업데이트하지않는다고.. 하기 때문에.. 다른 라이브러리로 바꾸는것이 좋겠다.. 사용할 것은 @hello-pangea/dnd 이다. 모든 동작은 beautiful-dnd와 동일하다 . 내용은 아래쪽에 수정해놓았다.  트렐로에서 사용하기만 했지 어떻게 만들지 생각조차 해보지 못했던... 드래그앤드롭을 구현해보도록 하겠다.  공식문서는 여기.. 이미..

공식문서https://tailwindcss.com/docs/installation Installation - Tailwind CSSThe simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.tailwindcss.com  1. VSCode 에서 TailWindCSS IntelliSense 설치2. 프로젝트에 TailWindCSS 다운로드 및 init## 3가지 모듈 다운로드. -D 옵션은 개발에서 사용한다는 의미. -developmentnpm install -D tailwindcss npx tailwindcss init 3. tailwind.config.js 작성현..

React 에는 Class형 컴포넌트와 Funtional 컴포넌트 두 가지 종류가 있다. 두 가지 방법의 차이가 무엇이고, 어떤것을 더 많이 사용할까?? 클래스 컴포넌트는 코드가 복잡하고 속도가 느리지만 더 많은 기능을 제공한다. 이에 비해 함수형 컴포넌트는 코드가 간단하고 속도가 빠른 대신, 기능에 제한이 있었다.  어떤 기능의 제한이냐 하면, 아래의 생명주기를 이용할 수 없다는 극한의 단점이었다.  react의 생명주기는 위 그림처럼 Mouting, Updating, UnMouning 3단계로 이루어져있다. 처음 시작할때, 시작 한뒤 리렌더링할 때, 그리고 마운팅을 종료할 때 각각 알맞는 작업을 수행하고 싶을 것이다.  하지만 함수형 컴포넌트에서는 이 생명주기를 이용할 수 없었다. 그래서 성능이 더 ..

TodoList를 구현중이다. 이번 포스팅에서는 유저의 인터렉션을 통해 todoData 값을 변경시키고, UI를 갱신하는 작업을 할 것이다. 컴포넌트 안에서 데이터를 관리하기 위해 state를 사용한다.  더보기App.jsimport React, { Component } from "react";import "./App.css";export default class App extends Component { btnStyle = { color: "#fff", border: "none", padding: "5px 9px", borderRadius: "50%", cursor: "pointer", float: "right", }; getStyle = (completed) =>..

JSX에서는 FOR문을 사용할 수 없다. for문과 비슷한 동작을 하는것이 바로 map()함수이다.Todo리스트를 구현할거고, 다음과 같이 배열 안에 해야할 일 목록이 들어있다고 해보자.todoData = [ { id: "1", title: "study", completed: false, }, { id: "2", title: "clean room", completed: true, }, ]; 이것을 jsx에서 리스트로 표현을 하고자 할때는 다음과 같이 map()을 사용해주면 된다. 아래는 render()내의 함수이다.render() { return ( {this.todoData.map((data) => ( ..