전체 글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. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 에러처리 오늘의 에러 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 오늘 발생한 에러는 아니지만 ㅎㅎ 업무를 하면서 위와 같은 에러가 발생했다. useEffect의 cleanup함수를 사용하여서 메모리 누수를 해결하라고 하는 메세지인 것 같다. 왜 이런 에러가 발생했을까? cleanup 함수는 컴포넌트가 언마운트 될 때 실행이 된다. 만약 요청을 통.. 2022. 1. 30. VSC에서 react사용시 html태그 자동완성 설정하기! 리액트를 사용하면서 매번 이렇게 태그를 만들어줘야했다. 태그를 한페이지에만 수십개 쓰는 경우도 있기 때문에 이 과정이 너무 귀찮아서 구글링을 해보니, vsc에서 지원해주는 플러그인으로 html파일에서는 h1, div 이런식으로만 작성해도 태그가 자동완성이 되지만, react에서는 따로 설정을 해줘야했다. 진짜 간단하다. vsc창 왼쪽 하단에 설정 아이콘을 누른 후, setting을 누른다. 오른쪽 상단의 open setting을 누르면 json파일이 띄워진다. 밑에 코드만 추가해주면 셋팅 끝!"emmet.includeLanguages": { "javascript": "javascriptreact" } 이제는 react에서도 div라 치고 엔터를 누르면 태그가 자동으로 만들어진다! 2022. 1. 24. 이전 1 2 3 4 ··· 8 다음
