전체 글

SASS - import

css 보다 효율적으로 관리할 수 있는 방법에 대해 알아보겠습니다 article.item*4>h2{Sub Title}+p>lorem15^a[href="#"]{view} Sub Title Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione et nulla sit voluptates explicabo veniam? view Sub Title Voluptas quaerat laboriosam eos ea autem facere quae, laudantium ut explicabo doloribus facilis quis reprehenderit. view Sub Title Doloremque sunt, commodi eveniet unde con..

SASS - style.css.map

sass와 scss를 컴파일 하고 css로 변환해보면서 생긴 의문점이 있다 style.css 파일이 만들어지면서 style.css.map이 같이 생겼는데 이 파일은 어떤 역할을 할까? style.scss에서 코드 가독성 없이 이상하게 만들어도 style.css에선 정상적으로 나오는걸 확인할 수 있다 작업하고있는 파일은 style.scss인데 실제 브라우저에서 읽히고 있는 파일은 컴파일이 된 style.css이다 브라우저상에선 css 디자인이 나오지만 실제 scss가 위치한 곳을 알려주는것이 style.css.map이다

SASS, SCSS 개념소개

html css js를 공부하다보면 sass 혹은 scss라는 것을 한번 쯤 들어봤을 수 있다 SASS란 css의 전처리기이며 css를 효율적으로 관리할 수 있는 방법 중 하나이다 브라우저에서는 css외에 다른 문법은 알아들을 수 없으므로 우리가 sass로 작업을 하되 브라우저가 알아들을 수 있게 변환을 해주어야한다 아래 처럼 css 폴더 내에 빈 파일과 sass 폴더 내에 style.sass를 만들어주었다 sass > style.sass 파일에 아래처럼 문법을 작성한 상태다 이제 이 문법을 css로 변환한다 @charset "UTF-8" * margin: 0px padding: 0px terminel $ sass --watch sass/style.sass css/style.css 변환 시 자동으로 st..

Figma 기본기능#2

첫번째에 이어 두번째 이어서 진행해보겠습니다 Ios UI Kit를 눌러서 Page 1로 돌아옵니다 Assets로 돌아와서 Status를 검색합니다 StatusBar를 캔버스로 꺼내서 프레임 안쪽에 배치시킵니다 정렬을 Left, Top으로 지정하고 Size를 바깥쪽 Frame의 Size와 동일하게 조정합니다 현재 프레임은 375 x 812이고 StatusBar는 390 이므로 375로 맞춰줍니다 다시 Assets 채널에서 tab bar를 검색하고 프레임 안쪽으로 배치합니다 tab bar는 bottom , left를 하고 Frame과 동일하게 375사이즈로 맞춥니다 이제 프레젠테이션 뷰에서 컴포넌트가 어떻게 보이는지 확인합니다 상단 오른쪽에 재생버튼을 클릭합니다 보통 앱 중에서 스크롤이 발생하는 앱도 많기에..

FIgma 기본 기능

평소 UX/UI에 관심이 많았던지라 FIgma에 대해서도 알고 있었다 하지만 간단한 이미지 수정 외엔 딱히 사용하지 않았는데 이참에 제대로 공부 해보고자 한다 Figma란? Figma는 UX / UI 디자인을 할 때 유용한 디자인 프로그램이다 Adobe XD, Sketch처럼 UI 디자인을 할 수 있는 유용한 도구이다 Figma 특징 협업기능 여러 명이 실시간으로 작업을 공유하고 편집이 가능한 협업 기능을 제공한다 Mac, Windows 운영체제를 지원한다 벡터 기반의 프로그램이다 그래서 깨지는 현상이나 용량을 효율적으로 관리할 수 있다 인터넷에 연결만 되어있다면 작업을 하면서 자동으로 저장이 되는 기능을 제공한다(최대 30일) Figma는 앱 뿐만 아니라 웹에서도 동작한다 첫 회원가입을 진행하고 홈으로..

Sequelize - dotenv 설정

다른 PC나 내 PC에서 작업할 때 환경변수를 편하게 할 수 있게 작업할 수 있다 패키지 설치 $ npm install dotenv 파일추가 .env.sample 개발자들끼리 작업할 때 .env를 통해 공유받을 아이디를 받을 수 있다 //.env.sample DATABASE = "데이터베이스명" DB_USER = "아이디" DB_PASSWORD = "패스워드" DB_HOST = "DB호스트" 파일추가 .env .env 파일은 어디 폴더 내에 있는것이 아닌 꼭 바깥쪽 / 폴더에 위치해있어야한다 변수접근 변수명은 list이고 list에 접근하여 DB_USER를 가져올 때 .env.sample 참고하여 함수를 적는다 list.env.DB_USER

Sequelize란?

Sequelize ORM(Object-Relational Mapping) Node.js로 mysql 또는 Postresql(db)를 제어할 수 있게 한다 Postresql는 웹용 엑셀 느낌이며 회원가입 시 한줄 한줄 데이터가 쌓인다 db상에선 user-table이라고 부른다 ORM db를 컨트롤 할 수 있게한다 Sequelize로 CRUD를 구현해본다 셋팅 GitHub - dubipy/Sequelize: Sequelize로 CRUD 제작 Sequelize로 CRUD 제작. Contribute to dubipy/Sequelize development by creating an account on GitHub. github.com

Express - nunjucks macro

//base.html List Write {% block content %}{% endblock %} 코드 상에 나와있듯이 List 클릭 시 /admin/products를 바라보고 write 클릭 시 active를 바라보게 지정한다 현재 URL에 접근이 가능해야하니 변수를 추가한다 app.use((req, res, next) => { app.locals.req_path = req.path; next(); }); req.path는 Express에서 현재 URL로 전해주는 함수이다 base.html body 최상단에 코드를 req_path를 추가한다 {{req_path}} 현재 URL이 추가된 걸 확인할 수 있다 List 이렇게 URL을 지정할 수 있지만 URL이 많아질 수록 반복작업이 되니 매크로로 하나 ..