ALL

JavaScript - 함수

함수는 특정 코드를 명령으로 실행할 수 있게 합니다 파라미터가 주어졌을 때 파라미터를 처리해서 결과를 만들어 낼 수 있습니다 const a = 1; const b = 2; const sum = a + b; 이 코드를 함수로 만들어보겠습니다 함수를 사용할 땐 function을 사용합니다 function 앞에 add 를 넣어보겠습니다 여기서 add는 파라미터라 부르며, add에 어떤 값을 넣으면 됩니다 function add 여기서 여러 값을 가져오려면 add에 괄호()를 넣습니다 function add(a, b) a와 b를 더하기 합니다 이때 내부에서 함수를 실행한다 라고 표현합니다 function add(a, b) { //add 함수를 만들어서 a와 b를 더한다 a + b; } 바로 값이 나오는게 아니라..

SASS - nesting 기능 소개, 사용법

nesting이란, 보통 css로 코드를 작성 시 부모 클래스를 써주고 자식이나 자손 클래스명을 써주어야했습니다 코드가 많아지면 많아질수록 가독성이 떨어지고 코드를 보기 힘들어지기도 하죠 하지만 Sass에선 부모 셀렉터를 줄여주고 HTML 구조에 따라서 눈에 보기 쉽게 코드를 작성할 수 있습니다 먼저 CSS로 작성하겠습니다 @charset "UTF-8"; @import "reset"; body { background: #eee; } .wrap { width: 100%; border: 2px solid #bbb; padding: 100px; display: flex; justify-content: center; } .wrap .item { width: 300px; padding: 30px; backgrou..

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