목록머쓱이 (8)

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

[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
[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
[VanillaJS] 고양이 사진첩 만들기(2)

❗❗ 데브코스 30일차 (09.10) 어제에 이어 고양이 사진첩 만들기(2)를 진행했다. 어제 기본 로직을 모두 수행하여, 오늘은 API 로딩 처리, 현재 위치 경로 표시 및 경로 클릭시, 해당 경로로 옮기는 로직을 수행했다. ✅ 로딩 처리 API 통신시에 딜레이가 발생하면 기다리는 동안 화면에 로딩중임을 표시하는 로직을 이번에 학습하게 됐다. 일반적인 사이트 이용시 마우스 커서가 동글동글 돌아가는 것도 일종의 로딩 처리이다. 로직은 매우 간단하다. API 컨트롤 하는 컴포넌트에서 state값에 로딩 표시를 의미하는 변수 추가(isLoading) 값이 true일때 로딩 처리 의미 API 요청 함수가 불릴때 해당 함수 안에서 API요청이 호출되기 전에 setState를 통해 isLoading값을 true로..
프로그래머스 데브코스_FE/TIL 2021. 9. 13. 19:21
[VanillaJS] 고양이 사진첩 만들기

❗❗ 데브코스 29일차 (09.09) 오늘 다룰 주제는 "고양이 사진첩 만들기" 이다. 구현 요구사항 고양이 API를 통해 사진과 폴더를 렌더링 한다. 폴더를 클릭하면 내부 폴더의 사진과 폴더가 보여진다. 현재 위치한 폴더의 경로도 렌더링 해준다. 루트 경로를 제외한, 나머지 경로에서 뒤로가기 버튼 추가 이미지 클릭하면 모달창으로 이미지 보여줌 esc를 누르거나 이미지 밖을 클릭하면 모달창 닫기 API 로딩시 로딩 중임을 알리는 처리를 해준다. ✅ Modal 창 이벤트 예전에 과제테스트를 한번 경험삼아 본 적이 있었다. 요구 사항 중 하나가 이미지 클릭시 Modal 창으로 표현하고, 이미지 밖을 클릭하면 해당 모달창을 닫는 요구사항이었다. 그 당시에는 어떻게 구현해야할지 감이 안와서 그냥 지나쳤다. 하지..
프로그래머스 데브코스_FE/TIL 2021. 9. 13. 18:44
Prev 1 2 Next