분류 전체보기73 깊게 파고들기 - React React란? 리액트는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리이다. HTML, CSS, JavaScript로도 충분한데 왜 리액트를 사용하는 것일까? React의 특징 1. 선언형(Declarative) 코드를 자세히 분석하지 않고도 코드의 의도를 분명히 알 수 있다는 뜻이다. HTML / CSS / JS로 나눠적기보다는, 리액트는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다. 2. 컴포넌트 기반(Component-Based) 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기에, 기능 자체에 집중하여 개발할 수 있다. 3. 범용성(Learn Onc.. 2023. 4. 19. React - Styled Components Styled Components CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 된다. 이러한 CSS in JS 라이브러리 중에서 현재 가장 있기 있는 라이브러리가 Styled Components이다. Styled Components 문법 1. 컴포넌트 만들기 ES6의 Templete Literals 문법(백틱 `)을 사용한다. 2. 컴포넌트를 재활용해서 새로운 컴포넌트 만들기 컴포넌트를 선언하고 styled( )에 재활용할 컴포넌트를 전달해주면 된다. 3. Props 활용하기 Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를.. 2023. 4. 19. JavaScript - 다양한 메서드들 Math 내장 객체 메서드 Math.floor( ) : 괄호 안의 숫자를 내림하여 반환 Math.ceil( ) : 괄호 안의 숫자를 올림하여 반환 Math.round( ) : 괄호 안의 숫자를 반올림하여 반환 Math.abs( ) : 괄호 안의 숫자의 절대값을 반환 Math.sqrt( ) : 괄호 안의 숫자의 루트값을 반환 Math.pow(2, 5) : 2의 5승인 32를 반환 문자열 주요 메서드 .toLowerCase( ) : 문자열을 소문자로 변경 .toUpperCase( ) : 문자열을 대문자로 변경 .concat( ) : 문자열 연결 연산자 +처럼 문자열을 이어 붙임 .indexOf( ) : 문자열 내에 특정 문자가 몇 번째에 위치하는지 확인. 찾는 문자가 2개 이상일 경우 가장 앞에 있는 문자의.. 2023. 4. 18. CSS - Flexbox로 레이아웃 잡기 display: flex 분석하기 display: flex는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법이다. fllexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정해 줄 수 있다. flexbox 속성 중에서는 부모 요소에 적용해야하는 속성들, 자식요소에 적용해야하는 속성들이 있다. 부모 요소에 적용해야하는 Flexbox 속성 1. flex-direction : 정렬 축 정하기 2. flex-wrap : 줄 바꿈 설정하기 - 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정한다. 3. justify-content : 축 수평 방향 정렬 - 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정한다. 4. align.. 2023. 4. 7. Express Express Express는 Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기있는 프레임워크이다. Express로 구현한 서버가 Node.js HTTP 모듈로 작성한 서버와 다른 점은 다음과 같다. 미들웨어를 추가할 수 있다. 라우터를 제공한다. 라우팅(Rountig) 라우팅은 클라이언트의 요청에 해당하는 Endpoint에 따라 서버가 응답하는 방법을 결정하는 것이다. 추가적인 라이브러리를 사용하지 않고, 순수한 Node.js로 코드를 작성하면 다음과 같다. 반면에 Express는 프레임워크 자체에서 라우터 기능을 제공한다. Express의 라우터를 활용하면 아래와 같이 직관적인 코드를 작성할 수 있다. 미들웨어(Middleware) Express의 가장 큰 장점인 미들.. 2023. 4. 5. CSS - Selector 기본 셀렉터 * { } // 전체 셀렉터 = 문서의 모든 요소 선택 h1 { } div { } section, h1 { } // 태그 셀렉터 = 같은 태그명을 가진 모든 요소 선택. 복수로도 선택 가능. #only { } // ID 셀렉터 = #id로 입력하여 선택 .center { } // class 셀렉터 = .class로 입력하여 선택 a[href] { } p[id="only] { } p[class~="out"] { } p[class|="out"] { } section[id^="sect"] { } div[class$="2"] { } div[class*="w"] { } // attribute 셀렉터 = 같은 속성을 가진 요소를 선택(모두 암기할 필요 X) 자식 / 후손 / 형제 셀렉터 자식 셀렉터 자.. 2023. 4. 4. 이전 1 ··· 5 6 7 8 9 10 11 ··· 13 다음
