양씨

얼마전 다른사람의 포트폴리오를 구경하던중 "useLayoutEffect 로 렌더링 속도 향상" 이라는 문구를 보고 이것은 뭘까.. 생각이 들어서관련해서 무엇인지 알아보기로 했다 관련하여 살펴보니 브라우저 렌더링 과정과 어느정도 관련이 있었다https://yangwonjoon.tistory.com/69 [Web] 랜더링이란 무엇인가?개발자라면 한번정도 들어봤을 단어이자 면접 단골질문인 CSR과 SSR에 대해 자세히 알아보려한다.CSR(클라이언트 사이드 랜더링)과 SSR(서버 사이드 랜더링)을 알아보기 앞서 랜더링에 대해 자세히yangwonjoon.tistory.com이 포스팅에서는 브라우저 랜더링 과정을 아래와 같이 구분 지었다DOM 트리, CSSOM 트리 생성랜더링 트리 생성레이아웃페인팅이 과정중 3번..

인간도 탄생, 성장, 죽음의 단계가 있듯이, 컴포넌트도 생성, 업데이트, 소멸되는 과정이 있다. 이를 컴포넌트의 라이프 사이클이라고 한다.리액트에서 컴포넌트의 라이프 사이클은 크게 세 단계로 나뉜다 Mount: 컴포넌트가 생성된 순간Update: 컴포넌트가 업데이트되어 재렌더링 되는 순간Unmount: 컴포넌트가 소멸되는 순간 이러한 단계마다 특정 작업을 수행하는 것을 라이프 사이클 제어(생명주기 메서드)라고 한다.원래 이는 클래스형 컴포넌트에서만 사용 가능했지만, 훅의 등장으로 useEffect를 통해 함수형 컴포넌트에서도 쉽게 사용할 수 있게 되었다 더보기클래스형 컴포넌트에서 사용되는 생명주기 메서드를 간단히 살펴보자면(지금은 거의 안쓰이니)원래 총 9가지의 단계가 있는데 주요한 단계는 다음과 같다 ..

useRef는 함수형 컴포넌트에서 변수를 생성하고 이를 DOM 요소나 다른 값에 참조할 때 사용한다.상태가 변경되더라도 리렌더링이 되지 않으며 특정 DOM 요소에 접근이 가능하다 아래와 같이 사용하며 useRef에 초기값을 넣으면 {current: 초기값} 이라는 객체를 반환하고current 키 값을 이용해서 값을 변경한다const refObject = useRef(초기값)console.log(refObject.current) //초기값 이렇게 생성한 useRef 객체는 아래와 같은 특징이 있다DOM 요소에 직접 접근 가능컴포넌트가 랜더링이 계속 되어도 언마운트 되기 전까지 값이 그대로 유지객체 값을 변경해도 리렌더링 되지 않는다위 특징들 때문에 변경시 렌더링이 발생하지 않게 하기 위함Dom 을 조작하기..

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

프로젝트 도중 결제(테스트)기능 구현 도중 포트원 sdk를 이용하여 연동을 진행하였는데, 문득 sdk의 정확한 정의를 잘모른다는 느낌을 받아 글로 남기며 개념을 다시 생각해보야겠다고 생각했다.sdk를 검색하며 구경하다보니 api와 비교하여 쓴 글이 많아 정리하면서 api까지 정리해보려한다  APIApplication Programming Interface의 약자로 개발을 하다 보면 정말 많이 쓰이는 용어이다.위 영어 단어를 번역하면 응용 프로그램 프로그래밍 인터페이스이다 너무 추상적인 말이니 나의 식대로 번역하자면,클라이언트와 서버의 연결책클라이언트에서 서버로 보내는 요청을 구분하는 체계이다 함수 호출과 같은 방법으로 클라이언트에서 데이터가 필요하여 요청을 보내면 서버가 답하여 데이터를 전달하는 것이다공..

리액트에서 이미지를 넣고 싶어 이미지 파일을 첨부할 경우에는 크게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가 서버의 응답..

쿠키와 세션은 http의 특징이자 약점을 보완하기 위해 사용한다 간단하게 http를 먼저 말하자면http는 인터넷에서 데이터를 주고 받는 프로토콜(통신규칙)이다http프로토콜은 크게 비연결성과 무상태의 특징을 가지는데비연결성: 클라이언트의 요청에 서버가 응답하면 연결을 끊는다무상태: 서버는 클라이언트의 상태를 기억하지 않는다(즉, 새로운 인증을 계속 해줘야한다)https://yangwonjoon.tistory.com/11 [네트워크] HTTPhttp( hyper text transfer protocol ) 는 인터넷에서 데이터를 주고받을 수 있는 프로토콜 프로토콜? 규칙이라 생각하면 편함 이렇게 규칙을 정해두었기 때문에, 모든 프로그램은 규칙에 맞춰 개발하며yangwonjoon.tistory.com 결국..

최근 폴더구조에 굉장히 많은 시간을 쏟고 있다폴더구조를 변경하면서 동시에 컴포넌트 등의 파일의 이름들을 많이 바꾸고 있는데 완전히 다른 파일명을 바꿀때는 문제가 없었는데  ---> 파일명을 hi 에서 yang으로 바꿀때는 상관없음똑같은 파일명으로 대소문자를 바꿀때는 문제가 생겼다 ---> 파일명을 Main에서 main으로 바꾸면 에러 계속 바꿔보고 여러가지 많이 해봤는데 이유는 git을 통해 코드를 관리할 때 git이 원래 대소문자를 구별하지 않기 때문이다+에러가 뜨지 않더라도 대소문자를 바꾸고 합친뒤, 다시 클론하여 코드를 보았을 때 변경되지 않는 현상도 똑같은 이유이다   이것을 해결하려면 'git config core.ignorecase false ' 명령어를 사용해서 git이 대소문자를 인식하게..

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