반응형 분류 전체보기615 [ReactJS] React 시작하기 - 프로젝트 생성 및 실행 (ft. npm, yarn) React 역시 Vue와 마찬가지로 프로젝트를 생성하기 위해서는 node.js가 필요하다. (없다면 얼른 node.js를 설치해주고 오자) 1. 프로젝트 생성 npm의 패키지 실행 도구인 npx를 사용해서 React 프로젝트를 생성할 수 있다. 본인이 설치를 원하는 경로에 들어가서 아래 명령어를 입력해주자. (여기서 만약 yarn을 사용하고 싶다면 따로 설치를 진행해주고 npm과 yarn의 생성 구문이 다르다.) # create react-app use npm npx create-react-app my-app # create react-app use yarn yarn create react-app my-app 여기서 "my-app"이라고 입력한 부분은 프로젝트명으로 본인이 원하는 이름을 정해주면 된다. .. 2022. 7. 1. [백준] 2644번 : 촌수계산 (실버Ⅱ) by node.js ▷ 문제 :2644번 : 촌수계산 2644번: 촌수계산 사람들은 1, 2, 3, …, n (1 ≤ n ≤ 100)의 연속된 번호로 각각 표시된다. 입력 파일의 첫째 줄에는 전체 사람의 수 n이 주어지고, 둘째 줄에는 촌수를 계산해야 하는 서로 다른 두 사람의 번호가 주어 www.acmicpc.net ▷ 해결 날짜 : 2022.06.30 ▷ 소요 시간 : 1시간 30분 ▷ 풀이 과정 : DFS / BFS 관련 문제로 쉽게 접근하면 시작점부터 끝점까지의 거리가 얼마인지 반환하는 문제이다. 단, 여기서 촌수계산이 들어가면서 문제가 복잡해진다. 주어진 문제가 짧으므로 아래를 읽어보도록 하자. 우리나라는 가족 혹은 친척들 사이의 관계를 촌수라는 단위로 표현하는 독특한 문화를 가지고 있다. 이러한 촌수는 다음과 같.. 2022. 6. 30. [Codility] FloodDepth (Medium) by javascript - Exercise 1 ▷ 문제 : Exercise 1 - FloodDepth (Medium) FloodDepth coding task - Practice Coding - Codility Find the maximum depth of water in mountains after a huge rainfall. app.codility.com ▷ 해결 날짜 : 2022.06.28 ▷ 소요 시간 : 1시간 ▷ 풀이 과정 : 2015 Contest 문제 중에 하나인 FloodDepth 문제이다. 문제 콘셉트는 비가 많이 내린 뒤 최대 수심을 찾아내라는 콘셉트이다. 별다른 방법이 떠오르지 않아 그냥 하나씩 찾아가면서 값을 저장해두는 방향으로 잡고 풀어보았다. 가장 높은 곳의 기준이 되는 (high) 변수와 가장 낮은 곳의 기준이 되는 (.. 2022. 6. 28. [Codility] LongestPassword (Easy) by javascript - Exercise 1 ▷ 문제 : Exercise 1 - LongestPassword (Easy) LongestPassword coding task - Practice Coding - Codility Given a string containing words, find the longest word that satisfies specific conditions. app.codility.com ▷ 해결 날짜 : 2022.06.28 ▷ 소요 시간 : 20분 ▷ 풀이 과정 : 2015 Contest 문제 중에 하나인 LongestPassword 문제이다. Easy난이도답게 그렇게 어려운 문제는 아니었는데, 아래 조건을 만족하는 가장 긴 패스워드의 길이를 반환해주면 되는 문제였다. 조건은 다음과 같다. it has to contain.. 2022. 6. 28. [SCSS] 조건문 (@if / @else if / @else) @if 흔히 알고 있는 if문으로 true일 경우 실행된다. @mixin avatar($size, $circle: false) { width: $size; height: $size; @if $circle { border-radius: $size / 2; } } .square-av { @include avatar(100px, $circle: false); } .circle-av { @include avatar(100px, $circle: true); } to css .square-av { width: 100px; height: 100px; } .circle-av { width: 100px; height: 100px; border-radius: 50px; } 그리고 추가적으로 삼항 연산자 역시 사용할 수 있.. 2022. 6. 25. [SCSS] 함수 (@function ~ @return) @function @function은 @mixin과 마찬가지로 재사용을 위해 사용된다. 하지만 @mixin과의 차이점은 @mixin은 style markup을 반환하지만, @function은 @return을 통하여 값을 반환한다. $max-width: 980px; @function columns($number: 1, $columns: 12) { @return $max-width * ($number / $columns) } .box_group { width: $max-width; .box1 { width: columns(); // 1 } .box2 { width: columns(8); } .box3 { width: columns(3); } } to css .box_group { /* 총 너비 */ widt.. 2022. 6. 24. [SCSS] @mixin 과 @include @mixin and @include @mixin은 스타일 시트 전체에서 재사용할 css 선언 그룹을 정의하는 아주 훌륭한 기능이다. @mixin을 사용하여 선언 하고 @include를 통해 사용한다. @mixin reset-list { margin: 0; padding: 0; list-style: none; } @mixin horizontal-list { @include reset-list; li { display: inline-block; margin: { left: -2px; right: 2em; } } } nav ul { @include horizontal-list; } to css nav ul { margin: 0; padding: 0; list-style: none; } nav ul li { d.. 2022. 6. 24. [SCSS] 불러오기 (@import) 불러오기 (@import) scss에서의 import는 css의 @import규칙을 확장하여 mixin, functions 및 변수에 대한 액세스를 제공하고 여러 스타일시트의 css를 함께 결합한다. 사용방법은 다음과 같이 @import를 사용하여 특정.scss 파일을 불러와 사용할 수 있다. /* @import "layout.scss" */ @import "layout"; 확장자를 붙이지 않아도 상관 없기 때문에 보통 생략해서 사용한다. scss에서 @import는 기본적으로 scss 파일을 가져오는데, css @import 규칙으로 컴파일되는 몇 가지 상황이 있다. 파일 확장자가 .css일 때 파일 이름이 http:// 또는 https://로 시작하는 경우 url()이 붙어있는 경우 미디어쿼리가 있는.. 2022. 6. 23. [SCSS] 스타일 규칙 - 중첩(Nesting) 중첩 (Nesting) 기본적인 스타일 규칙은 CSS와 동일한 방식으로 작동하지만, SCSS에서는 중첩 (Nesting) 기능을 사용해 상위 선택자의 반복을 피하고 좀 더 편리하게 구조를 작성할 수 있다. nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } to css nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12p.. 2022. 6. 22. 이전 1 2 3 4 5 6 ··· 69 다음 반응형
