시럽로그

이전에 작업하던 리액트를 타입스크립트로 전환해보자! 1. Typescript 관련 패키치를 설치한다. pnpm install --save-dev typescript @types/react @types/react-dom 2. 명령어로 tsconfig.json 생성 npx tsc --init 난 자동으로 생성된 tsconfig.json이 주석으로 도배되는 등 너무 난잡해서 React + ts 에 적합한 권장 설정을 찾아 넣었다. { "compilerOptions": { "target": "ES2016", "module": "commonjs", "lib": ["DOM", "ESNext"], "jsx": "react-jsx", // React 17 이상일 경우 "moduleReso..

우리 회사는 매우매우 레거시 코드를 사용하고 있고FTP 방식으로 실서버에 적용하고 있어, 마이그레이션은 내 마음 속 숙제였다.입사 이후부터 줄곧 마이그레이션을 주장하고 있지만최소 15년간 누적된 스파게티 코드로 인해 사이트의 복잡도가 높아 그 누구도 선뜻 내 제안을 받아들이지 못했다.입사한 지 2년이 지난 최근에야 부분적 마이그레이션을 적용해서 점차 확대해가는 방식을 승인해주셨는데,이전에 시도했을 땐 '이렇게 복잡하면 안하느니만 못한데...?' 수준이라 포기했었다.그리고 최근 다시 찾아봤는데, vite로 엄청 쉽고 간단하게 할 수 있는 것이었다.! 1. 먼저 로컬에서 vite로 React 프로젝트를 생성한다.pnpm create vite@latest php-to-react --template react..

React 공식 문서를 다시 보기 시작했다.와중에 마주친 익숙하지만 낯선 개념, 클로저  요즘 구글링이나 AI가 워낙 잘 되어있어서 정보성 글을 내가 굳이 정리할 필요가 있을까 싶었는데,내 언어로 내가 이해하면서 정리해보자는 게 뽀인트...  자바스크립트에서 함수 안에 있는 변수는 보통 함수가 끝나면 없어진다. 요걸 가비지 컬렉션이라고 하는데, 사용하지 않는 메모리를 자동으로 정리해주는 로봇청소기라고 생각하면 된다. 클로저 설명하다가 웬 가비지 컬렉션?클로저를 사용하면 함수가 끝난 후에도 그 안의 변수에 접근할 수 있다.로봇청소기(가비지 컬렉터)가 일을 못하게 하는 것! function outer() { let count = 0; // 이 변수는 원래 함수가 끝나면 삭제됨 return func..

최근 자사 사이트에서 이벤트를 하면 서버 지연 시간이 길어져 사이트 최적화에 신경을 많이 쓰고 있다. PageSpeed Insights나 lighthouse를 이용해 개선할 점과 개선이 되었는지 여부를 확인하곤 하는데 그 정확한 의미를 찾고 되짚어보고자 한다. Web Vitals, create-react-app을 하면 default로 들어가있는 성능 측정 파일이다. 웹 바이탈 측정항목은 발전하고 바뀌지만, 현재 3대 지표는 로드(LCP), 상호작용(FID), 시각적 안정성(CLS)로 구성되어 있다. LCP(Largest Contentful Paint : 최대 콘텐츠 렌더링 시간) 사용자가 처음 페이지로 이동한 시점을 기준으로, 표시되는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간 이전에는 웹 개발자가..

var를 let으로 일괄 변경했다가 큰 문제가 생겨^^... '아 정말 생각 없이 리팩토링했구나' 반성하며 쓰는 글. 일괄 변경하면 무슨 문제가 있나고요? 저도 알고 싶지 않았습니다... 어떤 문제가 발생하는 지 알기 위해서는 두 가지 방법의 차이점부터 이해해야 한다. 스코프(scope): var는 함수 스코프를 가지고 있어 함수 내에서 선언된 변수는 함수 내에서만 유효하다. let은 블록 스코프를 가지고 있어 블록 내에서 선언된 변수는 해당 블록 내에서만 유효하다. function example() { if (true) { var x = 10; // 함수 스코프 let y = 20; // 블록 스코프 } console.log(x); // 10 console.log(y); // ReferenceError..

누군가 이런 질문을 하면 간단하게는 '사용자에게 보여지는 화면을 구성하고 개발하는 사람' 정도로 대답했다. 그런데 최근 본부장님이 내 역할에 대해 잘 모른다는 걸 알게 되었고... 개발에 대해 제법 잘 아는 사람에게 프론트엔드에 대해 어떻게 설명하고 알릴 수 있을 지 고민하게 되었다. 아래는 ChatGPT의 답변 1. 사용자 인터페이스(UI) 및 사용자 경험(UX) 구현: 프론트엔드는 사용자가 직접 상호 작용하는 부분을 담당한다. 웹 페이지 또는 애플리케이션의 시각적인 부분을 설계하고 구현하여 사용자에게 직관적이고 효과적인 사용자 경험을 제공한다. 2. 웹 페이지의 렌더링 및 뷰 관리: HTML, CSS, JavaScript를 사용하여 웹 페이지의 구조, 스타일, 동적인 기능 등을 처리한다. 사용자의 상..

내가 근무하는 회사의 홈페이지는 아주 오래 전, 프론트엔드와 백엔드의 구분조차 불명확할 때 설계되어 (아마 2009년 쯤...) 현재까지 이어져 오고 있다. 그로 인해 디자인보다 기능에 초점을 맞추어져있고 table 태그로 구성된 레이아웃이 매우 많다. table 태그로 레이아웃을 구성하는 것은 지양해야 하는 건 확실하다. 그렇다면 그 이유는 무엇일까? 1. HTML의 의미론적 용도에 부합하지 않음: - 태그는 주로 표 형식의 데이터를 표현하기 위한 것으로 의미론적으로는 데이터를 나타내는 데 사용되어야 한다. 레이아웃을 구성하기 위해서는 구조적으로 의미있는 태그인 와 CSS 스타일링을 사용하는 것이 더 적절하다. 2. 유지보수 및 가독성: - 디자인 변경 또는 콘텐츠 추가/수정이 필요할 때 테이블 레이아..

제이쿼리는 요새 잘 안 쓰는 추세지만 면접 때 퍼블리싱을 하며 제이쿼리를 사용해봤다고 하니 이 질문을 하셨다. 하지만 한 번도 생각지 못한 부분이라 답변하지 못해서 이번 기회에 정리해보고자 한다. $(document).ready 외부 리소스, 이미지와는 상관없이 브라우저가 DOM (document object model) 트리를 생성한 직후 실행 window.load() 보다 더 빠르게 실행되고 중복 사용하여 실행해도 선언한 순서대로 실행됨 빠른 실행 속도가 필요할 때 사용 ready() 메서드는 와 함께 사용하면 안 됨 jQuery 문법 window.onload html의 로딩이 끝난 후 시작 화면에 필요한 모든 요소(css, js, image, iframe, etc ... )들이 웹 브라우저 메모리에..

면접에서 받은 질문인데, 단골질문인 걸 알면서도 답변을 제대로 준비해가지 않아 횡설수설했다... 반성하는 마음으로 블로그에 정리! 이전에 HTTP에 대해 포스팅했던 적이 있는데, GET과 POST는 클라이언트가 서버로 요청을 보내는 방법인 HTTP method에서 가장 많이 사용되는 2가지 방식이다. GET GET은 서버로부터 정보를 조회하기 위해 설계된 메소드이다. 요청을 전송할 때 필요한 데이터를 Body에 담지 않고, 쿼리스트링을 통해 전송한다. URL의 끝에 ❓와 함께 이름과 값으로 쌍을 이루는 요청 파라미터를 쿼리스트링이라고 부르고, 요청 파라미터가 여러 개이면 & 로 연결한다. /test/demo_form.php?name1=value1&name2=value2 GET은 불필요한 요청을 제한하기 ..

오늘은 프레임워크와 라이브러리의 차이에 대해 알아보려고 한다. 프레임워크 원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대 프레임워크란, 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것 - GoF(Gang of Four) 디자인패턴으로 유명한 Ralph Johnson 선생님 왈 개발자의 개발 경험이나 스타일에 따라 결과물(소스)의 형태가 다르다. 개인이 운영하는 시스템일 경우에는 큰 문제가 되지는 않지만 여러 사람이 공동작업을 진행할 경우 문제가 발생한다. 서로의 결과물을 공유하는 데 있어서 상대방의 스타일을 이해하는데 시간이 필요하며 개발 스킬의 차이가 클 경우 이해하기 힘든 경우도 ..