짧은코딩

커스텀 훅 커스텀 훅이란 리액트에서 기본 제공하는 훅을 합쳐서 사용자가 훅을 만드는 것이다. 예를 들어 useState와 useCallback을 합쳐서 새로운 훅을 만들 수 있다. import { useCallback, useState } from 'react'; const useInput = (initialData) => { const [value, setValue] = useState(initialData); const handler = useCallback((e: any) => { setValue(e.target.value); }, []); return [value, handler, setValue]; }; export default useInput; 이런 식으로 useState, useCallba..

preventDefault preventDefault는 form 태그에서 제출 버튼을 누르게 되면 href 를 통해 이동하거나, 창이 새로고침하여 실행된다. preventDefault 를 통해 이러한 동작을 막아줄 수 있다. 우리는 SPA 방식을 사용하기 때문에 preventDefault가 필요하다. TS에서 any, unknown, 제너릭 타입 -any any 타입은 어떤 타입이라도 올 수 있는 것이다. 하지만 이러면 ts를 사용하는 의미가 없고 개발할 때 이로 인해 에러가 발생할 수 있다. 따라서 any 타입은 조심해서 사용해야 한다. -unknown unknown 타입은 any 타입과 동일하게 모든 값을 허용하지만, 할당된 값이 어떤 타입인지 모르기 때문에 함부로 프로퍼티나 연산을 할 수 없다. -..

https://www.acmicpc.net/problem/1647 1647번: 도시 분할 계획 첫째 줄에 집의 개수 N, 길의 개수 M이 주어진다. N은 2이상 100,000이하인 정수이고, M은 1이상 1,000,000이하인 정수이다. 그 다음 줄부터 M줄에 걸쳐 길의 정보가 A B C 세 개의 정수로 주어지는데 A번 www.acmicpc.net 해결법 이 문제는 최소 비용을 구하는 문제이고 신장 트리를 만들어야 하는 문제라서 크루스칼 알고리즘으로 풀어야 한다. 다만 유의할 부분은 임의의 두 집 사이에 경로가 항상 존재해서 길을 더 없앨 수 있기 때문에 길 유지비를 최소로 하려면 가장 큰 값을 가진 길 하나를 없애면 된다. 그렇기에 가장 작은 유지 비용을 가진 길부터 연결한다고 했을 때 가장 마지막에 ..

Switch Switch는 하나를 키면 다른건 꺼지듯이 위 코드에서는 반드시 3개 중에서 1개만 선택 가능하다. 즉 여러 개의 라우터 중에서 딱 하나의 라우터만 표시해준다. Route는 컴포넌트를 화면에 띄워주는 것이다. Redirect는 다른 페이지로 돌려준다. 위 코드에서는 url이 /로 끝나면 /login으로 돌려준다. 따라서 /이나 /login이면 path가 login이다. 을 해주지 않으니까 에러가 발생했었다. SPA 구동 방식 SPA는 url이 없다. 오로지 index.html만 사용한다. 그래서 url 뒤에 /하고 주소를 붙쳐주는 것은 History API 덕분이다. 그래서 History API를 이용해서 가짜 주소를 만들어 준다. 새로고침하면 주소는 프론트로 안가고 서버로 간다. 근데 서버..

text-overflow text-overflow는 글을 썼는데 줄이 넘치면 생략해주는 속성이다. -적용하기 위한 조건 1. 고정된 width 혹은 height가 있어야 한다. 2. overflow:hidden; 속성을 사용해서 영역을 감춰야 한다. 3. 아래줄로 내려가는 것을 막기 위해 white-space: nowrap 같은 속성을 줘야 한다. overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 80px; 이런식으로 사용 가능하다. 이미지 어둡게 만들기 filter: brightness(60%); 위 사진처럼 이미지를 어둡게 하기 위해서는 filter를 사용하면된다.

만드는 과정 이 세팅을 하는데 정말 4일은 사용한 것 같다. 제로초님의 강의를 보고 그대로 따라했지만 에러의 늪에서 벗어나지 못했다. 오류를 해결하니 다른 오류가 발생했다. 혹은 오타가 발생했는데 이를 모르고 시간을 날렸다. 처음엔 정말 열정을 가지고 이 강의를 들었다. 하지만 에러와 오타가 날 수강 환불로 이끌뻔했다(ㅠㅠ). 정말 마음을 다 잡고 다시 처음 강의부터 차근차근 해 나갔다. 물론 이 과정에서도 오류는 발생했다. 하지만 이전에 했을 때 보다는 쉽게 극복할 수 있었다. 이 과정을 따르면서 npx create-react-app이란 명령어에게 얼마나 감사한지 알게되었다. 물론 이 세팅이 npx create-react-app을 수동으로 하는 과정인 것은 마지막에 알았다. 이걸 알고 나서 너무 허무했..

box-shadow 그림자 속성을 줄 수 있다. 이 사진 밑쪽 처럼 그림자를 줄 수 있다. 원하는 방향 어디든 줄 수 있다. box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, 0.4); 이렇게 사용할 수 있다. -참고 사이트 https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow box-shadow - CSS: Cascading Style Sheets | MDN box-shadow CSS 속성은 요소의 테두리를 감싼 그림자 효과를 추가합니다. 쉼표로 구문해서 여러 그림자 효과를 입힐 수 있습니다. 박스 그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함과 확산 developer.mozilla.org overflow-x overfol..

네트워크 분류 -LAN(Local Area Network) LAN은 사무실과 개인적으로 소유 가능한 규모이다. LAN은 근거리 통신망을 의미하고 캠퍼스 같은 좁은 공간에서 운영된다. 전송 속도가 빠르고 혼잡하지 않다. -MAN(Metropolitan Area Network) MAN은 서울시 같은 시 정도 규모이다. 대도시 지역 네트워크를 나타내고 도시 같이 넓은 지역에서 운영된다.전송 속도는 평균이고 LAN보다는 더 혼잡하다. -WAN(Wide Area Network) WAN은 세계 규모이며 광역 네트워크이다. 국가나 대륙 같은 더 넓은 지역에서 운영된다. 전송 속도는 낮고 MAN보다 더 혼잡하다. 네트워크 성능 분석 명령어 애플리케이션엔 문제가 없는데 데이터를 못 가져오는 경우가 있다. 이는 네트워크 ..

제로초님의 Slack 클론 코딩 프론트엔드 버전을 배우기 위해서 제로초님의 깃허브에 들어가서 먼저 다운을 받아줬다. 그리고 프론트엔드 개발을 하기 위해서 백엔드가 만들어져 있어야 하는데 백엔드는 제로초님이 이미 만들어 놓은 것을 이용할 예정이다. 기본 설치 프로그램 1. nodeJS 2. MySQL https://solbel.tistory.com/1475 깃허브 다운 후 해야 할 것 깃허브에서 파일을 다운하고 먼저 npm i npm을 설치를 하려고 했는데 에러가 발생했다. 정말 이것 저것 구글링 해봤지만 도저히 해결되지 않았다. 그러다가 nvm을 설치하고 node.js의 버전을 바꿔주니까 제대로 설치됐다.(한 2일 고생했다...) npx sequelize db:create 이 명령어를 통해 데이터베이스를..

html의 빈 박스에 막대나 원 만들기 -막대 width: 15px; height: 60px; background-color: white; -원 background-color: white; width: 15px; height: 15px; border-radius: 50%; 막대나 원 둘 다 반드시 width와 height를 줘야한다. 그리고 원은 border-radius에 50%을 주거나 width와 height의 절반 크기의 px를 줘야한다. keyframe -원형으로 돌리는 법 @keyframes turn { 100% { transform: rotate(180deg); } } rotate를 주면 된다. -각 아이템에 순서대로 애니메이션을 주는 법 1. 우선 keyframse를 만든다. 2. 각 아이템..