본문 바로가기

전체 글451

220510 오늘은 프로젝트 UI를 수정했다. css로 만들었던 파일을 styled component로 변경했다. 어제까지만해도 css 파일을 styled component로 바꾸는게 이해도 잘 안됐는데 오늘은 혼자서 공식 문서를 보고 변경하는데 성공했다. 그런데 폰트 적용하는데 계속 적용이 안돼서 고민하다가 스터디 같이하는분에게 물어봤다. 구글링을 해가면서 방법을 찾아주셨다. 타입스크립트에서 ttf를 인식을 못해서 타입에러가 났었다. 그래서 fonts.d.ts 파일을 만들어서 declare module '*.ttf'를 해주었다. 그리고 index.css에다가 폰트 경로랑 이름을 정해주고 이거를 내가 사용하고자하는 Home의 style.ts에서 사용했다. 바로 폰트 변경이 됐다..! 그리고 마우스 hover라는 것을.. 2022. 5. 11.
41. 로또의 최고순위와 최저순위 https://programmers.co.kr/learn/courses/30/lessons/77484 코딩테스트 연습 - 로또의 최고 순위와 최저 순위 로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다. 1 순위 당첨 내용 1 6개 번호가 모두 일치 2 5개 번호 programmers.co.kr 훔,,, 효율성은 떨어지는 코드지만,, 그래도 풀었다..! ✨ 이해 0은 알아볼 수 없는 숫자 로또가 당첨 될 수 있는 최고 순위와 최저 순위를 배열로 리턴 ✨ 계획 lottos에 있는 숫자랑 win_nums에서 일치하는 숫자의 개수 => 최저순위 최저 순위 + lottos의 0의 개수 => 최고순위 + 원래 처음에.. 2022. 5. 11.
CSS: 중앙 정렬 position, transform 원래 text-align: center랑 justify-content: center를 사용하려고 했는데 중앙 정렬이 안되길래,, 다른 방법으로 해봤다. 🕶 position, transform 사용 export const RoutineButton = styled(Button)` background-color: #D0C9C0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); `; position: absolute; 부모 엘리먼트의 위치를 기준으로 절대적인 위치 값을 설정 top: 50%; left: 50%; 이렇게 두개를 해주니까 버튼의 왼쪽 위 모서리를 기준으로 정렬하기 때문에 완전한 가운데 정렬은 아니었다,, 그래서 t.. 2022. 5. 10.
모듈 export default / import 'as' 🪢 모듈이란? 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성 export : 모듈 내보내기 import : 모듈 가져오기 import 'as' 가져올 것이 많으면 import * as 이렇게 객체 형태로 원하는 것을 가져올 수 있다. 루티너리 Home 컴포넌트에서 style.ts 사용하려고 위의 방식을 사용해봤다. import * as Styled from './style'; 이렇게 가져온다음에 이런식으로 사용해줬다. 🪢 export default export default는 해당 모듈에는 개체가 하나만 있다는 것을 의미한다. export default 한 모듈을 가져오려면 {} 필요없음 default 키워드는 기본 내보내기를 참조하는 용도로 사용된다. +named e.. 2022. 5. 10.
react background image 설정하기 react를 사용해서 프로젝트를 진행하던 중에 이미지를 background에 넣고 싶어서 넣었는데 div 크기만큼 완전 째깐하게 들어갔다,,; 구글링해보니까 background-size: cover; background-position: center; background-repeat: no-repeat; 이렇게 설정하면 된다길래 했는데도 안됨,,,🥲 그때 찾은정보..! 위처럼 저렇게 설정해도 배경에 꽉차게 안들어간다! 싶으면 height: 100vh; 이렇게 아래에 추가로 설정해주면 잘된다~ height: 100vh => veiwport 높이의 100%라는 의미 + 배경 이미지 넣는방법! 우선, 나같은 경우는 따로 css 파일을 만들어서 사용했다. 이렇게 이미지가 사용되는 폴더 안에 이미지 파일을 넣어주.. 2022. 5. 9.
40. 신규 아이디 추천 https://programmers.co.kr/learn/courses/30/lessons/72410 코딩테스트 연습 - 신규 아이디 추천 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 programmers.co.kr 처음 프로그래머스 코테 연습 문제를 풀어보았다. 문제 하나 푸는데 거의 하루종일 걸렸지만 해결했고 뿌듯했다. 1. 이해 // 우리가 풀려고 하는 문제는 무엇일까? // 우리가 알고 있는 것은 무엇인가? // 주어진 조건은 무엇인가? // 기존에 비슷한 문제를 본적이 있는가? 2. 계획 // 어떤 정보를 가져와서 // 매트릭스를 만들고 // ~만든다. 3... 2022. 5. 5.

티스토리툴바