Written by Jieun

👩🏻‍💻 내 마음대로 Today I Learned

React, Next

팀프로젝트를 하던 중 이상한 현상을 겪게 됐는데 onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); handleAddMeaning(); } }} 한글을 입력하고 엔터를 누르면 끝글자가 자꾸 중복 출력되는 현상이 발생했다. 근데 또 영어는 괜찮았다 (?) 지피티를 괴롭혔는데 이제는 사용하진 않지만 작동은 되는 onKeyPress를 알려주길래 그냥 그걸로 사용하려고 했다. vsc에 코드를 작성하면 onKeyPress가 취소선이 되어있어서 찝찝해하던 참에 !e.nativeEvent.isComposing 코드를 발견했다ㅜㅜ onKeyDown={e => { if (e.key === 'Enter' && !e.nativeEvent.isComposing) {..

2023. 5. 23.

React, Next

1. Redux 앱 전체 상태를 (쉽게..?) 관리하기 위한 라이브러리 리액트는 프로젝트 규모가 커질 수록 컴포넌트 개수도 많아지고 관리해야 하는 state도 많아지고 복잡해진다. 그래서 사용하는게 상태 관리 라이브러리인 Redux 🔎 상태(state) 상태는 컴포넌트 내부에서 변할 수 있는 값, 데이터를 말한다. 상태관리는 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유한다. 2. 언제 Redux를 사용해야 할까? - 앱 전체 상태 관리가 필요할 때 - 복잡한 비동기 처리가 있는 상태 관리가 필요할 때 - 앱의 상태가 복잡하여 체계적으로 관리하고 싶을 때 - 상태관리 패턴을 도입하여 여러 개발자와 협업하고 싶을 때 3. Redux 3가지 핵심 원칙 1. Single s..

2023. 5. 18.

React, Next

1. SPA(Single Page Application) 이란? 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식 (모바일 앱 같은 경험을 느낌) 여러 페이지를 하나의 앱의 구성요소로 보고 여러 페이지 간의 스타일, 컴포넌트를 재활용한다. 자바스크립트만을 활용해 전체 페이지를 만들기때문에 첫 요청 시 빈페이지를 받게 된다. 2. SPA 단점 HTML은 비어있기 때문에 첫 화면 로딩시간은 다소 길 수 있으며, 하나의 자바스크립트 앱을 전송 받기때문에 코드가 많아질수록 로드 속도가 느려진다. MPA방식보다 검색엔진 최적화(Search Engine Optimization)에 불리하다. 🔎 MPA(Multi Page Application) 서버에 미리 여러 페이지를 두고, 유저가 네비게이션 시 요청에 적합한 페..

2023. 5. 10.

React, Next

👉 노마드코더 To Do List 영상 참고👈 function App() { const [toDo, setToDo] = useState(""); const onChange = (event) => setToDo(event.target.value); console.log(toDo); return ( ); } 1. useState를 사용해서 toDo 상태 변수를 선언해준다. (초기값은 빈 문자열) 2. onChange 이벤트 핸들러는 input 태그에 값을 입력할 때 마다 onChange() 함수가 호출 된다. 3. 정의한 onChange 함수는 event 객체의 target 속성을 사용하여 발생한 요소를 가져오고 value로 그 요소의 값을 가져올 수 있다. 4. setToDo 함수는 toDo의 상태 변수를..

2023. 5. 9.

React, Next

1. styled-components 자바스크립트 파일 안에 스타일을 정의하고 React 컴포넌트처럼 활용 별도의 CSS 파일을 만들지 않고 하나의 파일 안에 스타일을 관리하고 싶을 때, 스타일 코드와 컴포넌트 코드 간 결합을 나누고 싶을 때 유리 Sass 문법 활용 가능 이것을 CSS-in-JS 라고 한다! 2. 설치하기 npm i styled-components npm i styled-components@latest 나는 npm i styled-components로 설치하면 Cannot read properties of null (reading 'edgesOut') 에러가 났는데 아래 처럼 @latest 를 붙여주어 최신버전으로 설치했다. 설치가 다 되면 package.json에 styled-comp..

2023. 5. 8.

React, Next

1. 이벤트(event)란? 웹 브라우저가 알려주는 HTML 요소에 대한 사건 발생을 의미하며 버튼을 클릭하거나, 메세지 입력, 스크롤 등의 행동을 말한다. 이렇게 유저의 행동에 의해 발생할 수도 있고, 개발자가 의도한 로직에 의해 발생할 수도 있다. https://developer.mozilla.org/ko/docs/Web/API/Event Event - Web API | MDN Event 인터페이스는 DOM에서 발생하는 이벤트를 나타냅니다. developer.mozilla.org 2. 이벤트 처리(핸들링) 방법 핸들링은 다루다, 취급하다, 처리하다라는 뜻으로 이벤트가 발생했을 때 그것을 처리하는 것, 즉 웹에서 발생하는 사용자의 행동을 처리하는 것을 말한다. React에서 이벤트 처리하는 방법은 별도..

2023. 5. 6.