'🔥 Front-End' 카테고리의 글 목록

모던 리액트 Deep Dive로 Next.js 13 변경사항 모던하게 알아보기

2023. 11. 24. 00:13 🔥 Front-End/React

개요 Next.js 13 버전 app router 릴리즈 이후 이후 이전 page router를 썼을때보다 편의사항들이 많아졌다. 더 이상 React Router를 쓰지 않아도 되고, 간편하게 레이아웃, 로딩, 에러 페이지, 404 페이지 처리가 가능하다. 이외에도 서버 컴포넌트 등장 이후 app 디렉토리 내 파일은 기본적으로 서버 컴포넌트로 동작된다. 물론 어디까지나 프레임워크이기에 자유도는 조금 제한되지만 한번 써보면 굉장히 매력적으로 다가올 것이다. 변경사항 라우팅 기존 page 방식 라우팅은 page 중심이었다. 하지만 app 라우팅은 파일 시스템 기반 라우팅이다. Next.js 12 이하: /pages/a/b.tsx Ehsms /pages/a/b/index.tsx는 모두 동일한 주소로 변환된다...

모던 리액트 Deep Dive 후기

2023. 11. 22. 00:06 🔥 Front-End/React

개요 리액트 관련돼서 서칭 하다 보면 한 번쯤 방문해 봤을 법한 블로그를 운영하시는 yceffort(김용찬)님께서 책을 내셨다. 글들이 좋아서 자주 들렀었는데, 책을 내셨다고해서 구매해 봤다. 책을 읽고 느꼈던 점은 React에 정말 Deep Dive 할 수 있다는 것과, 친절한 사수를 옆에 둔 느낌이었다. 대상 독자 사람에 따라 편차가 있겠지만, 자바스크립트와 리액트를 어느 정도 다루지 못한다면 책 내용이 다소 난해할 수 있다. 자바스크립트의 코어한 내용들을 이해하고 있어야 하고, 리액트도 다뤄봤어야 이해가 가는 부분들이 많다. 책 난이도는 입문서보다는 리액트 내지는 프론트엔드 개발자를 위한 중급서 정도로 생각된다. 후기 일단 목차 구성부터 굉장히 세심했다. 리액트에 코어하게 작용되는 자바스크립트 문법..

[Web] 모노레포(Mono Repo)

2022. 12. 6. 18:13 🔥 Front-End/Web

등장 배경 덩어리채 만들던 과거 코드와는 달리 최신 코드들은 전부 모듈화가 되어있다. 모듈화의 이점으로는 여러 가지가 있지만 역시 유지보수와, 재사용성이 가장 큰 이점이다. 코드를 큰 덩어리채 만들어 굴린다면 한 부분을 유지 보수하기 위해 코드 전체를 수정해야 하고, 의존성 파악 또한 복잡해진다. 또한 썼던 코드를 다른 곳에 재활용하기 어려워진다. 사진출처: https://d2.naver.com/helloworld/0923884 멀티레포(multi repo) === 폴리레포(poly repo) 멀티레포란 말 그대로 여러 레포지토리를 만들어 프로젝트를 운영하는 방식이다. 각자 독자적인 레포지토리로 구성되어 있기에 각 팀별 자율성이 보장되고 빠른 개발이 가능한 장점이 있지만, 문제점들도 가지고 있다. 대표적..

[TroubleShooting] onKeyDown, onKeyPress 이벤트 문제

2022. 12. 6. 16:22 🔥 Front-End/TroubleShooting

onKeyDown 이벤트 한글 에러 채팅 기능을 구현하던 중, 채팅을 보내면 채팅의 끝 음절이 한번 더 전송돼 채팅이 두 번씩 전송되는 에러를 발견했다. 영어와 숫자, 특수기호 등을 보내면 정상적으로 전송됐지만, 유독 한글만 전송하면 에러가 발생했다. 구글링을 해보니, onKeyDown 문제였다. onKeyPress를 사용하면 간단히 해결된다는데, onKeyPress는 이미 deprecated된 상태라 쓰기가 싫었다. 좀 더 구글링을 해보니 해결책을 찾았다. 영어, 숫자, 특수기호는 글자 조합이 안 되는 반면 한글은 조합 문자이기에 발생되는 문제였다. 인풋 창에 한글로 onChange가 진행되고 있을때, 글자가 조합 중인지 조합이 끝난 상태인지 컴퓨터가 파악이 안돼 이벤트가 두 번씩 호출되고 있었다. m..

[React] Props, State, 리렌더링 발생 조건

2022. 8. 1. 02:34 🔥 Front-End/React

Props Props란 Properties의 줄임말로, 리액트에서는 속성을 나타내는 데이터로 사용됩니다. props는 상위 컴포넌트에서 하위 컴포넌트의 단방향 데이터 흐름을 갖습니다. props는 하위 컴포넌트에서 값을 직접적으로 수정할 수 없습니다. 즉, props는 👉 컴포넌트가 부모 컴포넌트로부터 받아온 데이터입니다. State State란 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용됩니다. 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 주로 사용됩니다. 프로퍼티(props)의 특징은 컴포넌트 내부에서 값을 바꿀 수 없다는 것입니다. 하지만 값을 바꿔야 하는 경우도 분명 존재하며, 이럴때 state라는 것을 사용합니다. 값을 저장하거나 ..

[JS] ES6

2022. 7. 24. 23:52 🔥 Front-End/JavaScript

ES(ECMA Script) ECMAScript(ES5나 ES2015의 ES는 ECMAScript의 줄임말이다.)는 Ecma 인터내셔널에서 정의한 ECMA-262 기술 규격에 정의된 표준 스크립트 프로그래밍 언어입니다. 간단히 말하자면 표준화된 스크립트 언어입니다. 대중적으로 유명한 ES6의 경우 ES5 이하 명세에서 문제가 되었던 부분들이 해결되었고, 기존 코드를 더 간결하게 작성할 수 있는 새로운 문법이 추가되면서 더 가독성 및 유지 보수성이 향상되었습니다. 그 덕에 웹에서 사용하는 자바스크립트 유명 라이브러리들(lodash, React, Vue 등)의 개발 환경도 ES6로 바뀌었습니다. 따라서 최신 자바스크립트 라이브러리들도 ES6를 사용할 때 훨씬 편리하게 사용할 수 있습니다. ES6에서 새로 추..

[JS] TDZ

2022. 7. 21. 02:08 🔥 Front-End/JavaScript

TDZ(Temporal Dead Zone)는 무엇인가? const 변수를 선언하고 초기화하면 변수에 접근할 수 있습니다. 예상한대로 동작합니다. const white = '#FFFFFF'; white; // => '#FFFFFF' 이번에는 선언 전에 white 변수에 접근해보도록 하겠습니다. white; // throws `ReferenceError` const white = '#FFFFFF'; white const white = '#FFFFFF' 구문 전 줄까지, white 변수는 TDZ에 있습니다. TDZ에 있는 white 변수에 접근하게 되면 , ReferenceError: Cannot access 'white' before initialization 자바스크립트 에러가 발생합니다. TDZ의 영향을..

[JS] 실행 컨텍스트, 호이스팅, 함수 선언문과 함수 표현식

2022. 7. 21. 01:40 🔥 Front-End/JavaScript

실행 컨텍스트(Execution Context) 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이를 콜스택에 쌓아 올립니다. 실행 컨텍스트는 전역공간이 생성될 때, 함수가 호출될 때 생성됩니다. 실행 컨텍스트와 콜 스택 예제 코드 실행시, 전역공간이 활성화되면서 전역 컨텍스트가 생성되고 함수 호출 순서대로 콜스택에 실행 컨텍스트가 쌓이는것을 확인할 수 있습니다. 실행 컨텍스트가 담고 있는 정보 Variable Environment environmentRecord (snapshot) : 현재 컨텍스트 내의 식별자들에 대한 정보 outerEnvironmentReference (snapshot) :..

티스토리툴바