React를 쓰는 이유 0. Component 기반의 UI라이브러리로, Component들을 만들어, 레고처럼 필요한 것들만 선택해 사용하면 됨 1. Virtual DOM을 이용하여 이전 페이지와 바뀐 부분들을 감지해 변화된 부분만 재 렌더링해줌 2. CSR방식을 채택하여 SPA(Single Page Application)구축을 가능하게 해줌 3. JSX문법을 사용하여 컴포넌트 별로 구성이 가능(Babel이 HTML문서로 변환해 줌) -> 재사용성이 좋아짐 4. 리액트로 웹을 개발하면 리액트 네이티브를 통해 앱 개발이 쉬워짐 5. 선언형 프로그래밍 방식임 ; 그냥 목적을 바로 말함 vs 명령형 프로그래밍 방식 ; 절차를 하나하나 다 나열해야함 ex) jQuery Virtual DOM ; UI의 이상적인 ..
React - HTML,CSS,JS도 모두 JS화 해버리자 - 라이브러리. 기능이 비교적 간단함 - 타입스크립트 지원 - 단순한 컴포넌트 정의의 용이함 - 더 빠르고 담대한 개선 - 커뮤니티가 더 큼 + 회사가 더 많고, 사람이 더 많음 Vue - HTML,CSS,JS특징들을 각각 살려 편하게 만들자 - 프레임워크. 기능이 이미 갖춰져 있음 - 코드가 더 깔끔함 더보기 현직 vue.js 개발자인데요 구직사이트들 보면 리액트 구하는 곳이 훨씬 많아서 리액트도 틈나는대로 공부하고 있어요 하지만 vue.js를 쓰는 곳으로 갈 수 있다면 그 선택지를 고르고 싶습니다 저는 리액트와 뷰 둘다 하는 개발자입니다. 확실히 어떤 프로젝트에는 리액트가 더 적합하고, 어떤 프로젝트는 뷰가 더 적합하다고 느낄때가 많아요. 저..
웹 개발자 연봉 글로벌 / 미국 평균 연봉 백앤드 개발자 ; 9500~ / 1.3억~ 프론트앤드 개발자 ; 1억~ / 1억 1천~ 풀스택 개발자 ; 1억 1천~ / 1억 2천~ - 날이 갈수록 웹개발자 수요 많아지는 중 프론트앤드 개발 순서 1. Basic Tools ; 개발 툴 공부 - 컴퓨터 - Text Editor(VS code, Intellij, Atom, Sublime Text 등) 필요 - 브라우저(Chrome, Edge, Safari, Firefox) - Terminal(Powershell, Bash, zsh) 2. Front-end - HTML HTML Tags, Page Structure, Semantic Tags(어떨 때 어떤 태그를 쓰는것이 의미 있는지), SEO(특정한 키워드로 네이..
타입 별칭 ; Primitive, Union Type, Tuple, Function 등 직접 작성해야하는 타입을 다른 이름으로 지정 가능 // primitive타입 별칭 type MyStringType=string; let myStr:MyStringType='hello'; // Union 타입 별칭 type StringOrNumber=string|number; let another:StringOrNumber='Anna'; // Tuple 타입 별칭 type A=[number,number]; let b:A=[1,2]; // Function 타입 별칭 type EatType=(food:string) => void; Interfaces ; 하나의 타입을 만들어내는 방식 - 컴파일 시 사라짐(js파일에는 존재 ..
Bundler ; JS파일 뿐 아니라, 애플리케이션에 필요한 모든 종류의 파일들을 모듈 단위로 나누어 최소한의 파일 묶음(번들)으로 만들어냄 - Parcel ; 구성 없는 단순한 자동 번들링. 소/중형 프로젝트에 적합 - Webpack ; 매우 꼼꼼한 구성. 중/대형 프로젝트에 적합 - Rollup ICO Converter ; ICO 확장자로 변경해줌 - 32pixel로 설정 https://www.icoconverter.com/ ICO Converter Converts images to the ICO format for your websites or applications. www.icoconverter.com parcel-plugin-static-files-copy https://www.npmjs.co..
BootStrap ; 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크 - 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동 - 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도움 1. CSS로 적용 - 단 ; 기능에 한정적 https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com > Bootstrap > 좌측 상단 Docs 클릭 > 2번에 Include Bootstrap’s CSS and JS의 와 내용 html파일에 복붙 > 좌측 Components내용들 class명 이용하여 자유롭게 이..
CSS Preprocessor ; CSS 전처리기 - CSS의 불편함을 확장 기능으로 상쇄 ex) Sass, Less, Stylus - 전처리기 ; CSS문법과 유사 & 선택자의 중첩이나 조건문,반복문,다양한 단위의 연산 등 표준 CSS보다 훨씬 많은 기능 제공 - 웹에서 직접 동작 x, 웹에서 동작 가능한 표준의 CSS로 컴파일 - Less ; 진입장벽이 비교적 낮지만 기능의 한계 존재 - Stylus ; 덜 유명하며 비교적 늦게 나왔기에 성숙도 떨어짐 - Sass(SCSS) ; 위 두 전처리기의 장점 가짐 SCSS ; Sass 3버전에서 새롭게 등장, Sass의 모든 기능을 지원하는 CSS의 상위집합 SCSS 문법 주석 1. /* 주석 */ ; 컴파일된 CSS에 존재 o 2. // 주석 ; 컴파일된 ..
타입 시스템 - 컴파일러에게 사용하는 타입을 명시적으로 지정 ; TS에 해당 - 컴파일러가 자동으로 타입을 추론 ; JS에 해당 -> 사용법에 대한 오해 야기 => 비추 - TS의 경우 매게변수에도, return값에도 명확하게 type을 명시해줘야함. function f5(a:number):number{ if(a>0){ return a*38; } } function f7(a:{name:string; age:number}):string{ return `이름은 ${a.name}이고, 연령대는${ Math.floor(a.age/10)*10 }대 입니다.`; } console.log(f7({name:'Mark',age:23})); console.log(f7('Mark')); // 오류 발생 Type 호환성 공변..
