![]()
벨로퍼트 리액트 3. Todo List 만들기 - 3-1. 컴포넌트 만들기 만들어질 컴포넌트의 구조 TodoTemplate : 투두리스트의 레이아웃 설정 TodoHead : 날짜, 요일, 할일 개수 보여줌 TodoList : 할일 정보가 들어있는 todos 배열을 map을 사용해 여러개의 TodoItem 컴포넌트를 렌더링해줌 TodoItem : 각 할일에 대한 정보 렌더링. 좌측 원을 누르면 완료 여부를 toggle 할수 있음. 완료시 좌측에 체크 나타나고 텍스트 연해짐. 마우스 오버시 휴지통 아이콘 나타나고 삭제 가능 TodoCreate : 새 할일 등록 컴포넌트. 클릭하면 입력 폼 나타남. 다시 클릭하면 폼이 사라짐 ** styled-components에서 전역 스타일 추가할때 - createGlob..
문제 설명 문자열 my_string과 문자 letter이 매개변수로 주어집니다. my_string에서 letter를 제거한 문자열을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ my_string의 길이 ≤ 100 letter은 길이가 1인 영문자입니다. my_string과 letter은 알파벳 대소문자로 이루어져 있습니다. 대문자와 소문자를 구분합니다. 입출력 예 my_string letter result "abcdef" "f" "abcde" "BCBdbe" "B" "Cdbe" 입출력 예 설명 입출력 예 #1 "abcdef" 에서 "f"를 제거한 "abcde"를 return합니다. 입출력 예 #2 "BCBdbe" 에서 "B"를 모두 제거한 "Cdbe"를 return합니다. fu..
![]()
문제 설명 사분면은 한 평면을 x축과 y축을 기준으로 나눈 네 부분입니다. 사분면은 아래와 같이 1부터 4까지 번호를매깁니다. x 좌표와 y 좌표가 모두 양수이면 제1사분면에 속합니다. x 좌표가 음수, y 좌표가 양수이면 제2사분면에 속합니다. x 좌표와 y 좌표가 모두 음수이면 제3사분면에 속합니다. x 좌표가 양수, y 좌표가 음수이면 제4사분면에 속합니다. x 좌표 (x, y)를 차례대로 담은 정수 배열 dot이 매개변수로 주어집니다. 좌표 dot이 사분면 중 어디에 속하는지 1, 2, 3, 4 중 하나를 return 하도록 solution 함수를 완성해주세요. 제한사항 dot의 길이 = 2 dot[0]은 x좌표를, dot[1]은 y좌표를 나타냅니다 -500 ≤ dot의 원소 ≤ 500 dot의 ..
문제 설명 머쓱이네 피자가게는 피자를 일곱 조각으로 잘라 줍니다. 피자를 나눠먹을 사람의 수 n이 주어질 때, 모든 사람이 피자를 한 조각 이상 먹기 위해 필요한 피자의 수를 return 하는 solution 함수를 완성해보세요. 제한사항 1 ≤ n ≤ 100 입출력 예 n result 7 1 1 1 15 3 입출력 예 설명 입출력 예 #1 7명이 최소 한 조각씩 먹기 위해서 최소 1판이 필요합니다. 입출력 예 #2 1명은 최소 한 조각을 먹기 위해 1판이 필요합니다. 입출력 예 #3 15명이 최소 한 조각씩 먹기 위해서 최소 3판이 필요합니다. function solution(n) { return Math.ceil(n / 7); } https://school.programmers.co.kr/learn/..
문제 설명 어떤 세균은 1시간에 두배만큼 증식한다고 합니다. 처음 세균의 마리수 n과 경과한 시간 t가 매개변수로 주어질 때 t시간 후 세균의 수를 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ n ≤ 10 1 ≤ t ≤ 15 입출력 예 n t result 2 10 2048 7 15 229,376 입출력 예 설명 입출력 예 #1 처음엔 2마리, 1시간 후엔 4마리, 2시간 후엔 8마리, ..., 10시간 후엔 2048마리가 됩니다. 따라서 2048을 return합니다. 입출력 예 #2 처음엔 7마리, 1시간 후엔 14마리, 2시간 후엔 28마리, ..., 15시간 후엔 229376마리가 됩니다. 따라서 229,376을 return합니다. function solution(n, t)..
문제 설명 머쓱이네 양꼬치 가게는 10인분을 먹으면 음료수 하나를 서비스로 줍니다. 양꼬치는 1인분에 12,000원, 음료수는 2,000원입니다. 정수 n과 k가 매개변수로 주어졌을 때, 양꼬치 n인분과 음료수 k개를 먹었다면 총얼마를 지불해야 하는지 return 하도록 solution 함수를 완성해보세요. 제한사항 0
벨로퍼트 리액트 - 2-2. CSS Module CSS Module : CSS 클래스가 중첩되는 것을 방지해준다. 확장자는 .module.css . 컴포넌트에서 해당 파일을 불러오면 내부에 선언된 클래스 이름들이 모두 고유해진다. 이 과정에서 파일 경로, 파일 이름, 클래스 이름, 해쉬값 등이 사용될 수 있다. 클래스 이름에 대하여 고유한 이름들이 만들어지기 때문에 실수로 다른 관계없는 곳에서 이름이 중복되지 않음! CSS Module을 유용하게 사용할 수 있는 상황 레거시 프로젝트에 도입할때 (기존 css와 이름이 중복되어도 스타일이 꼬이지 않음 CSS 클래스 네이밍 규칙 만들기 귀찮을때 예제) CSS Module을 사용하여 커스텀 체크박스 컴포넌트 만들기 components/CheckBox.js im..
벨로퍼트 리액트 - 2-1 Sass Sass의 정의 SASS : Syntactically Awesome Style Sheets. CSS 전처리기(Pre-processor). 복잡한 작업을 쉽게 할수 있게 해주고 코드의 재활용성을 높여주며 가독성을 높여 유지보수를 쉽게해준다. Sass에서는 .scss와 .sass를 지원하는데 보통 scss가 더 많이 사용된다. sass $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color scss $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $fon..
벨로퍼트 리액트 - 1장 복습 컴포넌트 작성 규칙 ** 컴포넌트 : 일종의 UI 조각. 재사용 가능함 import React from 'react'; // 리액트 불러오기 function Hello() { return 안녕하세요 } export default Hello; // 컴포넌트 내보내기(타 컴포넌트에서 불러오기 가능) JSX 작성 규칙 태그는 꼭 닫힌 태그로 // X // O // 태그와 태그 사이에 내용이 들어가지 않을때 Self Closing 태그로 닫아줌 태그는 꼭 감싸주기 // X // O // 또는 // => Fragment. 브라우저에서 별도의 엘리먼트로 나타나지 않음. JSX 내부에서 자바스크립트 변수를 사용할때는 {} 로 감싸기 {name} 인라인 스타일은 객체형태로 작성하고 속성들..
벨로퍼트 리액트 - 26. componentDidCatch 로 에러 잡아내기 / Sentry 연동 componentDidCatch 로 에러 잡아내기 새 프로젝트 생성 $ npx create-react-app error-catch 에러가 발생하게 되면 아무것도 렌더링되지 않고 흰 페이지만 나타나게 됨. 실제 사용시에 흰 화면을 나타내는 대신, 에러가 발생했다는 것을 알려주도록 해야함. if (!user) { return null; } // user 값이 존재하지 않을 시 null 을 렌더링 // => 아무것도 나타나지 않음 = null checking // 아무것도 나타나지 않지만 에러는 발생하지 않음. 데이터를 네트워크 요청을 통해 나중에 받아오게 되는 상황이 발생하는 경우 null을 보여주거나 로딩중 ..
