분류 전체보기
-
[JavaScript] 객체 비 구조화 할당웹 개발/JavaScript 2021. 5. 14. 13:33
객체 비 구조화 할당은 객체 안에 있는 값들을 추출해 새로운 상수로 선언해준다. [예시] const object = { a: 1, b: 2 }; const { a, b } = object; console.log(a); // 1 console.log(b); // 2 - 함수 내에서 사용 예시 const object = { a: 1, b: 2 }; function print(object) { const { a, b } = object; console.log(a); console.log(b); } print(object); const object = { a: 1, b: 2 }; function print({ a, b }) { console.log(a); console.log(b); } print(object)..
-
[CSS] CSS를 대체할 CSS in CSS와 CSS in JS에 대해 알아보자 (CSS Module , SCSS 등)웹 개발/HTML & CSS 2021. 5. 11. 19:37
프로젝트가 커질수록 모든 html 요소에 클래스 naming을 해줘야하고 컴포넌트 스타일을 변경할 때 클래스에 맞는 선택자를 일일히 찾아 변경해야하기 때문에 번거롭다. 또한 JS 파일과 분리되어있기 때문에 컴포넌트의 상태값 변화를 공유하기 힘들다. CSS 문제점 (Vjeux) - Global namespace: 모든 스타일이 global에 선언되어 중복되지 않는 class 이름을 적용해야 하는 문제 - Dependencies: css 간의 의존관계를 관리하기 힘든 문제 - Dead Code Elimination: 기능 추가, 변경, 삭제 과정에서 불필요한 CSS를 제거하기 어려운 문제 - Minification: 클래스 이름의 최소화 문제 - Sharing Constants: JS 코드와 상태 값을 공유..
-
[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 브라우저가 ..