June Dev Blog June's Dev World

분류 전체보기

• [Javascript] 랜덤 색깔 스타일 지정하기

  Coding/JavaScript 2019. 12. 2. 16:58

  랜덤 색깔 스타일 지정하기 randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16); 스타일에 색깔을 입힐 때, # 뒤로 000000~ffffff 값 사이의 색깔을 지정할 수 있습니다. 16777215를 16진수로 표현하면 ffffff가 되므로, 0~16777215를 랜덤으로 입력받아 16진수로 바꾸어 준다면, 랜덤으로 색깔이 지정될 것입니다.

• [Mac] 숨김파일 보기

  Dev 2019. 12. 2. 15:35

  ⌘(Command) + ⌃(Shift) + .으로 숨겨진 파일을 볼 수 있다.

• [JavaScript] map()

  Coding/JavaScript 2019. 11. 29. 14:46

  map 자바스크립트 배열 객체의 내장함수인 map을 이용하면 복잡한 반복과정을 쉽게 이행할 수 있습니다. const numbers = [1, 2, 3]; let result = numbers.map((v) => { return num += 1; }); console.log(numbers); // 1, 2, 3 console.log(result); // 2, 3, 4 쉽게 말하면 map은 기존에 있는 배열을 이용하여 각 인덱스마다 반복처리를 하여 새로운 배열을 만드는 역할을 합니다. 리액트에서 활용했던 ES6의 화살표 함수를 이용하면, let result = numbers.map(v => num +=1) 이렇게 더 간단하게 표현이 가능합니다. 특히 map은 리액트에서 반복되는 컴포넌트들을 렌더링할때 효과적..

• [React] - 8) 이벤트 핸들링과 ref

  Coding/React.js 2019. 11. 28. 16:29

  velopert 님의 '리액트를 사용하는 기술' 교재로 부터 공부한 내용임을 밝힙니다😃 이벤트 핸들링 안녕하세요 오늘은 저번 포스팅에 이어 리액트의 이벤트 핸들링과 ref에 대해 포스팅합니다. 이전에 리액트에서의 이벤트 핸들링은 HTML에서의 이벤트 핸들링과 유사한 점이 많다고 했는데요. 예전 포스팅에서도 다루었던 onClick 기억하시나요 ? 이것들도 button DOM에 연결된 이벤트 중 하나라고 할 수 있겠습니다. 오늘은 간단한 예제로 이벤트 핸들링과 ref에 대해 알아보겠습니다! 우선, 리액트 프로젝트를 열고 클래스형 컴포넌트를 하나 만들어 줍시다. (vscode에서 code snippets을 사용하고 있다면 rcc만 눌러도 클래스형 컴포넌트가 자동완성 됩니다!) 그리고 입력 창 하나와 버튼 하나..

• [Tistory] 인라인 코드 테마 변경하기

  Coding/etc 2019. 11. 27. 17:26

  티스토리 인라인 코드 테마 변경하기 안녕하세요😆 오늘은 티스토리의 스킨 편집에서 인라인 코드의 테마를 변경하는 법을 알아보겠습니다. 그 전에, 인라인 코드가 뭐냐구요? 사실 티스토리 글쓰기에서 기본 모드만 이용하신 분들은 인라인 코드가 뭔지 잘 모를 수 있습니다. 하지만, 마크다운이나 HTML 모드로 작성하면 코드블록과는 살짝 다른 것이 인라인 코드입니다. 우선은 마크다운 기준으로 설명을 해 보겠습니다. HTML 모드로 이용하시는 분들은 이미 인라인 코드의 차이를 아실테니 적용 단계부터 해보세요. 마크다운에서 코드블록을 입력하기 위해서는 ```와 ``` 사이에 코드를 입력하면 기존에 설정한 테마대로 코드블록이 생길 겁니다. 저 같은 경우 티스토리 국민 테마인 highlight.js에서 ir-black 스..

• [React] - 7) 이벤트 처리

  Coding/React.js 2019. 11. 26. 16:58

  velopert님의 리액트를 사용하는 기술 교재로부터 공부한 내용임을 밝힙니다😀 React 이벤트 처리 안녕하세요 😀 이번 포스팅에서는 리액트에서의 이벤트 처리에 대해 다뤄보겠습니다 리액트에서의 렌더링 부분은 HTML과 굉장히 유사한 부분이 많은데요. 리액트에서의 이벤트 처리 역시 HTML에서의 이벤트 처리와 비슷한 부분이 많지만, 조금씩 다른 부분이 있어 조심히 다뤄야 합니다. 우선 다음 두 코드를 볼까요! HTML ... 버튼 React return ( 버튼 ) 두 코드는 같은 버튼을 생성하지만, 약간의 차이점이 느껴시나요? 1. onclick 전달 방식 우선, HTML의 경우, onclick에서 아예 alert 메시지 박스를 받는 함수를 작성하여 연결받을 수 있습니다. 하지만 리액트의 경우 함수가 ..

• [React] - 6) state(함수형 컴포넌트)

  Coding/React.js 2019. 11. 25. 15:42

  velopert 님의 '리액트를 사용하는 기술' 교재로 부터 공부한 내용임을 밝힙니다😃 state 안녕하세요, 오랜만에 리액트 포스팅입니다. 회사일을 병행하면서도 꾸준히 업로드하겠다고 했던 리액트 포스팅이 늦어지게 된 이유는, 학교 동아리에서 진행하는 해커톤 준비에 열을 쏟아야 했기 때문이었습니다. ㅠㅠ 이제는 해커톤 행사가 끝났기 때문에 리액트 (+스프링?)와 Mac에 대한 포스팅을 주로 올리게 될 것 같아요. 자, 그럼 시작할게요! 저번 포스팅에서는 props에 대해 알아보았는데요. props는 부모 컴포넌트가 설정하여 렌더링할 데이터를 전달해주는 것이라고 했었는데, state는 약간 다릅니다. state는 꼭 부모 컴포넌트로부터 전달받는 것이 아닌, 컴포넌트 자체적으로 지닌 값으로, 컴포넌트 내부에..

• [Javscript] 배열 비구조화 할당

  Coding/JavaScript 2019. 11. 25. 14:23

  배열 비구조화 할당 기존에 단순히 배열 내부의 값을 할당할 때는 다음과 같은 방법을 사용했습니다. const array = [1,2]; const one = array[0]; const two = array[1]; 하지만 배열 비구조화 할당을 사용하면 다음과 같이 표현됩니다. const array = [1,2]; const [one, two] = array;