웹 개발
-
[JavaScript] Hoisting 현상이란웹 개발/JavaScript 2021. 5. 7. 11:04
**변수는 var 키워드에만 적용 (let 안됨) ** **함수는 선언적 방식만 가능** 일반적으로는 선언을 먼저 하고 사용해야하지만 자바스크립트는 hoisting 문제로 키워드의 선언을 나중에 할 수 있다. catName("Chloe"); function catName(name) { console.log("My cat's name is " + name); } /* 위 코드의 결과는: "My cat's name is Chloe" */ - 단, Hoisting은 초기화가 아닌 선언만 끌어올린다는 것을 주의하자 [예시] var x = 1; // x 초기화 console.log(x + " " + y); // '1 undefined' var y = 2; [실제 로직] var x = 1; // x 초기화 var ..
-
[Flutter] flutter 2.0 stable 버전 출시에 대해 알아보자웹 개발/Flutter 2021. 5. 3. 14:03
flutter 2.0 웹 컨셉 flutter 2.0 에서 웹 stable 버전이 출시되었다. 현재 창업 아이템을 개발 중에 있는데 플랫폼 특성상 UI 디자인적 요소가 중요하고 추후 태블릿 앱으로 발전시켜나갈 계획이였기 때문에 flutter web으로 개발 중이다. url를 포함한 여러 불안정한 웹 지원 요소들 때문에 reactJS로 옮겨야하나 고민이 있었지만 flutter 2.0 버전이 나온 뒤 flutter로 계속 진행하기로 결정되었다. 2.0 버전으로 마이그레이션 하기 위해 어떤 요소들이 추가되었는지 알아보았다. 1) Progressive web apps (PWAs) PWAs, 즉 프로그레시브 웹앱은 모바일 앱과 웹 기술의 장점을 결합하고 단점을 보완한 미래형 웹 기술이라고 한다. 네이티브 앱은 오프..
-
[JavaScript] ESLint와 Prettier 설치 및 설정웹 개발/JavaScript 2021. 4. 29. 15:32
자바는 정적 컴파일을 하지 않은 인터프리터 언어이다. 따라서 에러 찾기가 힘들고, 에러를 해결하지 않은 채 배포할 가능성이 있다고 한다. 자바 스크립트를 사용하는 첫 협업 프로젝트라 이를 해결하기 위해 eslint와 prettier를 사용해보았다. EsLint는 자바스크립트 문법에서 에러를 표시해준다 (flutter의 linter와 같은 개념인 듯 하다.) Prettier는 코드스타일을 자동으로 formatting 해준다. ** CRA(create-react-app)에는 이미 세팅이 되어있다고 한다 ** 1. eslint 설치 및 설정 1) ESLint 확장기능 설치 vs code의 개발단에서도 사용할 수 있도록 VS code에 ESLint 라이브러리를 통합한다. 2) ESLint 설치 - 프로젝트에 설..
-
[ReactJS] 리액트의 특징 및 원리웹 개발/ReactJS 2021. 4. 27. 22:42
프로그래밍 언어나 프레임워크를 사용할 줄 아는 것보다 그 원리를 아는 것이 더 중요하다는 것을 깨닫는 요즘, 내가 보려고 정리하는 리액트의 특징 및 원리 리액트를 쓰는 이유는 ? java script로 dom을 관리하기 위해서는 id 나 class 값 기준으로 관리하기 때문에 동적인 규칙이 많아지면 복잡해질 것 따라서 유지보수가 힘들어짐 > ember, angularJS - 자바스크립트 특정 값이 바뀌면 dom도 바뀌도록 연결해서 업데이트 방법 간소화 > reactJS - 특정 값만 바꾸는 것이 아니라 새로 페이지를 렌더링함으로 어떻게 업데이트 할 것인지 고민하지 않아도 된다. 하지만 자바 스크립트 객체인 가상 DOM을 사용해 업데이트가 필요한 요소만 변경함 0) SPA(Single Page Applic..
-
[JavaScript] DOM 이벤트 함수 사용 및 원리웹 개발/JavaScript 2021. 4. 27. 21:04
1) 자바스크립트 함수 생성 function sayName (name){ console.log("your name : ", name); } sayName("ohbox"); 2) 자바스크립트는 html 코드를 모두 가져와 DOM 객체로 바꾼다. - 아래의 예시는 title이라는 id를 가진 html 요소를 가져온다. const title = document.getElementsByName('title'); //id - 아래의 예시는 노드의 첫번 째 인자를 가져오는 document의 querySelector 객체를 이용했다. #는 html의 id, . 는 html의 class를 가리킨다. const title = document.querySelector('#title'); //노드의 첫 번째 인자 const..
-
[Java Script] DOM (Document object module)이란?웹 개발/JavaScript 2021. 4. 27. 21:02
DOM (Document object module)이란? DOM의 개체 구조는 노드 트리로 표현된다. HTML : 화면에 보이고자 하는 모양과 구조를 문서로 만든 것으로 단순 텍스트로 구성되어 있다. (최초에 화면을 그릴때 사용하는 설계도) DOM : HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용될 수 있다. (설계도를 이용하여 실제로 화면에 나타내지는 인터페이스) velog.io/@surim014/DOM%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80 DOM이란 무엇인가? 웹 페이지가 만들어지는 방법 먼저 DOM을 이해하기 위해서는 웹 페이지의 빌드과정을 알아야 한다. Critical Rendering Path 브라우저가 ..
-
[ReactJS] 서버사이드 렌더링(SSR)과 클라이언트사이드 렌더링(CSR)이란웹 개발/ReactJS 2021. 4. 27. 18:52
랜더링이란 (Rendering) 서버로 부터 받은 내용을 브라우저에 표시함 - Loader 가 서버로 부터 원본 HTML 문서를 읽어들임 - 브라우저는 파싱을 통해 최종적으로 어떤 내용을 페이지에 렌더링할 지 결정한다. 1) DOM 트리 구축 2) CSSSOM 트리 구축 3) JavaScript 실행 - 렌더 트리를 구축 - CSS 설정/레이아웃 위치 지정 후 렌더링 트리가 페인팅된다. DOM(Document Object Model) : HTML 요소들의 구조화된 표현 CSSOM(Cascading Style Sheets Object Model) : 요소들과 연관된 스타일 정보의 구조화된 표현 * DOM이란 무엇인가 seizemymoment.tistory.com/133?category=879018 [Jav..
-
[NextJS] NextJS 특징 및 프로젝트 시작웹 개발/NextJS 2021. 4. 24. 19:03
NextJS의 특징 1) 컴파일과 번들링이 자동으로 된다. 2) 자동 리프레시 기능으로 수정하면 화면에 바로 반영된다. 3) 서버사이드 렌더링이 지원된다. 4) next.js의 페이지는 pages 폴더 내 js, jsx, ts, tsx 파일에서 내보내진 react component이다. pages/about.js -> /about로 접근가능 pages/posts/[id].js -> pages/posts/1, pages/posts/2... [dynamic routes] 5) next.js는 public이라는 폴더 아래에 정적 파일을 제공한다. 기본 URL ( /) 에서 시작하는 코드에서 내부 파일을 참조 할 수 있다. NextJS 프로젝트 생성 및 실행 1) nextJS 프로젝트 생성 npx create-..