새싹 (7) 썸네일형 리스트형 [새싹 프론트엔드] 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.. [새싹 프론트엔드] 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.. [새싹 프론트엔드] 브라우저 동작 방법 "브라우저가 어떻게 동작하는지 아세요?" 새싹 프론트엔드 과정 첫 수업 시간에 web에 대한 기초 강의를 듣고 '브라우저의 동작 방법'에 대해 정리해보려 합니다 면접 단골 질문이기도 하니 이번 기회에 꼼꼼히 익혀 보겠습니다! 브라우저 먼저 브라우저가 무엇인지 알아보겠습니다. 브라우저는 흔히 우리가 인터넷 접속할 때 사용하는 Chrome, Safari, Firefox, Internet Explorer 등을 말합니다. 브라우저는 유저가 선택한 자원들을 렌더링 과정을 통해 유저에게 보여주게 됩니다. 브라우저 렌더링 동작 과정 브라우저 렌더링 동작 과정은 크게 다섯 가지입니다. 1. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다 (Parsing) 2. 두 Tree를 결합하여 Rendering T.. 이전 1 다음
