Styled-components 스타일 속성은 유지하되 태그만 바꿔주고 싶을때 as='바꿔줄 태그' const BtnBlue = styled.button` background-color: blue; color: white; `; // .... // = 버튼이지만 a태그로 바꿔서 사용함 기본 속성값 설정 const Input = styled.input.attrs({ required: true })` ` 백그라운드 이미지 설정 일단 import를 한다 import Bg from './img/Bg.jpg'; 라고 한 다음. styled-components에서 export const Bgbox = styled.div` background: url(${Bg}); `
study
👏git 명령어 정리 git 설정 로컬 리포지토리와 연결할 유저 정보 설정 # 버전 히스토리를 식별할 때 사용할 이름을 설정 $ git config --global user.name "[firstname lastname]" # 각 기록과 연결할 이메일 주소를 설정 $ git config --global user.email “[valid-email]” 도움말 보기 # Git에서 제공하는 모든 명령어 보기 $ git help -all # 특정 command에서 사용할 수 있는 모든 옵션 보기 $ git [command] -help 세팅 및 초기화 # 현재 디렉토리 기준으로 Git 저장소 생성 $ git init # URL을 통해 리모트 리포지토리를 로컬 리포지토리에 복제(clone) $ git clone [..
프로젝트 GitHub GitHub Repository Repository에 반드시 필요한 파일 README.md 오픈 소스 프로젝트에서 가장 먼저 확인 할 수 있는 정보 기본적인 마크다운 방법으로 작성 가능 양식은 따로 없지만 보통 해당 오픈 소스를 어떻게 활용할 수 있는지에 대한 상세한 정보를 작성함 .gitignore gitignore dotfile. git으로 관리하지 않는 파일 모음 공유할 필요 없는 파일을 기록하면 git이 이를 파악하지 않고 push할때도 Repo에 Push 되지 않음 예) 개인이 따로 관리해야하는 중요한 secret token, 다른 동료와 공유할 필요없는 설정 파일 등 LICENSE 해당 코드의 라이센스 대부분 회사에서 사용하는 코드는 private로 관리하고 외부에 공개하..
에러가 발생한 상황 json-server로 목업 api를 활용해 리액트로 투두리스트를 만들고 있었는데 갑자기 아래와 같은 에러가 나타나기 시작했다. 우선 내가 작성한 코드는 아래와 같은 형태이다. const [todos, setTodos] = useState(null) 을 사용해 투두를 관리할 상태를 만들고 초기값은 null로 주었다. 왜냐하면 데이터를 목업 api로부터 받아와서 넣을 것이기 때문에, 일단은 빈값인 null을 넣어줘야겠다고 생각했다. useEffect에서 처음 렌더링 될때 한번만 axios로 데이터를 받아와 setTodos로 값을 넣어준다. todos.map()으로 가져온 데이터를 ul 내부에 뿌려준다. // ... const TodoContainer = () => { const [tod..
리액트에서 조건부로 이벤트 주기 조건부 렌더링 사용하듯이 코드 작성하고 false값은 undefined로 작성. undefined가 아닐경우 아래와 같은 에러 발생 styled-reset 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 Node.js 패키지 styled-component를 설치해야만 사용할 수 있음 styled-components와 연결되어, 여러 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 Node.js 패키지 normalize.css와 동일한 역할 설치 npm i styled-reset import는 이렇게 import reset from "styled-reset"; createGlobalStyle로 전역 스타일 생성하고 거기에 넣어줌 // 글로벌 스타일 만들기 위한..
최적화(Optimization) 주어진 조건으로 최대 효율을 낼 수 있도록 하는 것. 웹 개발에서의 최적화는 주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 만드는 것이다. 최적화가 필요한 이유 1. 이탈률 감소 최적화가 잘 안되었을경우 화면을 불러오는 시간이 길어지고 사용자가 페이지를 이탈할 확률이 높아진다. 따라서 성능 최적화를 통해 페이지 로딩 속도를 줄이면 사용자의 이탈률을 효과적으로 줄일 수 있다. 2. 전환율 증가 이탈률이 줄어들면 방문자가 회원가입, 상품 구매, 게시글 조회 등의 행위를 하며 실제 서비스 이용자로 전환될 확률이 늘어난다. 전환율을 높이기 위해서는 최적화를 통해 이탈률을 줄여야한다. 3. 수익 증대 이탈률이 감소하고 전환율이 증가하면 트래픽 증대 및 회원 수의 증가로 이어..
보호되어 있는 글입니다.
TDD(Test-driven Development) 코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론. 작은 단위의 테스트케이스를 작성하고 이를 통과하는 코드를 작성하는 과정을 반복한다. 1. Write Failing Test : 실패하는 테스트 코드 작성 2. Make Test Pass : 테스트 코드를 성공시키기 위해 최소한의 실제코드 작성 3. Refactor : 중복 코드 제거, 일반화 등 리팩토링 테스트 코드 작성을 마치기 전에 실제 코드 작성을 시작하지 않도록 주의해야한다. 또한 실제 코드를 작성할때는 테스트 코드를 통과할 정도의 최소 코드만 작성해야한다. 장점 버그가 더 적은 코드를 작성할 수 있음 불필요한 설계를 피할 수 있음 테스트 코드의 요구사항에 집중하기 가능 TDD를 사용하..
보호되어 있는 글입니다.
문제 설명 연속된 세 개의 정수를 더해 12가 되는 경우는 3, 4, 5입니다. 두 정수 num과 total이 주어집니다. 연속된 수 num개를 더한 값이 total이 될 때, 정수 배열을 오름차순으로 담아 return하도록 solution함수를 완성해보세요. 제한사항 1 ≤ num ≤ 100 0 ≤ total ≤ 1000 num개의 연속된 수를 더하여 total이 될 수 없는 테스트 케이스는 없습니다. 입출력 예 num total result 3 12 [3, 4, 5] 5 15 [1, 2, 3, 4, 5] 4 14 [2, 3, 4, 5] 5 5 [-1, 0, 1, 2, 3] 입출력 예 설명 입출력 예 #1 num = 3, total = 12인 경우 [3, 4, 5]를 return합니다. 입출력 예 #2..
