전체 글 (67) 썸네일형 리스트형 [새싹 프론트엔드] scss 반복문 사용해보기 🧡 INTRO 새싹에서 SCSS를 배우고 실습 문제를 진행했는데 SCSS의 중첩 기능만 주로 사용하다가 다양한 기능들이 있다는 것을 알게 되어 기록합니다 📃 문제 처음 작성한 코드 처음에 코드를 작성했을 때 이렇게 하면 굳이 scss를 사용할 필요가 있나? 싶을 정도로 코드가 길었습니다😂 @mixin box($size, $color) { width: $size; height: $size; background-color: $color; } .container { display: flex; .box1 { @include box(50px, red); } .box2 { @include box(100px, orange); } .box3 { @include box(150px, yellow); } .box4 { @i.. [새싹 프론트엔드] Styled-Components 기초 배우기 💻 INTRO 오늘은 React에 css를 적용하는 여러 방법 중 가장 많이 쓰인다는 Styled-Components에 대해 알아보려고 합니다 Styled-Components는 컴포넌트 단위로 스타일을 지정해주는 방식이기 때문에 리액트의 특성에 가장 알맞은 css 작성 방식이라고 할 수 있습니다. 최근 리액트 프로젝트를 진행하며 Sass를 사용해봤는데 기존 css에 비해 매우 편리했지만 mixins 파일들을 제외하고도 아래와 같이 엄청 많은 scss 파일을 만들어야 했습니다. 그래서 찾아본 게 Styled-Components 인데요!! Styled-Components는 CSS-in-JS 라이브러리이기 때문에 CSS를 JS 파일에 바로 넣는 방식을 사용합니다. 실제 간단하게 사용해보니 스타일을 바꾸기 위해.. [새싹 프론트엔드] React Router INTRO. 리액트에는 페이지 이동 기능을 처리해주는 '리액트 라우터'가 있습니다. 여러 페이지를 가지고 있는 웹 어플리케이션을 만드려면 필수로 알고 있어야 하는 내용이고 생각보다 어렵지 않아서 쉽게 배우실 수 있을 거라고 생각합니다 :) SPA란? SPA는 Single Page Application의 약자로 페이지가 한 개인 어플리케이션이란 뜻을 가집니다. 원래 어플리케이션은 여러 페이지로 구성되어 있고 페이지를 이동할 때마다 페이지가 새로고침되며 리소스를 전달받아 렌더링을 진행합니다. 이렇게 되면 속도적인 측면에서 큰 문제가 발생하겠죠? SPA는 웹 앱에 필요한 모든 리소스를 처음에 모두 다운로드합니다. 그 후 페이지 간 이동 시, 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하므로 전체 페.. [새싹 프론트엔드] 자바스크립트로 계산기 만들기 구현할 기능 - 숫자와 연산자를 클릭하면 input 창에 나오게 하기 - '='을 클릭하면 계산하기 - 'CE"와 'C'를 클릭하면 전체 지우기 - 'BACK'을 클릭하면 끝에서 마지막 한 글자만 지우기 HTML 처음 계획은 각 연산자마다 함수를 만들어서 기능을 구현하는 것이었습니다. 따라서 연산자마다 다른 class를 지정했었는데 다시 생각해보니 eval() 함수를 사용하면 생각보다 쉽게 만들 수 있을 것 같아 숫자와 연산자에 동일한 'input' class를 적용해주고 한 번에 불러올 수 있도록 만들었습니다. BACK CE C = 7 8 9 / 4 5 6 * 1 2 3 - 0 NONE NONE + CSS 디자인은 '자바스크립트 계산기'라는 키워드로 검색하여 가장 심플해 보이는 것을 참고하여 간단히 만.. [새싹 프론트엔드] for문과 while문은 언제 사용해야 할까? 위 문제에서 남은 커피의 개수를 구할 때 for문을 쓰는 게 적합할까요, while문을 쓰는 게 적합할까요? 저는 반복문을 써야할 때 for문만 사용하는 습관이 있었는데 자바스크립트 과제를 진행하며 for문보다 while문을 쓰는게 더 적합한 상황이 있다는 것을 알게 되었습니다. 이번 기회에 어떤 상황에서 for문을 쓰는 게 좋고, 어떤 상황에서 while문을 쓰는 게 좋은지 정리해보려 합니다!!! for문과 while문의 사용법 for문 먼저 for문은 아래와 같이 사용합니다 for (begin; condition; step) { // ... 반복문 본문 ... } //조건 i < 3을 만족할 동안 i를 출력 for (let i = 0; i < 3; i++) { // 0, 1, 2가 출력됩니다. ale.. [코테] 프로그래머스 Lv.1 정수 내림차순으로 배치하기 [문제] 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다. [제한사항] n은 1이상 8000000000 이하인 자연수입니다. [입출력 예] n return 118372 873211 [Solution] function solution(n) { return parseInt( n .toString() .split("") .sort((a, b) => b - a) .join("") ); } (+) sort() 함수로 숫자 정렬하기 const score = [4, 11, 2, 10, 3, 1]; score.sort(function(a, b) { // 오름차순 return .. [새싹 프론트엔드] HTML, CSS로 회원가입 창 만들어 보기 새싹 교육 과정을 통해 2주간 HTML, CSS를 배우고 배운 내용을 토대로 회원가입 창을 만들어 보려고 합니다. table 태그와 input 태그를 복습할 수 있고 나중에 미니 프로젝트에서 회원가입 창을 만들때 활용해볼 수 있을 것 같아 만들어 보았습니다 :) 1. 먼저 form, table, input 태그를 활용해서 html을 작성해 보았습니다 JOIN USER ID PASSWORD RE PASSWORD GENDER MALE FEMALE E-MAIL 2. 테이블 모양을 잡아주기 위해 간단하게 css를 추가해 보았습니다. table { width: 70%; border-top: 2px solid #999; border-bottom: 2px solid #999; } th { width: 20%; tex.. [코테] 프로그래머스 Lv.1 나머지가 1이 되는 수 찾기 [문제] 자연수 n이 매개변수로 주어집니다. n을 x로 나눈 나머지가 1이 되도록 하는 가장 작은 자연수 x를 return 하도록 solution 함수를 완성해주세요. 답이 항상 존재함은 증명될 수 있습니다. [제한사항] 3 ≤ n ≤ 1,000,000 [입출력 예] n result 10 3 12 11 [Solution] function solution(n) { var answer = 0; for (let i=1; i 이전 1 2 3 4 ··· 9 다음
