차근차근 배움터

JSX란? HTML에서 사용한 문법과 흡사한 문법을 사용 HTML와 비슷해서 React 요소를 JSX로 만드는 게 개발자에게는 아주 쉽다. JSX 방식 const title = { console.log('mouseEvent excuted') }}> "Hello Span" ; 기존 방식 const span = React.createElement( "span", { id: 'sexy-span', style: { color: 'red' } }, null, "Hello Span"); 브라우저가 JSX를 이해할 수 있도록 BABEL을 설치해야 한다. 일단은 연습 용이기 때문에 CDN 추가 그리고 script 태그에 text/babel 추가 babel 이 브라우저가 읽을 수 있는 코드로 변경해서 넘겨주는 과정이 숨..

지금까지는 React JS가 어떻게 작동하는 지를 알아봤다. 여기에서 강력한 기능 중에 하나가 바로 eventListener를 활용하는 부분이다 아래와 같이 button 요소를 만들어서 중간에 props를 넣는 저 객체 안에 onClick과 같은 마우스 이벤트를 추가할 수 있고 또 style 또한 추가할 수 있다. 세 번째 요소에는 text를 추가할 수 있다.

기존의 바닐라 자바스크립트의 경우 아래와 같은 방식으로 클릭시 숫자가 올라가게끔 할 수 있었다 Total click: 0 Click me React를 사용하기 위해서는 react를 설치해야 한다. script cdn을 추가한다. React와 react-dom을 다운로드 React JS element 생성 HTML 코드를 직접 작헝하지 않을 것이고 React.js와 javascript를 이용해서 element를 사용할 것이다. 먼저 개발자들이 사용하지 않는 어려운 방법을 살펴볼 것이다 사람들은 쉬운 방법을 좋아하기 때문에 하지만 어려운 방법으로 React js의 본질을 이해해보자 React js는 어플리케이션이 아주 interactive하게 만들어주는 library이다 react-dom은 library, ..

React 전에 Vue 강의를 한 번 다른 곳에서 수강했었는데 그 덕인지 조금은 수월하게 입문 강의를 들을 수 있었던 것 같다. 정말 간단하게 핵심만 짚어준 강의였고, 다른 분들도 시작하기에 아주 좋은 강의라고 생각한다. 물론 이후에 계속 다른 심화 강의를 듣거나 공부해야 하는 것은 필수 과정! 배운 내용들을 정리해 본다. npm init react-app my-app : 프로젝트 생성 node_modules : 모듈이 자동으로 설치가 되었다. # 에러 발생 tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap. > 해당 에러는 무시하고 넘어갔다 npm을 ..

비슷한 파일을 여러 개 입력해야 할 때, 하드코드 대신에 사용할 수 있는 for문을 scss에서 사용해보자 @for 를 이용해서 변수 $i를 선언하고 무슨 숫자부터 무슨 숫자까지 적용할 것인지 입력한다 생각보다 간단하지만 데이터가 1부터 100까지 있을 때 매우 유용할 부분이다! @for $i from 1 through 3 { .slides:nth-child(#{$i}) { background-image: url("../assets/poland_w#{$i}.jpg"); } }

가끔씩 웹사이트에서 막 반 씩 비스듬하게 잘려있는 배경 같은 거 보고 어떻게 하나 했는데 역시 css에도 해당 부분이 존재한다 ! Mozila에서 clip-path 에 대한 예제를 확인해봤는데 많지 않은 것이 문제 clip-path - CSS: Cascading Style Sheets | MDN The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden. developer.mozilla.org 그래서 찾은 유용한 사이트가 있다 원하는 모양대로 점들..

Parcel-bundler란? Parcel은 웹 애플리케이션을 번들링하기 위한 무료 오픈 소스 JavaScript 번들러입니다. 번들링은 여러 개의 파일을 하나의 파일로 묶는 것을 의미합니다. Parcel은 브라우저 환경에서 자바스크립트, CSS, HTML 등을 포함한 파일들을 번들링하고, 빠르고 간단하며 기능이 풍부한 방식으로 작동합니다. 이러한 이유로 많은 개발자들이 Parcel을 선호하며, 리액트와 같은 프레임워크에서도 기본적으로 사용되는 번들러 중 하나입니다. parcel-bundler 프로젝트 생성 npm 프로젝트 시작 npm init -y → package.json 파일이 생성된다 parcel bundler 설치 npm install -dev parcel-bundler ‘-dev’ 뜻은 개발 ..

처음에는 문제를 이해 못했다가 알고 보니 long int는 고정이고 앞에 long을 붙일 때마다 4바이트 씩 늘어난다고 생각하는 학생의 로직대로 코드를 작성해야 한다는 것을 깨달았다! 고로 어렵지 않은 문제 답안 import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner scn = new Scanner(System.in); Long value = Long.parseLong(scn.nextLine()); String result = ""; for(int i = 0; i < value/4-1; i++) { result += "long "; } result += "long int"; System.ou..

꼬마 정민이가 나를 화나게 했다.... ^^ ㅋㅋㅋㅋ 자꾸 Numberformat Error 뜨길래 왜 parse를 못하고 난리! 라고 생각했으나 큰 수가 올거라는 생각은 못했다... ; 아무튼 해당 문제도 쉽(지 않)게 성공.. import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner sc = new Scanner(System.in); String str = sc.nextLine(); String[] arr = str.split(" "); long sum = 0; for(int i = 0; i < arr.length; i++){ sum += Long.parseLong(arr[i]); } Sy..

mount Consider using the "jsdom" test environment. 위와 같이 jest.config.js 파일에서 testEnvironment를 보니 node 밖에 없어서, 둘 다 넣어주니 해결 testEnvironment: [ 'node', 'jsdom' ], 출처 Consider using the "jsdom" test environment I have this simple test: import React from 'react' import { render } from '@testing-library/react' import Button from '.' describe('Button', () => { it('renders button without crashing', () ...