본문 바로가기

전체 글56

JSX 문법 JSX란? 자바스크립트의 확장 문법 자바스크립트의 공식적 문법이라고는 할 수 없음 브라우저 실행 전 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환 됨 예시) 변환 전 function App(){ return ( react practice ) } 변환 후 function App(){ return React.createElement("div", null, "react", React.createElement("span", null, "practice")) } JSX 문법 규칙 및 사용 방법 1. 컴포넌트에 여러 요소가 있을 경우 반드시 부모 요소가 감싸는 형태여야 한다. function App(){ return ( 자식 자식 ) } : 리액트가 사용하는 Virtual DOM.. 2022. 10. 19.
vanilla.js vs react.js 1. vanilla vs react : 버튼을 클릭하면 숫자가 증가되는 간단한 이벤트 구현 (1) vanilla Total Clicks : 0 Click Me *이벤트 등록하기 위한 과정 : 4단계 - 태그 작성 - 태그 아이디 부여 - script로 아이디 불러와 변수에 저장 - 변수에 이벤트 리스너 추가 (2) react *이벤트 등록하기 위한 과정 - react.js로 엘리먼트 생성 후 태그 명, 이벤트 (각종 props 정의 가능), innerText입력 - react dom으로 html 업데이트 => vanilla.js와 비교했을 때 코드가 굉장히 간결해지고 가독성이 높아짐. (3) 차이점 vanilla는 HTML를 먼저 만들고 그걸 Javascript로 가져와서 HTML을 업데이트. react.. 2022. 10. 19.
소프트웨어 비용 산정 기법 ✍️ 소프트웨어 비용 산정 - 개발에 소요되는 인원, 자원, 기간 등으로 소프트웨어의 규모를 확인하여 개발 계획 수립에 필요한 비용을 산정하는 것. - 소프트웨어 비용을 너무 높게 산정할 경우 예산 낭비와 일의 효율성 저하를 초래할 수 있고, 너무 낮게 산정한 경우 개발자의 부담이 가중되고 품질 문제가 발생할 수 있음. ✍️ 소프트웨어 비용 결정 요소 방법 내용 프로젝트 요소 제품 복잡도, 시스템 크기, 요구되는 신뢰도 자원 요소 인적 자원, 하드웨어 자원, 소프트웨어 자원 생산성 요소 개발자 능력, 개발 기간 ✍️ 비용 산정 기법 1.하향식 비용 산정 기법 - 전문가 감정 기법, 델파이 기법 2.상향식 비용 산정 기법 - LOC 기법, 개발 단계별 인월수 기법, 수학적 산정 기법 1. 하향식 비용 산정.. 2022. 7. 6.
SDLC (Software Development Life Cycle) : 소프트웨어 생명 주기 | SDLC Model | 소프트웨어 개발 방법론 - SDLC? : 소프트웨어 생명 주기(수명 주기)는 개발과 유지보수 등에 필요한 작업들을 체계적으로 정리한 개발 방법론의 바탕으로, 개발을 위한 정의, 운용, 유지보수 등의 과정을 단계별로 나눈것이다. - SDLC 모델 1. 폭포수 모델 (Waterfall Model) 2. 프로토타이핑 모델 (Prototyping Model) 3. 나선형 모델 (Spiral Model) 4. 반복적 모델 1. 폭포수 모델 : 폭포수 모델의 특징은 이전 단계로 돌아갈 수 없다는 전제를 깔아두고 시작한다. 그러므로 각 단계 마다 결과를 검토하고 승인하는 과정을 확실하게 마쳐야 한다. (1) 가장 오래되고 폭 넓게 사용되는 전통적인 모델 (= 고전적 생명 주기 모형) (2) 한 단계가 마무리 되어야 다음 단계로 넘어가는 '.. 2022. 6. 20.
DOM 이해 하기 🔎 DOM(Document Object Model) ? : XML과 HTML 문서에 접근하기 위한 인터페이스. Web API로 브라우저 웹 문서 조작할 수 있음. 🔎 Web API? API (web or XML page) = DOM + JS (scripting language) 예시) const contentBox = document.querySelector('.contentBox'); document.style.backgroundColor = 'red'; const innerHeight = document.innerHeight; DOM의 노드들 중에서 특정 노드를 선택하고, 선택한 노드의 색을 변경하거나 viewport의 높이를 찾는 등 DOM을 조작하는 데 사용하는 스트립트 메서드들을 Web API라.. 2022. 1. 13.
ES6로 깔끔한 코드 만들기 이번에 프로젝트할 때 asnyc ~ await, arrow function, const & let script 기능을 사용했었는데, 프로젝트가 끝나고 여유롭게 ES6문법을 자세히(?) 보는 도중 놀라운 기능들이 많이 있다는 걸 알게 되었다. 진작 알았으면 좀 더 깔끔한 코드를 짤 수 있었을 텐데... 참고로 ES5가 표준처럼 쓰이다가 지금은 ES6~ES8까지 표준으로 쓰이는 추세인 것 같다. 밑에 링크를 통해 ES6 + 브라우저 지원 현황을 살펴보자. 참고 : https://kangax.github.io/compat-table/es6/ 1. ES6(ECMAScript)? : ECMA 인터내셔널의 ECMA-262 기술 규격으로 정의된 표준화 스크립트 프로그래밍 언어. 그냥 자바스크립트 표준 언어라고 생각하.. 2022. 1. 9.

티스토리툴바