allblack의 개발 새발 allblack의 개발 새발

mobx란? MobX는 전역 상태 라이브러리중 하나입니다! 특징 React에 종속적인 라이브러리가 아님(vue, anglur등에서도 사용가능) redux와 다르게 store에 제한이 없음 observable을 기본적으로 사용하고 있음 Mobx는 절대적으로 필요한 경우에만 state 변경 (어떤 뜻인지를 모르겠음) Typescript를 기반으로 만들어짐 개념 observable: 추적 가능한 state 정의 action: state를 변경하는 메소드 computed: state와 캐시로부터 새로운 결과를 반환 observable Observable State를 만듬 state의 변화는 reaction과 computations를 일으킴 관찰할 수 있는 변화가 일어나면 탐지함 시간에 따라 변할 수 있는 값들을..

리액트는 UI 기능만 제공하는 라이브러리라서 개발자가 직접 설정해야 하는 것들이 많이 있습니다. 그런데 이렇게 개발자 마음대로 설정할 수 있는 점 때문에 처음 시작하는데 많은 어려움이 있습니다. 그래서 react에서 CRA를 만들었습니다. CRA란? 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 툴입니다. CRA의 장점 초보자가 react에 접근하기 쉽다. webpack, babel등 세부 설정을 자동으로 해줍니다. ES6+문법, CSS 후처리같은 개발환경 자동으로 설정해줍니다. cra 단점 webpack,babel설정을 변경하기 어렵다. 작은 프로젝트를 진행할때에는 너무 파일이 무겁다 (물론 react-app-rewired나 eject를 이용해서 webpack설정을 수정할 수 있습니다.)..

SPA와 MPA를 알아보기전에 정적 사이트와 동적 사이트의 차이를 알아보자! static website(정적 웹) vs Dynamic website(동적 웹) 정적 웹 서버에 저장된 html파일이 그대로 브라우저에 보이는 것을 말한다. 개츠비가 가장 대표적인 정적 페이지라고 할 수 있다. HTML안에 모든 데이터가 들어 있는 사이트 동적 웹 정적인 웹사이트의 반대말로 동적인 웹사이트를 말한다. 서버에 저장된 html파일이 그대로 브라우저에 그려지는 것이 아닌 동적으로 html파일이 만들어 지는 것! SPA vs MPA? SPA(Single Page Application) 한 개(Single)의 Page로 구성된 Application이다. SPA는 CSR(Client Side Rendering) 방식으로 ..

webpack이 뭐죠? webpack은 모듈 번들러입니다. 번들?, 번들러? 번들링(bundling) 모듈 번들링은 (html에 들어가는) 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식입니다 번들러(bundler) Browserify, Webpack, Rollup등과 같은 하나에 파일로 통합해주는 것입니다. 번들(bundle) 모든 의존성이 묶여있는 파일(js)입니다. 위에 내용을 정리하면 webpack은 많은 자바스크립트 파일을 하나로 만들어주는 방식(도구)입니다. 구지 번들링을 이용해서 js파일을 모아줄 필요가 있나요? 물론 직접 html에서 script tag를 이용해서 불러도 됩니다. 그러나 요즘 트렌드는 react, vue같이 하나에 html 파일에 모든 걸 때려 넣는(?) S..

자기소개 안녕하세요 반갑습니다. 저는 독특하고 창의적인 개발자가 되고 싶은 선린인터넷고 3학년에 재학 중인 react 개발자 유명환입니다! 선린인터넷고등학교 해커톤(선린톤) 소개 선린인터넷고등학교에서는 재학생들을 대상으로 하는 많은 대회들이 있습니다. 그중에 선린톤은 여름방학에 진행되는 해커톤 대회입니다. 올해는 7회를 맞이하였습니다! 👏👏👏 원래는 오프라인으로 진행이 되지만 코로나로 인해서 온라인으로 진행이 됩니다. 선린톤은 매회 각기 다른 주제(콘셉트)를 가지고 있습니다. 올해의 콘셉트는 "래트로"라고 합니다! 저는 선린톤 참여 경험은 없지만 이번에 처음으로 개발자 스태프로 참여하게 되었습니다.(ㅠㅠ) 목차 - 기술 스택 -개발과정 - 어려웠던 점 -배운 점 어드민 사이트 개발일지 부제: 처음 하는 ..

vue.js cli 설정 하는 방법을 알아보겠습니다. npm install -g @vue/cli // cli3 버전 npm install vue-cli //cli2 버전 cli툴을 설치해주세요! vue create {project명} //3.x vue init {탬플릿} {파일 경로} //2.x 프로젝트 생성 //3.x npm run serve yarn serve //2.x npm run dev yarn dev 로컬 실행 방법 cli2 vs cli3 cli2는 기본 세팅이 없음, 탬플릿 선택해야됨, webpack이 밖에 들어나 있음, node module이 자동설치 안됨 cl3는 기본 설정 있음,탬플릿 따로 없음,내장 webpack, node module자동 설치됨 (자세한건 제가 참고한 블로그를 봐주세..

이중 useState,Effect다음으로 많이 사용하는 3개의 hooks를 알아봅시다! -useCallblack- -설명 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다. 우리가 컴퍼넌트를 호출하면 안에있는 모든 함수,변수들이 재선언 됩니다. 이럴경우에 컴퓨터 memory나 cpu에 많은 부하가 걸릴수 있습니다. (물론 작은 프로젝트는 상관이 크게없음) 위에 말을 해석하면 호출,재선언이 있을때마다 함수를 만들지 않고 한번 만든 다음에 계속 재사용한다고 생각하시면 됩니다! -사용법 import React,{useCallback} from "react"; const App=()=>{ const test=useCallback(()=>{ alert("test"); },[]); /* 만약 참조하는 값이..

Hooks? 아주 간단히 말씀드리자면 class없이 class의 기능(state,life cycle)을 사용하기 위해서(hook)하기위해서 만들어졌습니다! useState import React,{useState} from "react"; const [test,settest]=useState("10"); test는 10에 값을 가지고 있고 settest를 통해 test값을 변경가능하다. useState에 넣을수있는 값은 제한은 없다.(arry,string,undifend)등등 하위 컴퍼넌트에 settest를 넘긴다음에 하위 컴퍼넌트에서 변경해도 test값을 변경 가능하다! useEffect import React,{useEffect} from "react"; useEffect(() => { alert("..