전체 글

gulp + nunjucks

gulp + nunjucks를 쓰게 된 계기 구축 프로젝트를 진행하게 되었다. html 산출물이 필요하다. 공통적으로 쓰이는 코드들이 많다. 이것들을 컴포넌트화 해서 어느 페이지에서든 재사용하면 좋지 않을까? pug가 좋다고? > 너무 생소하다. nunjucks 라는게 있네? > 인클루드/컴포넌트/자바스크립트 제어 익숙하다 > 선택 html 산출물이 필요하기 때문에 이를 빌드할 툴이 필요하다. 웹팩을 많이 쓴다고? > html 산출물만을 위해 쓰기엔 너무 무거운데? gulp는 어떨까? > 쉽고 가볍다 > 선택 gulp 셋팅 js, css 파일 minify scss 컴파일 css autoprefixer 라이브 서버 이미지 경량화 babel 빌드된 html 파일 beautify 라이브러리 설치(swiper,..

[안드로이드] 네이티브, 하이브리드앱 구별하는 법

비행기모드 비행기 모드를 켜고 어플을 실행해보면 대충 감이 온다. 인터넷이 안되면 웹이면 주소 호출을 못했다는 오류가 뜰 것이다. 개발자옵션 - 레이아웃 범위 표시 활성화 설정 > 휴대전화 정보 > 소프트웨어 정보 > 빌드번호 영역 터치 여러번 하면 설정 목록에 개발자 옵션이 켜져있다. 개발자 옵션 > (그림) > 레이아웃 범위 표시 활성화 네이티브면 하단처럼 레이아웃이 그려져 보인다. 웹뷰면 하단처럼 레이아웃이 있어야할 영역에 아무런 표시가 안보인다. 백프로 네이티브 앱이 있을까? 궁금했다. 그래서 확인해보았다. 내 핸드폰에 설치되어 있는 앱중 90%가 하이브리드앱으로 서비스를 하고 있었다. 어떤 페이지에서 네이티브를 하고, 웹뷰를 쓰는지 구별해보려 했으나 앱마다 달라서 아마 그 기준은 앱 자체 정책에..

[자바스크립트] Optional Chaining 연산자(?.)

Optional Chaining 연산자(?.)는 JavaScript에서 사용되는 연산자로, 객체의 프로퍼티나 메서드를 사용할 때 객체가 undefined 또는 null인 경우 에러를 방지하기 위해 사용된다. 즉, 객체에 프로퍼티나 메서드가 존재하면 그 프로퍼티나 메서드를 사용하고, 존재하지 않는다면 undefined를 반환한다. 예를 들어, let person = {name: "John", age: 25}; // undefined console.log(person.address?.street); // TypeError: Cannot read properties of undefined (reading 'street') console.log(person.address.street); `person` 객체에 ..

[scss] BEM 방식으로 깊은 중첩 하기

🙄BEM 규칙을 따르고 있다는 가정 아래와 같이 component 와 component--reversed 가 같은 위치에 있고 자식 요소의 클래스가 같다. 🤗부모의 클래스에 따라서 자식요소의 css를 다르게 주고 싶다면? reversed에서 component를 &을 이용해 가져가고 자식 요소에도 component를 같이 가져가고 싶을 때가 있다. 하지만 그렇게 &만을 이용하게 되면 아래의 코드처럼 상위 이름을 그대로 가져가기 때문에 원하던 결과를 얻지 못한다. /* scss */ .component { /* blah blah */ &--reversed { /* blah blah */ &__child-element { /* blah blah */ } } } /* css */ .component {/* bl..

[리액트] Redux Toolkit 사용해서 Counter 만들기

패키지 설치 # Yarn # redux 관련 yarn add react-redux @reduxjs/toolkit redux-devtools-extension # 추가 패키지 yarn add react-router-dom sass styled-components 패키지 이름 설명 react-redux 리액트에서 redux를 사용할 수 있도록 해주는 컨테이너. redux에 의존한다. @reduxjs/toolkit 리액트에서 리덕스를 좀 더 간결하게 사용할 수 있도록 하는 최신 패키지 redux-devtools-extension 리덕스의 상태를 크롬브라우저 개발자도구에 설치된 확장 기능과 연동할 수 있게 해주는 미들웨어 react-router-dom SPA앱을 만들 때 사용. URL에 따라 실행할 Javasc..