[230327] 스프린트 회고 | Sass

윤지수·2023년 3월 27일
Sass멋쟁이사자처럼스프린트회고
0

멋쟁이사자처럼 프론트엔드스쿨💻

목록 보기
19/51
post-thumbnail

📌 스프린트 회고_2

JD(Job Description) 분석

토스, 우아한 형제들, 카카오 JD 키워드&분석

HTML, CSS, JS
: 기본적인 능력. 능숙한 활용 능력이 필요하다.
SPA프레임워크
: 모든 회사가 자바스크립트 프레임워크 및 라이브러리를 사용하여 서비스하고 있다. React, Vue와 같은 프레임워크를 사용할 줄 알아야 한다.
UI/UX
: 프론트엔드 개발자의 작업은 사용자와 마주하는 지점이기 때문에 사용자가 최적의 경험을 할 수 있도록 사용자 인터페이스와 사용자 경험에 대한 이해가 있어야 한다.
TypeScript
: 자바스크립트의 에러를 방지하기 위해 사용하고 있다. 타입스크립트 경험은 보통 우대사항으로 들어간다.
웹접근성
: 웹표준을 준수하고 콘텐츠의 접근성을 고려하여 모든 사용자가 사용할 수 있도록 해야 한다(특히 스크린리더).
반응형
: 사용자가 사용하는 디바이스에 따라 동일하게 보이고 유연하게 바뀔 수 있도록 해야 한다.

본격적으로 취업을 준비할 때는 내 장점을 어필하는 것을 정리하는데 시간을 써야하기 때문에 미리 준비해야할 것들을 파악하는 작업을 해보았다

JD에서 필수요건이 가장 중요하다
우대사항은 '우대'사항일 뿐이다

지원자에게 어떤 것을 원하는지 안드러나면 '콜드메일' 보내보기
: 그 회사에 직접 연락해보는 것. 메일을 보낼 수도 있고, 링크드인 같은데서 내가 관심있는 회사의 개발자나 인사팀 담당자에게 dm이나 이메일을 보내볼 수 있다

회고 경험

AI가 나오기도 하고 기술적인 부분은 대부분 잘 해지기 때문에 엔지니어의 역량 중 소프트스킬이 굉장히 중요하다
회고 스프린트 시간에 이야기를 나누면서 소프트스킬을 기를 수 있도록 최대한 잘 활용하자

좋은 이력서의 특징

'내가 잘하는 것'에 대한 경험이 드러나는 이력서

  • ‘회사’가 원하는 역량을 드러낸 이력서 -> JD 활용
    연대기가 아닌 회사가 요구하는 역량 순으로 이력서를 작성하는게 중요한 포인트
  • '성장 가능성'을 드러낸 이력서
    잘하는 것에 대한 경험을 보여주면 자연스럽게 나온다
    이만큼 잘하려고 한 시도와 경험을 했기 때문에 입사해서 어떤 성장이나 기여를 할 수 있다는 것을 보여줄 수 있다

막막한 느낌이었던 취업 준비에 계속해서 다가가고 있는 느낌이다
어떻게 준비할지, 이력서를 어떻게 써야할지 감이 잡히고 있다!
아직까지는 엉망잔칭인 내 이력서..ㅋㅋㅋ 계속해서 수정해봐야겠다

🔮 Sass

https://github.com/yoonmallang22/Sass

  • CSS로 컴파일되는 스타일 시트 확장 언어

  • 브라우저가 Sass를 직접 로딩하는 것이 아니라 개발은 Sass를 기반으로 한 후, CSS로 익스포트하는 과정을 거친다

  • 사용하는 이유
    css에는 없는 편의 기능들이 있어 시간을 절약할 수 있다
    코드 재사용이 가능하다

💡 에러를 가능하면 안 내는 CSS에 비해 엄격하게 한다

파일 분리

각 프레임 별(header.scss, _main.scss) css를 분리하고, variable과 mixin 파일도 따로 분리하고, 메인 파일인 style.scss에 분리했던 파일들을 import한다. 파일을 기능 별, 레이아웃 별로 분할해서 사용하기 때문에 코드를 관리하기 편리해진다.
scss 파일의 이름 앞에 '_(언더스코어)'를 붙이면, Sass에게 이 파일이 main 파일의 일부분임을 알려줘서 해당 파일은 css 파일로 컴파일하지 않고 내부에서 @import 형태로 작동하게 된다.

💡 css는 import할 때 파일 URL을 적어줘야 하지만 Sass에서 import할 때는 확장명을 제외하고 파일명만을 사용할 수 있다

주석

  • // : 한 줄 작성할 경우, 작성한 주석 내용은 Sass 내에서만 볼 수 있다
  • /* : 여러 줄 작성할 경우, scss 파일이 컴파일될 때 주석 내용이 css 파일에 나타난다

Nesting(중첩)

  • 선택자
    html의 시각적 계층 방식과 동일하게 CSS를 중첩하여 작성할 수 있다
    CSS코드가 구조화되어 가독성이 높아지며 유지 보수하기 편리하다
    최상위 선택자를 한 번만 선언하여도 자식 선택자에게 스타일을 적용할 수 있게 되어 코드 반복을 줄이게 된다
nav {
	background: #C39BD3;
	padding: 10px;
	height: 50px;
	ul {
		display: flex;
		list-style: none;
		justify-content: flex-end;
		li {
			color: white;
			margin-right: 10px;
		} 
	}
}
  • 속성
    속성을 중첩 할 때는 :(콜론)을 사용한다. Sass는 속성이 중첩되었음을 인지하고 css 속성들로 변환한다.
.add-icon {
  background: {
    image: url("./assets/arrow-right-solid.svg");
    position: center center;
    repeat: no-repeat;
    size: 14px 14px;
  }
}
  • &(앰퍼샌드)
    '&'는 상위에 있는 부모 선택자를 가리킨다
    1) 가상요소, 가상클래스, class나 id 셀렉터 등을 참조할 수 있다
.box {
	&:focus{}		// 가상선택자
	&:hover{}
  	&:active{}
	&:first-child{} 
  	&:nth-child(2){}
	&::after{}		// 가상요소
	&::before{} 
}

2) 공통 클래스명을 가진 선택자들을 중첩시킬 수 있다

.box {
  &-yellow {
    background: #ff6347;
  }
  &-red {
    background: #ffd700;
  }
  &-green {
    background: #9acd32;
  }
}
  • @at-root
    @at-root를 사용하면 중첩에서 벗어날 수 있다
    중첩된 선택자에게만 사용할 수 있다

변수(Variable)

변수를 선언한다는 것은 값을 일일이 고치지 않아도 된다는 의미
-> 유지보수를 매우 쉽게 만들어준다

변수를 사용하는 기준
값이 두 번 이상 반복되는 경우, 값을 기억하지 않고 변수명만으로 스타일을 할 수 있다
기존의 값을 다른 값으로 변경해야할 경우, 변수의 값만 변경하면 된다

보통 타이포그래피, 폰트색상, 폰트사이즈, 글자 간격 등의 값을 변수로 정의해서 사용한다

  • numbers : 1, .82, 20px, 2em 등
  • strings
$path: './assets/img/';
$name: 'background.png';

.test {
    background-image: url($path + $name);
}
  • colors : green, #fff, rgba(255,0,0,.5) 등
  • booleans : true, false
  • null
  • lists
    lists의 요소들을 쉼표나 공백 또는 일관성이 있는 /로 구분하여 생성한다
    lists에 들어있는 값의 index는 1부터 시작한다
$font-size: 10px 12px 16px;					// 폰트사이즈 리스트
$image-file: photo_01, photo_02, photo_03;	// 이미지 파일명 리스트

.test1 {
    font-size: nth($list: $font-size, $n: 2);	// 12px
}

.test2 {
    font-size: nth($font-size, 2);
}
  • maps
    괄호 안에 키:값의 형태로 저장하여 사용한다
$font-weights: ("regular": 400, "medium": 500, "bold": 700); // 글자 굵기 리스트

.test1 {
    font-weight: map-get($font-weights, "medium"); // 500
}
  • 지역변수/전역변수
$font-p: 15px; // 전역변수

.info {
	$line-normal: 1.34; // 지역변수
	font-size: $font-p;
	line-height: $line-normal;
	text-align: right;
    span {
    	line-height : $line-normal;
	}
}

💡 Sass에서는 지역변수보다는 전역변수 사용하는 것을 권장한다

Mixin

코드를 재사용하기 위해 만들어진 기능

@mixin 이름(매개변수) {}	//생성
@include 이름(인수)		//사용
@mixin size($width, $height, $padding){
	width : $width;
	height : $height;
	padding : $padding;
}

article{
	@include size(100%, 65px, 10px 20px);
}

@content를 사용하면 원하는 부분에 스타일을 추가하여 전달할 수 있다

@mixin sample{
	display: flex;
	justify-content : center;
	align-items : center;
    @content;
}

.one {
    @include sample {
        color:white;
    }
    background-color: red;
}

💡 서로 연관 있는 스타일 속성끼리 묶어서 만들어야 좀 더 사용성이 높은 @mixin을 만들 수 있다

💡 회사 Mixin은 건드리지 않는다!

Extend

1) class 이름 가져오기

.profile-user {
    background-image: url("../assets/user.jpg");
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 50%;
    width : 50px;
    height : 50px;
}

.comment-user {
    @extend .profile-user;
    border-width: 10px;
}

💡 class명을 extend 하는 경우 다중 선택자를 사용할 수 없다

2) %(placeholder 선택자)
%는 CSS로 컴파일되지 않는다

%base-button {
  width: 133px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  border-radius: 10px;
}

.follow-button {
  @extend %base-button;
  background-color: #ffffff;
  color: #ff375f;
  border: 3px solid #ff375f;
}

.message-button {
  @extend %base-button;
  background-color: #ff375f;
  color: white;
}

💡 @extend를 사용할 때 클래스보다 %를 사용하기를 권장한다

조건문, 반복문, 함수

조건문

  • @if
  • @else
  • @else if

반복문

  • @for
for ($변수) from (시작) through(끝){
	// 반복할 내용
}
  • @each
    lists나 maps의 각각의 요소마다 코드를 실행해서 스타일을 적용할 수 있게 한다
@each ($변수) in (리스트나 맵){ 
	// 반복할 내용
}
  • @while

함수

  • function
    Mixin과 비슷하지만 Mixin은 스타일 코드를 반환하고 function은 @return 키워드를 사용해서 값 자체를 반환한다는 차이가 있다
  • 내장함수
profile
윤지수
이전 포스트

[230323] 코딩 컨벤션 | Bootstrap

다음 포스트

[230328] JavaScript 실습

0개의 댓글