데브코스

🙏지원동기 &nbsp&nbsp&nbsp4학년을 앞두었지만, 전공생임에도 불구하고 개발 능력과 프로젝트 경험이 부족하다고 생각하였다. 실무에서 활용 가능한 기술을 쌓고, 다양한 협업의 기회를 배우기 위해 프로그래머스 데브코스에 지원하게 되었다. &nbsp&nbsp&n

프로젝트는 일정한 기간 안에 일정한 목적을 달성하기 위해 수행하는 업무의 묶음을 말함.하나의 프로젝트는 정해진 기간, 배정된 금액, 투입 인력 등 일정한 제약 조건 하에서 각종 요구사항을 수행하는 방식으로 진행됨.하나의 프로그램(시스템)을 만들기 위한 일련의 프로세스임

📁 CH03. 버전 관리 📌버전이란? 버전은 유의미한 수정을 말함 >💡버전 (version) >1. 이전과는 약간씩 다른 변화를 구분하는 것 >2. 어떤 프로그램을 수정, 개선하여 새로워지는 것 무언가 변화하고 수정된다고 해서 무조건 버전이라고 부르지❌ 그 변

📁 CH06. 깃허브 연동하기 📌 깃허브에서 자주 쓰이는 명령어는? ✔️ 깃은 우리 컴퓨터 안에서 버전 관리를 도와주는 것을 넘어서 깃허브와 연동을 할 수 있게 도와줌.

📁 CH07. 깃 브랜치 실습 📌 브랜치란? (branch) 나뭇가지 ... 여러 가지의 기능을 병렬로 만들고 싶을 때... 프로젝트가 있으면 언젠간 다시 합쳐질 거라서 가상으로 복사를 한 후 작업을 하고, 다시 중간에 있는 메인 줄기에 붙여넣는다. 📌 브랜치

📁 CH01. 웹의 이해 📌 인터넷 (Internet) 전 세계의 모든 컴퓨터를 하나의 통신망 안에서 연결한다는 의미를 가진 Internet Network의 약자 "우리는 모두 연결되어 있다" 📌 웹(Web)이란? 월드 와이드 웹 (World Wide Web)이란

📁 CH04. 프론트엔트 3대장 📌 웹은 무엇으로 이루어져 있을까? HTML + CSS + JavaScript HTML : 웹 페이지 구성 요소들의 구조 CSS : 웹 페이지 구성 요소들을 꾸밈 JavaScript : 웹 페이지 구성 요소들에게 생명력을!

하이퍼텍스트 즉, 웹 페이지를 연결하는 기능을 가진 텍스트이자 웹 페이지의 구조를 명시하는 언어.HyperTextMarkup LanguageHTML은 <> 괄호를 사용함. 우리는 이걸 태그라고 부름태그는 웹 페이지의 구성 요소 하나하나로 역할을 하게 됨.<태

Cascading Style Sheets의 약자로, HTML을 꾸며주는 언어문서를 통째로 한 번에 꾸며주는 것이 아니라, HTML 태그를 하나 하나 꾸며줌HTML에 CSS를 적용하는 방법은 다음과 같이 3가지가 있음인라인 (Inline) : HTML 태그 안에 같이 작

📁 CH07. [예제로 배우는] JavaScript의 이해 📌 JavaScript란? JavaScript는 특정 HTML 요소를 선택하여 제어할 수 있는 스크립트 언어. 최근에는 백엔드 언어로도 각광 받고 있음 글자를 바꿀 수 있음 버튼을 비활성화 할 수 있

📁 CH09. 백엔드의 구조 📌 백엔드는 어떤 구조를 갖추고 있을까요? 📌 웹 서버의 역할 웹 서버(Web Server)는 정적 페이지에 대해 대응함. 동적 페이지에 대한 처리는 직접 처리하지 않고, 웹 어플리케이션 서버에게 전달함. \*정적 페이지란, 화

📁 CH10. [예제로 배우는] Node.js의 이해 📌 Node.js란 Node.js는 자바스크립트를 언어 이상으로 프로그래밍 언어 역할을 할 수 있도록 지원하는 플랫폼. (= 운동장) 즉, 우리는 Node.js를 이용하여 자바스크립트로 백엔드로 구현할 수

📁 CH11. [예제로 배우는] 데이터베이스 📌 데이터베이스란 데이터를 통합하여 효율적으로 관리하기 위한 데이터 집합체를 데이터베이스(Database; DB)라고 함 데이터를 구조화하여 관리함으로써 데이터 중복을 막고, 효율적이고 빠른 데이터 연산을 가능하게 함

📁 CH12. Node.js와 데이터베이스 연동 📌 Node.js와 데이터베이스 연동 Tennis product 테이블 visual studio code의 터미널 창에 MariaDB 데이터베이스에 연결하기 위한 설정이 포함되어 있음. 을 사용하여 데이터베이스에

📁 CH13. 메인 페이지 연동하기 img를 경로로 알아서 이미지가 적용이 되지 않음. → 다 따로 정리해주기 order 버튼을 누르면 url 값을 불러줄 것임 server가 특정 행동을 하게 하려면 requestHandler에게 url값을 넘겨줘야 했음 이처럼 실제

📌 벡엔드 기초 클라이언트 1) 사용자 → 프론트엔드 (사용자 입장에서는 서버에게 받아온 화면) 2) 프론트엔드 (백엔드 입장에서) 웹 서버의 역할 정적 페이지 : 회사 소개, 회사 연혁, 회사 오시는 길 등등 개개인마다 다른 데이터가 뿌려지는 것이 아니라

📁 Node.js 백엔드에만 쓰이는 게 아니에요! : 넷플릭스, 에어비엔비, 링크드인, 우버, NASA : Node.js 기반 리액트, 뷰, ... 프론트엔드 프레임워크 : 페이팔, 이베이, ... 📌 Node.js란 Node.js는 자바스크립트를 스크립

📁 express 설치 📌 'http' vs 'express' http : 웹 서버처럼 활동할 수 있는 모듈. 웹 서버 역할을 하게 만드는 친구. 내장 모듈 express 모듈 안에 http가 포함되어 있음 포트 번호 (port number) ex. 각 회사

📌 params 는 문자열로 출력, 는 숫자로 출력 그러나 문자열과 숫자 모두 숫자로 판단하고 if문 출력함 ⇒ 자바스크립트라서 가능한 것. 자바스크립트는 문자열로 받은 숫자를 알아서 숫자로 바꾸는 계산도 해줌 그러나 다른 언어를 위해 다른 언어와 똑같이 사용하면

💡연산자 📌 연산자 정적인 데이터들을 유기적으로 행동하게 하여 새로운 가치를 창출해 내는 것. 예를 들어 학생들 과목당 성적 데이터는 그 자체로 의미가 없다. 총점 및 평균을 데이터화해야 그 의미가 있다. ex) 산술 연산자, 대입 연산자, 부호 연산자, 증감 연

💡 break문과 continue 문 📌 멈추거나 계속하거나 continue : 고 (계속 한다) break : 스톱 (멈춘다) break는 반복문을 빠져나가고, continue는 다시 반복 조건으로 올라감. 📌 break문의 기본 원리 반복문 while문

💡 함수 포인터 📌 함수 포인터의 사용 함수명 앞에 *만 붙여주면 함수 포인터가 선언된다 > 자료형 (*함수 포인터 이름) (인자 목록) int (*func) (int a); 함수 포인터도 포인터이므로 주소값을 저장한다. 특정 함수의 주소값을 저장하는 포인터

💡 객체지향 절학의 이해 📌 클래스란 사전적인 의미로는 '학급'이라는 뜻을 가지고 있다. 클래스는 사용자 정의 데이터타입이다. > 클래스 (Class) : 학급 데이터와 메소드를 사용자인 내가 새로 정의한 데이터타입이기 때문에 클래스를 추상적인 데이터타입이라고 함

📁 타입스크립트 기초 💡 타입스크립트란 📌 타입스크립트는 왜 필요한가 자바스크립트 코드가 너무 지저분함 자바스크립트는 HTML 문서의 동적인 부분을 지원하기 위해서 만들어진 언어임 따라서 문법도 사용자가 사용하기 쉽게 만들어짐 (타입에 대해 자유로움) 코

💡 타입스크립트 열거형과 리터럴 타입 📌 리터럴 타입 리터럴 타입은 특정 값을 나타내는 타입으로 타입스크립트의 타입 중 하나이며, 해당 값이 정확하게 일치해야 한다. 해당 값의 집합 중의 하나로 타입을 제한하는 것 리터럴 타입을 사용하면 좋은 점 코드의 가

💡 리액트란 무엇인가 📌 React (웹 프레임워크) React.js는 자바스크립트 라이브러리의 하나임. 사용자 인터페이스를 만들기 위해 페이스북 (조던 워크)에서 개발 싱글 페이지 어플리케이션(SPA) 및 모바일 어플리케이션 개발 가능 HTML 페이지는 대부

💡 컴포넌트 📌 클래스형 컴포넌트 리액트 초기 버전에서 주로 사용했던 컴포넌트 방식 >- 리액트에서는 클래스형 컴포넌트를 만들 때 반드시 Component라는 클래스를 상속해야 하므로 import 먼저 해줌 render 메소드 : return 하위에 있는 jsx

spread 문법 ...은 배열의 새로운 복사본을 만들고 무장해제하라는 뜻.spread 연산자를 이용하면 새로운 메모리를 생성해서 사본을 만듦 (새로운 주소값을 가리킴) 이것을 이해하려면 참조형에 대해 이해해야 한다.독립적인 메모리 공간이 생김. 주소값을 복사하는 것이

📁 리액트를 이용한 Task 생성 앱 만들기 📚 Part 1 태스크 정리 앱 만들기 시작 📌 개발 환경 세팅 위 명령을 터미널에서 실행한다. 프로젝트 이름 설정 후, React 선택. 그 후 타입스크립트 선택 다음과 같이 파일들이 만들어짐. 아래 명령어를

📚 Part 2 Board List, List Container 생성하기 📌 Board List 생성하기 📌 Board List Style 생성하기 flexDirection이 row일 때는 alignItems center 하면수직으로 중앙에 맞춰줌

📚 Part 3 수정, 삭제, 그리고 로그 기능 추가하기 📌 Modal Edit 컴포넌트 생성하기

📚 Part 1 오픈소스란 📌 개발 문화 >개발자들이 선호하는 '좋은 개발 문화 기업' TOP5는?? 기술을 이해하는 팀장/매니저 지속적 통합 및 배포(CI/CD) 참여형 지식 공유 플랫폼 참여형 "지식" 공유 플랫폼 내가 모르는 것들을 누군가가 도와주는 곳

📚 Part 3 오픈소스 문서 구조 📌 오픈소스 라이선스 적용 방법 오픈소스를 가져다 쓰고 싶으면,,, 프로젝트에 사용시 → 깃허브 레포지토리 Readme / License.txt https://opensource.guide/ko/ 오픈소스에 대해 가이드를 해주

📚 Part 5 오픈소스 컨트리뷰터 📌 오픈소스 구성원 역할 저작자 : 오픈소스 프로젝트를 만든 사람 또는 조직 메인테이너 프로젝트의 방향을 알고 있는 / 직접 설정한 프로젝트를 관리하는 컨트리뷰터 커미터 : 컨트리뷰터가 컨트리뷰션을 하면 리뷰를 하는 컨트리뷰

📚 Part 7 오픈소스 프로젝트 찾기 📌 오픈 소스 프로젝트 찾는 방법 추천 사이트 깃허브 구글 코드인 아카이브

📚 Part 9 오픈소스 저작자가 되면 📌 저작자가 되면 좋은 이유 저작자 : 오픈소스 프로젝트를 만든 사람 또는 조직 ❓ 컨트리뷰터가 아니라 굳이 새로운 프로젝트를 만들어 저작자가 될 필요가 있을까? 만약 기능을 수정하거나 추가하고 싶어서 사용 중인 오픈소

📚 Part 1 프로젝트 소개 환경 설정 : 리액트 특히 SPA의 생성과 환경 설정 타입과 모델 : 타입을 정의하고 해당 타입으로 모델을 정의, 작성 데이터 흐름 : API 요청부터 화면의 렌더까지 그 데이터의 흐름을 제어 상태 관리 : 컴포넌트의 상태 관리, con

📚 Part 4 컴포넌트 작성 기초 📁 기본 컴포넌트 작성 리액트의 핵심은 component이다. component는 UI에 독립적이고, 재사용 가능한 부분으로 각각의 컴포넌트가 모여서 어플리케이션 전체를 구성한다. 작은 단위의 컴포넌트를 작성하고 이를 조립해서

📚 Part 6 API 📁 비밀번호 초기화 비밀번호 초기화 api 생성 📁 로그인과 전역 상태 관리 이메일과 password를 이용해서 로그인을 한 뒤 로그인에 성공하게 되면 서버에서 토큰을 날려준다. (토큰을 획득할 수 있음) 획득한 토큰으로 로그인 성공

📚 Part 8 상세 구현 📁 도서 상세 페이지 📌 도서 상세 화면 요구 사항 각 도서 상세 정보 노출 좋아요 버튼 클릭시 좋아요 또는 취소 기능 수량을 입력하여 장바구니 담기 params에서 bookId 가져오기

📚 Part 9 장바구니 📁 장바구니 목록

📚 Part 10 주문 📁 주문서 작성 📌 주문서 작성 장바구리로부터 넘어온 정보를 화면에 표시하고 보존 (navigate로 넘김) 주소, 수령인, 전화번호 입력 및 검증 데이터를 가공하여 서버에 전달 (배송 정보와 장바구니로부터 넘어온 장바구니 주문 정보를

📚 Part 12 리팩토링 📁 중간 회고 도출 아이템 alias 적용 (절대 경로 사용을 위해) 중복코드 제거 스니펫 만들기 useAuth 훅 만들기 (login, signup 등 이동시키기) react-query 적용 (서버 상태를 관리하는 라이브러리) 다양한

📚 Part 13 리뷰 📁 모킹 서버 작성 (MSW) 프론트엔드 환경에서 두루 사용할 수 있는 라이브러리. Moking response를 사용할 것임. 모킹 : 실제로 존재하지 않는 것을 가상으로 존재하도록 만들어서 응답을 받는... 실제로 백엔드에 존재하지 않는

📚 Part 14 UI 패턴 경험 📁 UI 변경 및 추가 📌 다양한 UI 경험 드롭다운 탭 모달 토스트 (showAlert 대체) 무한 스크롤 📌 드롭다운 📌 탭 ![](https://velog.velcdn.com/images/hanbirang/post

📚 Part 15 메인 📁 메인 화면 📌 리뷰 섹션 메인 페이지 리뷰 조회 엔드포인트 추가 메인 페이지에서 도서 리뷰를 조회할 수 있는 reviewForMain 엔드포인트 추가 샘플 리뷰 목록을 제공하기 위해 mockReviewData 사용 상태 코

📚 Part 16 모바일 대응 📁 모바일 대응

📚 Part 0 Intro 📁 웹 개발 파이프라인 구축 📌 학습 목표 "풀 사이클 (full cycle) 개발"이라는 것이 무엇을 뜻하는 것일까? (웹 서비스 개발의 관점에서) 과목 제목에 포함된 "파이프라인 (pipeline)"이 무엇을 뜻하는 것일까? CI/

📚 Part 2 쿠버네티스와 클러스터 운용 📚 Part 3 젠킨스와 지속적 통합

📚 Part 4 CI 파이프라인 구축

📚 Part 5 인수 테스트 자동화

📚 Part 6 CD 파이프라인 구축

📚 Part 1. 오픈 소스와 친해지기 📁 Intro: 오픈소스란 무엇일까? 📌 오픈소스란 무엇일까? 🔗오픈 소스란? 누구나 자유롭게 접근하고, 수정하고, 배포할 수 있는 소스코드를 말한다 쉽게 말해서 집단지성 결과물이다. 넓은 관점에서 보면 위키피디아 같은

📚 Part 3 이슈제보 하기 📁 이슈 활용 하기

프로그래머스 데브코스 웹 풀스택 18주차 Day4 TIL

📚 Part 8 실전 오픈소스 프로젝트 기여 방법 for challengers 📁 추천 오픈소스 프로젝트 📌 추천 라이브러리 react-icons (https://github.com/react-icons/react-icons) react-datapicker (h

📚 Part 10 오픈소스 배포하기

웹 기반 문서 편집기 제작 프로젝트