아침부터 알고리즘 수업을 듣고, react 투두리스트 개인 과제를 제출한지 얼마 지나지 않아서 바로 또 개인과제를 발제 받았다.
이번 개인 과제는 가계부를 만드는 건데, 이번 과제에선 crud 기능이 전부 들어가기 때문에 전보다 더 어려울 거 같다.
과제를 들어가기에 앞서 강의를 봤는데 처음으로 Styled-Component 라는 걸 사용해 봤다!! 아마.. 오늘 내일은 강의를 끝까지 다 보는 거에
포커스를 맞추려고 하기에 꽤나 바쁘지 않을까 싶다
Styled-Component
- 설치 방법
npm : npm install --save styled-components
yarn : yarn add styled-components
- Styled-Component 란?
-
CSS in JavaScript 기술로 JavaScript 내에서 CSS를 작성하는
라이브러리다. -
클래스명을 해시값으로 자동 생성하고, 클래스명의 오염을 방지
-
스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된
컴포넌트에 바로 넣어서 사용하는 기법 -
JavaScript의 동적인 값들을 온전히 사용 가능
- 사용법
예시
import styled from "styled-components";
const Wrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 15vh;
`;
const BoxOne = styled.div`
background-color: #cf6a87;
width: 100px;
height: 100px;
color: white;
`;원하는 태그명을 변수로 작성한다. 그 후 styled.태그 뒤에 백틱(``)을 넣어준 뒤, 그 안에 원하는 css스타일링을 한다.
저 코드에서 예를 들어 width가 각각 다른 여러개를 만들고 싶을 때는
개별적용할 속성을 props로 만듬
예시
color: ${props => props.color}<h4 color="green">h4의 컬러를 유동적으로 </h4>스타일 컴포넌트를 사용하면 전보다 훨씬 편리하게 css를 작성할 수 있고.. 무엇보다 익숙해지면 엄청 편하게 코딩을 할 수 있을 거 같다.
그리고 오늘은 알고리즘 분반을 통해 도약반과 심화반의 중간에 껴있는 탐험반의 수업을 들었다.
해당 반은 js의 map,filter,set,find 등등 여러 메서드들을 익힌 상태라면 들어도 된다고 해서 들어오긴 했다만..
솔직히 쓸 줄 아는 거지 잘 쓰는 건 아니라서 도약반으로 가야 하나 고민이 조금 되는 거 같다 ㅠㅠㅠ
그래도 날마다 알고리즘 문제 하나씩 풀다 보면 실력이 많이 늘 거 같긴 하니 중꺾그마 (중요한 건 꺾여도 그냥 하는 마음)로 알고리즘 문제를
다 뽀개버리겠다!!!
내일 풀어야 할 문제를 오늘 미리 풀었다.. 왜냐면 내일은 강의를 끝까지 다 들어야 하기도 하고 여러모로 시간이 촉박할 거 같아서 남는 시간에!
문제 : 문자열 내 각 문자의 개수 반환
-
문제 정의
주어진 문자열에서 각 문자가 몇 번 등장하는지 세어라. 결과는 객체 형태로 반환한다. -
조건
대소문자를 구분한다.
공백도 하나의 문자로 간주한다.
빈 문자열이 주어질 수도 있다. -
예시:
입력: "hello world"
출력: {'h': 1, 'e': 1, 'l': 3, 'o': 2, ' ': 1, 'w': 1, 'r': 1, 'd': 1}
입력: "hello World"
출력: {'h': 1, 'e': 1, 'l': 3, 'o': 2, ' ': 1, 'W': 1, 'r': 1, 'd': 1}
나의 풀이
// 빈 객체를 만든다
// for문으로 문자의 길이만큼 반복을 돌면서 선언해둔 빈 객체에 값을 담는다
// s[i]는 많이 쓰이는 코드이니 변수에 할당
// 객체 내에 해당 문자가 처음이라면 1
// 객체 내에 해당 문자가 이미 있다면 기존의 값에 +1
function countCharacters(s) {
const count = {};
for(let i = 0; i < s.length; i++) {
let idx = s[i];
if(!conut[idx]) {
count[idx] = 1;
} else {
count[idx] += 1;
}
return count;
}아침에 알고리즘 수업을 들으면서 얼추 튜터님의 문제 설명을 들었기에
많이 수월하게 풀지 않았나 생각해보지만 다른 문제는 .. 어떡하지?
근데 어차피 중꺾마 마인드로 부딪히다 보면 무조건 될 거란 확신이
있기에 나는 절대 무섭지 않다(아마도)
