본문 바로가기

반응형

공부일지/React

프론트엔드 개발자, 무슨 일을 하나요? 웹 개발에 관심이 있거나 개발자로 진로를 고민하고 있다면, '프론트엔드 개발자'라는 직업에 대해 궁금해하실 것입니다. 우리가 매일 사용하는 웹사이트와 앱의 화면 뒤에는 프론트엔드 개발자의 손길이 담겨있습니다. 이들은 정확히 어떤 일을 하며, 어떤 기술을 사용하고, 어떤 역량이 필요한지 자세히 알아보겠습니다.1. 프론트엔드 개발자란?프론트엔드 개발자는 사용자가 직접 보고 상호작용하는 웹사이트나 애플리케이션의 사용자 인터페이스(UI)를 구현하는 개발자입니다. 쉽게 말해, 우리가 웹사이트에서 보는 모든 시각적 요소들 - 버튼, 메뉴, 이미지, 텍스트, 애니메이션 등을 코드로 만드는 사람입니다.백엔드 개발자가 서버와 데이터베이스 같은 '보이지 않는' 부분을 담당한다면, 프론트엔드 개발자는 사용자가 실제로 경험하.. 더보기
프론트엔드 개발 기초 학습 로드맵 프론트엔드 개발은 웹사이트나 애플리케이션의 사용자 인터페이스(UI)를 구축하는 분야로, 사용자가 직접 보고 상호작용하는 부분을 담당합니다. 프론트엔드 개발자가 되기 위해서는 HTML, CSS, JavaScript 세 가지 핵심 기술에 대한 깊이 있는 이해가 필수적입니다. 1. HTML, CSS, JavaScript 기본 학습 경로프론트엔드 개발의 기초는 HTML, CSS, JavaScript입니다. 이 세 가지 언어는 웹 페이지의 구조, 스타일, 그리고 동적인 기능을 각각 담당합니다.HTML (HyperText Markup Language): 웹 페이지의 뼈대를 구성하는 마크업 언어입니다. 제목, 단락, 이미지, 링크 등 웹 페이지에 표시될 모든 콘텐츠의 구조를 정의합니다. 가장 먼저 학습해야 할 언어입.. 더보기
실무 기술 및 프레임워크 학습 전략: React, Vue.js 중심 1. React, Vue.js 등 주요 프론트엔드 프레임워크 학습 방법React 학습 전략기본 개념 이해: React는 UI 구축을 위한 자바스크립트 라이브러리로, 컴포넌트 기반 구조를 이해하는 것이 핵심입니다.JSX 문법 학습: HTML과 유사하지만 자바스크립트 표현식을 포함하는 JSX 문법을 익혀야 합니다.컴포넌트 생성 및 중첩: 함수형 컴포넌트를 작성하고, 이를 중첩하여 UI를 구성하는 방법을 실습합니다.상태 관리(useState 등): 컴포넌트 내 상태를 관리하는 방법과 이벤트 처리 방식을 학습합니다.조건부 렌더링 및 리스트 렌더링: 조건문과 배열 map() 함수를 활용해 동적인 UI를 구현하는 법을 익힙니다.스타일링: className 속성 사용법과 CSS 파일 연동 방법을 배웁니다.참고 자료:.. 더보기
AI 시대, 반나절 만에 나만의 웹사이트 만들기 feat.인프런 개발자가 아니어도 괜찮습니다. AI가 함께하니까요.🎯 이제는 누구나 웹사이트를 만드는 시대ChatGPT, Gemini, Copilot... AI 툴들이 개발 현장을 완전히 바꿔놓았습니다. 더 이상 '개발자만' 웹사이트를 만드는 시대가 아니에요. 기획자도, 디자이너도, 창업 아이디어만 있는 분도 AI를 활용하면 반나절 만에 멋진 웹사이트를 완성할 수 있습니다.그래서 오늘 소개드릴 강의는 이 흐름에 딱 맞는 핵심 트렌드 강의입니다.『AI 시대, 반나절 만에 웹사이트 개발부터 배포까지 - 바이브 코딩 with MCP & Gemini CLI』👉 강의 상세 정보 확인하기 AI 시대, 반나절 만에 웹사이트 개발부터 배포까지 바이브 코딩 with MCP & Gemini CLI 강의 | 코드브릿코드브릿지 | 요즘 .. 더보기
독학 프론트엔드 개발자 취업 준비 및 커리어 로드맵 프론트엔드 개발은 웹사이트 및 애플리케이션의 사용자 인터페이스(UI)를 구축하는 분야로, 사용자가 직접 보고 상호작용하는 부분을 담당합니다. 독학으로 프론트엔드 개발자 취업을 준비하는 것은 체계적인 학습과 전략적인 접근이 필요합니다.1. 프론트엔드 개발자 취업을 위한 기술 요구사항프론트엔드 개발자가 되기 위해서는 핵심 기술에 대한 깊이 있는 이해와 실무 역량이 필수적입니다.1.1. 기본 학습 경로: HTML, CSS, JavaScript웹 페이지의 구조, 스타일, 동적인 기능을 담당하는 세 가지 핵심 언어입니다.HTML (HyperText Markup Language): 웹 페이지의 뼈대를 구성하는 마크업 언어로, 웹 콘텐츠의 구조를 정의합니다. 가장 먼저 학습해야 할 언어입니다.CSS (Cascadin.. 더보기
비전공자의 공부일지 - GraphQL 세번째 이야기 GraphQL 세번째 이야기 Resolver 데이터를 전달받을때 api의 데이터 전체를 가져오는게 아니라 데이터의 특정 정보만을 가져오고 싶을때, 즉 필터링이 필요할때 사용한다. 예를들어 저번일지에서 posts의 내용중에 module.exports = [ { id: 'post1', title:'It is a first post', description:'It is a first post description', comments:[{ id:'comment1', text:'It is a first comment', likes: 1 }] }, { id: 'post2', title:'It is a second post', description:'It is a second post description', com.. 더보기
비전공자의 공부일지 - GraphQL 두번째 이야기 GraphQL 두번째이야기 저번 일지에 이어서 이번에도 GraphQL을 공부할 것이다. 저번에 작성했던 server.js에서 이번에는 Query에 다른 코드들을 작성해 볼 예정이다. const express = require('express'); const { graphqlHTTP } = require('express-graphql'); const {buildSchema} = require('graphql') const app = express(); const port = 4000; const schema = buildSchema(` type Query{ posts:[Post], comments: [Comment], } type Post{ id: ID!, title: String!, description.. 더보기
비전공자의 공부일지 - GraphQL GraphQL이란?? GraphQL은 API용 쿼리 언어이다. GraphQL은 API의 데이터에 대한 이해하기 쉬운 설명을 제공하고, 클랑이 언트가 필요한 것을 정확하게 요청할 수 있다. 페이스북에서 2012년도에 개발되었다. GraphQL의 장점으로는 프론트개발중 백엔드 개발자가 RESP API처럼 개발을 마칠 때까지 기다리지 않아도 된다. Overfetching과 Underfetching을 막아준다. REST를 이용할 때 필요한 데이터를 만들기 위해서 여러 번 요청을 보내야 할 때 GraphQL은 한 번의 요청으로 데이터를 가져올 수 있다. Schema를 작성하기 때문에 데이터가 어떻게 이루어져 있는지 알 수 있다. Type을 작성하기 때문에 요청과 응답에 Vaild 한 데이터가 오고 갈 수 있다. .. 더보기

반응형