1. 하나의 상태만을 위한 렌더링 true일 때만 render하고 false일 땐 render하고 싶지 않을 때, 삼향연사자보다는 &&연산자로 나쁜 예 : import React, { useState } from 'react' export const ConditionalRenderingWhenTrueBad = () => { const [showConditionalText, setShowConditionalText] = useState(false) const handleClick = () => setShowConditionalText(showConditionalText => !showConditionalText) return ( Toggle the text {showConditionalText ? The ..
프로젝트 라우팅 구조 token을 전역상태로 관리하는데 그 토큰의 변경이 감지되면 알맞게 페이지 리다이렉트를 시키는 구조이다. 문제 로그인 시 토큰을 발급받고 로컬스토리지에 저장하는데 저장 후 토큰이 감지되고 리다이렉트를 하는데 토큰의 값이 null로 request 된다. 문제 해결 과정 1. 저장이 되기 전에 리다이렉트 되나? vscode로 페이지가 라우팅 되기 전, 라우팅 되는 과정, 라우팅 후를 관찰하기 위해 debug를 사용함. 하지만 토큰이 로컬 스토리지에 저장이 되고 라우팅 되는 것을 확인할 수 있었음. 2. axios의 인스턴스가 문제인가? custom 한 api가 문제인가 싶어서 login함수를 만들고 axios로 하드코딩해서 headers에 토큰을 받아서 넘겨줬는데 여전히 null값으로 ..
React.js 프로젝트를 쉽게 생성하기 위한 툴이다. React.js를 처음 사용하는 개발자들은 개발 환경 설정이 어려울 수 있지만, Create-React-App을 사용하면 초기 설정을 간편하게 해결할 수 있다. Create-React-App 설치시 자동으로 설치되는 패키지들 Create-React-App을 사용하여 React.js 프로젝트를 생성하면 다양한 패키지들이 자동으로 설치된다. 이러한 패키지들은 React.js 프로젝트를 개발하는 데에 필요한 다양한 도구들을 제공한다. 자동으로 설치되는 패키지는 아래와 같다. react react-dom react-scripts react 와 react-dom 은 React.js 라이브러리이며, react-scripts는 Create-React-App에서 ..
SPA(Single Page Application)를 개발할 때, 리액트 라우터(React Router)를 이용해서 라우팅을 구현합니다. 리액트 라우터에서는 두 가지 라우터를 제공합니다. 바로 BrowserRouter와 HashRouter입니다. BrowserRouter BrowserRouter는 HTML5의 History API를 이용해서 UI를 업데이트합니다. History API를 사용하면 웹 페이지를 다시 로드하지 않고 URL을 업데이트할 수 있습니다. 예를 들어, 사용자가 브라우저의 뒤로 가기 버튼을 클릭하면 브라우저는 이전 페이지로 돌아가지만 페이지를 다시 로드하지 않습니다. BrowserRouter는 서버에서 URL을 요청할 때, 서버는 어떤 페이지도 찾을 수 없다는 404 Not Found..
1. 코드 리뷰? 코드 리뷰는 동료가 작성한 코드를 점검하고 피드백을 교환하는 과정입니다. 구성원 모두가 책임감을 가지고 새로 추가하거나 변경하는 코드를 검토하는 중요한 활동입니다. 이 문서는 코드 리뷰를 받거나, 코드 리뷰를 하는 사람이 알아야 할 지침을 제공합니다. 2. 코드 리뷰 기본 원칙 모든 코드는 코드 리뷰를 마친 후에 머지를 해야 합니다. 혼자가 아닌 함께 하는 일이기에 우리 모두는 코드 리뷰에 책임감을 갖습니다. 1명의 필수 리뷰어가 PR을 승인해야 머지할 수 있습니다. 인프라 작업이나 릴리즈 PR은 리뷰를 생략할 수 있습니다. 단, review skip 레이블을 붙여서 스프린트 리뷰 시간에 일괄 검토합니다. PR을 받았으면 하루 안에 답변을 주세요. 답변이 없으면 재촉하세요. 리뷰하기에 ..
자바스크립트에서 비동기를 처리할 때 다음 3가지를 사용하면 된다. Callback, Promise, Async/Await 하지만 이것들은 언제 어떻게 쓰이는지, 어떤 차이가 있는지, 그렇다면 어떤 걸 써야 하는지 헷갈릴 수 있기 때문에 정리를 하려 한다. Callback function add(a, callback){ setTimeout(()=> callback(a + 10), 100); } add(5, res => { add(res, res =>{ add(res, res =>{ console.log(res) }) }) }); // 35 console.log(a) // undefined 이 콜백 예제에서 함수 add의 리턴 값이 얼마인지를 보는 것은 중요하지 않다. setTimeout이 일어나는 코드적 ..
CSS에서의 애니메이션 사용 transition/animation 속성 Javascript의 애니메이션 사용 requestAnimationFrame() CSS 애니메이션 간단하게 처리하는 애니메이션의 경우 CSS로 처리한다. CSS 애니메이션의 장점 반응형으로 애니메이션을 구현하기 좋다. 미디어 쿼리를 이용하여 해당경우에 맞춰 스타일링을 해주면 되기 때문. 외부 라이브러리를 필요로 하지 않다. 나는 라이브러리를 가져오는 것을 별로 선호하지 않기 때문에 메리트가 있다. 메인 스레드가 아닌 별도의 컴포지터 스레드에서 그려지기 때문에 메인스레드에서 작업하는 JS보다 효율적이다. 좀 더 나아가서 최적화에 대한 고민을 한다면, CSS 애니메이션에 대해서 최적화를 고려해볼 수 있다. 브라우저 렌더링 관점에서 Jav..
클로저를 한 문장으로 정리하면, 현재의 유효범위를 넘어 Scope Chain으로 연결되어 있는 객체, 변수등의 참조를 발생시키는 것 코드로 예를 들어보면 function outer() { var count = 0; function inner() { count++; console.log(count); } return inner; } var increment = outer(); increment(); // 1 increment(); // 2 increment(); // 3 // outer 함수는 count 변수를 선언, inner 함수 반환 // 반환된 inner 함수는 count 변수 참조, count 값을 증가시킨 후에 출력 // outer 함수를 실행하면, count 변수와 함께 inner 함수가 반환..
