본문 바로가기

전체 글171

React Server Components - How and Why You Should Use Them in Your Code(2) Limitations of React Server Components Can't add any user interactivity to the server components like event handlers or react hooks Can't use Browser Web API like localstorage, bluetooth, web USB, and so on. Everything related to client interactions must continue to use client components. How to Use Client & Server Components Together Server components can import and render client components but.. 2023. 11. 21.
How to Improve Your ReactJS Code - Tips for Code Readability and Performance 1. Use Constants : 상수 사용하기 자바스크립트에서는, const 키워드를 통해 상수를 선언할 수 있다. 이것은, 같은 값을 재선언해주는 것을 방지해준다. 그래서 상수는 API keys나, 다른 비슷한 values를 저장하는데 유용하다. (API keys, URLs, Content) 모든 리액트 프로젝트에서, strings(content)을 하드코딩하는 건 지양해야한다/피해야한다. 이렇게 하면 UI, data, content를 서로 구분해줘서 프로젝트를 좀 더 유지보수성, 가독성, 확장성을 더 좋게 해준다. 많은 사이트들이 다양한 언어를 지원한다. 그래서 각각의 언어에 맞는 상수 파일이 있을 것이다. 상수 파일을 만드는 방법: 상수는 단순히 keys & values가 있는 자바스크립트 객체이.. 2023. 11. 19.
노션을 데이터베이스로 사용하는 포트폴리오 사이트 만들기(1) 올해 여름에 이력서와 포트폴리오를 만들 때, 뭔가 색다른 포트폴리오를 만들고 싶어서 고민을 하다가 만들었던 개인 포트폴리오 사이트가 있습니다. 그렇게 완성이 되어 잠깐 세상 구경을 하고 리팩토링도 안 하고, 프로젝트 업데이트도 안 한 상태로 깃헙 레포지터리 구석에서 먼지가 쌓여가고 있었습니다. 다시 돌아와서 현재, 이력서와 포트폴리오를 새로 만들고 있습니다. 포트폴리오가 내용이 업데이트가 안되어 있어서 이번에 다시 꺼내오게 됐습니다. 이걸 만들 당시에는 모든 내용들을 하드코딩했었는데, 내용을 수정하려는 현재, 너무 귀찮고, 불편하고, 가독성도 떨어지고.. 여러모로 하드코딩은 문제가 많아 보였습니다. 하지만 현재의 저는 more-than-log라는 아주 멋진 사례가 있었기에, 데이터베이스로 노션을 쓰면 정.. 2023. 11. 17.
Is Your Code Slow? Avoid These 19 Common JavaScript and Node.js Mistakes ✔️ 읽기 전에 이 글은 제가 기록용으로 영어 원문을 요약해놓은 글 입니다. 설명이 부족하다고 느끼신다면, 링크를 통해 원문을 참고해주시면 좋을 것 같습니다. 1. Improper Variable Declarations and Scope => Declare variables locally inside functions whenever possible 2. Inefficient DOM Manipulation const ul = document.getElementById('list'); for (let i = 0; i < 10; i++) { const li = document.createElement('li'); li.textContent = i; ul.appendChild(li); } it is bette.. 2023. 11. 16.
React Server Components - How and Why You Should Use Them in Your Code(1) You can... Learn exactly what React Server Components (RSC) are, How RSC work, What problem RSC solve, Difference between React Server Components(RSC) and Server Side Rendering (SSR). React is an open source JS based library that helps web & mobile developers build applications that use a component-based architecture. state : the components' private data props : a way to pass data across other c.. 2023. 11. 16.
[ JavaScript ] 데이터 Map 데이터 구조로 사용하기 이번에 우테코 프리코스 과제를 하면서 데이터 구조에 대해 고민을 하는 기회가 있었다. 그리고 새삼스럽지만 자바스크립트를 쓸 때는 JSON 형식으로 데이터를 관리한다는 걸 의식하게 됐다. 하지만 JSON 형태 말고, Map구조로 이번엔 데이터를 관리하기로 했다. 특별한 이유는 없고, 최근에 Map에 대해 공부하고 있어서 좀 더 활용해보고 싶었다. 이 오류가 어디를 나타내는 건지 정말 한참이나 해맸었던.... ^^ The error message you're encountering indicates that you're trying to destructure a non-iterable object. In JavaScript, objects or values can be iterable, meaning the.. 2023. 11. 15.

티스토리툴바