whatisthis?

사실 지난번에 기획했었던 rainy-player. 너무 UI가 유치하고 (...) 맘에 들지 않아서 초반에 다시 갈아 엎었던 프로젝트이다. 처음 기획안 그리고 제작 과정(?) 은 링크 참조! Rainy player 나는 평소에 잠이 오지 않으면 비소리를 듣고는 한다. 그래서 내가 좋아하는 빗소리를 틀어주는 rain sound player app을 만들면 좋겠다고 생각했고, 기획을 하기 시작했다. 처음 기획안 위와 같이 나무가 보이고, 빗소리를 들을때마다 나무가 점점 자라도록 하는 컨셉으로 구상했었다. 그런데, 뭔가 심심한 느낌이 들고 디자인이 중요한 것 같아서 기능을 이것저것 고민하게 되었다. 그래서 탄생한 새로운 버전! NEW! Rainy Player 빗소리 플레이어인 것은 동일하지만, UI가 조금 더..

styled-components 공식 문서 styled-components = css in JS. 스타일 정의를 CSS파일이 아닌 JS 컴포넌트에 바로 삽입하는 기법. 웹페이지를 HTML/CSS/JS로 분리하는 것이 아닌, 여러개의 컴포넌트로 분리하고, 각 컴포넌트에 각각의 HTML,CSS,JS를 내장하는 방식으로 작성. styled-components 설치 $ yarn add styled-componentsSYNTAX styled 함수를 임포트. styled 함수는 HTML 태그 또는 리액트 컴포넌트에 스타일을 적용함 HTML Element styled.button` // style `; React Component styled(Button)` // style `; 두 문법 모두 ES6 Tagged T..

요즘 공부하는 것 한동안 블로그와 깃헙을 방치해둬서 거미줄이 쌓여있길래 방문했다. 원래는 개발 공부 블로그이다보니, 잡담이나 근황은 절대 안적지만 .. 내 인생 나름의 업적(?)을 쌓고 돌아왔기 때문에 기록하기로 하였다. https://mywebproject.tistory.com/429 공부 근황 mywebproject.tistory.com 왜 몇일동안 포스팅을 안했는지에 대한 글이다. 솔직히 지난 몇달간 계속 컴퓨터로 강의 + 코딩만 하다보니, 책과 볼펜이 어색했었다. 문득 자바스크립트를 다시 딥다이브로 공부하고싶다고 생각하였고, 짧은 기간 안에 약 1000페이지에 육박하는 사전만한 책(...)을 다 읽었다! 자바스크립트 : 딥 다이브 내가 읽었던 책은 [모던 자바스크립트 딥 다이브] 라는 책이다. 상..

요즘 책을 공부중이다. 책을 우선 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..