본문 바로가기
Hello! I'm haein, a junior front-end developer. Welcome to my space.
간단한 자기소개 '◡'
안녕하세요. 정리하는 것이 주특기이고, 인문논술로 대학을 가서 나름 글쓰기에 자부심(?)이 있는 주니어 개발자입니다. 개발 공부를 하면서 좀 더 정돈된 기록을 해보고 싶어서 블로그를 시작하게되었습니다. 게시글 하나하나 정말 정성스럽게 열심히 썼구요. 되도록이면 공식문서를 참고해서 객관적이고 정확한 정보를 작성하려고 노력했습니다. 그리고 제가 이해가 될 정도로 디테일하게 서술해서 웬만한 사람들도 이해가 가능할 것이라는것이 저의 뇌피셜입니다. 아무쪼록 저의 글을 읽는 사람들이 어떤 방향으로든 도움이 되셨으면 좋겠습니다. 참고로 연보라, 연핑크를 좋아하구여, 그라데이션도 좋아합니다. 그래서 내 취향에 맞게 커스텀 했습니다 ㅎㅎㅎ MBTI는 ISTJ입니다. 너무 TMI라서 toggle로 해뒀습니다. 궁금한 사람들은 펼쳐보시겠죠?

Category

 (224)
[React] State 뜻, 카운터 함수, 예시 목차 1. State 란? 2. State로 카운터 함수 만들어보기 3. State를 세팅해주는 2가지 방법 4. State를 사용한 예시 (분→시간 변환기) State 란? - 계속해서 변화하는 특정 상태 - 상태에 따라 각각 다른 동작을 함 State로 카운터 함수 만들어보기 Counter.jsx const Counter = () => { return ( 0 + - ); }; export default Counter; - Counter 컴포넌트에서 동적으로 변화해야하는 유일한 값은 태그 사이에 있는 카운트 숫자 0임 - 카운트 숫자가 '상태'임 - 기본값이 0에서 출발하고 1씩 증가, 1씩 감소하는 Count 상태 import React,{useState} from 'react'; // state는 ..
[React] JSX 뜻, 문법 목차 1. JSX 란? 2. JSX의 문법 - 닫힘 규칙 - 최상위 태그 규칙 - 스타일 규칙 - 자바스크립트의 값을 사용하기 - 주석 JSX란? - 자바스크립트+HTML을 합쳐서 사용할 수 있는 문법 - 자바스크립트 표현식 (extension) - 변수나 함수 같은 값을 HTML에 쉽게 표현해서 사용할 수 있도록 고안된 문법 - 리액트에서는 JSX 문법을 사용해서 웹에 필요한 HTML요소를 만들어냄 - 얼핏보면 HTML 같이 생겼지만 실제로는 JavaScript이다. function APP() { return ( 안녕 리액트 ); } JSX의 문법 (1) 닫힘 규칙 태그는 꼭 닫혀 있어야하고, 닫지 않으면 오류가 발생한다. 예컨대, 태그를 열었으면 꼭, 이렇게 닫아주어야 한다. HTML 에서는 imag..
[React] eslint error missing in props validation 오류 해결방법 missing in props validation 오류를 해결해보자! 1. props를 사용하는데 이런식으로 에러가 떴다. 2. eslint 설정 문제로 발생하는 것이라 eslint를 수정해주어야한다. .eslintrc.cjs (혹은 .eslintrc.json)에 아래 조건 추가 "rules": { "react/prop-types": "off" } 3. 오류가 사라졌음을 확인할 수 있다.
[React] 리액트 구글 폰트 적용하기 (다운로드 없이 하는법) 리액트에서 폰트를 적용해보자! 1. 구글폰트 사이트에 들어간다. https://fonts.google.com/ 2. 원하는 폰트를 고른다. (필자는 Gugi 폰트를 선택함) 3. 상단 헤더 오른쪽 부분의 아이콘을 클릭한다. 4. @import를 선택하고 @import url('주소')를 복사 (태그는 제외하고 복사한다) 5. 리액트 css 파일에 넣는다. 6. import 복사했던 아래에 있는 코드를 복사한다. 7. css 파일에서 적용해주고자 하는 곳에 가서 복붙한다. 8. 적용된 모습
[React] 리액트의 개념, 사용 이유, export default 목차 1. React란? 2. React를 사용하는 이유 3. export default React란? React는 UI를 만드는 Javascript 라이브러리이다. 페이스북이 자사의 서비스 UI를 효율적으로 만들기 위해 탄생한 라이브러리이다. React를 사용하는 이유 1) 컴포넌트(Component) 기반의 UI 라이브러리 → 재사용성, 유지보수 good * 컴포넌트: 별도의 HTML요소들을 묶어서 모듈처럼 만들고 내보내서 다른 파일에서 쓸 수 있게 만드는 것 웹사이트의 코드를 수정해야하거나 제거해야하는 상황이 발생하면, 중복 코드들이 포함돼있는 모든 페이지들을 하나하나 일일이 수정해야하는 문제가 생긴다. 즉, 유지보수 상황에서 문제가 생기는 것이다. 하지만 리액트를 사용하면, 페이지별로 공통되는 요..
[Vite] Vite로 리액트 프로젝트 만들기 (Vite를 사용하는 이유) 목차 1. VIte 공식 사이트 2. Vite란? 3. Vite가 CRA보다 좋은 점 4. 에러 해결 Vite 공식 사이트 https://ko.vitejs.dev/ Vite란? Vite는 프랑스어로 "빠르다(Quick)"를 의미하며, Vue.js의 창시자인 Evan You가 만든 최신 빌드 도구 및 개발 서버이다. 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있다. 1) 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공한다. 2) 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있다. 이는 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configu..
[JavaScript] 나머지 매개변수(...), arguments 객체, 스프레드 문법 목차 1. 나머지 매개변수 (rest parameter) 2. arguments 객체 3. 스프레드 문법 (전개구문, spread syntax) 4. 점 삼총사 간단 비교 (구조분해할당, 나머지 매개변수, 스프레드문법) 정해지지 않은 수의 인수를 받는 방법과 함수의 매개변수에 배열을 전달하는 방법을 알아보자! 나머지 매개변수 나머지 매개변수에 대해서 설명하기 전에, 우선 나머지 매개변수가 왜 필요한지에 대해 알아보자. 아래의 예시와 같이 함수에 넘겨주는 인수의 개수엔 제약이 없다. function sum(a, b) { return a + b; } console.log( sum(1, 2, 3, 4, 5) ); // 3 함수를 정의할 때는 인수를 두개(a, b)만 받도록 하고, 실제 함수를 호출할 때는 이보..
[JavaScript] 구조분해할당 (destructuring assignment) 목차 1. 구조분해할당 2. 배열의 구조분해할당 3. 객체의 구조분해할당 '구조분해할당'에 대해서 알아보자! 구조분해할당 의미 - 구조(배열이나 객체)를 분해해서 각각 변수에 할당한다. - 객체나 배열을 변수로 '분해'할 수 있게 해주는 특별한 문법이다. 사용하는 경우 - 함수에 객체나 배열을 전달해야하는 경우 - 객체나 배열에 저장된 데이터 일부만 전달해야하는 경우 사용하는 이유 - 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우에 유용하다. - 인덱스를 이용해 배열에 접근하지 않고도 변수로 접근 가능해진다. 배열의 구조분해할당 예시 let arr = ["Haein", "Hwang"] // 이름과 성을 요소로 가진 배열 let [firstName, surName] = arr; // 구조분해할당 ..

티스토리툴바