분류 전체보기
[React/state/React상태관리] TodoList 삽질하기 2
클릭시 체크리스트 제거하기 HTML 태그의 내부기능인 onChange를 이용해서, check가 됬을 때 함수를 발생시켜줬다. 그래서, checkHandler에 idx를 넘겨주고,checkedItem["idx"]값을 체크가 되었다면 true로 만들어주고, filter를 이용해서 false인 것들만 남기는 형식으로 구현을 하였습니다. 코드로 보시죠! const checkHandler = (idx) => { checkedItems[idx] = !checkedItems[idx]; setItems([...items.filter((item) => !checkedItems[item.id])]); setCheckedItems([...checkedItems]); }; //...생략... {items.map((todo, ..
[React/State/React상태관리] React TodoList로 삽질하기
ㅇ정말 "간단"하게 하고 끝낼 생각이었던 TodoList가 생각보다 , 생각하게 된 것이 많아서 따로 글을 적게 됩니다. 3가지에 대해서 간단하게 기록하고 넘어가려고 합니다. React의 map 함수를 이용했을 시, Key의 re-rendering React의 Component의 흐름 React state의 불변성과 filter,map 등의 함수형 프로그래밍 TodoList 일정관리 어플리케이션입니다. 버튼을 클릭하거나, 옆에 체크박스를 클릭해서 사라지게 하거나, 버튼을 클릭해서 없애는 등 다양한 형태로 구현할 수 있습니다. 저는 CheckBox형태로 클릭하면 하나씩 뿅뿅 사라지는 형태로 구현했습니다. 기능 생각하기 사실, 생각할 것도 없습니다. 체크박스를 클릭하면 , 없어지면 됩니다. 간단한 기능입니다..
[React/style/Basic] React Component에 스타일 적용하기
Style 적용 웹 문서에서 스타일을 적용하기 위한 방법은 1가지 밖에 없다. "CSS"를 적용해줘야한다. 하지만, 이 CSS를 "작성하는 방법"자체가 엄청 많아서, 우리에게 웹 스타일을 하기위한 방법이 아주 많아보일 뿐이다. 크게 3가지 방법이 있다. HTML에 직접적으로 적용하는 Inline-style , 태그를 이용하는 방법,link 태그를 이용해서 css파일을 따로 작성하는 방법이 있다. JS에서 CSS를 적용하는 방법도 이 HTML에 CSS를 적용하는 방법 3가지를 "JS로 DOM객체 컨트롤"할 뿐, 똑같다. 예를들어, DOM 객체 안에 Style ={}식으로 주는 방법은 태그에 직접적용한다는 관점에서 inline-style이라는 점에는 변함이 없다. 보통은 class,id를 통해서 CSS Fi..
[SSR/CSR/Rendering] SSR과 CSR에 대해서
SSR(Server Side Rendering) SSR은 서버가 "모든 데이터"가 들어가있는 완벽한 (CSS,IMG 등) 서비스 페이지를 구성하여, 사용자에게 바로 보여줄 수 있습니다. 서버를 이용해서 페이지를 구성하기 때문에, CSR보다 페이지를 구성하는 속도는 늦어지지만(JS파일을 뒤늦게 받아오기 때문) , 사용자에게 보여주는 콘텐츠의 구성이 완료되는 시점은 빨라집니다.(즉, 최초 로딩이 빠르다는 장점이 있습니다). 무엇보다, 완성된 HTML을 이용하기 때문에, SEO 최적화 측면에서 유리합니다. 또, 네트워크 환경이 원할하지 않다면 일반적으로 Server는 고성능일 확률이 높고 , 각각의 페이지를 나눠서 주기 때문에 SSR이 유리합니다. 하지만, 매번 다른 페이지를 이동하거나, Interaction..
[JS/Node/BackEnd] NodeJS에 대한 소개
Node JS 공식 홈페이지의 말을 빌려오겠습니다. 무려 Offical이니까요! Node JS는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. 음, 모르겠습니다. 런타임.. 우리나라 말로 실행? 뭔가 애매합니다. Node JS의 실체 Node JS는 V8 엔진을 똑 떼와서, 어떤 플랫폼이든 JavaScript를 이용해서 프로그래밍 할 수 있게 만든 "개발환경"이라고 생각하면 될 것 같습니다.(운영체제와 같은) 주로 , 웹 서버에 이용되어집니다. 사실, Backend를 JavaScript로 하고 싶어서 만든 것도 , 틀린 말은 아닙니다. 왜냐하면 공식 홈페이지도 아래와 같이 자세하게 안내하고 있습니다. 비동기 이벤트 주도 JavaScript 런타임으로써 Node.j..
[웹 통신/Protocol/HTTP] 웹 통신과 HTTP에 대해서
Node JS 글을 곧 업로드하기전, 웹 서버에 대한 기본적인 지식을 업로드합니다. 사실, 서버는 "통신"이 기본이기 때문에, 다양한 Computer Network 지식이 필요하지만 항상 "필요한 지식"을 습득하고 바로 적용시키는 인재가 되기 위해서, 필요한 정도까지 , 깊이감있게 해보도록 하겠습니다! HTTP (HyperText Transfer Protocol) HTML 문서를 주고 받기위해서 정의된 통신규약입니다. 웹에서 이루어지는 모든 데이터교환의 기초이고, 클라이언트 -서버 모델을 기본으로 합니다. "Client(브라우저) - Server(웹 서버) 사이에서 이루어지는 데이터 교환에 대한 약속" 이라고 생각하면 쉬울것 같습니다. Server - Client 모델 Client 저는 태어날 때 부터,..
[React/flow/JS/Basic/hook] React의 Component의 흐름(Flow)
Component의 흐름?? 프론트엔드에서는 "비동기"함수가 일상적입니다. 예를들어, addEventListener도 비동기함수이고, setInterval과 같은 이벤트 루프도 다 비동기 함수입니다. 즉, 나의 코드의 순서와 실행순서가 다르다는 이야기이고, 논리는 맞지만 실행순서가 의도와 다르게 될 수 있습니다.(생각보다 빈번하다) 따라서, React에서는 Component 간의 "흐름"을 잘 파악하는게 에러를 발생시키지 않을 수 있습니다. React LifeCycle이라는 용어가 따로 있을정도로 , React에서는 이러한 흐름을 잘 제어하는게 ,프로그래머의 중요한 역량 중 하나입니다. Like버튼 예제로 알아보자 Like 예제를 조금 변형해서 , Like 버튼을 누르면 , "좋아요를 눌렀어요!"라는 문..
[React/Basic/Component/State] React의 State
React는 Component로 이루어져 있다. React는 JSX 문법을 이용해서 ,다양한 HTML 태그들을 가지게 되었습니다. 그리고 , 그 Element(HTML태그)들의 모아 놓은걸 하나의 컴포넌트라고 합니다. React에서는 이 Component가 1개의 최소 단위이며, 기능적인 단위입니다. 쉽게 생각하면, return문이 있는 JS 모듈 한 개라고 생각하면 됩니다. React Component의 데이터 관리 React의 장점 중 하나인, 실시간 렌더링은 이벤트 루프와 같은 비동기 함수들과 함께 썼을 때 문제가 발생합니다. 이벤트는 "비동기"이므로, 이벤트가 실행이 되었을 때, 다시 딱 렌더링을 해줘야 했습니다. 즉 , 이벤트 발생시 마다 또 Render함수를 일일이 적어넣어줘야 했고, 그 반복..