본문 바로가기

전체 글85

[JAVASCRIPT] 문자열 나누기 - split() / 부분 문자열 추출하기 - substring() split / substring 자바스크립트에서 문자열 데이터를 나누거나 추출하는 방법입니다. 1. 문자열 나누기 - split() str.split(separator); 구분자(separator)를 기준으로 문자열을 나누고 나눠진 영역들을 요소로 하는 배열을 반환합니다. 예시 1 const message1 = "Still waters run deep."; const arr1 = message1.split(" "); console.log(arr1); // ["Still", "waters", "run", "deep."] 구분자로 공백(" ")을 전달하여 공백을 기준으로 문자열 나눴습니다. 예시 2 const message2 = "name: John/age: 30/country: korea"; const a.. 2019. 8. 6.

[JAVASCRIPT] 문자열(string)의 첫 글자를 대문자로 바꾸기 영문 첫 글자를 대문자로 영어에는 첫 글자를 대문자로 표기하는 대문자 표기규칙(Capitalization)이 있는데요. 자바스크립트를 사용해서 Capitalization을 쉽게 구현할 수 있습니다. 다음의 두 가지 문자열 메소드를 활용합니다. charAt str.charAt(index) 문자열에서 인자로 전달한 index에 해당하는 단일문자를 반환합니다. slice str.slice(beginIndex[, endIndex]) 문자열의 beginIndex부터 endIndex 전까지의 부분문자열을 추출합니다. endIndex가 주어지지 않으면 beginIndex부터 마지막 문자까지 포함하는 문자열을 추출합니다. 예시 "i like coding"이라는 문자열이 있습니다. const str = "i like c.. 2019. 8. 5.

[JAVASCRIPT] 배열(Array)에서 특정값 삭제하기 - splice() splice 자바스크립트의 splice() 메서드를 활용해서 배열의 특정값을 삭제하는 방법입니다. 구문 array.splice(start, deleteCount, item1, item2, ...) start 변경을 시작할 배열의 인덱스. deleteCount 배열에서 제거할 요소의 개수 item (optional)배열에 추가할 요소 const fruits = ['Apple', 'Banana', 'Orange', 'Mango', 'Grape']; const index = fruits.indexOf('Orange'); if (index !== -1) { fruits.splice(index, 1); } console.log(fruits); // 결과: ['Apple', 'Banana', 'Mango', 'Gr.. 2019. 8. 4.

[react] 예제로 따라하는 리액트 훅(hook) - useEffect *이전글 2019.08.02 - [react] 예제로 따라하는 리액트 훅(hook) - useState [react] 예제로 따라하는 리액트 훅(hook) - useState 간단한 예제를 통해서 리액트 훅의 useState을 살펴보겠습니다. 작업의 처음단계부터 하나씩 진행하니 리액트에 처음 입문하시는 분들도 천천히 진행해보시길 바랍니다. create-react-app으로 프로젝 codingbroker.tistory.com useEffect useState에 이어서 이번 글에서는 useEffect를 살펴보겠습니다. useEffect는 컴포넌트의 side effect를 수행하기 위해 사용됩니다. side effect란 컴포넌트가 화면에 그려지는 초기 렌더링과정에 포함되지 않는 별개의 작업으로 대표적으로 H.. 2019. 8. 3.

[react] 예제로 따라하는 리액트 훅(hook) - useState useState 간단한 예시를 통해서 리액트 훅의 useState을 살펴보겠습니다. 위의 사진들처럼 화면 아래쪽에 3개의 동그란 버튼을 누르면, 화면 중앙의 정사각형이 해당하는 버튼의 색으로 변경되는 예입니다. 프로젝트 설치단계부터 하나씩 진행하겠습니다. 리액트에 처음 입문하시는 분들도 천천히 따라 해보시길 바랍니다. create-react-app으로 프로젝트를 설치합니다. npx create-react-app hooks-react 저는 에디터로 Visual Studio code를 사용하겠습니다. code 명령어로 프로젝트를 실행합니다. code hooks-react 기본화면을 지우기 위해 src폴더에서 App.js와 index.js를 제외한 모든 파일을 지워줍니다. 스타일 작업을 위해 styled-co.. 2019. 8. 2.

[JAVASCRIPT] switch 사용법 break, default (if else문과 비교) switch switch는 조건에 따라 다양한 행동을 수행하는 데 사용됩니다. 여러 개의 if-else 문을 사용하는 대신에 사용할 수 있으며, 경우에 따라 if-else보다 코드를 더 읽기 쉽고 관리하기 좋게 만들어 줍니다. 기본사용법 switch(expression) { case value1: // 표현식이 value1과 일치할 때 실행할 코드 break; case value2: // 표현식이 value2와 일치할 때 실행할 코드 break; // 원하는 만큼의 case를 가질 수 있음 default: // 어떤 case도 일치하지 않을 때 실행할 코드 } 예시 const fruit = 'apple'; switch(fruit) { case 'apple': console.log('Apple is sel.. 2019. 7. 31.

[react] 리액트 훅(react hook)이란? - 클래스형 컴포넌트와 비교 React Hook React 16.8 버전부터 정식으로 릴리즈 된 React Hook에 대해 살펴보겠습니다. 1. 리액트 컴포넌트의 두 가지 형태 리액트에서는 두 종류의 컴포넌트가 사용됩니다. 클래스형 컴포넌트와 함수형 컴포넌트입니다. 기존의 개발방식에서는 주로 함수형 컴포넌트를 사용하며, 상태 관리나(state) 생명주기 관련(life cycle method) 기능이 필요할 때만 클래스형 컴포넌트를 활용하였습니다. 주로 함수형 컴포넌트를 사용했던 이유는 클래스형 컴포넌트의 단점 때문입니다. 2. 클래스형 컴포넌트의 단점 2-1. 복잡성과 길이 클래스형 컴포넌트는 constructor, this, binding과 같은 여러 규칙을 따라야 하며, 이로 인해 코드가 복잡하고 길어질 수 있습니다. 클래스 기.. 2019. 7. 30.

[HTML, CSS] 배경화면 한쪽만 흐리게 만들기 linear-gradient 배경화면 한쪽 흐리게 만들기 CSS의 linear-gradient 속성을 활용해서 배경의 한쪽은 밝고 반대쪽으로 갈수록 어두워지는 효과를 구현해 보겠습니다. 배경은 body에 적용해 보겠습니다. body { margin: 0; width: 100vw; height: 100vh; background: linear-gradient( to right, rgba(20, 20, 20, 0) 10%, rgba(20, 20, 20, 0.25) 25%, rgba(20, 20, 20, 0.5) 50%, rgba(20, 20, 20, 0.75) 75%, rgba(20, 20, 20, 1) 100% ), url(https://source.unsplash.com/random); background-size: cover; } .. 2019. 7. 30.

[HTML, CSS] linear-gradient 그라데이션 효과 / 텍스트에 그라데이션 적용하는 법 Linear gradient linear-gradient는 CSS 속성 중 하나로, 웹 페이지의 요소에 선형 그라데이션 배경을 적용할 때 사용됩니다. 그라데이션 배경을 적용하면 두 개 이상의 색상이 서로 부드럽게 전환되면서 매력적인 디자인 효과를 만들 수 있습니다. 참고) 그라데이션, 그라디언트 용어 차이 그라데이션은 인지적 관점에서의 용어로, 색이 점진적으로 변화하는 현상을 의미합니다. 그라디언트는 기술적 관점에서의 용어로, 그라데이션을 구현하는 방법이나 기술을 의미합니다. 기본 사용법 background 속성에 linear-gradient를 사용합니다. .gradient-background { background: linear-gradient(direction, color-stop1, color-st.. 2019. 7. 30.

[react] styled components에서 global style(전역 스타일) 적용하기 Global style styled-components는 컴포넌트 스코프 뿐만 아니라 전역 스타일을 적용하는 기능도 제공합니다. 전역 스타일은 애플리케이션의 모든 컴포넌트에 영향을 미치는 CSS 규칙입니다. 이를 통해 폰트, 색상, 마진 등과 같은 기본적인 스타일을 일관되게 설정할 수 있습니다. 1. createGlobalStyle을 사용하여 전역 스타일을 정의하는 컴포넌트를 생성합니다. import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` body { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; background-color:.. 2019. 7. 30.

[react] styled components에서 animation 및 keyframes사용하기 Animation과 keyframes styled-components는 CSS의 @keyframes 규칙을 javascript 구문으로 통합하여 애니메이션을 적용할 수 있게 해 줍니다. 또한 keyframes를 생성하다 보면 비슷한 이름으로 중복되는 경우가 많은데요. styled-components에서는 css의 @keyframes와 달리 컴포넌트 파일별로 네임스페이스가 구분되어 중복될 걱정 없이 keyframes를 생성할 수 있습니다. import React from "react"; import styled, { keyframes } from "styled-components"; const App = () => ; const bounce = keyframes` 0% { transform: scale(1.. 2019. 7. 30.

[react] styled components에서 style확장(재사용)하기 style 재사용 styled-components로 생성한 컴포넌트는 일반 React 컴포넌트처럼 상속이 가능합니다. 중복된 스타일을 가지거나 특정 스타일을 확장하고 싶을 때 컴포넌트를 확장하여 사용할 수 있습니다. Button을 만들고 GreenButton과 BlueButton에서 Button을 확장하여 각각 스타일을 적용해 보겠습니다. import React from "react"; import styled from "styled-components"; const App = () => ( 버튼 초록버튼 파란버튼 ); const Container = styled.div` display: flex; `; const Button = styled.button` outline: none; border: non.. 2019. 7. 30.

[react] 스타일드 컴포넌트(styled components) 1. Styled-components? styled-components는 react와 react-native에서 스타일을 적용하는 데 사용되는 라이브러리입니다. styled-components 없이 전통적인 CSS 방식(css 혹은 scss 임포트)으로 애플리케이션에 스타일을 적용하면 코드의 일관성을 유지하기 어렵고, 의존성과 글로벌 네임스페이스의 관리가 복잡해집니다. styled-components는 이러한 문제를 해결하기 위해 등장했으며 컴포넌트 단위로 스타일을 캡슐화하여 모듈화 및 재사용성을 높여줍니다. 2. 전통 CSS와 다른 점 2-1. CSS-in-JS styled-component는 CSS-in-JS 방식으로 작동합니다. CSS-in-JS는 CSS를 JavaScript 파일 내에 작성하는 패.. 2019. 7. 30.

이전 1 2 3 4 다음

티스토리툴바