스파르타 내배캠4기

미니 프로젝트 개강 후 첫 오티를 끝내고 바로 미니프로젝트가 시작하였다. 할 수 있는게 별로 없어 절망스럽지만 이미 시작했다.. 팀원들과 상의하에 각자 맡을 곳을 정해 기능을 구현하기로 했다. 웹개발 종합반 내용을 토대로 서버와 DB를 이용하여 구현하는 것이 필수이다

미니프로젝트 시작한지 2틀이 지났다. 어느정도 마루리는 되었는데 DB부분을 맡아서 하는 조원들에게 너무 감사하다😊😊 나는 아직 Html, Css와 간단한 JS코드로만 구현할 수 있는 실력이다. (주말에 빡공 예정...) 내가 맡은 부분은 메인 페이지의 구현을 맡았

남은 시간 틈을 타서 깃에 대해 공부했는데, 기본적으로 깃 명령어를 활용하는게 바람직하다는 생각하에 차차 그런 방향으로 공부하겠지만 지금 당장 툴을 활용해야할 처지에 있다

개발자가 되기 위해 부트캠프를 하는 많은 교육기관을 알아봤다. 대부분의 교육기관은 교육 기간 내에 프론트엔드와 백엔드를 같이 배우는 과정이 많았다.하지만 나는 프론트엔드 개발자를 희망하고 있었고, 프론트엔드 과정의 커리큘럼이 있는 교육기관을 찾다가 스파르타 내일배움캠프

내가 맡은 부분을 세심히 다듬었다. 그 중 힘든 것이 있었는데 dark/light 모드를 만들었는데 방명록에서 submit이 되면 새로고침과 동시에 dark 모드가 풀린 것이었다. 나중에 안 것이지만 데이터 받아 올 때 새로고침을 넣어나서 아무리 event.prev

오늘 미니프로젝트 발표를 마침으로써 마침내 한주간의 팀 프로젝트가 끝났다. 모든 조원이 화면을 발표할때 공유함으로써 구현한 화면과 코드를 보여주는데 캠프시작한지 5일 밖에 안됐다는 사실이 믿기지 않을정도로 다들 너무나도 잘했다. 특히, 각 조마다 특색이 있었고, 우리가

한 주가 끝이 났습니다. 미니프로젝트를 통해 정말 값 진 경험을 하게 됐습니다.

자바스크립트 기초 문법에 대해 배웠다. 그 중 Class함수를 배운 것이 기억에 남는다. class 이름을 선언하여 this를 이용해 내부 값에 다가갈 수 있다. > const p = new Rectangle(); // ReferenceError class Rectan

4 > 2 5 < 1 6 >= 5 4 <= 4 3 == 5 4 != 7 first_name + last_name > first_name + " " + last_name > a = "3"b = "5"a + b

변수 var, let, const var 과 let, const는 es6문법 전후로 나뉘어지는 변수 키워드이다. 3개의 키워드는 선언과 할당에 있어서 차이를 나타낸다. > > > const는 상수 개념으로써 재할당이 불가능하지만, const 변수의 상속 값에 있어서

JAVASCRIPT 문법 연산자 > #### ==, ===, !=, !=== > #### 1. == 은 값이 같은지 확인하는 방법이다. > > #### 2. === 은 값과 타입이 같은지 확인하는 방법이다. > > #### !은 부정을 나타내는 것으로 !true 는

// 선언문function add(a, b) { return a + b; }// 표현식const add = function(a, b) { return a + b;}// 화살표 함수const add = (a, b) => { return a + b;}const add

🥺🥺지금은 Map Set에 대해서 배우고 있지만, 정말 깊게 들어가면 들어갈수록 어려워져서 이해가 안되는게 많다. 반복학습을 통해 이해와 코드 실습을 통해서 얼른 내것으로 만들고 자유롭게 코드를 구현할 수 있도록 노력할 것이다.

// 배열 안에서 찾고자 하는 것// 요소가 있는지 확인// 배열 맨앞에 요소 추가// 맨 뒤에 추가// 맨 앞 제거// 맨 뒤 제거//중간에 추가, 삭제// 특정부분 잘라서 새로운 배열 반환// 배열을 이어줌// 순서를 거꾸로 반환// 중첩된 배열을 하나의 배열로 펴

flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소된. 이것도 쉽게말해 화면 사이즈가 작아졌을때

배열과 객체랑 비슷한데 왜 쓰는가??😮😮 그 이유는 객체랑 쓰임새가 비슷하지만 그에 따른 함수 사용이 다르기 떄문이다.

정수 num1과 num2가 매개변수로 주어집니다. 두 수가 같으면 1 다르면 -1을 retrun하도록 solution 함수를 완성해주세요. > > 내가 푼 방법 > 1. num1, num2값 두개를 매개변수에 준다. 2. 조건문으로 num1과 num2를 비교한뒤 값

로그인, 회원 가입Authentication 에서 제공하는 api를 이용하여 아래 회원 가입, 로그인을 구현해보세요.아이디(이메일), 패스워드 로그인 및 회원가입소셜 로그인 (구글, 깃헙)Firestore 에서 제공하는 api를 이용하여 CRUD 데이터베이스 핸들링을

1주간 자바스크립트 문법에 대해 집중적으로 배웠다. 변수부터 시작해서 연산자, 제어문, 반복문, 배열, 객체, 함수, 클래스 등등 기초적인 부분만 알고 있었던 내용이었기에 일주일동안 시간을 내어 공부를 열심히 했다. 😔😔내가 부족한 부분 > #### > 생성자 함

url에 해시(> 1. 브라우저는 url에 > 2. “http://example.com/> 3. “http://exmaple.com/about”로 첫 랜딩 또는 새로고침이 되면 브라우저는 호스팅서버에 “/about”에 해당하는 별

리액트반으로만 구성된 팀원들끼리 데이터베이스를 구축하려니 너무 힘들거라 생각했는데, 튜터님께서 편하게 서버를 구축하고 데이터베이스를 이용하실 수 있도록 환경을 세팅해준게 너무 감사하다. 하지만, 아직도 브라우저와 서버에 대한 이해도가 부족하고, 코드에 대한 개념도 많이

Html에서 button onclick = save_list(event); 라는 함수을 실행시켜서 위와 같이 text, creatAt, creatorId, profileImg, nickname을 저장할 수 있다. 만약 에러가 뜰 경우 catch로 error를 잡아서 a

const parentNode = event.target.parentNode.parentNode; const commentText = parentNode.children0; commentText.classList.remove("noDisplay"); const

댓글 등록창에 텍스트를 입력후 버튼을 클릭시 fanLog.js에서 save_comment(event) 함수를 실행시킨다.Firebase의 addDoc()함수를 이용하여 Text, new Date()함수, Uid, 닉네임, 게시글을 데이터베이스에 저장한다.router.j

타이머가 만료된 뒤 실행할 function입니다.

상당수 이벤트는 발생 즉시 브라우저에 의해 특정 동작을 자동으로 수행합니다. >#### 링크를 클릭하면 해당 URL로 이동합니다. >#### 폼 전송 버튼을 클릭하면 서버에 폼이 전송됩니다. 마우스 버튼을 누른 채로 글자 위에서 커서를 움직이면 글자가 선택됩니다. 브

Number, String, Boolean, Null, Undefined, Symbolobject => Array, Funtion, Date, RegExp, Map, WeakMap, Set, WeakSet/\* 풀어 쓴 변수 할당 방식 /var testValue;tes

VariableEnvironmenta. 현재 컨텍스트 내의 식별자 정보b. 외부 환경 정보c. 선언 시점 LexicalEnvironment의 snapshotLexicalEnvironmenta. VariableEnvironment와 동일하나 변경사항이 실시간으로 반영Th

전역 공간에서의 this1\. 기준 : 독립성2\. 함수 : 그 자체로 독립적인 기능을 수행3\. 메서드 : 자신을 호출한 대상 객체에 관한 동작을 수행1\. 어떤 함수를 함수로서 호출할 경우, this는 지정되지 않음(호출 주체가 없으므로)2\. 실행컨텍스트를 활성화

대기(pending): 이행하지도, 거부하지도 않은 초기 상태. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함.주어진 모든 프로미스가 이행하거나, 한 프로미스가 거부될 때까지 대기하는 새로운 프로미스를 반환

iterator protocol 은 value( finite 또는 infinite) 들의 sequence 를 만드는 표준 방법을 정의합니다.객체가 next() 메소드를 가지고 있고, 아래의 규칙에 따라 구현되었다면 그 객체는 iterator이다

React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 선언적 (Declarative)이다 👉🏻 리액트는 대화형 UI를 작성하기에 유리하다. 데이터가 변경되었을 때 효율적으로 렌더링을 수행할 수 있도록 한다

props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면

구조 분해 할당을 통해 더욱 쉽게 받을 수 있다.객체나 배열 구문에서 속성을 바로 해체해서 변수처럼 사용할 수 있는 표현식이다.

✔ 버튼을 클리시 함수를 실행시킨다.

예제

git pull origin 브랜치명 📌해당 브랜치 pull

⭕styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리이다.$ npm install --save styled-components//

Mult page application의 약자로 여러 페이지로 구성된 웹 어플리케이션입니다.사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html을받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식입니다.Sing

🧑클라이언트 IP 주소 <=================>💻서버 IP 주소TCP (전송 제어 프로토콜)은 두 개의 호스트를 연결하고 데이터 스트림을 교환하게 해주는 중요한 네트워크 프로토콜이다. TCP는 데이터와 패킷이 보내진 순서대로 전달하는 것을 보장해준

🔸Uniform: 리소스를 식별하는 동일된 방식🔸Resource: 자원, URI로 식별할 수 있는 모든 것 (제한x)🔸Idetifier: 다른 항목과 구분하는데 필요한 정보🔸리소스가 있는 위치를 지정예)💚프로토콜: 어떤 방식으로 자원에 접근할 것인다 하는 약속

클라이언트가 보낸 요청의 처리 상태를 응답해서 알려주는 기능이다. 요청이 수신되어 처리중 클라이언트의 요청을 성공적으로 처리200 ok201 Created202 Accepted=> 요청이 접수 되었으나 처리가 완료되지 않았음204 No Content=> 서버가 요청을

📌context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. 사용법 context 등록

1\. github 활용을 열심히 했다.2\. 컴포넌트 구조를 잘 짰다.3\. DB 설계를 짜는데 집중했다.4\. 회의하는 과정에서의 소통이 원활했다.5\. 역할분담이 잘 분배 되었다.🔹어려웠던 점경기 상세페이지에서 코멘트를 불러올 때 쓰는 방식🔹해결방법param값

React Native는 React를 사용해서 iOS와 Android 앱을 개발할 수 있는 프레임워크이다.(리액트로 모바일앱을 만들 수 있는 프레임워크)

위쪽 코드를 살펴보면 일반적으로 React에서는 못보던 것들이 있다.5종류의 코드를 하나씩 살펴보자div 태그의 역할을 한다.기본적으로 flex box 속성을 가지고 있다.p 태그 역할을 한다.문자열input 속성을 가지고 있다.onChangeText, onPress,

setTodos를 이용해서 이전 값에 newTodo를 추가해준다.id를 인자로 받아 filter함수를 통해 다른 값을 걸러서 필터 해준다.마찬가지로 id를 인자로 받아 같은 값을 findIndex를 통해서 확인 후 text를 변경하게 해준다.

Native 환경은 Expo go를 이용한다.screen 폴더를 생성하고 그 안에 Login.jsx 파일을 만들어준다.로그인과 회원가입을 해줄 간단한 로직을 구현한다.다음은, onPress에 대한 함수와 파이어베이스의 Auth를 이용해서 구현해본다.먼저, 파이어베이스

먼저, 파이어베이스 홈페이지에서 프로젝트를 생성 후 Authentication 을 시작해준다.시작하기를 누르면 조금의 시간이 흐른 후 이러한 화면이 나온다.나는 이메일/비밀번호만 이용 할 것이기 때문에 첫번째 것만 클린한다.클릭하고나서 첫번째 스위치 버튼만 on을 시켜

파이어베이스에서 로그인을 쉽게 해주는 기능이 있다. AuthService 중 하나인 createUserWithEmailAndPassword를 이용하여 email, password를 쉽게 구현할 수 있다. emotion을 사용했기에 태그 네임이 자유롭다. > UI 로

사용자의 회원가입을 원활하게 하기 위해 유효성 검사를 해보자총 7개의 상태가 나온다.🔘 email = 이메일 입력칸🔘 password = 비밀번호 입력칸🔘 checkPassword = 비밀번호 재확인 🔘 nickname = 닉네임 입력칸 🔘 secureText

먼저 utils.js 파일을 따로 만들어줘서 유효성 검사에 필요한 Regex를 만들어준다.위에 보이는 Dimensions는 리액트 네이티브에서 제공하는 기능인데, 기기마다 화면 크기가 천차만별인데 스크린 화면 설정을 도와준다코딩을 하시는 분들은 Alret로 에러를 알려

이번 리액트 네이티브 프로젝트 기간이 길었던 만큼 팀원들과 많은 소통과 친함이 있었습니다.마무리 또한 좋은 결과를 내며 튜터님에게 칭찬을 받아 좋은 성과가 있던거 같습니다.이제 마무리인 만큼 좋았던 점, 아쉬웠던 점 각자의 KPT 회고를 정리하는 시간을 가져보았다.🔘

타입스크립트는 자바스크립트에 타입을 부여한 언어입니다. 자바스크립트의 확장된 언어라고 볼 수 있습니다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 합니다. 이 변환 과정을 우리는 컴파일(complile) 이라고 부릅니다. (출처:

타입스크립트 인터페이스 (interface) 타입스크립트의 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 보통 다음과 같은 범주에 대해 약속을 정의할 수 있다. > 🔘 객체의 스펙(속성과 속성의 타입) 🔘 함수의 파라미터 🔘 함수의 스펙(파라미터,

이 2개의 차이점이 있지만 아주 결정적인 차이점이 존재한다바로, interface 에는 extends 라는 확장이 가능 하지만, type 별칭에는 확장이 가능하지 않는다. 그래서 type 별칭보다는 interface로 타입을 주는 것이 바람직하다.

위에 경우에는 string, number, boolean 값 모두를 충족 시키기 위해 불가능한 타입이다🔵 유니온 타입 ( | )🔸장점한가지 이상 타입을 쓰고 싶을 경우🔸특징⛔ 쓸 수 있는 속성도 공통된 부분만 쓸 수 있다. name에만 접근 가능🔵 인터섹션 타입

새로운 프로젝트를 하게 되었다. 저번과 달리 이번에는 react로 프로젝트를 하기로 결정 했다. 😀😀 새로운 팀원 들과 기획을 하면서 정한 것들은 데이터베이스는 구글에서 제공해주는 파이어베이스를 이용하고, youtube 오픈 API를 이용해서 우리가 기획한 취지에

타입스크립트를 배우고 나서 곧장 프로젝트가 시작 되었다. 새로운 5명의 팀원으로서 이번에는 구글에서 제공하는 유튜브 API를 이용해서 유튜브 영상을 이용한다. 주제는 초보 개발자를 위한 사이트로써 언어별로 영상을 볼 수 있고, 댓글로 깃헙 링크를 주고 받으며 소통할

댓글 등록을 하고 싶을때는 파이버에이스의 데이터 추가할 수 있는 API를 이용해야 한다.그중에서 나는 addDoc( ) 이라는 함수를 사용해서 내가 원하는 key : value 값을 데이터 베이스에 객체로 저장해줄 것이다.onClick 이벤트로 AddCommentBut

1주일간의 5명의 팀원들과 프로젝트를 성공적으로 마무리했다.설 연휴에도 새벽까지 함께 고민하고 진행 해준 팀원들에게 감사한 마음이다.프로젝트 일정, 기능 개발, 참고자료 등 꼼꼼한 문서화를 통해 현재 작업하고 있는 것, 상태 등을 바로바로 기록해서 누가 뭘 하고 있는

➡ 메모이제이션(memoization)은 컴퓨터가 동일한 계산을 반복해야 할 때 맨 처음 계산한 값을 메모리에 저장해서 필요 할때마다 메모리에서 해당 값을 꺼내서 사용하는 것을 말한다. state와 props를 통해 수많은 랜더링이 일어난다.랜더링이 일어날 때 무거운

어떤 서비스를 할 것인가에 대해서 여러 의견들을 주고 받았다.기준은 이렇게 잡았다.등등, 서로 머리를 맞대어 고민한 결과 우리 모두가 개발자 취업을 꿈꾸기도 하기 때문에, 우리와 같은 처지에 있는 분들을 대상으로 기획했다.그것은 바로, 이미 이러한 서비스를 제공하는 H

최종 프로젝트에서는 디자이너님과의 협업을 할 기회가 생겼다. 총 5주의 프로젝트 기간이 주어졌다.우리 팀원들은 기간을 쪼개며 계획을 세웠다.📌 와이어프레임, 필요한 기능, DB구조, API 명세서, 역할분담 등 📌 기능구현, CSS작업, API 호출 등 📌 추가

이렇게 되면 info의 값이 새로운 배열로 newInfo 안에 들어가게 된다.

1\. 대부분 옛날 글들이었다.2\. firebase 문서에서도 realtimebase보다 firestore에 대해 더 자세하게 나와있다. 3\. 비교적 최신버전이다.4\. 용량도 훨씬 크게 사용할 수 있다.5\. collection 관리를 쉽게 할 수 있다화면에 보여

우리가 기획한 것은 모각코 ( 모여서 각자 코딩 )에서 뜻을 반영해 모코라는 이름으로 사이트를 기획했다.주 기능은 매칭기능으로써 코딩을 하려는 사람이 대상이다.코딩을 하려는데 주변에 마땅히 같이 할 사람이 없을 시 이 사이트를 유용하게 사용할 수 있는데, 프로젝트, 스

그 중 Google과 GitHub로 로그인을 할 수 있는 서비스를 기획하였다. ⛔⛔ FireBase에서 제공하는 서비스로 간편하게 로그인 할 수 있지만, 문제는 이게 회원가입 따로, 로그인 따로가 아니라 동시에 하는 것이기 때문에 로그인 할 때마다 초기화 된 정보가 D

이 순서로만 해주면 배포된 사이트에서도 기존 로컬에서와 하는 것과 똑같이 사용할 수 있다.

팀원들과 프로젝트를 진행하면서 데이터를 관리를 해야할 필요성을 느꼈다. > #### 1. props drilling이 일어나는 곳이 부분적으로 있다. 2. 불필요한 컴포넌트에서 데이터가 호출 된다. 이러한 이유로 데이터를 useQuery로 받아오고 그 데이터를 전역으

버그를 찾아나서는 중에 헤더 아이콘 토글 문제를 발견했다.헤더는 드랍다운 형식으로 클릭시 true, false로 열고 닫을 수 있다.하지만, 아이콘을 클릭 후 다른 페이지로 넘어가면 토글이 그대로 남아있는 것이었다.마이페이지를 누를 때 토글 state를 false로 바

태그 아래쪽에 이게 보일 것이다. useEffect를 통해 스크롤이 해당위치로 왔을 때 스크롤 이벤트를 발생시켜준다.

하루에 12시간 이상씩 개발에 몰두하고, 필요에 따라 충분히 소통하면서, 때로는 서로를 격려해주며, 서로를 의지하며 웃으면서 프로젝트를 함께 해준 팀원들에게 너무나도 감사하다. 기획을 했을 당시에 나는, 나의 개발 실력에 비해 너무 거창한 프로젝트라고 생각이 들었다.