본문 바로가기

분류 전체보기45

[javaScript] Nullish coalescing operator(??) 사용하기 자바스크립트를 사용하면서 존재조차 몰랐던 Nullish coalescing operator에 대해서 알아보자. Nullish coalescing operator는 ?? 를 사용하여 해당하는 값을 가져온다. ?? 왼쪽에 있는 코드의 값이 있다면 그 값을 출력하게 되고, null이나 undefined일 경우 ??의 오른쪽 값이 출력된다. 코드를 보면 쉽게 이해가 된다. const sendMessage = (text) => { const message = text ?? "메시지가 없습니다."; return message; }; console.log(sendMessage("하이")); // "하이" console.log(sendMessage(undefined)); // "메시지가 없습니다." console.lo.. 2022. 2. 19.
[HTML/CSS] a 태그 꾸미기 (지긋지긋한 보라색 링크) a태그를 사용하여 링크를 구현하였을 때, 한번 접속한 흔적이 있다면 위와 같이 보라색으로 표시된다. 너무 못생겨서 a태그 스타일링을 해보았다. styled-components를 사용하여 구현해보았다. 첫번째 const Site = styled.a` font-weight: 200; font-style: italic; text-decoration: none; `; font-weight를 사용하여 폰트의 굵기를 조금 얇게 해주었고, font-style: italic로 글씨를 기울임체로 바꿔주었다. 마지막으로 text-decoration:none으로 못생긴 밑줄을 없애주었다. 두번째 const Site = styled.a` font-weight: 200; font-style: italic; text-decora.. 2022. 2. 9.
TIL 조금씩이라도 알고리즘을 공부하기 위해 백준 문제를 풀기 시작했다. 아주 단순한 문제로 시작을 하면서 백준 10171번 고양이 문제를 푸는데 계속 틀렸다고 나왔다.... 문제는 밑에와 같은 고양이 모양을 출력하는 것이다. console.log(`\ /\ ) ( ') ( / ) \(__)| `) 당연히 위와 같이 코드를 작성하였지만, 출력결과는 이상한 형태로 나왔다. 어? 백슬래쉬( \ )가 생략이 되었네?? 이전에 스쳐배웠던 기억이 떠오르면서 백슬래쉬 출력에 대해서 검색해보았고, 백슬래쉬를 출력하기 위해서는 \\ 이렇게 두개로 표현을 해야하는 것을 알게되었다. console.log(`\\ /\\ ) ( ') ( / ) \\(__)| `) 이렇게 코드를 수정하여 통과를 할 수 있었다. 기본기가 탄탄하도록 노.. 2022. 2. 6.
warp 컴포넌트 만들기 리액트에서는 컴포넌트 단위로 코드를 분리할 수 있는데 자유도가 높기 때문에 기준이 정해져있지 않고 사람마다 나누는 범위가 다르다. 기본적으로 재사용 가능하거나 부분적인 단위로 컴포넌트를 다루는데 유데미 강의에서 wrap컴포넌트도 만들 수 있다는 것을 알게 되었다. 감싸는 용도로 컴포넌트를 만들겠다는 생각은 해보지 않았는데 역시 뭐든지 응용이 중요한 것 같다. 본론에 들어가보자. import React from "react"; import "./Expenses.css"; const Item = (props) => { return ( Contents ); }; export default Item; import React from "react"; import "./ExpenseItem.css"; const C.. 2022. 1. 31.