짧은코딩

box-sizing 박스를 만들고 200px의 너비를 준다. 그리고 padding-left 50px를 준다. 이런식으로 구성이될 것이다. 그러면 결국 명령을 다 수행 시켜야해서 50px가 늘어나서 박스의 너비는 250px가 된다. 그래서 box-sizing이 없으면 ellipsis가 안보이게 된다. 결국 box-sizing: border-box를 해서 css에게 padding을 줘도 신경쓰지말고 box 사이즈를 늘리지 말라고 말한 것이다. 즉, 사진처럼 박스 총 너비는 늘려주지 않은 것이다.

Form form은 아주 중요한 2가지 속성을 가지고 있다. 하나는 action이고 다른 하나는 method이다. -action action은 어떤 페이지로 data를 보낼건지 지정할 수 있다. Find Kokoa Accountor or Password 그리고 friends.html을 만들고 hello만 입력했다. -method method는 2가지 방식을 사용할 수 있는데, POST와 GET이다. POST는 백엔드 서버에 정보를 전송하는 방식인데 우리는 서버를 가지고 있지 않아서 여기선 사용하지 않는다. GET 방식은 보안에 취약하다. 그렇기에 URL에 포함되어도 상관없는 정보들을 GET 방식으로 보낸다. username과 password를 GET 방식으로 내보낼 것이다. Find Kokoa Accou..

https://firebase.google.com/?hl=ko&gclid=CjwKCAjwquWVBhBrEiwAt1KmwqeeO0K9y1fW7fUkjnXFKQDGtMiHhVxEyKU0q0aBc0-nNwwdUyCOUxoCQmYQAvD_BwE&gclsrc=aw.ds Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 프로젝트 만들기를 한다. 프로젝트를 만들고 나면 이런 페이지가 나온다. 그리고 빌드 -> hosting -> 시작 npm install -g firebase-tools 이 명령어를 입력한다. firebase login vsc 터미널에 이 명령어를 입력한다. 그러고 구글 아이디로 ..

상단 제목 바꾸기 public/index.html에 가서 부분을 수정한다. 감성 일기장 description description은 사이트의 성격을 요약해서 나타낼 수 있다. 언어 변경 이렇게 ko로 해야 번역하기가 안뜬다. 페이지마다 제목 바꿔주기 -Diary.js useEffect(() => { const titleElement = document.getElementsByTagName("title")[0]; titleElement.innerHTML = `감성 일기장 - ${id}번 일기`; }, []); -Edit.js useEffect(() => { const titleElement = document.getElementsByTagName("title")[0]; titleElement.innerHT..

웹 최적화 방법 1. 코드들을 하나하나 보면서 찾는 방법, 정적 2. 프로젝트를 키고 프로그램에 의해 동적으로 분석한다. => 우선은 정적 분석을 할 만큼 실력이 뛰어나지 않기 때문에 정적으로 분석한다. 그렇기에 개발자 도구의 Components의 설정에서 Highlight updates when components render를 체크하고 분석하면 된다. 최적화 하기 1. 달력을 바꿨을 때, 버튼들은 리렌더 될 필요가 없다. -Home.js // 오른쪽 버튼 누르면 1달씩 증가 const increaseMonth = () => { setCurDate( new Date(curDate.getFullYear(), curDate.getMonth() + 1, curDate.getDate()) ); }; // 왼쪽..

https://www.acmicpc.net/problem/9095 9095번: 1, 2, 3 더하기 각 테스트 케이스마다, n을 1, 2, 3의 합으로 나타내는 방법의 수를 출력한다. www.acmicpc.net 해결법 이 문제는 동적 프로그래밍 문제이다. 따라서 규칙이나 패턴을 찾아야 한다. 1: (1) => 1개 2: (1+1), (2) => 2개 3: (1+1+1), (1+2), (2+1), (3) => 4개 4: (1+1+1+1), (1+1+2), (1+2+1), (1+3), (2+1+1), (2+2), (3+1) => 7개 5: (1+1+1+1+1), (1+1+1+2), (1+1+2+1), (1+1+3), (1+2+1+1), (2+1+1+1), (1+2+2), (2+1+2), (2+2+1), (..

https://www.acmicpc.net/problem/17219 17219번: 비밀번호 찾기 첫째 줄에 저장된 사이트 주소의 수 N(1 ≤ N ≤ 100,000)과 비밀번호를 찾으려는 사이트 주소의 수 M(1 ≤ M ≤ 100,000)이 주어진다. 두번째 줄부터 N개의 줄에 걸쳐 각 줄에 사이트 주소와 비밀번 www.acmicpc.net 풀이(맞음) n, m = map(int, input().split()) dic = {} for i in range(n): site, password = map(str, input().split()) dic[site] = password answer = [] for i in range(m): x = input() answer.append(dic[x]) for i in ..

Web Storage https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API Web Storage API - Web API | MDN Web Storage API는 브라우저에서 키/값 쌍을 쿠키 (en-US)보다 훨씬 직관적으로 저장할 수 있는 방법을 제공합니다. developer.mozilla.org seeionStorage: seeionStorage는 브라우저가 열려있는 동안만 저장이 된다. LocalStorage: 브라우저를 닫아도 저장 공간에 저장되어 있다. -LocalStorage 저장하기 useEffect(() => { localStorage.setItem("item1", 10); localStorage.setItem("item2", "2..

글 추가 이렇게 글 2개를 추가하면 id가 같은 일기가 생성된다. -에러 Encountered two children with the same key 이런 버그를 만나면 key가 여러 개 존재한다는 것이다. 테스트해보는 dummy data를 사용할 때 자주 발생한다. -App.js const dataId = useRef(6); dummy data가 5개 있었으니까 초기값을 6을 줘야 에러가 발생하지 않는다. 최신순 정렬에서 글 추가하면 정렬 안되는 버그 이건 놀랍게도 오타 때문이었다. TypeScript는 이런 오타를 해결할 수 있다고 한다. -DiaryList.js const [sortType, setSortType] = useState("latest"); latest가 아닌 lastest라고 썼다. ..

gitignore 깃허브 데스크탑에 .DS_Store라는 임시파일이 있다. 이건 맥os에서 만든 파일이다. 맥이나 윈도우에는 보이지 않는 임시파일이 있다. 따라서 업로드 하고 싶지 않으면 체크를 안하면 되는데 모든 커밋에서 이 파일을 업로드 하고 싶지 않다고 기억을 해야한다. => 이럴 경우에는 .gitignore를 만들면 된다. '.gitignore'는 무시하고 싶은 파일 이름을 기록하는 파일이다. .DS_Store 이렇게 쓰고 저장하면 커밋 창에서 .DS_Store가 사라진다. 어떤 폴더라도 무시가 가능하다. BEM(Block Element Modifier) 좀 더 쉽게 읽히는 css를 가진다. https://css-tricks.com/bem-101/ BEM 101 | CSS-Tricks The fo..