본문 바로가기

Frontend

(290)
[JavaScript] sort/ reverse 메소드 [sort 메소드] 배열에서는 sort 라는 메소드를 활용해 배열을 정렬할 수 있다. sort 메소드에 아무런 아규먼트도 전달하지 않을때는 기본적으로 유니코드에 따라 정렬된다. const letters = ['D', 'C', 'E', 'B', 'A']; const numbers = [1, 10, 4, 21, 36000]; letters.sort(); numbers.sort(); console.log(letters); // (5) ["A", "B", "C", "D", "E"] console.log(numbers); // (5) [1, 10, 21, 36000, 4] 그렇기 때문에 위처럼 상식적으로 우리가 생각하는 정렬과 다를 수 있는데, 그럴때는 sort 메소드에 다음과 같은 콜백함수를 아규먼트로 작성해주..
[React] VSCode 단축키 단축키 [멀티커서 선택하기] 텍스트 커서를 단어로 옮겨 놓으면 해당하는 변수나 함수가 하이라이팅되고, 텍스트를 선택하면 대소문자 구분없이 같은 단어가 하이라이팅된다. 이 상태에서 멀티 커서 선택을 하면 여러 군데를 한 번에 수정할 수 있다. 윈도우즈 맥 Ctrl + Shift + L Cmd + Shift + L [멀티커서 만들기] 원하는 위치에 텍스트 커서를 만들 수 있다. 윈도우즈 맥 Alt + click option + click [찾아 바꾸기] 텍스트 커서를 원하는 변수나 함수에 옮겨놓고 찾아 바꾸기를 하면 해당 변수나 함수가 사용된 파일에서도 함께 이름이 바뀐다. 윈도우즈 맥 F2 F2 [해당하는 파일로 이동] 변수나 함수가 작성된 파일로 이동하고 싶을 때 단어 위에 마우스를 올리고 사용한다. 윈..
[React] BABEL BABEL https://babeljs.io/ JSX 를 Js 로 번역해주는 웹사이트
[React] 주사위 게임 http://dicegame.react.passionfruit.s3-website-ap-southeast-2.amazonaws.com/
[React] 리액트 명령어 정리 기능 명령어 프로젝트 생성 npm init react-app . 개발모드실행 npm start (npm run start) 실행중인 서버 종료 ctrl + c 개발된 프로젝트 빌드 npm run build 빌드한 것 로컬에서 실행 npx serve build
[React] CSS 클래스 네임 index.css 파일을 새로 생성한 후, 다음과 같이 스타일 적용 이후, index.js 에서 다음처럼 파일을 import 해줌. 페이지에 글자색과 배경색이 잘 저장된 모습을 확인할 수 있다. Elements > head > style 코드가 잘 적용되어 있음. 자바스크립트에 CSS 파일을 import 하게되면, 태그 안에 style 태그가 자동으로 작성되기 때문 Button.css 파일을 만들어 다음처럼 작성한 후, .Button { padding: 14px 27px; border-radius: 9999px; outline: none; cursor: pointer; font-size: 17px; } .Button.blue { background-color: rgba(0, 89, 255, 0.2); b..
[React] 인라인 스타일 component 에 디자인을 입히는 방법 중 하나로, 인라인 스타일을 사용할 수 있다. const style = { 속성: '값', }; function Button({ children, onClick }) { // Button 태그 안, text prop 을 보여주는 함수 return {children} } export default Button; 이처럼 객체형태로 속성을 나타낸 후 적용하는 방식을 사용한다. css 에서 대시기호(-)가 들어간 속성명은 다음처럼 카멜케이스로 작성해주어야 한다. ex ) background-color -> backgroundColor const style = { backgroundColor: 'pink', }; function Button({ children, onCl..
[React] 참조형 State/ 주사위 총점 계산 및 기록하기 1. 주사위 총점 계산 주사위 총점 계산을 위해 새로운 sumState 를 만듬, 초기값은 0. const [sum, setSum] = useState(0); 다음과 같이 setSum 에 sum + nextSum 을 하여 총점 계산 const handleRollClick = () => { const nextNum = random(6); setNum(nextNum); setSum(sum + nextNum); }; 초기화 값은 0 으로 지정. const handleClearClick = () => { setNum(1); setSum(0); }; 2. 주사위 점수 기록 주사위 점수 기록을 배열 형태로 다루기 위해 초기값을 빈 배열로 지정. const [gameHistory, setGameHistory] = u..