본문 바로가기

분류 전체보기328

[리액트] MPA(Multi-Page Application) vs SPA(Single-Page Application) 장단점 정리 MPA(Multi-Page Application) 여러개의 HTML 파일로 이루어져 있는 애플리케이션 새로운 페이지를 요청할 때마다 서버에서 정적 리소스가 다운되고 그에 맞춰 전체 페이지를 다시 렌더링한다 사용자에게 보이는 화면은 서버측에서 준비하는 SSR(Server Side Rendering) 방식을 사용한다 장점 1. 첫로딩이 빠르다 요청받은 페이지에 정적 리소스만 받아오기 때문에 처음 페이지를 로딩하는 작업이 빠르다. 2. SEO(Search Engine Optimization, 검색 엔진 최적화)에 유리하다 MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받기 때문에 검색 엔진이 페이지를 크롤링하기에 적합하다. 단점 1. 다른 페이지와 겹치는 컴포넌트를 매번 다시 불러와야 한다 header.. 2022. 4. 11.
[리액트] 리액트에서 state를 직접 수정하면 안되는 이유 (데이터의 불변성) state란? state는 컴포넌트 내부적으로 사용되는 값을 말하며 state 값이 업데이트 될때 리액트 전체가 리렌더링이 된다. 리액트에서 state를 직접 수정하는 예제 (잘못된 방법) import React from "react"; class App extends React.Component { constructor(props) { super(props); this.state = { animals: ["cat", "elephant", "dolphin"] }; } // setState()함수 안에서 기존 animals 배열에 "dog"를 직접 추가했다 onClick = () => { this.setState({ animals: ["cat", "elephant", "dolphin", "dog"] }) .. 2022. 4. 8.
[리액트/한줄정리] 단방향 데이터 흐름이란? 단방향 데이터 흐름이란 리액트에서는 데이터는 하나의 방향 즉 위에서 아래로, 부모에서 자식으로 넘겨줘야 한다는 이론. 2022. 4. 8.
[리액트] 스프레드 문법으로 state에 값 추가해주기 1. 스프레드 문법(spread operator)이란? 자바스크립트의 스프레드 문법은 배열이나 객체 앞에 ...을 붙여 안에 있는 모든 요소를 복사해 꺼내주는 문법이다. 일반적으로 요소를 밖으로 꺼내준 후 다른 배열이나 오브젝트에 할당할때 사용된다. 리액트에서 스프레드 문법은 concat 메서드와 같이 state에 값을 추가할때 사용된다. 2. 자바스크립트 스프레드 문법 예시 2.1 배열 const array = [1, 2, 3, 4]; newArray = [...array, 5]; console.log(newArray) // [1, 2, 3, 4, 5] 코드해석 1) array이라는 변수에 배열 [1, 2, 3, 4]가 할당되어있다 2) 스프레드 오퍼레이터(...) 문법으로 array에 있는 모든 값을.. 2022. 4. 8.
[리액트] ref로 리액트의 돔요소 가져오기 ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술과 스파르타코딩클럽 리액트 기초반을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 리액트를 다루는 기술: 5장 ref: DOM에 이름 달기, 8장 Hooks 5.1 ref는 어떤 상황에서 사용해야 할까? 5.2 ref 사용 5.3 컴포넌트에 ref 달기 5.4 정리 8.6 useRef 리액트 기초반 2-10 Ref! 리액트에서 돔요소를 가져오려면? 1. ref란? HTML 웹사이트에서 DOM 요소를 가져와 작업하고 싶을때는 id를 붙여 접근한 후 CSS에서 특정 스타일을 적용하거나 JavaScript로 getElementById와 같은 DOM Selector 함수를 사용해서 DOM을 선택한다. HTML에서 DOM 요소.. 2022. 4. 7.
[리액트/에러해결] Warning: Each child in a list should have a unique "key" prop 해결방법 ⚠️ 에러내용 원문 Warning: Each child in a list should have a unique "key" prop. 해석 리스트 안에 있는 각각의 자식 요소가 유니크한 key를 가져야한다. ❓ 에러발생이유 리액트에서 map을 사용해 리스트를 만들때 각 리스트에 식별자로서 key값을 부여해야한다. 리액트는 key를 사용해서 어떤 요소가 변경되었는지를 파악한다. ❗️ 해결방법 map을 사용해 리스트를 만들때 key값을 부여해준다. 일반적으로 key값으로 id를 많이 사용하지만 key값으로 마땅한 데이터가 없다면 index를 key값으로 지정해줄 수도 있다. index를 key값으로 지정한 예제 import React from 'react'; class RefClass extends React.. 2022. 4. 7.
[리액트/에러해결] reactdom.render is no longer supported in react 18 해결방법 ⚠️ 에러내용 원문 ReactDOM.render is no longer supported in react 18. Use CreateRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. 해석 기존 index.js에서 사용했던 ReactDOM.render라는 코드는 리액트 18 버전에서는 더 이상 지원하지 않기 때문에 ReactDOM.render 코드 대신에 CreateRoot를 사용해라. ReactDOM.render를 사용하면 리액트 프로젝트는 17버전처럼 동작할것이다. ❓ 에러발생이유 리액트가 업데이트 되면서 index.js에서 App 컴포넌트를 렌더링할때 사용하던 ReactDOM.re.. 2022. 4. 7.
[깃] 깃 설치 확인 방법 아래의 코드를 터미널에 입력했을때 깃이 설치 되었다면 깃의 현재 버전 출력된다. git -v git --version 2022. 4. 7.
[깃] 깃 처음시작할 때 반드시 해줘야하는 환경설정 유저이름 설정하기 git config --global user.name 이메일 주소 설정하기 git config --global user.email 터미널에서 사용할 기본 에디터 설정하기 git config --global core.editor vim 2022. 4. 7.
[깃] 깃 커밋 메시지 컨벤션 (깃 메세지 작성법) 커밋 메세지 구조 (commit message structure) 커밋유형: 제목 body Footer 커밋 유형의 종류 feat: 새로운 기능 추가 fix: 버그 수정 docs: 문서 수정 style: 스타일 관련 코드 (코드 포맷팅, 세미콜론 누락, production의 변화가 없는 경우) refactor: 코드 리펙토링 (잘돌아가는 코드를 더 좋은 코드로 만드는 작업 (enhancement) ) test: 테스트코드 커밋 메세지는 영어로 작성한다 문장은 명령어로 작성한다 (과거형 복수형을 사용하지 않는다) 커밋 메세지 구조 1. 제목 (필수) 커밋유형: 뒤에 한칸 띄우고 제목을 적어준다 제목은 대문자로 시작한다 제목에 마침표를 붙이지 않는다 50글자 이내로 작성한다 어떻게가 아닌 무엇과 왜를 설명한.. 2022. 4. 7.
[깃/한줄정리] README.md 파일이란? 프로젝트와 Repository를 설명하는 문서 2022. 4. 7.
[Node.js/한줄정리] nvm이란? NVM(Node Version Manager)란 노드 버전 관리자라는 도구다. 프로젝트마다 서로 다른 버전의 노드가 필요한 경우 nvm으로 노드 버전을 자유롭게 골라 설치할 수 있게 도와준다. 2022. 4. 7.
[깃] 커밋 메세지 작성시 필요한 커밋 유형(prefix) 정리 깃에서 커밋 메세지를 작성할 때는 다른 개발자가 알아보기 쉽도록 커밋 유형(prefix)을 맨 앞에 넣어준다. prefix: 커밋 메세지 내용 이슈번호와 함께 작성할때 #이슈번호 prefix: 커밋 메시지 내용 커밋 유형의 종류 docs : 문서 작업 README.md feat : 새로운 기능 구현 최소 단위 conf : 설정 파일 관련 패키지, 라이브러리 추가 asset : 이미지 소스 추가 design : css 작업 style: 코드 포맷팅 작업 rename : 파일 또는 폴더 이름 변경 remove : 파일 삭제 chore : 주석 변경 및 삭제 refactor : 코드 리팩토링 (성능, 가독성) 의미나 동작에 영향을 주지 않는 상태에서 가독성, 재사용성 또는 구조를 개선하기 위해 현재 코드를 재.. 2022. 4. 7.
[Node.js/한줄정리] nvm에서 사용 중인 노드 버전 바꾸기 nvm use 2022. 4. 7.
[깃] 깃 올바른 사용법 (안좋은 습관) 1. git commit -m “message” 쓰지 않기 플래그를 사용해 바로 메세지를 작성하게 된다면 깃메세지를 대충 작성하는 습관이 생긴다. git commit 후 vim에서 메세지를 작성하자. 2. 깃 메세지를 반드시 영어로 작성 원격 저장소에 올라가는 코드는 전세계에 공유가 되는 오픈소스이기 때문에 깃 메세지를 영어로 작성하자. 3. GUI 대신 CLI 사용하기 GUI(Sourcetree, GitKraken, GitHub Desktop 등)는 확인하는 용도로만 사용하자. 4. git add . 쓰지 않기 모든 파일을 stage에 올리는 깃 명령어 git add . 또는 git add all보다는 파일명을 작성해 커밋해줄 작업단위를 세분화하는 습관을 들이자. (한번에 커밋하지 않기, 커밋할 파일 .. 2022. 4. 7.
[깃/한줄정리] .gitignore파일이란? git이 파일을 추적할 때 어떤 파일이나 폴더 등을 추적하지 않도록 명시해주는 파일 git init 명령어로 프로젝트 버전관리를 시작할때 제외하고 싶은 파일이름을 명시한다 .gitignore 파일 예시 .cache/ dist/ node_modules/ 2022. 4. 7.
[Visual Studio] 비주얼 스튜디오 터미널에서 zsh를 bash로 바꿔주기 (bash를 zsh로 바꿔주기) 1. Terminal > New Terminal > 아래 화살표 클릭 > Select Default Profile 클릭 2. zsh 또는 bash 중에 기본으로 사용하고 싶은 터미널을 선택한다 2022. 4. 7.
[Node.js/한줄정리] 로컬 컴퓨터에 설치된 노드버전을 모두 불러오는 nvm 명령어 nvm ls 2022. 4. 7.
[리액트] styled-components로 리액트 프로젝트에 스타일링 넣기 ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술과 스파르타코딩클럽 리액트 기초반을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 리액트를 다루는 기술: 9장 컴포넌트 스타일링 9.4 styled-components 리액트 기초반 2-8 화면을 예쁘게! - styled-components styled-components란? 컴포넌트 스타일링 기법 중 하나로 자바스크립트 파일 안에 스타일을 선언하는 CSS-in-JS 방식 컴포넌트에 직접 스타일을 입히기 때문에 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다 styled components의 장점 1) 자바스크립트 파일 하나에 스타일까지 작성할 수 있기 때문에 스타일 파일을 따로 만들지 .. 2022. 4. 6.
[깃] pull request란? fork란? ⚠️ 이 포스팅은 핵심 쏙쏙 Git을 공부하고 정리한 블로그 포스팅입니다 ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 3주차 3-2 내 작업을 반영해주시겠어요? - PR 01 3-3 내 작업을 반영해주시겠어요? - PR 02 PR(Pull Request)란? branch에서 작업한 내역을 바로 merge하지 않고, 프로젝트에 내 작업(branch)을 merge해달라고 요청(request)을 먼저 보내는 것 PR을 하면서 작업한 내용에 대해 코드 리뷰를 받을 수도 있고 같이 토론하면서 프로젝트를 개선시킬 수도 있다 프로젝트 기준에 맞지 않는다면 PR은 거부될 수도 있다 PR이 완전히 종료되기 전까지 추가적인 요청이 있을 수 있으므로 PR이 완료되기 전까진 PR 요청을 한 로컬 브랜치를 삭제하면 안된다 .. 2022. 4. 6.