본문 바로가기

전체 글51

img [React] setState를 해도 렌더링이 안되는 이유 안녕하신가 ? 오늘(일요일)은 회사 앱에 추가될 기능을 연습하기 위해 Google Form을 클론 코딩하고 있었다. 위 프로그램을 코딩하면서, 질문을 여러 개 만들었다가 삭제하는 기능을 만들었다. 딜리트. 말 그대로 추가한 걸 삭제하는 기능인데, 실행되는 index를 받아서 해당 배열에서 그 Index를 지우는 거다. 문제 없이 생긴 기능. 허나 전혀 작동하지 않는다. 정확하게 말하면 setState로 인해 state 값이 변경되었는데도, 화면이 리렌더링 되지 않는다. 뭐야 !? 그래서 일단 다른 스테이트를 선언해서 setSurveyList 밑에 setCount(count+1) 막 이렇게 선언해봤다. 그러면 렌더링 된다. shit, 대체 뭐지하고 구글링 해보니 내 멍청함을 알게 되었다. setState를.. 2022. 9. 26.
img SSR(Server-side Rendering)이란 무엇인가. SSR 이란 ? SSR이란 렌더링의 방식이다. 렌더링이란, 서버로부터 요청해서 받은 내용을 브라우저 화면에 표시해주는 것이라고 이전에도 말했다. 알겠나 ? CSR vs SSR CSR은 내 클라이언트에서 로직을 수행하는 반면, SSR은 서버에서 모든 것을 처리한다. 페이지를 이동할 때마다 서버에 데이터를 요청하고, 서버에서는 모든 로직을 처리하고 데이터를 클라이언트에게 주는 것이다. SSR이란 Server, 즉 서버에서 렌더링 하는 것이다. 우리가 서버에 데이터를 요청할 때 마다, 서버는 완성된 페이지를 보내주고, 클라이언트는 그것을 받아 렌더링 한다. 두 개의 비교를 이쁘게 한 사진을 찾아서 첨부한다. 이전 글과 같은 출처의 SSR 버전의 사진도 첨부했다. 그렇다면 각광받는 SSR의 장점은 대체 무엇일까.. 2022. 9. 21.
img CSR(Client-side Rendering)이란 무엇인가. CSR 이란 ? CSR이란 렌더링의 방식이다. 렌더링이란, 서버로부터 요청해서 받은 내용을 브라우저 화면에 표시해주는 것이다. 알겠나 ? CSR 이란 ? 2트 그 정도로는 알 수 없다. 그렇다면 CSR이란 무엇인가.... CSR을 알기 전에 SPA부터 알아야한다. SPA vs MPA SPA란 Single Page Application. 즉 한 페이지로 구성된 앱이라는 뜻이다. React 개발할 때 보면 html 파일이 한 개다. 왜냐 ? SPA, Single Page Application 이기 때문이다. 이 하나의 html 파일에서 모든 정보를 사용할 수 있는 것이다. 일종의 웹 애플리케이션 아키텍쳐라고 볼 수 있다. 반대는 MPA가 있다. 뭐 똑같은데 single이 아니라 multi인 것이다. 과거에는.. 2022. 9. 19.
img 아토믹 디자인 패턴 - 모두 재활용을 합시다 안녕하신가 난 프론트엔드 개발조무사 하상원이다 ~ 회사에서 아토믹 디자인 패턴을 이용한 개발을 하고 있다 후후 과연 아토믹 디자인이 뭘까 ? 아토믹 디자인이란, 아토믹하게 디자인 하는 것이다 !.. 혹은 내가 이해한 바는 UI를 나누는 방법 같은 느낌이다. page(Next라 페이지는 따로), templates, organisms, molecules, atom 이렇게 조각조각 쪼개서 UI를 구성하는 것이다 ! 나는 UI를 위의 사진처럼 page는 가장 크고, - 링크 단위 templates은 한 페이지를 구성하며, - 한 화면 단위 organisms은 템플릿을 크게 분리하고, - 화면의 큰 요소들 molecules는 한 가지 목적을 가지며, - 특정 모달창, 리스트 atom는 최소의 기능을 단위로 나누.. 2022. 9. 6.
img 최초의 한글 프로그래밍 언어 씨앗 오늘은 회사에서 알 수 없는 에러에 4시간이나 버렸다. 그것도 온 몸을 비틀어가며 진심을 다해 버렸다. 알고보니 변수명이 잘못되었던 것 처음 코딩할때는 누가 이런 실수를 하나 싶었지만, 막상 디자인 패턴 뭐 들어가고 컴포넌트가 수십개가 되니까 변수명의 가독성, 컨벤션 등의 중요함을 알게됐다.. 그래서 혹시 변수명을 한글로 하면 안되나 싶어서 구글링을 하는데, 뭔 한글 프로그래밍 언어가 있다고 하길래 알게 됐다. 최초의 한글 프로그래밍 언어 "씨앗" 이름도 멋있다. 영어로 하면 The Seed. 영어로 안 만들려고 한글화한거라 의미없지만.. 하여튼 재밌어보여서 더 구글링 하니까 씨앗에 대해 잘 정리된 블로그를 찾아가지고 재밌게 구경했다. 일단 내가 이 언어에 대해 평가하기엔 지식도 부족하고 근본도 없다. .. 2022. 8. 29.
img [React] Context API + useReducer 로 전역 상태 관리 하기 useReducer 여러 state를 초기 값으로 가질 수 있고, setState 대신 state를 바꾸는 함수와, state의 초기 값이 들어간다. import React, { useReducer } from 'react'; const exampleInitialData = { number: 0, text: '기본 값', }; const exampleReducer = (state, action) => { // eslint-disable-next-line default-case switch (action) { case 'UP': { return { ...state, number: state.number + 1 }; } case 'DOWN': { return { ...state, number: state.n.. 2022. 8. 23.
반응형