코딩연습장

답변 전체 상태값을 하나의 store에 모아 저장합니다. store에 저장된 상태값은 불변객체입니다. 리덕스의 상태값을 변경하는 방법은 액션객체와 dispatch를 사용해야만 가능합니다. 또한 상태값은 순수함수에 의해서만 변경되어야합니다. 상태관리 도구 비교는 모르겠다.

답변 태그의 의미에 맞춰 기계와 사람에게 정보를 전달해 줄 수 있습니다. 예를들어 h1태그는 제목, article태그는 한 덩어리의 정보라는 것을 알 수 있습니다. 회사를 홍보하려하는데 p태그 안에 회사 이름을 넣게되면 검색엔진이 약한 의미와 연관성을 가져 악영향을 끼칩니다. 또한 모든 태그를 div로 작성하면 클래스명과 아이디를 각각 주어야하는데 코드가 더러워지고 협업 시 타인이 파악하기 힘들어집니다. 꼬리질문 시멘틱 태그에 관해 몇가지만 알려주실 수 있나요? article태그는 문서에서 독립된 영역을 뜻합니다. aside태그는 사이드영역 또는 광고를 뜻합니다. footer는 꼬리말을 담당합니다. header은 머리말을 담당합니다. main태그는 주요 컨텐츠 영역으로 한페이지에 한개만 사용합니다. se..

답변 li태그는 목록의 항목을 나타내는 태그이기 때문입니다. 따라서 목록을 담는 ul태그의 자식요소여야합니다. li태그로 작성하지 않고 다른 태그로 작성하더라도 문제는 없지만, 태그의 의미에 맞게(시멘틱하게) HTML을 작성하는것이 다른 개발자가 보았을 때 쉽게 이해할 수 있기 때문에 협업의 측면상 중요합니다. 꼬리질문 다른 태그에도 들어갈 수 있나요? ol태그 안에도 li태그를 작성할 수 있습니다. ul태그는 정렬되지 않은 목록을 나타낼 때 사용하는 태그이고, ol태그는 정렬된 목록을 나타낼 때 사용하는 태그입니다. 참고자료 https://developer.mozilla.org/ko/docs/Web/HTML/Element/li - HTML: Hypertext Markup Language | MDN HT..

답변 리액트의 stste는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용합니다. useState훅을 사용하여 state를 만들고, setState를 사용하여 값을 변경합니다. props는 부모 컴포넌트에서 자식 컴포넌트로 넘겨주는 것들을 의미합니다. props로 넘겨준 값들은 불변하며, readOnly속성을 가지고있습니다. 따라서 자식 컴포넌트에서의 직접적인 props 변경은 불가하며, 내려받은 setState나 함수를 이용하여 props를 바꾸도록 부모 컴포넌트에게 요청할 수 있습니다. 꼬리질문 왜 변수가 아닌 state에 데이터를 저장하나? 변수로 저장해도 됩니다. 하지만 변수값이 바뀌었을 때 일반 변수는 리렌더링이 되지 못하지만, state에 저장된 데이터는 리렌더링이 되기 때..

답변 순수함수란 입력값에 대해 항상 동일한 출력값을 반환하는 함수로, 외부상태에 영향을 끼치는 사이드 이펙트가 없는 함수를 의미합니다. 순수함수는 입력값만을 가지고 처리하기 때문에 입력값이 변경되지 않는 한 항상 같은 결과를 반환하므로 불변성을 유지합니다. 순수함수를 제작하기 위해서는 데이터의 불변성을 유지하는 것이 중요한데, 전달인자로 참조 자료형이 전달되는 경우 객체 자체를 바꾸는 사이드이펙트가 생길 수 있어 map filter reduce메소드가 각광받게 되었습니다. 참고자료 https://gardeny.tistory.com/8 함수형 프로그래밍 - 순수함수 순수함수 순수함수란? 순수함수란 부수 효과가 없는 수학적 함수를 말한다. 조금 쉽게 풀어서 말해 보자면 동일한 인자에 대해서는 항상 동일한 값..

답변 MaxAge와 Expires는 쿠키의 유효기간을 설정하는 속성입니다. 해당 속성을 지정하지 않으면 세션쿠키라 하고, 브라우저를 닫을 시 쿠키가 삭제됩니다. maxage로 설정된 숫자는 해당 숫자를 초로 환산하여 시간이 완료되었을 시 쿠키가 삭제되고, expires는 GMT포맷으로 날짜를 설정하여 해당 날짜에 쿠키가 삭제되도록합니다. 과거시간으로 설정했을 경우 즉시 삭제됩니다. 꼬리질문 참고자료 https://velog.io/@gusdnr814/%EC%BF%A0%ED%82%A4%EC%99%80-%EC%84%B8%EC%85%98 쿠키와 세션 😀 쿠키와 세션을 알아보자! velog.io https://studee.tistory.com/55 [Nodejs-cookie] 쿠키를 언제까지 살아있게 할까? [생..

답변 DOM에 접근할 때 사용합니다. 특정 엘리먼트의 크기, 스크롤바의 위치, 포커스 설정 등등 다양한 상황에서 사용됩니다. 또한 useRef로 설정된 주소값은 리렌더링 되더라도 바뀌지않아 current값이 변화해도 리렌더링에 관여하지 않습니다. 꼬리질문 ref와 state의 차이? state는 리렌더링에 관여하지만 useRef로 선언된 변수는 리렌더링에 관여하지 않습니다. 특정 버튼을 눌렀을 때 특정 input태그에 focus가 잡히는 기능을 구현할 때 사용 참고자료 https://velog.io/@fejigu/React-useRef-%ED%95%84%EC%9A%94%EC%84%B1-%ED%95%84%EC%9A%94%ED%95%9C-%EC%83%81%ED%99%A9-%EC%82%AC%EC%9A%A9%E..

답변 배열, 객체는 const로 변수를 선언했을 때 찾아가는 주소만 할당된 참조 자료형이기 때문입니다. 요소나 속성을 변경하더라도 해당 주소는 변경되지 않으므로 const로 선언된 배열, 객체라도 속성을 추가할 수 있는 것 입니다. 꼬리질문 불변객체를 만드는 법. const로 재할당은 불가능하지만 속성은 변경이 가능합니다. 이때 Object.freeze()메소드의 재할당은 가능하지만 속성은 변경 불가한 특성을 활용해 불변객체를 만들 수 있습니다. 또는 Object.assign()메소드, 전개연산자, lodash의 cloneDeep()을 활용해 깊은 복사를 하여 원본 객체를 보존하는 방법도 있습니다.

답변 모듈시스템으로 CommonJS를 사용한 것과 ES6을 사용한 것의 차이입니다. 대표적으로 CommoneJS를 사용한 Nodejs는 require을 통해 외부 파일이나 라이브러리를 불러오지만, ES6 모듈 시스템을 사용한 리액트는 import틀 통해 라이브러리를 불러옵니다. Babel과 같은 ES6 코드를 변환해주는 도구가 없다면 require을 사용해야합니다. 꼬리질문 바벨이란? 바벨이란 ES6+버전의 자바스크립트, 타입스크립트, jSX 등 다른 언어로 분류되는 언어들에 대해 모든 브라우저에서 동작할 수 있도록 호환시켜주는 툴입니다. 바벨은 최신 문법을 이전세대 문법으로 호환시켜주는 기능이 있는데 그 중 하나가 JSX문법입니다. JSX를 ES5 코드로 바꿔 브라우저에 작동할 수 있도록 하여 리액트에..

답변 브라우저 저장소는 로컬스토리지, 세션스토리지, 쿠키가 있습니다. 로컬스토리지는 브라우저 종료시에도 보관되고, 브라우저가 다르더라도 동일 도메인일 경우 공유가 되지만, 세션스토리지는 브라우저 종료시 삭제되며 동일 도메인이더라도 공유되지 않습니다. 쿠키는 만료기간을 설정할 수 있고, 지속적인 데이터 교환을 위해 만들어졌습니다. 웹스토리지는 필요한 경우 꺼내서 사용하므로 자동전송의 위험이 없고, 오리진 단위로 접근이 제한되어 CSRF공격으로부터 안전합니다. 또한 4kb로 제한되는 쿠키에 비해 스토리지는 용량이 더 큽니다. 꼬리질문 CSRF? CSRF(Cross-Site Request Forgery)란 사이트간 요청 위조로, 사용자의 의도와는 무관하게 공격자의 의도한 행위를 웹사이트에 요청하게 만드는 공격..