Mong dev blog

분류 전체보기210

함수형 프로그래밍이란?
1 함수형 프로그래밍이란? 1) 함수형 프로그래밍 vs 객체지향 프로그래밍 함수형과 객체지향은 아래와 같은 특징을 가지고 있다. 함수형 객체지향 패러다임 선언형 명령형(또 다른 예로 절차지향언어도 포함) 요약 무엇을 처리할 것인가 어떻게 처리할 것인가 특징 - 받은 인자만으로 결과물을 내어야 함 - 원본 데이터는 불변해야함 - 우리가 자주 사용하는 방법 - 로직을 상태와 행위로 이루어진 객체로 만듬 - 이 객체들을 조립해서 하나의 프로그램을 만드는 것 - 객체를 만드는 것 필요성 - 동시성 작업을 안전하게 하고 싶을 때 - 원본 데이터를 손상시키면 안 될 때 - 라이브러리를 만들 때 - 객체를 만들어야 할 때 - 일반적으로 이 방법을 많이 씀 저 표의 내용들이 전부 다 이해되시나요?전 안 됩니다 ^^ 더..
2021. 9. 26.
js로 드래그한 글자 선택하기(with selection)
사용자가 드래그한 영역의 텍스트 정보를 가져오는 방법이 있을까? 바로 getSelection을 사용하면 된다! getSelection에 대해 간단히 알아보자 :) 1. getSelection이란? 마우스 드래그 혹은 더블 클릭을 통해 선택된 텍스트 정보를 가져올 수 있다.const selection1 = window.getSelection(); //방법1 const selection2 = document.getSelection(); //방법2 selection은 방향을 가지며 선택 시작 지점(anchor) ~ 선택 끝 지점(focus)라고 한다. 아래 예시와 같이 왼 -> 오른쪽 방향으로 선택하면 anchor(0) ~ focus(2)가 된다. //드래그 방향(->) '안녕하'세요 만약 오 ..
2021. 9. 25.
hover시 색이 변하는 애니메이션(with. box-shadow로 네온 효과)
1. 미리보기 box-shadow를 사용해 네온효과를 주고, 마우스가 지나가면 transition-duration을 달리 주어 색을 나타나게 하는 애니메이션을 만들어보자! See the Pen js_100_day11 by KumJungMin (@kumjungmin) on CodePen. 2. 코드 설명 1) html [1] 부모요소이다. 이 부모요소 내부에 js를 사용해, 여러 개의 자식 요소를 만들 예정이다. 2) js [2] querySelector로 id="container"요소를 가져온다.const container = document.querySelector('#container'); //[2] const SQUARE_NUM = 500; //자식요소 개수 const colors =..
2021. 9. 25.
이미지 로딩 애니메이션(feat. 저화질, skeleton loading)
이미지를 로딩하는 동안, 그 공백을 채우는 방법은 여러가지가 있다. 이번 시간에는 저화질의 이미지 혹은 skeleton 로딩을 띄우는 방법을 알아보자! 1. 저화질 이미지 먼저 띄우기 A. 원본의 저화질 이미지 준비하기 첫번째 방법은 저화질 이미지를 먼저 띄우는 방법이다. 아래 사진은 실제로 띄울 이미지인데, 이 이미지의 저화질도 준비한다. B. 저화질 먼저 적용하기 img의 src에 저화질 이미지를 먼저 적용한다. css에서 image의 크기를 설정한다. /*css*/ .image { width: 300px; } C. js에서 load 이벤트 사용하기 a. load이벤트? 브라우저에 입장 혹은 퇴장할 때 발생하는 이벤트가 있다. 사용자가 사이트 입장시, DomContentLoaded와 load 이벤트가..
2021. 9. 23.
로딩 화면 만들기 (with css)
1. preview See the Pen loading_circle by KumJungMin (@kumjungmin) on CodePen. 2. 코드 분석 1) html 안에 세 개의 요소를 자식으로 둔다. 은 이제 로딩할 때의 원이 된다. 대신 를 써도 된다. 대신 class 이름을 지정해야한다. (1) 하나의 div에 원 요소를 자식으로 둔다. 2) css (1) body안의 요소들을 상하좌우 중앙 배치한다. body { margin: 0; display: flex; /*내부 요소들이 차례로 배치 */ justify-content: center; /*내부 요소의 좌우 정렬 상태를 가운데로 설정*/ align-items: center; /*요소는 세로 중앙 배치*/ height: 100vh; /*웹 크..
2021. 9. 21.
svg 아이콘 사용시 유의사항(with vue, css)
우리가 자주 사용하는 아이콘의 경우 컴포넌트화를 통해 사용할 수 있다. 특히 이 방법은 vue, react에서 자주 쓰이는 방법이며 또한 간편한다. 하지만 이 방법을 쓸 때 직면하는 여러 이슈가 있는데, 오늘은 svg아이콘을 사용할 때 유의하면 좋은 사항을 알아 본다! (vue 한정의 내용이 아닌 svg를 아이콘으로 쓸 때 유의할 점을 설명) 1. vue에서 svg 아이콘 컴포넌트 쓰기 vue 공식문서에서 svg 아이콘을 사용할 때 컴포넌트화 하는 방식을 소개하고 있다. 이 방법을 사용하면 icon 컴포넌트에 props를 내려 width, height, color을 수정할 수 있다. //testIcon.vue export default { props: { width: { type: [Number, Str..
2021. 9. 21.
png 이미지에 그림자 넣는 법(with css)
png 이미지에 그림자를 넣어보자! css에는 filter속성이 존재하는데, 이 속성을 사용해 흐림 혹은 대비 효과 등을 줄 수 있다. 그런데 이 filter속성을 이용해 png이미지에 그림자도 넣을 수 있다! 한 번 알아보자 🙂 1. filter의 drop-shadow filter의 drop-shadow를 사용하여 요소에 그림자를 줄 수 있다.filter: drop-shadow(offset-x offset-y blur-radius color) 속성 설명 offset-x 그림자의 수평 거리 (음수는 요소의 왼쪽에 그림자 배치) offset-y 그림자의 수직 거리 (음수는 요소 위에 그림자 배치) blur-radius 그림자의 흐림 반경(값이 클수록 반경이 커지고 흐려짐, 음수는 허용X) color 그림자..
2021. 9. 21.
[SEO] 타이틀, 제목 태그와 검색 엔진 최적화(with html)
우리가 html를 배우면 제목 태그(h1~h6)와 타이틀 태그(title)을 먼저 알게 된다. 그런데, 이 두 태그가 사이트의 구글 검색에 영향을 준다고?? 검색 노출에서 타이틀 태그가 제일 중요하지만 제목 태그도 중요하다고 한다. 엥? 근데 개발자가 검색 노출도 알아야하나..요? 물론 개발자의 입장에서 검색 노출이 왜 중요하지? 싶을 수도 있지만 본인이 개발한 사이트가 검색에 더 잘 노출되게 하기 위해 가볍게 알아두면 좋을 거 같다 🙂 그렇다면 이 타이틀, 제목 태그는 어떻게 써야할까? (SEO(검색 엔진 최적화) 관련 포스팅을 참고하였습니다) 1. 사이트의 첫인상, 타이틀 태그 타이틀 태그는 사이트의 첫인상이다. 또한 검색엔진 결과 페이지, 웹 브라우저, 소셜 네트워크에서 중요한 역할을 한다. (1)..
2021. 9. 21.
where vs is 선택자 (with css specificity (명시도))
이 포스팅에서는 다중 요소를 선택할 수 있는 where, is선택자에 대해 알아본다. 추가적으로 where과 is의 차이점인 명시성도 알아보자! 1. 다중 요소 선택할 때... 아래와 같이 header, aside, footer에 각각 p태그가 존재한다.상단 영역 하단 이때, p태그에 공통적으로 color: red를 주려고 한다면 아래와 같이 작성할 수 있다.header p, aside p, footer p { color: red; } 하지만 리스트로 나열하는 게 조금 번거롭다. 특히 p태그를 반복해서 써야한다니! 반복을 줄일 수 있는 방법은 없을까? 이 경우에 쓸 수 있는 선택자가 바로 where, is이다. 2. where과 is 선택자 1) where 선택자 :where(선택리스트) 형태로 쓰이며,..
2021. 9. 21.

티스토리툴바