frontend (12) 썸네일형 리스트형 [React] React Hook 사용하기 - useMemo, useCallback 깃헙 TIL 레파지토리에 올릴까 하다가 내용이 길어질 것 같아서 그냥 블로그에 올리기로 결심했다 . . . TIL을 마크다운 언어로 작성하다보니, 적은 내용이더라도 시간이 엄청 소요된다 ㅜㅜ 사실 블로그 포스팅도 좀 귀찮은데 그래도 안 쓰면 또 까먹을 것 같으니 포스팅해본다! 사실 그렇게 대단한 내용은 아니라서 블로그에 올릴 거리가 되나 싶긴 하지만 그래도 뭐든 과정에서 배운 점이 있다면 기록해둔다고 나쁠 것 없을 것 같다 우선 이번에 보여줄 코드는 Next 스터디(라고 하기에는 사실상 React 스터디)로 간단한 TODO 앱을 만들고 있는데, 이 과정에서 렌더링이 너무 무분별하게 발생하는게 꽤 거슬렸다. 따라서 기능을 더 추가하기 전에 React Hook을 사용하여 렌더링 횟수를 조금 줄여보았다. 우선.. [Web] SSR(Server Side Rendering)과 CSR(Client Side Rendering) 정말 오랜만에 올리는 포스팅 . . . . 그간 이런저런 일들이 있었는데, 일단 멋사 활동을 계속 병행하다보니 노션에 너무 익숙해져서, 그동안 내 개인 노션에만 기록하고 블로그는 까맣게 잊어버렸던 것 같다🥹 앞으로 블로그 포스팅도 다시 신경써야지 .. 여름방학에 멋사 10기의 공식적인 활동이 마무리되고, 남은 기간동안 교내 프론트엔드 트랙 부원들과 Next.js 스터디를 진행하고 있다. 다음 포스팅에서 관련 글을 정리하겠지만, 일단 간단하게만 설명하자면 기존에 클라이언트 사이드 렌더링만 지원하던 React와 달리 Next.js는 클라이언트 사이드 렌더링, 서버 사이드 렌더링을 적절히 병행하여 사용할 수 있다. 이러한 Next.js를 잘 활용하기 위해서는 기본적으로 SSR과 CSR의 차이점을 잘 이해하고 .. [JavaScript] 이벤트 함수를 callback 함수로 호출 지난번 학교 수업에서 웹 서비스 개발 프로젝트를 진행했는데, 해당 프로젝트 과정에서 자바스크립트 파일 내에서 특정 엘리먼트에 이벤트 함수를 지정하는 코드를 작성했다. let new_input = document.createElement('input'); new_input.setAttribute("id", theater); new_input.setAttribute("type", 'radio'); new_input.setAttribute("value", theater); new_input.setAttribute("class", 'theater_city'); new_input.setAttribute("name", 'theater_city'); new_input.onclick = theaterCity_onCli.. [React] 여러 개의 input 태그 관리와 setState 벨로퍼트 리액트 튜토리얼 input 태그 부분(https://react.vlpt.us/basic/09-multiple-inputs.html)을 공부하는 중에 이해가 안 되는 부분이 있었다. 특히 const onChange = (e) => { const { value, name } = e.target; setInputs({ ...inputs, // 기존의 input 객체를 복사 [name]: value // name 키를 가진 값을 value로 설정 }); }; 이 부분을 이해하기가 어려웠다. ☝ 첫 번째로는 ...inputs ✌ 두 번째로는 [name]: value 부분이다. 강의 자료에 달린 사람들의 댓글과 구글링을 통해 내 나름대로 해당 내용들을 정리할 수 있었다. ☝ Spread(...) 연산자 우.. [CSS] display: table 속성, 그리고 margin collapsing 이번 학기에 새로 들어간 프로젝트에서 프론트엔드 개발을 리액트로 진행하기로 결정이 나서, 어제부터 허겁지겁 리액트 공부를 시작했다. 리액트 공식 문서로 틱택토 게임 튜토리얼부터 진행하면서 리액트를 손에 익히는 중이다. 개강하고나서 웹 개발 쉰지도 꽤 돼서 사실 html, css, js 부분들도 한번씩 복습하면서 진행하면 좋겠다 싶었다. 그래서 리액트 외에 다른 부분에서도 공부 중에 새로 알게된 내용들도 기록하고자 한다 ❗ 튜토리얼 진행 중에 display: table; 속성을 발견해서, 이와 관련해서 서칭을 좀 했다. 무엇보다 table 속성은 여태껏 거의 써본 기억이 없어서 나한테는 생소한 부분이였다. . . 이 table 속성은 어떨 때 어떻게 사용하는지, 그리고 이 속성에 대해 서칭하다가 새로 알게.. [JavaScript] 06 Array 이번 게시글에서는 배열(Array)을 다뤄 볼 것이다. 코드 상에서 데이터를 다룰 때, JS 뿐만 아니라 다른 언어들에서도 이 배열을 많이 사용하게 된다. 자바스크립트에서 배열 또한 하나의 객체로서, 이 Array 객체 내부에는 여러가지 필드변수와 메소드들이 정의되어 있다. 배열을 사용할 때는 Array 객체의 필드변수 및 메소드들이 정리된 API를 익히고, 각각을 잘 활용할 수 있어야 한다. 1. Declaration 배열을 선언하는 방법에는 크게 두 가지로 나눌 수 있다. const arr = new Array(); const arr = []; 2. Index Position 다른 프로그래밍 언어들과 마찬가지로, 인덱스(index)를 통해 배열 요소에 접근할 수 있다. const fruits = ['.. [JavaScript] 05 Objects 이번 게시글에서는 자바스크립트 테이터 타입중 하나인 오브젝트를 다뤄볼 것이다. 우선, 오브젝트는 서로 연관된 데이터나 기능을 모아두는 컬렉션이며, 자바스크립트의 거의 모든 객체들은 Object의 인스턴스이다. 이러한 오브젝트는 key - value 쌍의 집합체로 구성된다. ( ex. object = { key : value }; ) Objects One of the JavaScript's data types. A collection of related data and/or functionality. Nearly all objects in JS are instances of Objects. 1. 오브젝트 생성 이러한 객체를 생성하는데에는 크게 두 가지 문법이 존재한다. 첫 번째로는 object litera.. [JavaScript] 04 Class 이번 게시글에서는 클래스에 대해 다뤄볼 것이다. 이미 JAVA를 배우면서 어느정도 익혔기 때문에, 너무 세세하게 다루진 않겠다. Class - Template Object - instance of a class 1. Class Declarations class Person { // constructor constructor(name, age) { // fields this.name = name; this.age = age; } // methods speak() { console.log(`${this.name}: hello!`); } } const min = new Person('min', 22); console.log(min.name); // min console.log(min.age); // 22 mi.. 이전 1 2 다음
