패스트캠퍼스 데브캠프

컴퓨터 파일의 변경사항을 추적하고 여러 사용자들간에 해당파일 작업을 조율하기 위한 대표적인 관리 시스템(VCS) "효율적인 관리"Content tracker Hash file system toolkit여기서 Hash는 단방향 암호화를 뜻한다. 즉, 암호화는 가능한데 복

commit의 일부 해시값이 head가 된다. 이동하면서 head값(일부 해시값)이 바뀌고 이 head는 특정 커밋을 참조한다.브랜치도 동일하게 checkout하면서 head의 일부 해시값이 변경되고 해당 커밋을 참조한다.기본적인 자료구조 리스트를 확인하자면커밋 하나하

온..보딩......온보딩........??첫 날, 설명을 들었을때엔 오잉?하면서 벌써 프로젝트? 그리고 발표가 5일 뒤?? 멘붕이 왔지만 설명을 들어보니 서비스의 완전한 개발이 아닌 팀원들과 관심있는 주제의 서비스를 기획하고 설계하면서 이 과정을 깃을 통해 협업해보는

HTML > 하이퍼 텍스트 마크업 언어는 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어이며 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당한다. html, css는 어떤 관점과 어떤 해석으로든 다양한 정의를 내릴 수 있다고 한다. html의 초

실제 화면에 표시되는 방법을 지정해 콘텐츠를 꾸며주는 시각적인 표현을 담당하는 도구📢 html파일의 단순한 배경, 글자, 이미지, 구조 등을 css로 레이아웃, 2D, 3D, 글꼴 등으로 꾸며줄 수 있어서 시각적으로 더 아름답고 화려하게 혹은 심플하고 깔끔하게 디자인

🔗 이어서... 정말 단순한, 정적인 html에 스타일을 입힐 때, 글자와 배경 혹은 이미지의 디자인도 중요하지만 이런 텍스트와 요소들을 어떻게 위치시킬 것인지, 그 위치에 어떤 효과를 입힐 것인지, 생각 할 수 있어야 한다. 🔗 position : 요소의 위치

강의를 들으며 똑같이 "따라치기"는 많이 해봤지만 사실상 내가 직접 구현한다고 생각하면 백지가 된다. 특히나 비전공자들은 강의를 보며 타이핑치기도 벅차서 따라가기 급급하고 막상 머리에 들어오는 것은 30~50%가 될 수 도 ..있을 정도이다. 내가 처음 시작했을때만해도

식과 값 그리고 문..예를 들어, 1 + 1 = 2의 계산이 있으면 1 + 1은 식이고 2는 값이다. 그리고 사이에 있는 = 은 문이다. 프로그래밍 언어는 값과 식으로 이루어져 있고 식은 문을 지나 값이 된다. 즉, 식은 반드시 값이 된다. 문의 역할은 값을 바꿔주는

자바스크립트에서의 함수는 함수를 표현하는 방법, 함수를 호출하는 방법, 함수의 사용 범위 등이 다양하게 쓰인다. 함수를 사용하기 전에 확실이 알아보자!같은 이름의 add 함수이지만 함수 표현식과 함수 선언식은 함수의 사용 가능한 범위가 다르다. 함수 선언식은 어디에서든

setTimeout(함수, 시간) : 일정 시간 후 함수 실행setInterval(함수, 시간) : 시간 간격마다 함수 실행clearTimeout( ) : 설정된 Timeout 함수를 종료clearInterval( ): 설정된 Interval 함수를 종료: 함수의 인수

포로토타입을 통해서 지정한 메소드는 메모리에 딱 한번만 만들어지고그것을 앞에있는 생성자가 new 키워드로 만들어내는 인스턴스에서 언제든지 활용할 수 있다. 배열데이터에 활용 할 수 있는 메소드를 알아보자!각각의 데이터들을 요소,배열의 아이템이라 지칭한다.특정한 데이터

JSON (JavaScript Object Notation) 자바스크립트의 데이터를 표현하는 하나의 포맷JSON은 속성 - 값 쌍으로 이루어져있다. 마치 객체의 키 : 값의 모습과 유사하다. 인터넷에서 데이터를 주고받을때 그 데이터를 표현하는 방법으로 JSON을 활용하

패스트캠퍼스 김민태의 데브캠프 1기에 합격 한 이후 합격을 하고 개강 첫날 OT를 진행했다. 개강하기 전에 나의 면접 일정과 지원하게 된 계기와 목표를 먼저 작성하고자 한다.사전신청 -> 자기소개서 -> 비대면 녹화 면접 -> 지원완료패스트캠퍼스 홈페이지에서 사전신청을

데브캠프 내에서 그룹스터디를 진행하면서 우리 그룹의 멘토님께서 이번주의 과제를 주셨다. 자료구조 Stack의 구조로 로직을 구현하는 것.위의 사진과 같이 기본적인 틀은 제공해주셨고 배열이 아닌 객체로 선언해주셨다. 객체 stack의 크기와 데이터를 넣고 빼내는 로직을

어제에 이어서 멘토님께서 주신 이번주의 과제 중 Queue구현하기스택과 동일하게 기본적인 틀을 제공해주셨고 마찬가지로 배열이 아닌 객체와 객체의 크기, 데이터 넣고 빼내는 로직을 구현해보는 것이다. 약간의 다른점은 데이터를 빼내고 front값과 end값도 구해보는 것이

비동기 작업이 완료할 미래의 완료 또는 실패와 그 결과 값을 알려준다.Promise는 자바스크립트 비동기 작업에서 사용되는 객체이다. 비동기 작업은 특정 코드가 실행 완료 될 때까지 기다리지 않고 다음 코드를 먼저 실행시킨다. Promise는 주로 서버에서 데이터를 받

node.js는 구글 ChromeV8 JavaScript엔진으로 빌드된 JavaScript런타임(프로그래밍 언어가 동작하는 환경)으로 컴퓨터와 브라우저 둘 다 사용되며 비동기식 이벤트 방식을 통해 높은 성능을 제공한다. Node.js를 사용하면 JavaScript를 사

"토이프로젝트I"을 시작하면서 로직 구현에 있어서 객체 표기법에 대한 개념이 완벽히 되지 않은 것 같아 복습을 선택했다. 🔗 Object JavaScript의 객체(Object)는 여러 개의 속성(property)을 갖는 데이터 타입으로 중괄호로 감싼 의 쌍을 여

오늘도 시작하는 기초 복습 ! 복잡한 객체 안에 배열 접근하기 위의 코드처럼 " 객체 안에 배열 안에 객체 " 처럼 복잡한 구조에 있는 값에 접근하고 싶다면 객체는 점 또는 대괄호 표기법으로 접근, 배열은 대괄호를 사용하여 인덱스의 번호로 접근한다. 배열의 n번째 인

🔗 SPA 단일 페이지 애플리케이션(Single Page Application)으로 서버에서 필요한 데이터만 비동기로 받아와서 현재 화면에 다시 렌더링하는 방식이다. 이는 하나의 페이지로 사용자의 요청을 즉시 생성하여 더 빠르게 화면 전환을 처리할 수 있어 많이 사용

Database없이 JSON파일에 있는 데이터를 서버와 클라이언트에서 같은 uri를 이용해서 통신하여 로그인 기능과 회원가입 시 이메일 유효성 검사하기 파일구성 Data - users.json Server - index.js (express) Client - logi

🔗 그룹스터디 시작 데브캠프가 개강하고 일주일이 지난 뒤부터 랜덤으로 배정받은 팀원 4~5명과 그룹스터디를 시작하게 되었다. 랜덤으로 배정된 방식은 스터디 팀 구성원 발표 전에 원하는 스터디 주제에 관해 설문을 진행하여 각 수강생들이 원하는 주제로 스터디를 할 수 있

🔗 LocalStorage 로컬스토리지는 사용자의 로컬에 존재하는 저장소로 로컬스토리지를 사용하면, 브라우저에 데이터를 Storage에 저장하거나 수정하거나 삭제할 수 있다. 로컬스토리지에 저장한 데이터는 세션간 공유되어 세션이 바뀌어도 저장한 데이터가 유지된다.

📌 완성본 미리보기준비물은 VScode와 글 목록으로 만들 데이터 뿐!!!ul태그 안에는 선언해준 data를 태그로 감싸 넣어 주고, 페이지네이션을 이용할 버튼이 들어갈 예정이라 비워두었다.CSS는 시각적으로 보았을때 필요한 부분만 작성해두었다.하다보니 조금 길어지

민태강사님의 강의를 듣고 어렵다는 생각이 들었던 주제였고 벨로그를 작성하면서 이 주제에 관해 더 찾아봤음에도 심화된 내용에서는 막히는 부분도 있었다. 그럼에도 불구하고 개념정리와 복습 차원에서 작성해보고자한다. 엔진 컴퓨터에 내장되어있는 CPU하드웨어는 여러개의 작업

🔗 Node.js 19일차 쯤 프로젝트를 구성하기위해 Node.js가 자바스크립트를 프로그래밍 언어 역할을 할 수 있도록 지원하는 실행 환경이고 Node.js기반의 외부 모듈들을 내 프로젝트에 쉽게 다운로드하고 사용할 수 있게 해주는, Node.js를 서포트해주는 n

React JSX > JSX( Javascript syntax extension )는 자바스크립트의 확장 문법. 리액트에서는 이 JSX를 이용해서 화면에서 UI가 보이는 모습을 나타내준다. JSX를 이용하면 UI를 나타낼때 자바스크립트(logic)와 HTML구조(ma

구조분해할당(Destructuring) > 배열이나 객체의 속성을 분해하여 그 값을 개별 변수에 할당 할 수 있게 하는 javascript표현식으로 클린코드를 위해 많이 사용된다. 함수에 객체나 배열을 전달해야 하는 경우, 객체나 배열에 저장된 데이터 전체가 아닌 일

Lifecycle 리액트 컴포넌트는 컴포넌트가 브라우저에 렌더링되기 전부터 페이지에서 사라질때까지의 생명주기(Lifecycle)가 존재한다. 라이프사이클은 크게 마운트(생성될 때), 업데이트, 언마운트(제거될 때) 총 세 가지로 나뉜다. Mounting 컴포넌트가 로

🔗 Hooks 직역하면 갈고리를 뜻하는 Hooks은 function component에 state관련 함수, lifecycle 관련 함수, 최적화 관련 함수를 Hook을 통해 넣어 줄 수 있다. 이름 앞에 use를 꼭 붙여야한다!! 🔗 Hook이 필요한 이유 초창

useState( ) 사용해서 state 업데이트하기 🔗 onClick 이벤트로 카운트 업데이트 App.js Counter.js 🔗 onChange 이벤트로 카운트 업데이트 App.js Counter.js

useEffect() > - side effect를 수행하기 위한 Hook state가 변하던, 무슨 일이 일어나던 이펙트함수가 의존성 배열의 값이 변함에 따라 실행될 수 있도록 보호해주는, 생명주기 함수와 동일한 기능을 해주는 Hook useEffect ( 함수 ,

토이프로젝트I을 하면서 데이터베이스를 사용할 수 있도록 기본 템플릿에 SQLite3 라이브러리를 담아서 주셨는데 쿼리문을 작성하는 것이 쉽지않아서 json파일을 가져오는걸 선택했었다. 프로젝트 기간이 끝나갈때쯤 SQLite3를 사용해보고싶어 데이터를 가져오는 방식으로만

토이프로젝트I 마이페이지에서 프로필사진 업로드 기능 구현하기 프로젝트 server폴더 모듈 구성 express express-fileupload path cors fs express-fileupload express를 사용하는 서버에서 파일 업로드 기능을 쉽게 구현

토이프로젝트I 주제는 바닐라js로 SPA방식을 활용하여 사내인트라넷 구현하기5주의 기간동안 우리 팀원은 부트캠프 수강생들을 위한 간편한 행정 인트라넷 구현하였다.내가 담당한 페이지들을 목차별로 나열해보았고 자세한 코드는 깃허브레포에!!!!team4.깃허브레포 보러가기디

🔗 Type >자바스크립트 데이터 값의 유형 어떤 value가 갖고있는 property나 function을 추론 할 수 있는 방법으로 개발환경에서 에러를 잡는 것을 도와주고 타입지정을 사용해 코드를 분석 할 수 있다. 🔗 type annotation >데이터 타

실시간강의 때 강사님께서 타입의 이름을 지정하는 방법으로 타입별칭과 interface의 대한 미묘한 차이가 있어 취업 면접때 어떤걸 사용하는지의 이유와 함께 물어보는 경우가 종종 있다고하여 차이점에 대해 추가적인 공부가 필요하다고 하셨다. 🔗 Interface &

useState 사용해서 메모장 구현하기App.jscomponentsHeader.jsAddItem.jsItem.jsList.js최근 실시간 강의때 민태강사님께 배웠던 예전 리액트 라우팅 방식도 사용해보고 싶어서 아직은 단일 페이지인 메모장에 도입해보았다.Route pa

검색 기능 > 메모장에 CustomHook과 useEffect사용해서 검색 기능 추가하기 전날 벨로그에 있던 결과 이미지를 보면 메모장 상단에 검색창이 있었지만 해당 코드에는 검색 기능이 없었어서 검색기능까지 추가해보았다. Header.js 먼저 검색창 input의

토이프로젝트I 토이프로젝트I은 5주동안 진행되었고 이후 1주 동안의 리팩토링 기간이 포함되어 있었다. 이 블로그는 이번주 리팩토링 기간동안 멘토님께 얻었던 코드리뷰, 피드백과 이것을 반영하여 개선했던 점 그리고 프로젝트를 참여하면서 느꼈던 점들에 대한 기록이다. 리팩

react-router-dom React로 생성된 SPA로 내부에서 페이지 이동이 가능하도록 만들어주는 라이브러리이다. react-router-dom을 사용하면 웹, 앱에서 컴포넌트 기반 라우팅을 용이하게하여 동적 라우팅을 구현 할 수 있다. 설치 사용 방법 (6.

Props Driling 깊숙히 위치한 컴포넌트에 데이터를 전달 할 때 props를 여러개의 컴포넌트를 거쳐 전달해야한다. 이렇게 되면 value가 어디서부터 오는건지 상위 컴포넌트로 타고 타고 올라가야하고 상위 컴포넌트에서 데이터를 추가하여 내려준다거나 value를

민태강사님께서 리덕스를 공부하기에 가장 좋은 방법은 Flux아키텍처에 대한 공부를 우선적으로 한 이후 리덕스와 리덕스툴킷의 공식문서를 참고하여 공부하기를 권장하셨다. 🔗 Flux pattern >Action - > Dispatcher - > Model(store) -

createAction, createReducer, createSlice 함수의 reducer는 동기 함수를 실행하기때문에 redux toolkit에서 제공하는 비동기 처리 API함수를 사용하면 된다. function createAsyncThunk( type, payl

Genegic 제네릭은 타입을 고정된 값으로 명시하지않고 변수를 통해 언제든지 변할 수 있는 타입을 보다 유연하게 사용하게끔 한다. 리액트에서 컴포넌트에 props로 무엇이 올지 모르기때문에 generic을 사용하고 제네릭을 사용하면 재사용성이 높은 함수와 클래스를 생

🔗 useRef useRef는 리액트 컴포넌트에서 변경 가능한 값을 유지하기 위해 사용하는 Hooks이다. useRef Hook을 사용하여 DOM요소에 접근하고 컴포넌트의 렌더링과 관련이 없는 값을 저장할 수 있다. 🔗 형식 > const 변수명 = useRef(

토이프로젝트II를 통해 React에 TypeScript 사용해보기기본적인 타입 지정은 기초적인 예시코드를 작성하면서 해보았지만 막상 프로젝트를 시작하면서 타입을 지정하려니 어렵게 느껴졌다.😥 민태강사님 말씀으론 타입스크립트는 2년간 꾸준히 사용해봐야 "나 이제 좀 타

정적사이트 깃허브로 배포하기 제일 먼저 저장소(repository)를 생성한다 !! 생성된 레포를 로컬 저장소와 연결하고 push한다 !! 원격 저장소에 잘 올라갔으면 gh-pages 모듈을 설치 한다 !! 설치가 정상적으로 끝났으면 pakege.json에 홈페이

OOP > Object-Oriented-Programming 객체 지향 프로그래밍 OOP는 어떤 목적을 달성하기 위해 명령을 순서대로 나열하여 전달하는 알고리즘을 어떻게 설계 할 것인지에 대한 개념이자 방법론이다. 즉, 객체를 지향하는 프로그래밍 방식을 적용하여 설계

토이프로젝트II 서버는 Firebase에서 제공하는 Firestore를 사용 ! 토이프로젝트II는 짧은 기간 3주동안 진행되어 서버까지 구축하지않고 firebase에서 제공되는 서버 firstore를 사용하기로 했다. firestore 구조는 컬렉션 > 문서 > 필

토이 프로젝트 II를 진행하면서 각 페이지에서 쓰이는 모달 상태관리를 Redux를 사용하여 전역으로 상태관리를 할 수 있게 modalSlice를 만들었다. modalSlice.ts initialState modals는 각 모달의 상태를 객체로 관리하고 모달의 고유한

Docker 🐳 >컨테이너 기반의 오픈소스 가상화 플렛폼으로 컨테이너 이미지를 생성, 관리, 공유, 구동하는 작업을 손쉽게하는 컨테이너 런타임 도구이다. 가상화란 하드웨어를 효율적으로 활용하기 위해서 하드웨어 공간 위에 가상의 머신을 만드는 기술을 말하며 컨테이너는

🔗 토이프로젝트II 토이프로젝트II는 5주였던 토이프로젝트I보다 진행 기간이 단축되어 3주동안 기획과 개발을 하였고 리팩토링 기간은 1주로 진행되었다. 토이프로젝트II의 주제는 "직원들을 위한 급여관리 플렛폼"이였다. 우리 팀은 4인으로 구성되었으며 프로젝트 주제에

위의 명렁어로 Firebase CLI를 설치한 이후 로그인을 하고 프로젝트를 build 한다. 마지막으로 파이어베이스 초기화 명령어를 치면 디렉토리가 뜨고 여러 질문을 통해 기본설정을 선택한다.firebase의 어떤 기능을 사용할건지? - Hostingfirebase에

🔗 Zustand React 상태관리 라이브러리로 Redux처럼 단순화된 Flux패턴을 사용하지만 Redux와 다르게 보일러플레이트 코드(Boilerplate code)가 거의 없을 정도로 코드가 간단하며 연결부터 상태관리까지 쉽다는 장점이 있어 Zustand를 많이

Vite, React, TypeScript 프로젝트에 MongoDB연동 및 서버 구축하기 설치 MongoDB 연동 mongoDB Cluster생성 이후 VSCode extention에서 MongoDB를 설치하면 빠른 연동이 가능하다. 설치하면 오른쪽에 몽고DB툴이

모달 상태 전역으로 관리하기 ( 모달: 로그인 모달, 회원가입 모달 )useModalStore는 zustand의 create를 사용하여 초기값인 modals와 state를 변경할 openModal, closeModal 메서드를 작성해주었다.각 메서드는 modalName

🔗 TanStack Query > TanStack Query는 서버에서 받은 데이터의 상태관리와 캐시 처리를 보다 간편하게 할 수 있는 비동기 상태 관리 라이브러리이다. TanStack Query는 데이터 캐싱을 통해 불필요한 네트워크 요청을 방지하고 success

이번 팀프로젝트에서 로그인과 회원가입도 담당하게 되면서 유저데이터와 관련된 여러가지의 API를 요청할 수 밖에 없었다. (중복검사, 유저 데이터 생성, 로그인한 유저데이터 등) Tanstack Query를 사용하면서 useMutation으로 POST, PUT의 각종 작

useImperativeHandle Hook을 사용하여 자식 컴포넌트에서 부모 컴포넌트로 props 전달하기 토이3 프로젝트 중 플레이리스트를 추가하고 수정 할 수 있는 관리페이지를 담당하면서 부모컴포넌트인 managePlaylist.tsx가 있었고, 하위로 영상을

토이프로젝트III는 토이프로젝트II와 마찬가지로 기획과 개발을 할 수 있는 3주와 리팩토링 기간 1주로 진행되었다. 토이I과 토이II는 인트라넷이란 비슷한 주제로 진행되었지만 이번 토이프로젝트III 주제는 영상링크 기반 플레이리스트 공유 플렛폼로 시작부터 좀 더 흥미를

소프트웨어 테스트 특강 강사님은 우아한형제들의 민태강사님과 같은 팀에서 테크리더로 계시며 소프트웨어 테스트의 주제를 갖고 테스트의 종류, 장단점, 자동화 등과 관련된 지식을 공유해주셨다. 소프트웨어 테스트란? 소프트웨어 테스트는 소프트웨어가

애자일(Agile)이란? 애자일은 변화에 빠르게 대응할 수 있는 제품 개발 프로세스를 말합니다. 이 방식은 고객의 요구사항을 반영하면서도 지속적인 개선을 목표로 합니다. 애자일을 활용한 대표적인 프레임워크로는 스크럼(Scrum)과 칸반(Kanban)이 있습니다. 스크

깃허브 레파지토리 & 펩픽 (FE Pick) 기업연계 프로젝트를 시작하기 이전에 혼자서 처음부터 끝까지 기획하고 운영까지 해보는 프로젝트를 시도해보고자 펩픽(FE Pick)을 개발하게 되었다. 또한, 내가 문제를 제공한다 했을 때 스스로에게도 학습에 도움이 되고 문제를

🔗 Next.js > React SSR(server side rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크 🔗 CSR (Client Side Rendering) 리액트로 개발할때 SPA을 이용하며 CSR(client side renderin

🔗 AppRoute Next.js에서 AppRoute는 파일 시스템 기반의 라우터라고 설명하는데, app폴더 하위에 위치한 세그먼츠와 특수한 파일들을 통해 라우트를 정의하기 때문이다. 🔗 Page 가장 상위에 있는 app폴더는 루트 path를 가리키고 하위 세그먼

🔗 Data Fetching >Next.js의 서버 컴포넌트에서 Data Fetching의 이점 한 번의 왕복으로 여러개의 data fetching을 수행하여 client-server waterfall을 줄인다. 민감한 정보가 클라이언트에서 노출되는 것을 방지 할 수

🔗 기업연계프로젝트 마지막 프로젝트의 발표회와 동시에 데브캠프 수료식까지 끝났다. 기업연계프로젝트는 2개의 기업이 있었고 대용량 데이터 시각화를 시도해보고 싶었던 나는 "투자 매매 전략 공유 및 중개소셜 플랫폼"을 주제로 한 시스메틱 기업의 프로젝트에 참여하게 되었다