FE 개발일지

#1 들어가기 안녕하세요. 오늘은 SSR 환경에서 쿠키를 넣는 것에 대해서 포스트를 써보려고 합니다. Next.js를 쓰면서 SSR 환경에서는 정말 많은 것들을 더 고려해줘야 하는구나를 많이 느끼는 것 같습니다. #2 이슈 및 해결 저희는 프로젝트 접근권한과 관련하여 사모 기능을 추가하였습니다. 사모 기능으로서 클라이언트에 프로젝트 접근권한 처리를 서버에서 해주었지만, 서버 환경이기 때문에 쿠키를 알 수가 없습니다. 즉, SSR 환경에서는 쿠키값을 모르기 때문에 따로 설정을 해주어야 합니다. let sessionId; if (isServer(ctx)) { // 서버 환경일 때 쿠키를 심어줌 const cookie = getCookie(ctx); // defaults : 모든 axios 요청 시에 쿠키 데..

#1. 2021년 회고 안녕하세요. 이렇게 2021년이 마무리 되고 1월1일 새해를 맞이했습니다. 다들 새해 복 많이 받으시고, 이번년도에는 이루고 싶은 목표를 이루고 몇 단계 더 성장하는 한 해가 되길 바라겠습니다. 새해를 맞아 많은 경험이 있었던 한 해를 정리하고 2022년에는 어떤 마음가짐, 목표로 보내면 좋을까 생각해보는 시간을 갖으면 좋을 것 같아 이렇게 글을 작성하게 되었습니다. #2. 신입 개발자로서의 첫 취업 2021년의 가장 큰 목표는 신입개발자로서의 '성장'이였습니다. 국비지원을 마무리하고 취업하기까지의 과정이 결코 순탄하진 않았지만 결국 스타트업 취업에 성공할 수 있었고, 신입 개발자로서 첫 발걸음을 내딛게 되었습니다. 아직도 첫 출근할 때가 생각납니다. 사수가 없다는 것을 알고 있는..

#1 들어가기 안녕하세요. 오늘은 useState로 여러개의 input 상태를 관리하는 법을 포스트 하도록 하겠습니다. 저는 내 정보관리 페이지를 작업을 하고 있는데요. 내 정보관리는 워낙 관리해야 할 내용들도 많고 그만큼 변경도 많이 일어나는 페이지입니다. 그에 따라 여러 개의 iuput창을 활용하게 되는데, input 상태가 늘어날때마다 useState와 onChange 핸들러를 만드는 작업이 너무 싫었습니다. 그래서 이를 효율적으로 관리하는 방법에 대해서 고민하게 되었습니다. #2 과정 기존에 이런 코드로 변경되는 사항에 대해서 관리를 하고 있었습니다. const [corporationName, setCorporationName] = useState(""); const [corporationNumb..

#1 들어가기 안녕하세요. 오늘은 react-router-dom으로 라우터를 구성하던 중, 문제가 발생한 상황에 대해서 포스트를 써보도록 하겠습니다. 저는 개인적으로 사이드 프로젝트로 간단하게 페이지를 만들며 작업을 하고 있었습니다. 페이지 전환 작업을 react-router-dom의 도움을 받았구요. react-router-dom은 리액트의 화면 전환을 도와주는 역할을 하는 녀석이죠. 페이지의 로딩 없이, 페이지에 필요한 컴포넌트를 불러와 렌더링 하여 보여주도록 도와줍니다. #2 문제 혹시, Route 설정을 다하고 url은 정상적으로 변경되지만, 렌더링이 되지 않는 현상을 겪어본 적이 있으신가요? 저는 react-router-dom의 도움을 받아, 페이지에 따른 각각의 컴포넌트를 불러와 렌더링하여 페..

#1 NextJS Next.js는 따로 설정을 해주지 않고 SSR, SEO부터 Javascript, Typescript까지 생산에 필요한 많은 기능들을 제공합니다 #2 Pre-Rendering 기본적으로 Next.js는 모든 페이지를 미리 렌더링 합니다. 클라이언트 측 Javascript에서 모든 작업을 수행하는 대신 각 페이지에 미리 HTML을 생성합니다. 사전 렌더링은 더 나은 성능과 SEO의 이점을 가져올 수 있습니다. 이렇게 만들어진 HTML은 해당 페이지에 적은 자바스크립트 코드와 연관되는데, 페이지가 브라우저에 로드될 때, 해당 자바스크립트 코드가 작동하고 완전한 인터렉티브 페이지가 되도록 만듭니다. 이를 Hydration이라고 합니다. #3 두 가지 형태의 Pre-Rendering 1. St..

이렇게 또 useState를 주제로 글을 쓰게 되었습니다. 한번 더 공식문서의 중요성을 느끼고 정리하면 좋겠다 생각되어 이렇게 글을 작성하네요 이번에는 제가 page 단위로 계속해서 10개의 데이터들을 불러와야 하는 작업을 하고 있었습니다. 근데 0페이지에서 1페이지의 내용들까지는 불러오는데 그 이후의 데이터들을 못불러오는 것입니다. 이런식으로 0에서 1로는 업데이트가 되었는데 1에서 머물러 있는 상태가 계속 되었습니다. count를 업데이트 하는 useState를 만든다고 생각했을 때, 이렇게 배웠고 실제 이렇게 사용했었으니까요 const addButton = () => { const [count, setCount] = useState(0); const onClick = () => { setCount(..

안녕하세요. 오늘은 useState로 컴포넌트 값 다루는 주제에 대해서 얘기를 해볼까 합니다. 다들 useState로 컴포넌트 다루는데에 있어 아직 미숙한 분들도 이미 익숙해서 잘 다루시는 분들도 많다고 생각이 듭니다. 아직 저는 미숙한 쪽에 속하는 것 같습니다. 이번 개발 이슈는 새로고침 버튼을 눌렀을 때 api를 받아오는 로직이였습니다. 똑같은 로직으로 컴포넌트에 값을 잘 넘겨줬고, 실행도 잘 되었습니다. 그러나 한쪽은 갱신이 잘되고 다른쪽은 갱신조차 안되는 상황이 발생하는 것 입니다. 이 이슈에 관련해서 생각나는 부분들이 있으신가요? setSlidePopupContent(컴포넌트)를 실행할 땐 값이 잘 넘어갔던 코드가 새로고침 버튼을 눌렀을 땐 함수는 잘 실행이 되지만 값이 넘어가지 않아 갱신이 안..

#1 Admin 커뮤니케이션의 중요성과 응집도와 결합도의 중요성 사이드 이펙트 등 많은 부분을 느끼게 해준 admin 회고입니다. admin 개발이 된 것을 받았을 때 기존 기획서에 있지만 누락된 요소들이 너무 많았고, 개발자는 기획자가 기획한 것을 보지 않고 개발했다는 말도 함께 들었고 client와 비교했을 때 빠르게 개발하다보니 여러 문제가 있다는 말도 함께 들었습니다. 그래도 관리자 입장에서 admin은 필요하기에 개발을 하다가 이런 부분은 정리하면 좋겠다 싶은 부분을 정리해보고자 글을 써봅니다. #1 문제 Front는 서버에 저장되어 있는 모든 데이터를 요청한 후 필요한 데이터를 뽑아 사용하는 방식으로 되어 있었습니다. ex) fetch API로 프로젝트 생성, 수정, 삭제를 모두 하고있습니다...

#1 응집도와 결합도 정보처리기사를 공부할 때, 응집도는 높게, 결합도는 낮게로 공부했던 기억이 납니다. 이번 admin 작업을 해보면서 느꼈던 점을 회고하기 전에 응집도와 결합도를 정리하면 좋을 것 같단 생각에 정리를 해봅니다. 유지보수를 용이하게 해주는 설계가 좋은 설계는 정말 당연한 말입니다. 그럼 유지보수를 용이하게 하기 위해서는 어떻게 해야 할까요? 높은 응집도와 낮은 결합도를 가지도록 설계하는 것이 유리합니다. 그럼 응집도가 무엇일까요? 응집도는 모듈에 포함된 내부 요소들이 하나의 책임 / 목적을 위해 연결되어 있는 연관된 정도입니다. - 모듈이 하나의 목적을 수행하는 요소들간의 연관성 척도 - 모듈 내부의 기능적인 응집 정도를 나타냄 - 응집도가 높은 것이 유지보수에 유리 유지 보수를 위해 ..

#1 unhandled Runtime Error TypeError: Cannot read property 'default' of undefined 오류 각 상황에 따라 다른 오류 메시지들을 볼 수 있겠지만 원래 잘 작동되던 코드가 똑같이 실행했을 때, 오류를 내뿜는다면 의존성 문제를 의심해봐야 합니다. 저희는 git clone을 하고 npm 모듈을 받기 위해 npm install을 이용하여 모듈을 설치합니다. npm은 패키지 매니저로서, 개발에 필요한 패키지를 관리하기 위한 툴입니다. 모든 사람들이 같은 개발환경을 구축하기 위해서 중요한 역할을 하고 있는 고마운 녀석입니다. 개발을 시작할 때, npm init 커맨드의 의해 package.json이 추가되는데 이곳에 사용하고 있는 패키지 이름과 버전에 대..