Ella 프론트엔드일지

오랜만에 블로그 글을 쓰는데 거의 일기 겸 그냥 개념 정리이다. 나는 솔루션 회사에 다니고 있는데 공공기관 프로젝트에 SI 파견나왔다.스타트업이나 다른 솔루션 회사 다니고 있는 친구들이 너무 부러웠다.그들은 망분리가 아니었기에...지금은 망분리 11개월차 적응될만하지만, 남들은 다 챗지티, 코파일럿, 커서 AI 를 쓰며 무궁무진하게 지식의 양을 학습하는데 나는...옛날 코드 긁어다 쓰는 수준이다. 구글검색도 안돼. 뭐 아무것도 안되니까. 공식문서? 볼시간이 어딨음 인터넷이 안되는데~~보통은 폰으로 지피티 검색을 많이 한다. 그마저도 질문을 잘해야한다. pc였으면 복붙해서 질문할텐데 모바일로 질문하니..질문도 잘해야한다. 폐쇄망이 계속 유지가 된다면 AI 에게 개발자는 대체 안되고, 계속 살아남을수도 있다..

🔸문제상황 - form 안에 label 과 input 이 반복되어 label 과 input을 공통 컴포넌트로 분리하려고 한다. 상품명 설명 상세 상품가격 상품 등록 🔸Props 생성 방법 - 우선 자식 컴포넌트를 생성하고 props 로 받아올 것들을 지정한다. type 과 default 를 설정할 수 있다. // src/components/common/FormInput.vue {{ labelText }} - 부모 컴포넌트를 생성해서 props 속성명과 넘겨줄 값을 적는다. 이때,아래 사항을 유의해서 넘겨주자 // 이런식으로 :이 없는 것은 문자열 데이터를 그대로 전달하는 방식이다. // : 이 있는건 변수를 바인딩 하기위한 표현식이다. 그리고 나서 component 를 import 해온 후에 compon..

0. 글을 쓰게 된 이유 오픈마켓 프로젝트에서 서버데이터를 기존에 Redux-Toolkit 의 createAsyncThunk 로 다뤘었다. 서버데이터를 캐싱,동기화가 잘 되는 React-Query 로 리팩토링 했었다. 나는 단지... React-Query 의 저런 장점이 있어서 리팩토링을 했었는데.. 얼마전에 개발자 시니어분께서 동기화가 정말로 되는지 확인을 했냐고 물어보셨다. 머리를 땅 하고 맞은 기분이었다!! 동기화가 되겠거니..하고만 생각하고 있었는데...확인을 안했던 것이다...ㅎㅎㅎ 그리고 새로운 데이터가 서버에 등록이 되는데 그걸 클라이언트가 어떻게 알아차리고 데이터를 업데이트 시키는지 물어보셨는데 대답을 하나도 하지 못했다!! 이제 그걸 알아보도록 하겠다 1. 쇼핑몰 페이지를 통해 데이터가 ..

0. 개요 - 리액트는 , , 와 같이 입력을 받을 수 있는 폼 요소들을 제어 컴포넌트와 비제어 컴포넌트로 구분하고 있다. 1. 제어컴포넌트 제어 컴포넌트는 상태(state)와 함께 사용되며, 해당 컴포넌트의 상태에 의해 값이 제어된다. 이 상황은 마치 입력 폼 요소가 이벤트 핸들러 외에 다른 누군가에 의해 변경될 수 없도록 제어하고 있는 것 같다. 이렇게 입력 폼 요소의 value 속성을 지정하여 값을 제어할 수 있는 컴포넌트를 제어 컴포넌트라고 한다. 즉, 사용자의 입력을 받는 컴포넌트에 event 객체를 이용해 setState()로 값을 저장하는 방식을 제어 컴포넌트 방식이라 한다. => 제어 컴포넌트는 사용자가 입력한 값과 저장되는 값이 실시간으로 동기화된다. export default funct..

0. 세션(서버 기반 인증 시스템) 1) 유저가 로그인을 하면 2) 서버는 아이디와 비밀번호를 회원 DB 에서 확인해본다. 3) 회원정보가 맞다면 세션 저장소(ex: 메모리, 데이터베이스 등)에서 회원 정보 세션을 생성한다. 4) 세션 저장소에서 서버로 Session ID를 발급한다. 5) Session ID는 사용자의 웹브라우저에 전달된다. 6) 사용자가 권한이 필요한 페이지에 접속 요청을 하면, 사용자의 브라우저는 요청 헤더에 쿠키(session_id가 포함)를 포함 시켜 서버에 전달한다. 7,8) 서버는 받은 요청 헤더의 쿠키 정보에서 'session id' 값을 추출해서 세션 ID를 사용해서 자신의 세션 저장소에서 해당 세션 ID와 연결된 사용자 정보를 찾는다. 9) 세션 ID에 해당하는 사용자 ..

0. 에러메세지 next. js를 그냥 설치만 했을 뿐인데 계속 콘솔창에 에러메세지가 났다. Warning: Prop `className` did not match. Server: "__className_20951f vsc-initialized" Client: "__className_20951f" at body at html at RedirectErrorBoundary 1. 에러 해결과정 - 처음에는 아래 게시글에서 RootLayout 에 이 태그를 추가하라고 했었다. https://stackoverflow.com/questions/75337953/what-causes-nextjs-warning-extra-attributes-from-the-server-data-new-gr-c-s-c What cause..