프론트엔드15 개발자를 위한 필수 기술 스택 간단정리(프론트엔드/백엔드) 개발자로 취업하기 위해서는 다양한 기술을 익히고 활용할 수 있어야 한다. 각 기술은 특정 목적을 가지고 있으며, 어떤 상황에서 사용되는지 이해하는 것이 중요하다. 여기서는 백엔드, 프론트엔드, 데이터베이스, 인프라/기타 기술로 구분하여 정리한다.(chatGPT의 도움을 받아 정리한 내용)1. 백엔드 기술백엔드는 클라이언트 요청을 처리하고 데이터베이스와 통신하는 역할을 한다.1.1 백엔드 프로그래밍 언어Java: 객체 지향 프로그래밍 언어로, 대규모 웹 애플리케이션 개발에 많이 사용된다. Spring Framework와 함께 사용되며, 안정성과 확장성이 뛰어나다.1.2 백엔드 프레임워크Spring Framework: Java 기반의 대표적인 웹 프레임워크로, 의존성 주입(DI), AOP 등의 기능을 제공하.. 2025. 2. 27. [React] React 프로젝트에 prettier & eslint 설치하기 PrettierPrettier란?Prettier는 코드 포매터로, 소스 코드를 일관되게 포맷팅해주는 도구임. 여러 개발자들이 협업할 때 코드 스타일이 통일되지 않으면 가독성 이 떨어지고, 코드 리뷰가 복잡해질 수 있음. Prettier를 사용하면 다음과 같은 장점이 있음:일관성: 팀 내 모든 코드가 동일한 스타일로 포맷됨.생산성 향상: 코드 스타일에 대한 논의나 고민을 줄여줌.자동 포맷팅: 파일을 저장할 때 자동으로 포맷팅할 수 있어 편리함.https://prettier.io/docs/ What is Prettier? · PrettierPrettier is an opinionated code formatter with support for:prettier.io 설치 명령어Prettier를 설치하는 방법은.. 2025. 2. 18. [React] React 프로젝트 생성 후 최초 렌더링 과정 이해하기(Vite 설치) Vite를 통해 React 프로젝트를 설치 후 실행을 시키면 아래와 같은 화면을 만날 수 있다. 그리고 실제 생성된 폴더구조를 보면 다음과 같다 위 폴더 구조 안에서 저 최초 화면이 어떻게 렌더링 되는건지 간단히 정리해보려 한다. 전체 구조project-folder/├── src/│ ├── App.tsx│ ├── main.tsx│ ├── index.css│ ├── assets/│ │ ├── react.svg│ │ └── vite.svg├── index.html 1. index.html역할 : 이 파일은 웹 페이지의 기본 구조를 정의합니다. 브라우저가 처음 로드할 HTML임주요 내용: : React 애플리케이션이 이곳에 렌더링됨 : main.tsx 파일을 로드하여 React.. 2025. 2. 18. (React + Typescript) + (Spring Boot + JPA + MySQL) 프로젝트 세팅 / tailwind css 설치 오류 포함 개인적으로 React + Typescript도 공부할겸, Spring Boot도 복습할 겸 맨땅에 헤딩을 하는 방법으로 무작정 프로젝트를 시작했다.그런데 역시나 초기 세팅부터 이래저래 우여곡절이 많았다. 기존에는 백엔드 프로젝트를 할때 spring boot 프로젝트 만들고 프론트엔드 부분은 Thymeleaf를 주로 활용해서 intelliJ나 STS로 진행을 했었는데, 이렇게 프론트엔드 작업과 백엔드 작업을 한번에 하는 경우 프로젝트를 어떻게 세팅해야 할지 막막했다. 특히 React + Typescript는 기본 지식이 있는게 아니라 이번에 맨땅에 헤딩 하면서 공부할 생각이었기에 전적으로 chatGPT와 구글링의 도움이 필요했다. 그래서 지금 정리하는 아래의 방법이 일반적인 방법인지 솔지히 모르겠지만, 나.. 2025. 2. 12. [vue] Vue에서 Slick 슬라이드가 새로고침 후만 적용되고, 페이지 이동 후에는 적용되지 않는 문제 해결하기 Vue에서 Slick 슬라이드가 새로고침 후만 적용되고, 페이지 이동 후에는 적용되지 않는 문제 해결하기 🔍 문제 상황Vue는 **SPA(Single Page Application, 단일 페이지 애플리케이션)**라서 페이지를 이동해도 전체 HTML이 새로고침되지 않고 필요한 부분만 변경됨.이 때문에 slick.js가 메인 페이지에서 최초 한 번만 실행되고, 다른 페이지로 이동 후 다시 돌아오면 슬라이드가 깨지는 문제가 발생했음. 💡 문제 원인slick.js는 페이지가 처음 로딩될 때 한 번만 실행되도록 되어 있음.Vue에서 다른 페이지로 이동 후 돌아오면 mounted()가 다시 실행되지 않음 → slick이 다시 초기화되지 않음.이로 인해 슬라이드가 풀려서 모든 배너가 펼쳐진 상태로 보이는 문제 발.. 2025. 2. 10. [vue] 특정 페이지에서만 특정 클래스 추가하기 vue 프로제트를 작업하다보니 content 영역에 대해서 메인 Home 페이지에서만 main 클래스를 추가해야 하는 상황이 발생했다. 방법) [ :class ] 속성을 활용하여 특정 페이지에서 특정 클래스 추가 .// src/router/index.jsimport { createRouter, createWebHistory } from 'vue-router'; // Vue 3에 맞게 변경import Home from '../views/MainHome'; // 변경된 Home 컴포넌트import newlyProduct from '../views/newlyProduct';const routes = [ { path: '/', name: 'MainHome', compone.. 2025. 2. 10. 이전 1 2 3 다음
