IT_World

✔ 다국어 페이지는 제공방식 SSR의 경우 HTTP 요청 시 클라이언트에서 Accept-Language 헤더와 같이 기본 언어 설정에 대한 정보를 보냄 서버는 이 정보를 이용하여 해당 언어로 된 문서 버전을 반환 반환된 문서는 lang 속성을 선언합니다. CSR의 경우 클라이언트 사이드에서 해당 언어 팩(JSON 등)을 가져와 출력 ✔ 브라우저의 동작 원리 브라우저의 기본적인 역할은 HTML, CSS 명세에 따라 HTML 파일을 해석하여 표시하는 것 브라우저를 구성하는 요소는 사용자 인터페이스, 브라우저 엔진(크롬, 사파리는 Webkit, 파이어폭스는 Gecko), 렌더링 엔진, 통신, UI 백엔드, 자바스크립트 해석기, 자료 저장소 등이 있다. 렌더링 엔진은 먼저 HTML 문서를 파싱해서 DOM 트리를..

✔ React의 개념과 장점, 그리고 컴포넌트란 React는 UI를 구축을 위한 자바스크립트 프론트엔드 라이브러 주로 Single Page Application를 만들 때 사용 React의 장점에는 virtual DOM을 사용해서 어플리케이션의 성능을 향상시키고, 클라이언트 사이드 렌더링이 가능 또한 다른 프레임워크와도 사용이 가능하며, 컴포넌트의 가독성을 높이며 유지보수가 쉽다. 여기서 컴포넌트란, 레고 블록과 같이 작은 단위로 만들어서 그것을 조립하는 것처럼 개발하는 방법 컴포넌트를 사용한다면 캡슐화, 확장성, 결합성, 재사용성과 같은 이점이 있다. [정리] 개념: UI를 구축하기 위한 자바스크립트 프론트엔드 라이브러리 장점: virtual DOM을 사용해서 어플리케이션의 성능을 향상시킴 서버, 클라..

함수형 컴포넌트란 함수를 기반으로 작성하는 컴포넌트를 말한다.기존에 우리가 사용했던 클래스형 컴포넌트에 비해 훨씬 짧고 직관적인 코드를 짤 수 있다.아래에서 나오는 Hooks가 도입되면서 함수형 컴포넌트에서도 클래스형 컴포넌트의 라이프 사이클 메서드와 같은 기능을 사용할 수 있게 되었다. Hooks 란? 리액트 v16.8 로 업데이트되면서 추가된 기능으로서,함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공한다. useState 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해준다.함수형 컴포넌트 안에서 상태를 관리해야 하는 일이 생기면 이 Hooks를 이용하면 된다. js 파일 내에서 import React, ..

내가 이해가는 선에서 가장 직관적인 방법을 찾아 유효성 검증을 적용해보았다. 구현하면서 Vue와 React의 데이터 바인딩 방식의 차이를 체감할 수 있었다. React는 데이터 흐름이 단방향이기 때문에 값이 변경될 때마다 state값을 다시 set을 하는 코드가 들어갔다. Vue같은 경우 2-way binding이었기 때문에 이런 부분을 신경쓸 필요가 없었다. React의 State를 사용하여 Form의 Error 정보 관리 UserId Form에 change가 있을 때마다, 정규식을 통해 validation check를 한 후 결과를 userIdError State에 저장한다. const [userId, setUserId] = useState(""); const [userIdError, setUserI..

password button 불 들어오기 완성 코드 mport styles from './Login.module.scss'; import { Link, useNavigate } from 'react-router-dom'; import { useState } from 'react'; function Login() { const navigate = useNavigate(); const [idValue, setIdValue] = useState(''); const [password, setPassword] = useState(''); const [disable, setDisable] = useState(true); const [opacity, setOpacity] = useState(0.5); const go..

위키피디아의 설명에 따르면 웹훅은 웹페이지 또는 웹앱애서 발생하는 특정 행동(이벤트)들을 커스텀 Callback으로 변환해주는 방법이다. 조금 더 풀어서 설명하자면, 일반적인 API(Polling)는 클라이언트가 서버를 호출하는 방식이다. 하지만 웹훅의 경우 서버에서 특정 이벤트가 발생했을 때 클라이언트를 호출하는 방식이며 "역방향 API"라고도 부른다. callback URL은 서버측에서 이벤트가 발생했을 때 클라이언트의 어느 URL로 데이터를 보낼지 정해놓은 주소라고 생각하면 된다. Webhook을 사용하는 이유 메일을 수신할 수 있는 웹앱의 클라이언트와 서버가 있다. 구현할 것은 서버측에서 메일을 수신하였을 경우 클라이언트 측으로 알림 메시지를 전달하는 것이다. 일반적인 API로 구현(Polling..

1. 이벤트 이름은 카멜 표기법으로 작성 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값 전달 3. DOM 요소에만 이벤트를 설정할 수 있음 (컴포넌트에는 이벤트를 붙일 수 없음) 이벤트 핸들러의 this 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달 // rendering render() { return ( event button ) } // method constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.handleClick = this.handleClick.bind(this); } handleChange() { ... } h..

종합설계 프로젝트에서, 체크박스의 상태관리 및 체크박스 전부 체크 시 버튼을 활성화하는 부분을 구현하는데 애를 먹었다. 여러 방법이 있지만, useState를 활용하여 상태관리를 하는 방법을 남겨보고자 한다. 체크박스가 하나라도 선택되지 않은 상태: 확인 버튼 비활성 체크박스 전부 선택시 안내문구 사라짐 및 버튼 활성화 const SignupContents = ({ history }) => { const [checkedButtons, setCheckedButtons] = useState([]); const changeHandler = (checked, id) => { if (checked) { setCheckedButtons([...checkedButtons, id]); console.log(체크); }..