728x90 전체 글747 [FE] 좋은 코드의 기준 Frontend Fundamentals에서 작성한 좋은 코드의 기준에 관한 글을 읽으며, 현재 진행 중인 프로젝트 초기 단계에서 이전 과정을 점검하고 부족했던 부분을 보완하고 다시 한번 생각해 볼 수 있는 기회가 될 수 있을 것 같았습니다. 이 글에서는 "좋은 프론트엔드 코드란 변경하기 쉬운 코드"라는 점을 강조하며, 이를 가늠하는 기준으로 "가독성", "예측 가능성", "응집도", "결합도"를 제시하고 있는데 좋은 코드를 짜려면 어떻게 해야 할지 한 번이라도 고민해 본 개발자라면, 이 글을 통해 많은 인사이트를 얻을 수 있을 것 같습니다. 시작하기 | Frontend Fundamentals frontend-fundamentals.com 2025. 1. 14. 스프린트 문서 (Sprint Docs) 회사에서 진행 중인 프로젝트에 마감 기한이 정해지면서, 팀에서 작업 속도를 높이기 위해서 스프린트 작성이라는 방안을 논의하게 되었고, 이 과정에서 스프린트 문서에 대해 알아보고, 기존에 사용 중이던 WBS와의 차이점도 비교해 보면 좋을 것 같아 이 글을 작성하게 되었습니다. 스프린트(Sprint)란?: 애자일(Agile) 개발 방식, 특히 스크럼(Scrum)이라는 프레임워크에 사용하는 핵심 개념으로, 짧고 일정한 기간 동안 진행되는 개발 주기를 말한다. 짧은 주기(보통 2~4주)동안 팀은 미리 정해진 목표(주로 기능 개발 또는 작업 완료)를 달성하기 위해서 집중적으로 작업하는 방식을 의미하기도 합니다. ❓ 스크럼이란더보기: 애자일에서 널리 사용되는 프레임워크인 스크럼은 스프린트라고 하는 고정된 길이의 반.. 2025. 1. 13. Legacy(레거시) 회사에서 진행 중인 프로젝트에 대해 설명을 들으면서, 해당 프로젝트가 Legacy 시스템이라 기존 버전에서 새로운 버전으로 마이그레이션 작업을 진행 중이라는 내용을 알게 되었습니다. 그때 "Legacy"가 정확히 어떤 의미일까?라는 궁금증이 생겨 이번 기회에 제대로 알아보게 되면서 아래 블로그에 정리된 내용을 읽게 되었는 데 레거시 코드(Legacy code)레거시 코드로 시작해 테스트 코드 찬양으로velog.io 레거시 코드(Legacy Code)에 대해 다룬 글을 살펴보면, 레거시 코드는 아래 4가지 경우 중 하나라도 포함되는 경우 레거시 코드로 분류될 수 있다고 합니다.다른 사람으로부터 상속된 소스 코드이전 버전의 소프트웨어에서 상속된 소스 코드개발자가 변경하기를 두려워하는 코드테스트 없는 코드 .. 2025. 1. 10. 웹 서버 정의웹 서버는 "사용자가 웹 브라우저를 통해 요청한 데이터를 처리하고, 그 결과를 사용자에게 전달하는 컴퓨터 시스템"입니다.쉽게 말해서, 인터넷에서 우리가 웹사이트를 열면 그 웹사이트의 내용을 보여주는 역할을 합니다. 역할요청 처리 : 사용자가 웹사이트에 접속하면 브라우저가 서버에 요청을 보냅니다. 예를 들어, "네이버 보여줘!"라는 요청을 서버로 보내는 것입니다.응답 전송 : 서버는 그 요청을 받고, 요청에 해당하는 데이터를 찾아 사용자에게 응답합니다. 웹 서버는 주로 HTML, CSS, JS, 이미지, 비디오와 같은 정적 파일(서버에서 수정 없이 그대로 전달하는 파일)을 사용자에게 보냅니다.데이터베이스와 연결 : 동적인 웹 페이지(로그인 정보, 사용자 맞춤형 페이지 등은 서버에서 처리하고 생성된 데이.. 2024. 10. 15. [StoryBook] Vue 3 + Typescript + StoryBook 프로젝트에 fontAwesome 설정하기 [StoryBook] Vue 3 + Typescript 프로젝트에 StoryBook 적용하기Vue 3와 TypeScript를 사용한 프로젝트에서 폴더 구조를 고민하던 중, 컴포넌트를 테스트하고 문서화할 수 있는 방법으로 Storybook을 도입하기로 결정했다. StoryBook에 대해 알아보니, Vue에서 적용하는eundol1113.tistory.com이번 포스팅은 앞서 정리했던 [StoryBook] Vue 3 + Typescript 프로젝트에 StoryBook 적용하기에서 fontAwesome을 적용하는 방법을 다루고 있습니다. React를 사용하다가 Vue를 사용하다 보니 느끼는 거지만.. Vue에 부가적은 라이브러리를 사용할 때마다 구글링을 해보면 정보가 많이 없고, ChatGPT를 사용하더라도 정.. 2024. 9. 30. [StoryBook] Vue 3 + Typescript 프로젝트에 StoryBook 적용하기 Vue 3와 TypeScript를 사용한 프로젝트에서 폴더 구조를 고민하던 중, 컴포넌트를 테스트하고 문서화할 수 있는 방법으로 Storybook을 도입하기로 결정했다. StoryBook에 대해 알아보니, Vue에서 적용하는 방법에 대한 자료가 React보다 적기도 하고, 현재 진행 중인 프로젝트는 서브모듈을 사용하고 있어서 이번 기회에 정리해 두면 좋을 것 같았다. 사용 후기부터 얘기하자면, 처음에 적용할 때는 좀 낯설기도 하고 자동으로 문서화가 된다고 해도 설정을 해줘야 하니까 시간이 꽤 걸릴 것 같아서 비효율적이지 않을까? 하는 의문이 들었는데, 막상 해보니 예상보다 쉽게 설정할 수 있었고, 문서화가 잘 돼서 일일이 코드를 파악하지 않아도 된다는 점이 정말 좋았다. 설치 및 설정 방법※ node .. 2024. 9. 27. [Mockoon] Route에 paramer 설정하기 새로운 프로젝트에서 UI를 개발하던 중, API 개발이 지연되어 Mockoon을 활용해 mock 데이터를 사용하여 기능을 구현하게 되었습니다. 이 과정에서 Mockoon에 파라미터를 설정하는 방법에 대한 자료가 부족한 것 같아 짧게 정리해 보았습니다. Mockoon에 대한 설명이나 설치 방법은 아래 블로그를 참고하시면 좋을 것 같습니다. Mockoon을 활용한 프론트엔드 개발 효율성 향상: 가상서버 및 Proxy 설정1. Mockoon이란? Mockoon은 로컬 환경에서 REST API 모킹을 설계하고 실행할 수 있는 가장 간편하고 빠른 방법을 제공한다. 또한 시간을 절약할 수 있고, OpenAPI 사양과 호환이 되는 완벽한 도구이다. (출baekspace.tistory.com Parameter 설정하는.. 2024. 9. 25. Axios에서 요청 취소 설정하기 웹사이트에서 버튼 클릭이나 특정 동작 후 로딩 화면이 표시되고, 검색 중에는 '검색 취소' 버튼을 제공하는 경우가 많은 데, 그런 기능은 어떻게 구현할 수 있을까?를 고민하다 2가지 방법을 알게 되었습니다. 1. CancelToken 사용하기 1️⃣ axios.CancelToken.source()를 사용하여 취소 토큰을 생성한다.2️⃣ API 요청을 보낼 때 cancelToken 옵션에 토큰을 삽입한다.3️⃣ 해당 요청을 취소할 때 source.cancel()를 호출한다.import axios from 'axios';// CancelToken 생성const source = axios.CancelToken.source();axios.get('/api/endpoint', { cancelToken: so.. 2024. 8. 28. Axios의 timeout 옵션으로 요청 시간 제한 설정하기 단점 Axios를 사용하던 중 API 요청에 제한 시간을 둬야 하는 기능을 개발하게 되었고,그 과정 중 timeout 옵션을 알게 되어 짧게 정리해보았습니다. 역할API 요청이 timeout 옵션으로 설정한 시간 내에 완료되지 않을 경우 자동으로 요청을 취소하고 오류를 발생 시킵니다.기본값은 0으로, 옵션을 설정하지 않거나 0을 설정한 경우 무제한으로 요청을 대기할 수 있습니다. timeout을 설정하면 애플리케이션의 응답성을 높이고, 불필요한 대기를 방지할 수 있습니다.설정 방법import axios from 'axios';// 1분 (60초)으로 타임아웃 설정const axiosInstance = axios.create({ timeout: 60000});axiosInstance.get('/api/e.. 2024. 8. 28. 이전 1 2 3 4 ··· 83 다음 728x90
