목록분류 전체보기 (78)
초보 개발자의 성장 일기
일반 함수 function add(x: number, y: number): number { return x + y } 매개변수에 각각 타입을 지정해주고 리턴값에도 타입을 지정하려면 매개변수 뒤에 : 타입을 지정해준다. function add(x: number, y: number): number; //타입 function add(x, y) { // 실제코드 return x + y; } 같은함수가 같이 선언되어있으면 오류가 나지만 앞의 함수가 타입만 선언이 되어 있으면 오류가 나지 않는다. 화살표 함수 const add: (x: number, y: number) => number = (x, y) => x + y; 화살표 함수는 변수 명 뒤에 :를 작성해주고 리턴 값에 타입을 지정하려면 화살표(=>) 뒤에 타..
이메일형식 체크 및 비밀번호 길이를 체크할 때 유효성 검사를 실시해야 한다. 유효성 검사를 실시하면 이메일과 비밀번호의 상태를 계속 확인해야하는데 HTTP requset를 보낼 때 너무 많이 보내지지 않을까? const [enteredEmail, setEnteredEmail] = useState(''); const [enteredPassword, setEnteredPassword] = useState(''); const emailChangeHandler = (event) => { setEnteredEmail(event.target.value); }; const passwordChangeHandler = (event) => { setEnteredPassword(event.target.value); }; 우..
장바구니나, 투두리스트 등을 state로 상태관리를 하다보면 새로고침할 때 데이터가 전부 사라진다. 데이터를 유지하기 위해서는 데이터를 저장하는 곳이 필요함을 느꼈다. 대표적인 방법으로는 쿠키와 로컬스토리지가 있다. 이 둘의 차이점은 무엇일까? 우선 쿠키는 최대 4KB의 용량을 가진 작은 데이터이다. 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 등 다양한 방법으로 사용되고, 문자열만 저장할 수 있다는 제한이 있다. 사이트에서 제한된 인터넷 사용 기록을 기반으로 사용자 경험을 개선하는 것이다. 쿠키에는 크게 두가지의 종류가 있다. Seesion cookies: 만료일이 없고, 브라우저나 탭이 열려있을 때만 저장되며 브라우저가 닫히면 cookies는 영구적으로 삭제된다. Persist..
Grid Flex와 비슷하지만 행과, 열 2차원 레이아웃을 담당한다. display: flex; grid-template-columns: 398px, 398px, 398px; grid-column-gap: 19px; grid-row-gap: 32px; grid-template-columns는 세로로 몇개를 둘지, 한 개당 각각 column의 가로의 길이를 어떻게 설정할지 결정한다. grid-column-gap은 각 아이템 사이 세로(열) 간격을 설정한다. grid-column-gap은 각 아이템 사이 가로(행) 간격을 설정한다. grid-template-columns: repeat(3, 398px); repeat을 사용해서 398px을 3번 반복하도록 간결하게 나타낼 수 있다. 같은 컴포넌트가 반복이 되..
모달을 만들다보면, 폼의 옆에 생성이 되는데, 이 위치는 root의 안이다. 애플리케이션이 작다면 이렇게 해도 되지만, 현재 컴포넌트가 전체 애플리케이션의 위쪽에 위치해 있지 않고 다른 컴포넌트 안에 깊이 중첩되있기도 한다. 백드롭과 모달이 DOM의 다른 내용안에 깊이 중첩되버린다. 브라우저는 모달의 존재를 인식하지 못하고 구조적인 관점에서 모달이 맨 위에 있어야 하는 존재인지 인식하지 못한다.이때 렌더링 된 HTML을 Body 밑으로 모달을 옮기면 되는데, 이것은 Portal로 해결이 가능하다. 포털을 사용할 때 필요한 것 1. 컴포넌트를 이동시킬 장소 2. 컴포넌트에게 그 곳에 포털을 가져야한다고 알려주는 것 Potal 공식문서로 포탈을 살펴보면 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM..
React.memo는 React에서 제공하는 고차 컴포넌트이다. 고차 컴포넌트란? 어떤 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환해준다. 일반의 컴포넌트가 React.momo를 거치면 최적화된 컴포넌트를 반환해준다. 렌더링이 되어야 할 상황에 놓일 때 마다 Props Check를 통해서 자신이 받는 props에 변화가 있는지 확인한다. props에 변화가 있다면 새로 렌더링 되는 것이 아닌, 기존에 렌더링 된 내용을 재사용한다. const Student = ({ name, age, address }) => { return ( {name} {age} {address} ); }; 여기서 Props Check를 하면 name, age, address에 변화가 있으면 재사용하면서 렌더링을 하게 되고 변하지..
여성, 남성 체크박스 중 하나만 선택돼야 하는 난관에 부딪혔다. 둘중에 하나만 선택이 되도록 하려면 어떻게 구현을 해야할까? const [ganderCheckValue, setGenderCheckValue] = useState(''); 우선 useState로 변수를 선언해준다. genderCheck(e)} /> 남성 genderCheck(e)} /> 여성 그리고 각각 input과 label로 구현을 해준다. 여기서 type, id, name, value, onChange를 적어주어야 하며 onChange에는 클릭할 때 서로 하나만 체크될 젠더 체크 함수가 들어갈 것이다. function GendercheckOne(id) { let checkBox = document.getElementsByName('ch..
CSS Module class, id 등에 random string을 달아주기 때문에 선택자가 겹칠 우려가 없다. 스타일 충돌을 방지하고 코드를 격리하여 체계적으로 CSS 설계가 가능하다. 스타일링 직접 하나하나 해야 한다. UI framework (ex. Ant Design, Material UI) 이미 다 만들어져 있어서 간편하고 쉽게 쓰기에 좋다. 이미 다 만들어져 있어서 styling의 학습 및 훈련이 필요한 초심자들에게는 비추천한다. 해당 framework의 디자인철학을 벗어나기 쉽지 않다. 컴포넌트들을 커스터마이징 하기 어렵다. import "antd/dist/antd.css"; import { Button } from "antd"; export default function App() { r..
Server Rendering React, Vue, Angular 등 자바스크립트 프레임워크가 나오기 이전 초기 웹 환경에서는 모든 페이지를 서버에서 빌드한다. 클라이언트는 별도의 처리 없이 웹페이지를 노출하고 이를 Server Rendering이라고 한다. Client Side Rendering Ajax 등의 기술, 자바스크립트 프레임워크를 활용하여, 데이터를 받아 자바스크립트로 페이지를 동적으로 만들 수 있게 된다. 데이터는 XML, JSON 형태로 클라이언트에 전송하는데 이를 CSR(Client Side Rendering)이라고 한다. CSR은 자바스크립트만으로 완전히 페이지를 만들 수 있다. 자바스크립트를 최대한도로 활용하여 HTML, CSS를 동적으로 생성한다. 컴포넌트 단위로 코드를 나누고, ..
useReducer는 state를 생성하고 관리하는 도구이다. 그렇다면 state와 차이는 무엇일까? { teacher: 'James', students: ['Kim', 'Ann', 'John']. count: 3, location: [ {count: 'Korea', name: 'A'} {count: 'Australia', name: 'B'} ] } 여러개 하위값을 포함하는 복잡한 state를 다뤄야 할 때 사용한다. 구성요소 Reducer: Action의 내용대로 변경된 state를 업데이트를 해주는 역할을 한다. Dispatch: state를 변경하기 위해 Action을 요구하는것을 말한다. Action: Dispatch의 요구 내용을 말한다. Dispatch(Action) → Reducer(Stat..