분류 전체보기
-
[React] SASS 문법 정리🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 17. 21:27
SASS란? 프로그래밍언어스럽게 작성가능한 Preprocessor로, CSS에서 변수, 연산자, 함수, extend, import를 사용 가능하다. 브라우저는 SASS문법을 모르기 때문에 SASS로 작성 파일을 다시 CSS로 컴파일해야하는데, 이 작업을 node-sass가 해준다. 설치방법 1. yarn add node-sass 2. import './파일이름.scss'; 해온다. 설치 시 생기는 버전상의 오류는 아래 게시글을 참고하면 좋다 ! 👍 2021.09.17 - [🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍] - [오류처리] node-sass 설치오류, version 문제 해결 [오류처리] node-sass 설치오류, version 문제 해결 에러 상황 1. yarn add node-sass로 설치했는데 6.0.1 버전..
-
[React] styled-components로 CSS 스타일링🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 17. 07:34
class없이 styled-components를 이용해 css스타일링하기 styled-components는 라이브러리이다. component가 많아지면 CSS 작성 고민이 많아진다. 한군데 다 만들어두면, 실수로 class명을 중복을 하기도 하고 class선언없이 CSS in JS로 컴포넌트에 CSS를 장착한다. 방법 1. yarn add styled-components를 하여 설치한다. 2. 컴포넌트에서 import 해온다. import styled from 'styled-components'; 3. 컴포넌트에 직접 스타일 넣어서 스타일링하기 let box = styled.div`css입력하듯 글자 넣는다`; let titleName = styled.h1` font-size: 25px; color: $..
-
[React] 페이지 나누기 (라우팅)🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 16. 23:15
방법 react-router-dom 라이브러리를 이용한다. 터미널에 yarn add react-router-dom명령을 입력한다. 초기세팅 1. index.js에 다음과 같이 입력한다. import { BrowserRouter } from 'react-router-dom'; .이 없이 그냥 적으면 보통은 라이브러리 이름을 의미한다. 2. BrowserRouter로 App을 감싼다. ReactDOM.render( , document.getElementById('root') ); BrowserRouter VS HashRouter 주소창은 서버에게 요청하는 곳이고, /abc로 이동해달라고 하면 리액트가 프론트 단에서 알아서 해준다. - HashRouter는 #이 추가된다. 라우팅을 좀더 안전하게 할 수 있다...
-
[React] 파일 쪼갤 때 사용하는 import/export🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 16. 20:02
상황 코딩을 하다가 너무 길 때 다른 곳으로 빼고 싶을 때, 다른 파일에서도 사용하고 싶을 때 내보내기 : export default 함수명/변수명 let name = 'Ahntoday'; export default name 파일 한개당 한번만 가능하다! ✅ 내보낼 변수가 많은데 다른 파일에서 쓸 수 있게 하고 싶다면? let name = 'Ahntoday'; let name2 = 'SeoAn'; export { name, name2 } export {변수1, 변수2} 받아오기 : import 함수명/변수명 from 경로 import name from './data.js'; { name } 가져다가 쓰면 된다! 함수명/변수명 작명해서 사용하면 된다. ✅ 여러개 export한 것을 import해올 때 im..
-
[React] React Bootstrap 사용하기🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 16. 11:51
설치방법 https://react-bootstrap.github.io/getting-started/introduction React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 여기에서 get started를 누르고 설치를 하면된다. 참고로 npm install은 yarn add와 동일하다. yarn add react-bootstrap bootstrap react bootstrap 사이트의 css link 태그 index.html에 복붙한다. 이렇게 쓰는 건 지리적으로 먼 곳에서 불러와서 쓰는 것이기 때문에, 다운받아서 사용하는 방법도 추천된다. 다운받고 css 안에 bootstrap..
-
[회고록] 2021 Dev-Matching: 웹 프론트엔드 개발자(하반기) 통과 후기🔥𝗔𝗰𝘁𝗶𝘃𝗶𝘁𝘆/✍🏻𝗗𝗶𝗮𝗿𝘆 2021. 9. 16. 07:10
신청계기 이번에 나의 JavaScript 실력을 점검하며 부족한 부분을 깨닫고, 그 부분을 더 성장시키고자 과제전형으로 진행되는 데브매칭에 지원했었다. 나는 신입이라 지원할 수 있는 기업이 많지는 않았고, 신입/경력 무관 10개 기업의 포지션에 지원했었다. 결과 통과했다 .. !!! ㅋㅋㅋㅋ 🥳 통과하면 프로그래머스 측에서 자동으로 이력서를 보내고, 기업에서 각자 연락와서 면접보는 시스템이 .. 일처리가 빠르다고 느껴졌다. 그래서 운좋게 면접도 처음 경험해볼 수 있게 되었다 !! 느낀점 다른 기업 사전과제 미션 때 SPA를 구현해본 경험이 도움이 된 것 같다. 데브매칭에서는 각각의 화면에서 누른 제품 종류에 따라 다른 화면을 구현해야 했는데 이 부분에서 어떻게 할 수 있을지 고민이 많았다. SPA 개념은..
-
[React] 클릭시 UI 보였다가 안보였다가 하기🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 13. 07:24
기존 JavaScript에서는 클릭시 컴포넌트 만들고 보여줬다가 안보여줬다가 하고 싶었을 때 기존에는 style="display: block" none 등을 사용했었다. 리액트에서는 state를 이용해 삼항연산자를 사용한다 조건에 따라서 컴포넌트 보여주고 싶으면 JSX 안에 if 대신 삼항연산자를 사용하면 된다. *삼항연산자 조건식 ? 참일 때 실행할 코드 : 거짓일 때 실행할 코드 JSX에서 아무것도 없는 HTML을 내보내고 싶으면, null을 사용하면 된다. UI를 만들 때 state 데이터를 이용한다. let [컴포넌트이름, 컴포넌트변경함수] = useState(false); 컴포넌트를 켜고 닫는 스위치 역할을 한다. state변경할 때는 state변경함수 사용해서 onClick = { () => ..
-
[React] Component 만들기🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 13. 06:55
Component HTML을 한단어로 줄여서 쓸 수 있는 방법 Component 만들기 1. 함수로 이름짓기 2. return. ( )안에 축약 원하는 HTML 넣고, 3. 원하는 곳에서 주의사항 1. 이름은 대괄호로 한다 2. return( ) 안에 div 여러개 할 수 없다. 태그 하나로 묶어야 한다. 의미없는 div 쓰기 싫으면 로도 묶을 수 있다. 3. function App()과 나란히 컴포넌트 만들면 된다. function 컴포넌트이름() { return ( HTML 축약 ) } 장점 1. HTML 축약해서 쓸 수 있어서, 컴포넌트로 만들어 관리가 편해짐. 2. 너무 많이 만들면 관리가 힘들기 때문에, 꼭 필요한 것만 만드는 것이 좋다. -> 반복적으로 나오는 HTML 덩어리를 컴포넌트로 만드..