들어가며export default function Component() { const [message, setMessage] = useState('hello') return {message}} {{ message }} 둘의 차이가 느껴지십니까..아니오라고 답한 당신, 프론트할 자격이 없다. 함수형으로 때려박아주시는 우리의 react 님과 다르게, html, css, js의 양식을 한번에 때려박아주시는 vue님은 접근법 자체가 다르다.사실 내부적으로 돌아가는 건 JS/TS이기 때문에 그렇게 어렵다고 느끼진 않았는데 한 파일에 400줄 가까이를 구겨넣는 걸 보고 잠시 어지러워졌었다. 아래는 읽는 거 자유..(본인이 놀라웠던 점이기 때문에)더보기리액트에선 죄다 짧게 분리하고 쳐내고 오히려 파일 구조에 ..

이걸 보고 이상하다고 생각이 안들었어?AI가 써준 코드 그대로 쓰면 너를 쓸 이유가 없지 들어가며이 글은 반성문에 가깝다. 이걸 기술 블로그에 올릴까 하기엔 회고에 가깝기 때문에 게시판.. 착각 아닙니다..ㅠAI가 짜준 코드를 제대로 검수하지도 않고, 일단 보긴 했는데로 합리화하며 코드 한줄한줄에 의문을 가지지 않고,,,꼼꼼하지 못한 채 머지를 하려다가 코드 리뷰에서 대차게 까인 신입사원 1의 회고에 가깝다. 일단 화면이 잘 돌아가니까, 그리고 문법에서 오류도 없었는데? 문제인 것 같아?// file.ejs// html이 있어요 해당 파일은 ejs 파일로 전 포스팅을 알겠지만 정말 얕게 알게 된 지식으로 코드 수정을 했어야 했다.지식이 얕을수록 대답하지 못하게 될 질문을 대비해 좀 더 꼼꼼하게 코드를..

1. 템플릿 엔진이란?HTML에 동적 데이터를 삽입하는 도구. 서버에서 HTML을 받아 HTML로 렌더링데이터 + 템플릿 = HTML 그런데 여기서 의문점이 하나 생긴다.서버에서 HTML을 받아 HTML로 또 렌더링을 해?HTML + HTML = ? 서버에서 내려준다는데 그대로 보여주면 되는 것 아니냐,, 템플릿 엔진의 핵심은 바로 동적 데이터에 있다.정적 HTML이라면 서버가 파일을 내려주는 그대로 보여줄 수 있지만, 예를 들어 내부의 변수가 렌더링 할 때마다 달라진다면?고유의 값이 아닌 유동적인 값, 실제 값으로 채우기 위한 과정이라고 할 수 있겠다.결론 : 서버에서 HTML 배송 -> 프론트가 데이터랑 합쳐서 렌더링!이라고 생각하면 될 듯 하다. 2. EJS란?: JS 문법을 그대로 사용하는 템..

너무 많은 일이 있었지만, 여차저차한 이유로 러닝커브가 컸던 탓에 RN을 포기하고 PWA로 Next.js로 개발을 하게 되었습니다.개발 시간은 정해져 있는데, 익숙한 플랫폼으로 개발을 하는 게 훨씬 빠르겠다는 판단으로 결정하게 되었는데, 이는 곧 큰 후회가 되게 됩니다.. 빠르게 올려볼게요! # 문제 상황- 실제 배포 후, 유저들의 피드백을 여러 개 수용. 그 중 가장 큰 문제 3가지1. 매번 앱 접속 시 계속 해야 하는 로그인 이슈2. 메인 페이지에서 뒤로 가기를 눌렀을 때 로그인 페이지로 가버리기 때문에, 다시 로그인을 해야한다.3. 앱 내부의 푸터와 갤럭시 내부의 하단 바가 겹치는 이슈 1번 같은 경우는 토큰과 한 달 주기로 리프레시 토큰을 해주는 것으로 일단 해결하였으며 (..)정말 임시적으로 ..

CTO님과의 중간 점검# 무슨 CTO이신..?말 그대로 기업 연계 인턴십이기 때문에 지금 저는 기업에서 정해준 주제를 구현하고 있었습니다,,이제 곧 마무리 단계라 마무리 전 방향성에 대해서 질의응답하기 위해 CTO님께 직접 연락드렸어요! 아무래도 바쁘신 분이다보니 다른 팀들처럼 매주 보고 & 피드백 등을 진행하진 않았습니다.(제 경우가 특수한 경우긴 해요. 다른 팀은 정말 기획 -> 기획, 백엔드 -> api 개발, 프론트엔드 -> 대시보드 개발인데,저는 진짜 주제만 가지고 기획-디자인-프론트-백엔드를 혼자 해왔습니다.) 대충 대화 요약1. 지난 몇 주간은 백엔드부터 다시 공부하며 모바일 ↔ 웹 실시간 연동 구조를 직접 구현하는 데 집중했습니다 (연락 늦어서 죄송해요)2. AI의 도움도 많이 받았지만, ..

메시지는 실시간으로 잘 받아지는데, 상대방이 타이핑하는 걸 실시간으로 볼 수 없을까? 목표- 모바일에서 입력 중 -> 웹에서 대기 할 수 있도록 입력 중이라는 애니메이션이 필요=> 타이핑 시작/중단 실시간 감지 및 UI 업데이트 기존 상황├── 메시지는 실시간으로 잘 받아짐├── 하지만 상대방이 타이핑 중인지 모름└── 사용자 경험 개선 필요 요구사항├── 모바일 사용자 타이핑 → 웹에서 "입력중..." 표시├── 타이핑 시작/중단 실시간 감지└── 3초 후 자동으로 사라짐 (안전장치) # 양방향으로 확장 가능성은 있는데, 단방향으로 먼저 만들고 추후 확장 예정이다.내가 유저라면 상담원이 입력 중인 건 굳이 필요없다는 생각이 들었기 때문에 먼저 단방향으로 구성했다. 과정1. 타입 시스템 확장// ..