양씨

리액트 프로젝트에서 항상export default function Hi(){}와 같이 컴포넌트를 내보냈는데  export default const Hi = () => {}와 같이 컴포넌트 코드 스타일을 화살표 함수로 바꾸는 과정에서 오류가 났다똑같은 원리인데 안되는 것이 이해가 안되어서 import, export 문을 좀 보았다 js에서는 함수나 변수 등을 선언하고 export를 하여 모듈을 내보내고 import 하여 내보낸 모듈을 사용할 수 있다export를 사용할 때 export와 export default를 사용할 수 있는데 차이점은 아래와 같다   exportnamed export라고 하며 하나의 모듈에서 한개 이상의 값들을 내보낼 수 있다{}를 사용하여 구체적인 이름을 명시하여 import 해아..

리액트에서 이미지를 넣고 싶어 이미지 파일을 첨부할 경우에는 크게public에 넣어 사용하는 방식src에 넣어서 사용하는 방식(보통의 경우 src/assets)이 있다  나의 경우 src/assets에 넣어 주로 사용하였는데 두 방식이 차이점이 정확하게 무엇인지 모른다는 생각이 들어 알아보기로 했다  srcimport할 경우 참조할 수 있는 경로(path) 문자열을 출력한다.파일을 찾지 못하는 경우, 컴파일 단계에서 에러를 잡을 수 있다(장점)content hash가 파일명에 포함되기 때문에 브라우저가 오래된 버전(파일 수정 전)의 파일을 캐싱하고 있는 경우를 고려하지 않아도 된다. -> 파일이 변경되었을 때만 hash값이 변경된다 (장점)서버 요청 횟수를 줄이기 위해 10,000 bytes 이하의 이미..

이전까지 AJAX의 의미를 잘못 이해했던 것 같다..리액트를 이용하여 axios를 쓰는것이 습관 아닌 습관이 되다 보니어느 순간 그냥 비동기 통신? 이런식으로 어림잡아 짐작했던 것 같다 AJAX란 Asynchronous JavaScript And XML의 약자로 js를 이용하여 웹 페이지 전체를 새로 고치지 않고도 서버와 데이터를 비동기적으로 주고받을 수 있게 하는 기술이다. 즉, 새로고침 없이 클라이언트와 서버 간에 데이터를 주고받는 비동기 http 통신 방법이다. AJAX 실행순서요청 생성: JavaScript를 사용하여 XMLHttpRequest 객체를 생성서버 요청: 이 객체를 사용하여 서버에 데이터를 요청서버 응답: 서버는 요청을 처리하고 응답을 반환응답 처리: JavaScript가 서버의 응답..

이번에 새로운 프로젝트를 하다 문득 지금까지 리액트의 장점을 못살리고 이용한 것이 아닌가? 라는 생각이 들었다 더욱더 컴포넌트화 하며 분리하여 코드를 나누고 폴더구조를 잘짜야겠다고 생각하면서 리액트 폴더구조에 대해 알아봐야겠다고 생각했다 리액트를 이용한 프로젝트를 처음 시작한 시점에도 올바른 폴더구조가 무엇이고 파일을 어떻게 묶어야되는지, 어디까지 나누어야되는지 확신이 들지 않아서 여러번 찾아본 경험이 있다 그때의 결론은 답은 없다..?였다 리액트 공식문서에서도 폴더구조에 대해 너무 큰 고민을 하지말라고 말하기도 하고 궁금해서 사람들마다 방식이 다 달라서 어려웠다 정답이 없다는게 제일 어려운거 같다. 일단 기본 리액트 폴더들부터 알아보자면 아래와 같다 app ├── node_modules ├── publ..

보일러 플레이트(boilerplate code), 보일러 플레이트 코드라고 불리는 보일러 플레이트는 내용은 알지만 단어를 들었을 때 바로 떠오르지 않아 글로 남기려 한다 리액트에서만 아니라 프로그래밍적 의미에서 보일러 플레이트는 최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말한다 이는 시간을 절약하고 프로젝트의 여러 부분이나 여러 프로젝트 간에 일관성을 보장하기 위해 새로운 애플리케이션이나 기능의 기반으로 자주 사용된다. 보일러 플레이트에는 기본 코드 프레임워크, 템플릿, 구성부터 일반적인 작업을 처리하는 광범위한 라이브러리 및 모듈에 이르기까지 모든 것이 포함될 수 있다 대표적으로 리액트에서는 create-react-app을 예시가 있다 cra를 사용하면 바벨이나 웹..

사실 내용적으로는 아는 내용인데 props drilling이란 단어를 들을 때마다 이게 뭐였지란 생각이 계속 들어 정리해보려한다 Props Drilling props drilling이란 react 컴포넌트 트리에서 props를 통해 데이터를 전달할 때 중간 컴포넌트는 그 데이터가 필요하지 않음에도 하위 컴포넌트에게 데이터를 전달하기 위해 props를 전달해야하는 과정이다 장점 장점이라고 말하긴 애매하지만 데이터를 가장 쉽고 빠르게 전달할 수 있다 정적으로 따라가기만 해도 어떤 데이터가 어디서 사용되는지 쉽게 파악 가능하다 단점 규모가 커지고, 컴포넌트가 많아지면 너무 복잡해진다 props 의 이름이 중간에 변경된 것을 추적하기 쉽지않다 많은 props를 전달하다가 필요없는 props가 계속 남거나 전달될..

아래 예시와 같이 자바스크립트에서 중첩으로 반복문을 돌릴 때 한번에 빠져 나올수 있는 방법은 무엇일까 for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { // 여기 } } label(레이블) 반복문 앞에 붙혀서 사용할 수 있으며 중첩 반복문을 빠져 나갈 수 있다 반드시 break와 continue 앞에 있어야 하며 break는 모든 레이블 구문에서 사용 가능 continue는 반복문 안에서만 사용 가능하다 label 이름: 구문 label을 이용해 중첩반복문 빠져 나오기 continue loop1: for (let i = 0; i < 3; i++) { loop2: for (let j = 0; j < 3; j++) { if (i === 1 && j =..

?? 라는 연산자가 있었다! (마주친적이 거의 없어서 몰랐던..) ??는 병합연산자, nulllish 라고 불리우고 여러 피연산자 중에서 확정되어 있는 변수를 찾을 수 있다 a ?? b 다음과 같이 있을 때 a가 null도 아니고 undefined도 아니면 a, 그 외의 경우는 b이다 (a !== null && a !== undefined) ? a : b; 삼항연산자로 표현하자면 위 코드와 같은 뜻이다 ?? 과 || 의 차이 스쳐가듯 보면 or 연산자와 굉장히 유사해보인다. 그러나 이 둘은 다른 연산자다 ||는 첫번째 truthy 값을 반환 ??는 첫번째 정의된 값을 반환 let a = 0; console.log(a || 100); // a는 falsy로 판단되어 100 console.log(a ?? 1..

먼저, const란 자바스크립트에서 흔히 '상수'라고한다 재할당이 안되기때문에 변화하지 않는 변수를 사용할 때 쓰이기 때문이다 const name = 'yang'; // yang // name = 20; // error console.log(name) 그런데 실제로 입문단계에서 const를 사용하다보면 어?? const는 재할당이 안되는걸로 아는데 왜 이러는거지라고 생각되는 경우가 있다 아래와 같이 말이다 const obj = { name: 'yang' }; obj.name = 'new yang'; // new yang const arr = [1, 2, 3]; arr.push(4); // [1,2,3,4] 아니 const는 변화하지 않는 변수를 저장하려 사용하는데 분명히 변경이 된다 이는, 자바스크립트에..

SCSS는 Sass의 3버전에서 나온 css 구묵과 완전히 호환되도록 만든 Sass의 모든 기능을 지원하는 상위집합이다 그래서 말만 다르지 둘은 같다(거의?) 둘이 문법이 살짝? 다른 것들이 있을뿐.. 가장 큰 차이는 중괄호와 세미콜론의 차이이다 (아래 사진 왼쪽이 SCSS, 오른쪽이 Sass) 이처럼 살짝 문법이 다른부분이 있다 Sass: 좀 더 간결하며 코드가 깔끔해짐 SCSS: 한줄작성이 가능하며 css와 유사한 문법이기 때문에 코드 통합이 쉽다 취향차이이지만 보통 SCSS를 많이 사용하긴한다