목록KDT 프로그래머스 (50)

프론트엔드 개발자의 기록 공간

[CSS Preprocessor ] Sass(SCSS) (2)

❗❗ 데브코스 35일차 (09.17) 어제에 이어 Sass(SCSS)에 대해 학습을 진행했다. 본 글은 SCSS를 중심으로 문법을 소개할 예정이다. SCSS를 학습하면서 느낀점은 멍청했던(?) CSS를 JS처럼 하나의 언어처럼 사용할 수 있다는 점이였다. 변수, 함수, 조건문, 반복문을 사용할 수 있을 뿐만 아니라 내장 모듈을 이용하면 join, map 등도 사용가능 하다. 개발자들은 재사용성이나 직관성에 미쳐있는 것 같다...ㅋㅋ ✏️ SCSS 문법 ✅ 중첩문 사용 //scss .parent { width: 200px; height: 200px; .child { width: 100px; height: 100px; } } //css변환 .parent { width: 200px; height: 200px;..
프로그래머스 데브코스_FE/TIL 2021. 10. 2. 02:50
[CSS Preprocessor ] Sass(SCSS) (1)

❗❗ 데브코스 34일차 (09.16) 오늘은 CSS Preprocessor (CSS 전처리기)에 대해서 학습을 진행했다. 웹 학습 당시 CSS를 학습하면서 Sass, SCSS가 대충 CSS를 편리하게 사용해주는 문법으로만 알고 있었다. 현업에서 많이 이용한다는 얘기를 종종 들었기 때문에 학습해야지 생각만 했다가 이번 기회를 통해 배우게 됐다. (CSS 프레임워크만 사용하던 과거를 반성합니다...) ❓ CSS Preprocessor ❓ 웹에서는 표준 CSS만 동작할 수 있다. 하지만 CSS를 사용해본 사람들은 CSS가 얼마나 불편한지 느꼈을 것이다. 이러한 CSS를 똑똑하게 사용할 수 있도록 도와주는 도구인 CSS Preprocessor(CSS 전처리기)가 탄생했다. 종류에는 Sass, Less, Styl..
프로그래머스 데브코스_FE/TIL 2021. 10. 1. 02:22
[CSS] CSS심화(2)

❗❗ 데브코스 33일차 (09.15) 지난 26일차에 이어 CSS심화 2번째 Part를 학습했다. Gird에서 넓이에 관한 옵션들과 3D 트랜스폼, @supports(기능쿼리), @media(미디어쿼리)에 대해 학습을 진행했다. ✏️ Grid_넓이 옵션 부모요소를 Grid Container(그리드 컨테이너), 자식요소를 Grid Item(그리드 아이템) 이라고 지칭하습니다. 1. minmax 함수 : 행과 열에 대한 최소 넓이와 최대 넓이에 대한 내용을 지정할 수 있다. //부모요소 container { grid-template-columns: minmax(100px, 1fr), minmax(200px, 1fr); } minmax(100px, 1fr) => 최소한 100px, 최대한 1fr 크기로 지정 ..
프로그래머스 데브코스_FE/TIL 2021. 9. 30. 01:10
[VanillaJS] TodoList Drag & Drop 이벤트 처리

❗❗ 데브코스 32일차 (09.14) 오늘 주제는 Drag&Drop 이벤트 처리에 대해서 학습을 진행했다. 웹사이트를 이용하게 되면 Drag&Drop을 많이 사용해봤을 것이다. 예를들어 이미지를 옮기거나 폴더에서 파일을 옮길때도 Drag&Drop 이벤트가 발생하고, Notion(노션)을 사용할때도 자유롭게 Drag&Drop을 이용해서 컨텐츠 정보 위치를 바꾼다. 위의 예시들은 모두 구현 방법은 제각각이지만, 원리는 동일할 것이다. 여러가지 옵션이 있지만 해당 로직에서는 크게 3가지를 통해 구현했다. 1. dragstart - Drag를 시작했을 때 발생하는 이벤트 $이벤트대상.addEventListener("dragstart", (e) => { //drag 처리할 대상 DOM const $li = e.t..
프로그래머스 데브코스_FE/TIL 2021. 9. 28. 23:20
[VanillaJS] 무한 스크롤 UI 구현하기

❗❗ 데브코스 28일차 (09.08) Vanilla JS Part 2과정이 시작됐다. Part2 과정은 조금 더 프론트엔드 과제 테스트에 중점을 두어, 과제 테스트에서 많이 사용하는 유형을 토대로 강의가 이루어졌다. 오늘 다룰 주제는 "무한 스크롤 UI" 구현하기 이다. 유튜브나 페이스북에서 스크롤하면 자동으로 컨텐츠를 불러오는 것을 종종 볼 수 있는데 어떤 원리인지 평소 궁금했는데 이번 기회를 통해 학습할 수 있어서 매우 좋았다. ❓무한 스크롤이란❓ 컨테츠를 페이징 하는 기법 중 하나로, 아래로 스크롤하다 컨텐츠의 마지막 요소를 볼 즈음 다음 컨텐츠가 있으면 불러오는 방식. 주로 모바일 환경에서 자주 사용됨. ex) facebook, twitter, instagram 등에서 사용되는 기법이다. ✅무한 ..
프로그래머스 데브코스_FE/TIL 2021. 9. 28. 00:38
[VanillaJS] 고양이 사진첩 만들기_과제

❗❗ 데브코스 31일차 (09.13) "고양이 사진첩 만들기" 실습이 끝나고 아주 간단한 과제가 주어졌다. 각각의 컴포넌트에서 상태 변화시 setState에 들어오는 값에 대한 정합성 체크하기 불필요한 render 제거 백스페이스 눌렀을때 이전 경로로 가기 ✅ 정합성 체크 정합성 체크는 방어 코드의 일환으로 상태 값을 컨트롤할 때 항상 방어 코드를 작성하는 습관이 들여있으면 좋을 것 같다. 정합성 체크는 typeof로 판별해 주었다. 각각의 컴포넌트가 사용하는 type (boolean, object) 등에 따라 setState 발생 시, 해당 type을 체크와 값 여부를 체크해 주었다. 잘못된 타입이 들어오게 되면 다음과 같이 에러를 발생시키게 했다. throw new Error("타입 에러"); 정합성..
프로그래머스 데브코스_FE/TIL 2021. 9. 14. 00:16
Prev 1 2 3 4 5 6 7 ··· 9 Next