whatisthis?

요즘 책을 공부중이다. 책을 우선 1회독 한 다음, 블로그에 다시한번 정리하면서 2회독 하는것이 목표이다. 책이 1000페이지에 육박하는 엄청 두껍고 헤비한 책이라 (내용도 넘 어렵다 😭) 지금 한 일주일동안 절반정도 읽은 것 같다. ✏️ 리액트 잘 하다가 갑자기 자바스크립트로 돌아온 이유는? 결국 자바스크립트는 내가 뷰를쓰든, 리액트를쓰든, 뭘 하든 프론트엔드 개발자로서의 숙명이라 생각했다. 그런데! 나는 자바스크립트를 수박겉핥기 수준으로 배웠었고, 로직 짜는것도 문제지만 자바스크립트에 대해 한참 모른다고 생각이 들었다. 지금 리액트를 깨작거리면서 배우느니, 자바스크립트를 깊게 딥다이빙해서 배우자고 생각했다. 솔직히 리액트는 핵심 개념이 딱딱 나와있어서 (state, props, 컴포넌트 등) 공식문서..

Dev Blog whatisthis? 🚀 web study & project archive 😺 https://github.com/thisisyjin mywebproject.tistory.com 개발 공부 개발 연습 프로젝트 스킨 편집 Naver Blog 기록 : 네이버 블로그 기록 :) https://mywebproject.tistory.com blog.naver.com 일상 자격증 공부 타임랩스 계획 Velog thisisyjin (thisisyjin) - velog TIL 22-03-17 React.js Today I Learned ... react.js >🙋‍♂️React.js Lecture >🙋‍My Dev Blog 🚀 예제 - 끝말잇기 게임 WordRelay.jsx Hooks 이용시 💡 targ..

React.js Today I Learned ... react.js 🙋‍♂️React.js Lecture 🙋‍My Dev Blog 🚀 예제 - 끝말잇기 게임 WordRelay.jsx const React = require("react"); const { Component } = React; class WordRelay extends Component { state = { word: "강아지", value: "", result: "", }; onSubmitForm = e => { e.preventDefault(); if (this.state.value[0] === this.state.word[this.state.word.length - 1]) { this.setState(prevState => ({ res..

React.js 🚩 목차 - 클래스형 컴포넌트 - 함수형 컴포넌트 - 배열 컴포넌트 - 컴포넌트에서의 콜백과 이벤트리스너 클래스형 컴포넌트 생명주기 메소드와 컴포넌트 구성요소를 모두 포함하는 클래스형 컴포넌트. 총 두가지 종류의 클래스를 사용. - Component - PureComponent 1 / Component 클래스 - props, state, life-cycle method가 들어있는 구조의 컴포넌트 2 / PureComponenet 클래스 - Component 클래스를 상속받은 클래스. - shouldComponentUpdate() 함수를 얕은 비교를 하도록 재정의. 📌 shouldComponentUpdate(nextProps, nextState) 프로퍼티를 변경하거나 setState()를 ..

프로젝트를 진행하다가, 모바일 웹에서 input="file"로 이미지를 업로드해서 해당 게시글에 저장되도록 구현해야 하는 기능이 있었다. 물론 아직 세부 컴포넌트로 쪼개는중이라 구현은 못했지만, 대충 맛보기로 html-js 스택으로 저렴하게 구현하는 예제가 있길래 시도해봤다. - 참고 : 워낙 간단한거라 css랑 js는 그냥 인라인으로 해두었다. 🔑 KEYPOINT ! ... newImage.src = URL.createObjectURL(file); URL.createObjectURL() - Web API | MDN URL.createObjectURL() 정적 메서드는 주어진 객체를 가리키는 URL을 DOMString으로 반환합니다. developer.mozilla.org - 객체 URL을 해제하려면 r..

React.js 컴포넌트 - 기존 웹 프레임워크 = MVC 방식 (Model, View, Controller) 정보담당 Model 화면담당 View 구동담당 Controller - 코드관리는 효율적 - 각 요소의 의존성이 높아 재활용 어려움 💡 import 문에서 파일 이름 확장자가 생략된 이유 - create-react-app의 웹팩 module resolution 기능 때문. - 확장자가 파일 이름에 있는 파일 먼저 임포트 - 확장자가 파일 이름에 없는 경우 - extentions에 정의된 확장자 목록을 보고 확인함. - 지정 경로에 없다면 - 같은 이름의 폴더가 있는지 체크 - 같은 이름 폴더가 있다면 index 파일 검사 - 컴포넌트 구성요소 property 상위 -> 하위 컴포넌트로 전달되는 읽..

🎲 틱택토(Tic Tac Toe) 게임 Ref. 자습서: React 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org index.html style.css body { font: 14px "Century Gothic", Futura, sans-serif; margin: 20px; } ol, ul { padding-left: 30px; } .board-row:after { clear: both; content: ""; display: table; } .status { margin-bottom: 10px; } .square { background: #fff; border: 1px solid #999; float: lef..

React.js Day 03 React Hooks + WebPack 💾 PART 1 220315 [TIL] Today I Learned 💯 React.js - (1) React.js Day 03 React Hooks + WebPack 1 / React Hooks 리액트에서 추천하는 것 = Hooks의 사용. Class Component를 자제하고, 함수형 프로그래밍을 위한 Hooks를 권고함. 클래스 컴포넌트 class Button extends.. mywebproject.tistory.com * 지금까지의 코드 📃 webpack.config.js const path = require("path"); module.exports = { name: "wordrelay-setting", mode: "devel..

React.js Day 03 React Hooks + WebPack 1 / React Hooks 리액트에서 추천하는 것 = Hooks의 사용. Class Component를 자제하고, 함수형 프로그래밍을 위한 Hooks를 권고함. 클래스 컴포넌트 class Button extends React.Component { // 생략 render () { return ( ) } 함수형 컴포넌트 const Button = () => { // 생략 return } 원래도 함수형 컴포넌트가 있었는데, 그전에는 state나 ref 등을 클래스에서만 쓸 수 있었다. 💡 함수형에서도 state랑 ref를 쓸 수 있게 만든 것 = React Hooks (+ useEffect) useState() React.useState()..

React.js Day 02 (=빈 태그)의 사용 리액트에서 단점이였던 것이 항상 컴포넌트를 로 감싸줬어야 했다. 그러면, reactDOM으로 렌더링 했을때 root>div>컴포넌트 이런식으로 쓸 데 없는 div가 생겨버리게 된다. 따라서, 이런 단점을 개선한 것이 바로 로 감싸주는 것. 1. 컴포넌트의 render 부분 return ( 💯구구단 게임💯 📃 {this.state.first} 곱하기 {this.state.second} 는? 입력 LOG 🔎 {this.state.line} {this.state.result} ); 2. ReactDOM의 render 부분 ReactDOM.render( , document.querySelector("#root") ); 이런식으로 div#root 하위 div들이 ..