whatisthis?

PCB Design 1년차 웹 개발자가 된 나는 요즘 오랫만에 전공을 공부하는중이다. 웹 개발도 재미있고 좋지만, 전공에서 유일하게 흥미로웠던 PCB 디자인이 그리워져서(..?) 오랫만에 캐드를 다뤄보고 싶었다. PCB 디자인에는 여러가지 툴이 있지만, 나는 Eagle 캐드를 선택하였다. 1. Mac에서 사용 가능! (완전 중요) 2. 무료이다! 3. 교육 자료도 많다! (내 기준) - Eagle(이글) Download https://www.autodesk.com/products/eagle/free-download Download EAGLE | Free Download | Autodesk EAGLE is PCB design and electrical schematic software. Get EAGLE ..

REFERENCE SCSS 가이드 SCSS SASS는 CSS pre-processor로서, 복잡한 잡업을 쉽게 해주고 코드의 재활용성을 높여줌. (유지보수 용이) 변수 Variable 선언 CSS에 변수 개념을 도입해줌. 변수 사용시 $기호를 사용. $primary-color: #333; body { background: $primary-color; } Variable Scope 특정 선택자에서 변수 선언시, 해당 선택자 안에서만 접근 가능. 플래그 (flag) 전역 변수 설정시 : !global 기본 값 설정시 (변수가 undefined나 null일때) : !default 플래그는 mixin 작성시 유용하게 사용됨. body { $primary-color: #eee !global; $sub-color:..

참고 문서 My velog Redux 1. 용어 설명 액션 생성함수 (action creator) 단순히 매개변수를 받아와서 액션 객체 형태로 만들어줌. 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함. 보통 export 키워드를 붙여서 다른 파일에서 불러와 사용함. 리듀서 (reducer) 변화를 일으키는 함수. state,action 두가지의 매개변수를 받아옴. 현재 상태와 액션을 참고하여 새로운 state를 리턴함. 리덕스에서는 여러개의 리듀서를 만들고 합쳐서 루트 리듀서(Root Reducer)을 만들 수 있음. 참고 useReducer에서는 default:에 throw new Error('Unhandled Action')을 넣지만, 리덕스의 reducer에서는 state를 그..

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페이지에 육박하는 사전만한 책(...)을 다 읽었다! 자바스크립트 : 딥 다이브 내가 읽었던 책은 [모던 자바스크립트 딥 다이브] 라는 책이다. 상..

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()를 ..

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

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()..