코딩 일지

MPA Multi Page Application의 약자(여러 페이지로 구성된 웹 어플리케이션) 사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html을 받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식이다. SPA Single Page Application의 약자(하나의 페이지로 구성된 웹 어플리케이션) 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이다. 장단점 1) SPA의 장점 UX 전체 페이지를 업데이트를 할 필요가 없기 때문에 빠르다! (웹사이트의 성능과 직결된다.) 전체 페이지를 업로드하면서 발생하는 '깜박' 거림이 없다. 페이지의 일부만 바뀌는 것이기 때문에 applic..

SSR Server Side Rendering의 약자 이 방식은 서버에서 데이터까지 모두 포함하여 페이지를 구성한 후 브라우저에 전달하는데 클라이언트가 페이지를 이동한다든가, 클릭으로 인한 다른 요청이 생길때마다 이 과정을 반복하기 때문에 화면에서 바뀌지 않아도 되는 부분도 계속해서 다시 렌더링되는 단점이 있다. 이는 곧 서버 부하 등의 문제를 일으킬 수 있다. CSR Client Side Rendering의 약자 말 그대로 SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다. 즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작한다. SSR, CSR 차이 1) 웹페이지를 로딩하는 시간 웹 페이지 로딩의 종류는 두 가지로 나눌 수 있다. 하나는 웹 사이..

개념 useEffect란, 페이지가 맨 처음에 랜더링 될 때, 또는 변수의 값이 변경될 때 실행되는 함수이다. 클릭할 때마다 1씩 증가하는 간단한 버튼을 만들어보자. 예제 코드 App.js import Count from './Commponents/Count.jsx'; const App = () => { return ( useEffect ); } export default App; Count.jsx import React,{useState,useEffect} from 'react' const Count = () =>{ const [count, setCount] = useState(0) useEffect(()=>{ console.log(count) }) useEffect(()=>{ console.log('..

개념 React hook에서는 useState를 이용해서 간편하게 state값을 변경할 수 있다. const [num, setNumber] = useState(0) 위와 같은 형태로 사용한다. 배열 안에 들어가는 값은 첫번째 인자값은 값을 변화시킬 변수명, 두번째 인자값은 그 값을 변화 시키기 위해 사용할 함수명(?)이다. 두번째 인자값은 어느 값을 넣어도 코드 작동에는 문제가 없으나, 관용적으로 set + 첫번째 인자값(맨 앞글자 대문자) 형태로 사용한다. useState() { return ( useState ); } export default App; App.jsx import React,{useState} from 'react' const Hook = ()=>{ const [num, setNumb..

목차 - 훅이란? - 탄생 배경 - 종류 - 장점 훅(Hook)이란? Hook은 리액트 16.8 버전 이후 추가된 기능이며, Hook이 등장하면서 더 이상 상태를 관리하기 위해 Class를 쓸 필요가 없어졌다. 기존에는 Class형 컴포넌트에서만 상태를 관리 할 수 있었고, 함수형 컴포넌트에서는 상태를 관리할 수 없었지만, Hook을 통해 상태 관리를 할 수 있게 되었고, 상태 관리 뿐만 아니라 기존 클래스형 컴포넌트에서만 가능하던 여러 기능을 사용할 수 있게 되었다. Hook이 등장하기 전 리액트에는 여러 문제들이 있었다. 탄생배경 리액트 컴포넌트는 클래스형 컴포넌트(Class component)와 함수형 컴포넌트(Functional component)로 나뉜다. 기존의 개발방식은 일반적으로 함수형 컴..

목차 - 리액트 cli 다운로드 - hooks - 로그인 구현 - 삼항연산자 조건문 true일 때만 or false일때만 리액트 CLI 다운로드 터미널에서 npx create-react-app [디렉토리명] 를 입력한다.(오래 걸림) npx create-react-app [디렉토리명]로 다운로드 시, 기본적인 세팅은 다 되어있다. webpack, babel, react, react-dom 등등... 많은 기능들이 설치된다. 다 받아지면, cd [디렉토리명] npm run start Hooks 함수형 컴포넌트에서, 상태를 만들 수가 없고, 생명주기를 사용할 수 없다는 단점을 개선한 함수 모음이 바로 hooks이다.. 장점 : this 생산성 / 코드 가독성 재활용/ 커스텀 훅 로그인 구현하기 App.jsx..

App.jsx class App extends Component{ state = { value:'hello world!!!!', list:[] } // 생명주기 함수 componentDidMount(){ // 최초실행 후(화면 랜더 후) 실행되는 함수. this.setState({ // 불변성... 데이터가 화면이바뀐다. ...this.state, list:[ {userid:'web7722',content:'안녕하세요2',date:"2022-04-21", updateflag:true}, {userid:'web7722',content:'안녕하세요3',date:"2022-04-21", updateflag:true}, {userid:'web7722',content:'안녕하세요4',date:"2022-04-21..

componentDidMount() 이 함수는 컴포넌트가 처음 화면에 그려지면 실행되는 함수이다. (render()가 실행되고 나서 실행되는 함수라고 생각하면 된다.) componentDidUpdated() 리액트에서 업데이트로 분류한 생명주기 함수이다. 화면이 업데이트되면 실행된다. componentWillUnmount() 리액트에서 컴포넌트가 죽을 때(unmount) 호출되는 함수 Reference: https://blog.naver.com/melon940925/222027028412 리액트:: 생명주기 함수 아마 리액트가 편한 이유는 state와 render()와 같은 리액트가 미리 구현해 놓은 함수나 클래스 등을 사용... blog.naver.com

목차 -웹팩이란? -entry -output -loaders -plugins -mode -웹팩 설치 및 사용법 웹팩이란? 웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다. 모듈 번들러는 다음과 같은 장점이 존재한다. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다. 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽다. 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환시켜 준다(예를 들면 typescript). 물론, 수 많은 자바스크립트 파일이 하나의 파일로 묶인다면 초기 로딩 속도가 커질 수 있으나, 웹팩에서는 ..

기본 세팅 코드