본문 바로가기
반응형

기록/부트캠프
13

[React] React Router 기초(동물 정보 사이트 만들기) React Router 기초 실습: 동물 정보 사이트 만들기최종 결과물메인페이지, 상세페이지, 검색페이지(검색기능) 구현이 완료되었다.깃커밋을 브랜치를 나눠 작업했다.메인 페이지에서 동물 목록 화면에 표시하기React Router리액트 라우터(React Router)는 싱글 페이지 애플리케이션(SPA)에서 페이지 이동처럼 보이는 동작을 가능하게 해주는 라이브러리다. react-router-dom 패키지를 설치하여 사용한다.BrouserRouter: 라우팅 기능을 제공하는 최상위 컴포넌트. 라우팅 기능을 사용하려면 앱 전체를 BrowserRouter로 감싸야 한다.Routes: 여러 개의 Route를 묶어주는 컨테이너 역할.Route: 특정 URL 경로(path)에 대해 어떤 컴포넌트(element)를 보.. 2025. 4. 9.
새로운 개발 패러다임, 바이브 코딩(Vibe Coding) 1. 핵심 주제: 바이브 코딩(Vibe Coding)이란?바이브 코딩의 개념Andrej Karpathy가 제안한 개념코드를 직접 작성하기보다, AI와 협업하며 감각(vibe)으로 코드를 생성함GPT나 Cursor 등 AI 코드 생성기 도구의 활용이 중심더 이상 전통적 방식(문법, 구현 위주)의 코딩이 아님2. 개발자 역할 변화코딩 → 프로덕트 엔지니어로기술력보다 제품 감각(taste)이 더 중요이제 누구나 10배 빠른 엔지니어(10x Engineer)가 될 수 있음"나는 더 이상 엔지니어가 아니라 프로덕트 사람이다"는 창업자 인터뷰 다수3. 사용 도구 및 트렌드주요 도구Cursor: 가장 많이 사용됨WindSurf: 코드 전체를 인덱싱하여 Cursor보다 자동화 수준이 높음ChatGPT / Claude .. 2025. 4. 2.
Javascript 계산기 프로젝트 자바스크립트 마지막 과제, 계산기 만들기부트캠프 두번째 커리큘럼,3주간의 자바스크립트 과목이 끝났다.자바스크립트를 배운지는 꽤 됐지만,다시 강의를 들으며 내가 헷갈렸던 것을 재점검하는 시간이 되었다. 다끝나가는 시점이지만, 모던자바스크립트딥다이브 스터디도 들어서다시 한번 자바스크립트에 딥다이브 할 예정이다! 그래서,막바지가 된 저번주 금요일에 최종과제인 계산기만들기에 대한 설명회가 있었다.지난 기수의 최종결과물과 진행방식을 설명해주셨는데,구현은 개인이지만 팀단위로 진행이된다는걸 알았고..팀장이되어 조를 이끌게되었다. 계산기 작동방식먼저 계산기 구현을 위해각 단계별로 상세한 요구사항이 있어서 아예 백지부터 혼자 하는건 아니었고,지시에 따라 힌트를 얻으며 작성해나갔다. 계산기 작동방식은 이러하다.숫자 버튼을.. 2025. 3. 27.
프로세스와 스레드 프로세스와 스레드1. 프로세스(Process)란?프로세스는 실행 중인 프로그램을 의미하며, 운영체제에서 독립적으로 실행되는 작업 단위이다. 각 프로세스는 자신만의 메모리 공간(주소 공간)을 가지며, CPU 스케줄링에 의해 실행된다.프로세스의 특징독립적인 실행 단위: 각 프로세스는 별도의 메모리 공간을 가짐.고유한 주소 공간 할당: 코드, 데이터, 힙, 스택 등의 영역을 포함.자원(메모리, 파일, 네트워크 등)을 독립적으로 관리.멀티 프로세싱을 활용하면 여러 프로세스를 병렬 실행 가능.프로세스의 메모리 구조영역설명코드(Code)실행할 명령어 저장데이터(Data)전역 변수 및 정적 변수 저장힙(Heap)동적 할당된 메모리 공간스택(Stack)함수 호출 및 지역 변수 저장프로세스 생성 방법운영체제가 프로그램을.. 2025. 2. 27.
터미널, CLI란? CLI(Command Line Interface)에 대해 알아보기CLI(Command Line Interface)는 키보드를 사용하여 명령어를 입력하고 실행하는 방식의 인터페이스다.GUI(Graphical User Interface)와 달리, CLI는 빠르고 강력한 제어 기능을 제공하며, 개발자들이 자주 활용한다.1. 터미널이란?터미널(Terminal)은 사용자가 운영체제(OS)와 직접 소통할 수 있는 명령줄 환경이다.CLI 환경에서 사용자는 키보드를 통해 명령어를 입력하고, 이를 통해 파일 관리, 프로세스 실행, 네트워크 설정 등을 수행할 수 있다.터미널의 역할운영체제와 직접 소통하는 인터페이스GUI 없이 빠른 시스템 제어 가능원격 서버 접속 및 관리 (SSH)자동화 및 스크립트 실행 (배치 파일, 셸.. 2025. 2. 14.
IDE와 코드에디터, Visual Studio Code와 확장 프로그램 추천 Visual Studio Code 소개소프트웨어 개발을 할 때 코드를 작성하고 실행하는 도구로는 IDE(통합 개발 환경)와 코드 에디터(Code Editor)가 있다.IDE (Integrated Development Environment, 통합 개발 환경)개념IDE는 코드 편집, 디버깅, 빌드, 테스트, 프로젝트 관리 등 소프트웨어 개발에 필요한 기능이 통합된 개발 환경이다.프로그래밍 언어에 맞춰 자동 완성, 코드 분석, 컴파일, 디버깅 등을 지원하며, 대형 프로젝트 개발에 적합하다.대표적인 IDE 예시JetBrains 계열: IntelliJ IDEA(Java, Kotlin), PyCharm(Python), WebStorm(JavaScript)Microsoft 계열: Visual Studio (C#, ... 2025. 2. 14.
미션7. 웹 개발의 두 가지 포지션 웹 개발의 두 가지 포지션: 프론트엔드와 백엔드 개발웹 개발은 프론트엔드(Frontend) 개발자와 백엔드(Backend) 개발자로 나뉜다.각각의 역할과 필요한 역량을 살펴보자.프론트엔드 개발 (Frontend Development)✅ 역할프론트엔드 개발자는 사용자가 직접 보는 화면(UI)과 상호작용하는 부분을 개발하는 역할을 한다.웹사이트나 웹 애플리케이션의 디자인을 코드로 구현하고, 사용자 경험(UX)을 최적화하는 것이 주요 목표이다.✅ 주요 기술 스택HTML – 웹 페이지의 구조 정의CSS – 디자인 및 스타일링 (Flexbox, Grid, TailwindCSS 등)JavaScript – 동적 기능 추가 (이벤트 처리, 애니메이션 등)프레임워크 & 라이브러리React.js, Vue.js, Angul.. 2025. 2. 14.
미션6. 문제를 해결하는 개발자 개발자들이 문제를 해결하는 방법개발자들은 문제를 해결하기 위해 다양한 방법을 활용한다.대표적으로 공식문서, 검색, ChatGPT, 개발자 커뮤니티 등이 있다. 공식문서 (Documentation)개발자가 문제를 해결할 때 가장 신뢰할 수 있는 출처는 공식문서다.라이브러리나 프레임워크, API의 공식문서를 참고하면 가장 정확한 사용법과 예제를 확인할 수 있다.예)React 공식문서 https://ko.legacy.reactjs.org/MDN(Javascript) https://developer.mozilla.org/ko/Javascript Info https://ko.javascript.info/w3school  https://www.w3schools.com/검색 (Google, Stack Overflow.. 2025. 2. 14.
반응형

최근댓글

최근글

© Copyright 2024 ttutta

티스토리툴바