짧은코딩

이유 및 코드 강의를 보며 만들었던 emotion-diary 프로젝트를 큰 흐름을 기준으로 분석해보려고 한다. 아직은 리액트의 로직을 잘 모르는 것 같아서 분석을 하면서 정리하면 도움이 될 것이라고 생각한다. -깃허브 https://github.com/5hyun/emotion-diary GitHub - 5hyun/emotion-diary Contribute to 5hyun/emotion-diary development by creating an account on GitHub. github.com 코드는 여기서 보면된다. 초기 설정 1. 폰트, 레이아웃, 이미지 등을 세팅 2. 버튼, 헤더 등 여러 페이지에서 공통으로 사용 할 컴포넌트 세팅 App.js 1. 복잡한 컴포넌트의 로직 분리를 하기 위해 us..

https://www.acmicpc.net/problem/1931 1931번: 회의실 배정 (1,4), (5,7), (8,11), (12,14) 를 이용할 수 있다. www.acmicpc.net 해결법 이 문제는 회의 종료 시간을 기준으로 정렬을 한다. 그리고 맨 처음 회의는 무조건 들어간다. 맨 처음 끝나는 시간을 기록하고 다음 회의 시작 시간과 비교한다. 만약 앞의 회의가 끝나는 시간보다 다음 회의 시작 시간이 같거나 크면 그 회의는 진행할 수 있다. 이런식으로 구현하면된다. 하지만 문제점은 저렇게 구현하면 시작 시간과 끝나는 시간이 같은 회의에서 틀리게 된다. 그렇기에 먼저 시작 시간으로 정렬을 한 번 해주고 나서 종료 시간을 정렬하면 해결된다. 코드 n = int(input()) ary = [] ..

하단 바 만들기 -html -css .nav { /* 아래에 고정 */ position: fixed; bottom: 0; width: 100%; /* 이거 안하면 아이콘이 몰려있다. */ background-color: #f9f9fa; padding: 20px 50px; box-sizing: border-box; /* 이거 해야 아래 고정 시 ellipsis도 보인다. */ border-top: 1px solid rgba(121, 121, 121, 0.3); } .nav__list { display: flex; justify-content: space-between; } .nav__link { color: #2e363e; } 이렇게 나오게 된다. box-sizing 박스를 만들고 200px의 너비를 준다..

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 ..