예방이의 개발일기

CSS filter를 이용해 사진에 다양한 이미지 변화효과를 부여할 수 있다. 필터는 주로 이미지, 배경, 테두리 렌더링 조정할 때 쓰인다. SVG 필터도 적용할 수 있다고 한다. /* SVG 필터를 가리키는 URL */ filter: url("filters.svg#filter-id"); /* 값 */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); f..

순서에 따른 가상 클래스에 대해서 공부해보자. 순서관련 가상 클래스에는 1. first-child 2. first-of-type 3. last-child 4. last-of-type 5. nth-child() 6. nth-of-type() 이렇게 6가지가 있다. 클래스 이름이 매우 비슷해서 용도의 헷갈림이 많다. 📌 child vs of-type ✅ child : 형제 요소 중 형제 요소들 중에서만 형제 요소가 아니면 해당되지 않는다. ✅ of-type : 해당 요소(클래스) 중 자신의 유형과 일치하는 (형제요소 고려해야함) p의 first-of-type이면 p태그 중 자신이 무조건 첫번째라면 다 해당된다. 📌 참고 - 시니어 개발자도 모르길래 만든 영상 - 수코딩

저는 이미 JavaScript에 대한 기본적인 이해가 있었지만, TypeScript를 프로젝트에 어떻게 적용해야 할지에 대한 고민이 있었습니다. 몇 번의 TypeScript 문법 강의를 들은 적이 있었지만, 여전히 이를 프로젝트에 어떻게 활용할지에 대한 감이 부족했습니다. 그런데 패스트캠퍼스에서 제공하는 강의를 통해 많은 도움을 받았습니다. 이미 JavaScript를 알고 있었지만, 강의에서는 JavaScript에 대한 깊은 이해를 바탕으로 TypeScript를 어떻게 적용할 수 있는지에 대해 자세히 다뤄주셨습니다. 강사님은 이해한 내용을 토대로 자신의 생각을 명확하게 표현하고 설명하는 능력이 뛰어나신 것 같았습니다. 확실히 실무에 계셨던 분이셔서 그런지 실무에서 사수없이 일하고 있는 저의 가려움을 잘 ..

나의 취미인 키보드 모으기 이번에 산건 FL-ESPORTS CMK75 백축이다. FL-ESPORTS CMK75 유무선 LCD 핫스왑 풀윤활 RGB 기계식 키보드 한글 / [리니어40g/따각따각] FL 아이스핑 [펀키스] 펀키스 공식 스마트 스토어 smartstore.naver.com 펀키스 네이버 스토어에서 79000원에 겟했다. 할인할 때 잘 산것 같다. 괜히 저렴? 해서 퀄리티에 큰 기대가 없었는데 와 진짜 너무 좋은데? 백축처럼 스피드축은 처음 써보는데 가볍게 쳐지는게 너무 좋다. 손가락이 덜 피로한 것 같다. 타건음도 너무 좋음 설명에 다각다각이라는게 딱 맞는 소리다. 그리고 LED와 노브 2개 다 내가 가지고 싶었던 기능이였는데 이제품에는 2개다 들어있다~~ MAC 펌웨어는 펀키스 공식홈페이지에..

Form Submit하는건 프론트엔드 하면서 많이 하는 일 중에 하나일 것이다. 일단 Form Submit하는 방식은 여러가지가 있는데 내가 아는 것만 적자면... 1. form태그 안에 submit 버튼을 이용한 방식 2. 스크립트를 이용한 form.submit() 3. 비동기 통신을 이용한 submit 방식 그 외 등등 다양한 방식으로 form submit을 할 수 있다. 내가 짜는 코드에 맞게 적절한 방식으로 사용하면된다. 1번과 2번 케이스 경우에는 알아서 name과 value값을 백단으로 넘겨주지만 비동기 통신을 이용했을 때는 내가 직접 데이터를 말아서(?) 보내줘야한다. 어떻게 데이터를 말아서 보내야할까? 그것도 다양한 방식이 있지만 오늘은 FormData를 이용해서 데이터를 말아보겠다. Fo..

코드를 작업하다 보면 생각보다 드래그도 많이하게 된다. 그러다 보면 마우스로 드래그 하고, 다시 키보드로 손을 이동하는 동작들이 많아져서 손목에 부담이 가게 된다. 그래서 찾게된 vscode extension과 단축키 설정법! 단축키는 mac 기준으로 작성되었다. 1. Bracket Select 괄호, 따옴표 등을 단축키를 이용해 선택할 수 있다. opt + a 를 클릭하면 "" 사이, '' 사이, [] 사이 등 한 번에 선택해준다. 완전 편함 강추 2. htmltagwrap jsx 작업하다보면 부모 태그로 감싸 줘야하는 경우가 많이 생기는데 이 extension사용하면 내가 지정한 태그로 단축키만 입력하면 감싸준다. opt + w를 클릭하면 드래그 한 부분을 태그로 감싸줌~! 나는 기본 div로 설정해..

NextAuth를 이용해서 Github 로그인을 간단하게 구현할 수 있다. 1. next-auth를 설치한다 yarn add next-auth 2. github에 OAuth 셋팅하기 github 로그인을 이용하기 위해서는 github에 가서 약간의 설정을 해줘야한다. New OAuth App를 클릭해서 권한을 만들어준다. 표시한 부분을 입력해준다. Client ID와 그 아래 Secret key가 필요하다. 3. NextAuth.js 공식문서 참고해서 적용하기 그리고 나서 NextAuth.js 공식 문서에 있는거 그대로 따라해주면 된다. Getting Started | NextAuth.js The example code below describes how to add authentication to a ..

📌 fieldset과 legend 태그를 적극 활용하자 회원정보 거주지 정보 fieldset : 웹 양식의 여러 컨트롤 + 을 묶을 때 사용 - 해당 태그에 disabled 속성을 부여할 수 있음 🔥 disabled 줄 시 그 안에 있는 입력 요소들도 같이 disabled됨 (input 한개씩 disabled로 제어할 필요가 없어짐) - name 속성을 줄 수 있음 document.forms.[폼이름].[필드셋이름] 으로 찾을 수 있음 특성 속성값 설명 disabled disabled - 지정할 경우, 모든 자손 컨트롤 비활성화 - 제출시 데이터에 미포함 - 브라우저 이벤트 작동 X form form의 id값 - 외부에 이 있을 때 명시적으로 연결해줌 - 요소의 id name fieldset의 name값..