부트캠프[코드스테이츠 FE 44기]

컴퓨터정보과를 졸업 후 바로 취업했다. 웹 디자인 업무를 진행하게 되었고 년도가 지날 수록 남들 보다 실력이 부족하고 성장하고 싶다는 생각이들었다. 그러다 프론트엔드에 관심을 가지게 되었고 여러 매체를 통해 실습해 보면서 프론트엔드가 되기로 결심하게 됐다.원래 42기수

오늘 부터 수업 시작이다. 강사님이 수업하는 방식이 아닌 자기주도적 학습으로 처음 진행할 경우 어려움이 있을 수 있다. 미리 선행 학습을 하고 시작하는걸 추천 한다.웹 개발의 이해와 HTML에 대해 배웠다.예전 업무했던 바탕으로 그리 어렵지 않았지만 이론적인 부분을 좀

기본적인 CSS는 알고 있다 생각 했는데 이번 학습을 통해 놓치고 있던 부분과정확한 명칭 등에 대해 알 수 있었다. CSS는 공부하면 할 수록 재밌어지기도 하지만 한편으로 어려워진다. Javascript, React에만 몰두하지말고 꾸준히 HTML/CSS에도 괌심을 줘

와이어프레임, 레이아웃 구조, flex box등에 대해 배웠다.오늘 부터 페어 활동으로 다른 수강생분과 2인 1조가 되어 같이 공부하고 해결해 간다. 처음이고 긴장했지만 수강생분들도 다들 처음일 거다. 용기내서 다가기로 하자.웹 또는 애플리케이션을 개발할 때 레이아웃의

계산기 목업 만들기를 마무리했다.실력있는 분들이 많으셔서 어떻게 하면 내 계산기에 차별점을 줄 수 있을까?라고 생각했다. 애니메이션 효과와 반응형을 구현해서 과제 제출 했다.✔️ 종이에 그리면서 컨텐츠를 어떻게 나눌지 구상했다.✔️ id, class 이름 설정을 잘해야

✏️ 마치며

✏️ 마치며

어제 자율 학습했던 조건문, 반복문을 코드스테이츠에서 제시하는 문제를 페어 활동으로 푸는 시간이다. 이번에는 페어분께 도움이 되고 싶은데 잘 될지 걱정이 앞섰다. 이번엔 차근차근 평점심을 가지며 진행하기로 마음 먹었다!✏️ 마치며

이번 시간에는 계산기를 구현해 보았다.총 3가지 단계까지 이루어지며1단계만 해도 과제 제출 할 수 있었다. 그래도 내가 할 수 있는 단계 만큼 도전해 보았다.생각보다 어려웠다...✏️ 마치며

CLI (Command-Line Interface) 터미널은 CLI 입/출력 하는 글자로 컴퓨터와 소통 할 수 있다.컴퓨터가 출력한 글자를 읽을 수 있어야 한다.입력을 확인 후 편집할 수 있는 한 줄의 공간✏️

✔️ 시작 배열에 대해 배우는 날이다 오늘은 페어 활동으로 같이 문제를 푸는게 있어 이번엔 도움이 되고자 전 날 미리 예습했다. 📍Array(배열) 순서가 있는 값 [,], 쉼표로 구분해 준다. number, string, boolean, object, funct

✔️ 시작 객체(object)와 사용 방법, 메서드 등을 배웠다. 이후 과제 풀기는 페어 활동으로 진행 되었다. 객체도 도움이 되고자 미리 예습했다. 📍object(객체) 키와 값 쌍(key value pair)으로 이루어져 있다. {,}로 감싸 주며, 키 값은,로

원시 자료형의 참조 자료형의 종류와 특징얕은 복사와 깊은 복사

단시간에 많은 정보를 넣으려고 하니 오히려 집중하기 어려웠다.이번 학습은 스코프, 클로저 그리고 기타 문법에 대해 배웠다.마지막 라이브 세션에서 블로그 작성법 등을 설명하면서나도 조금 씩 변경해 보려고 한다.안 쪽 스코프에서 바깥 쪽 스코프로 접근할 수 있지만 그 반대

지금까지 배웠던 내용들을 모아서 풀어보는 시간을 가졌다.몇몇 부분은 생각 보다 쉬워서 금방 풀었고 몇몇 문제는 왜 이게 이렇게 실행 되는지 한참 고민했던 거 같다.expect를 이용해 테스트 할 수 있다.유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운 arra

이번 학습은 DOM에 대해 알아 보았으며 HTML과 Javascript를 연결하는 방법에 대해 배웠다.DOM은 Javascript언어의 일부가 아닌 웹 사이트를 구축하는 Web API 이다.DOM을 사용해 문서와 해당 요소에 엑세스 한다.<script> 태그를 이

회원가입 유효성 검사 과제 작업을 진행했다.일반 과제를 완료하면 심화 과제 부터 CSS작업까지 진행했다.피그마로 큰 틀, 디자인 작업 후 진행했다.회원가입 양식을 작성할 때 필수 요소를 작성하지 않거나, 입력이 잘 못 되었을 때 이를 방지하기 위해 유효성 검사를 진행한

오늘 부터 다음날 금요일 까지 솔로 프로젝트가 진행된다.주제는 나만의 아고라스테이츠 만들기로 질문과 답변을 남기는 페이지를 내가 할 수 있는 역량 만큼 작업해서 제출하는 것이다.더미 데이터를 화면에 노출 시키는건 기존 튜툐리얼만 잘 따라하면 금방할 수 있었다.데이터를

✏️ 마치며

고차함수와 관련된 일급객체,콜백함수 그리고 배열 메서드 중 filter, map, reduce 등에 대해 배웠다.Javascript 함수를 일급 객체라고 부른다.객체에 적용가능한 연산을 모두 지원하는 객체를 말한다.변수에 할당할 수 있다.다른 함수의 전달인자로 전달 될

이번 학습에서 클래스(class), 인스턴스(instance) 그리고 ES6 작성법에 대해 학습했다.데이터와 기능을 한 곳에 묶어서 처리한다.프로그래밍 모델을 만들 때 유용하다.클래스와 인스턴스는 객체지향 프로그래밍과 많은 연관이 있다.① 하나의 모델이 되는 청사진(b

객체 지향 프로그래밍과 객체 지향 프로그래밍의 주요 개념 4가지도 학습했다.사람이 세계를 보고 이해하는 방법을 흉내낸 방법론프로그램 설계 철학OOP의 모든 것은 "객체"로 그룹화4가지 주요 개념을 통해 재사용성을 얻을 수 있다."클래스"라는 데이터 모델의 청사진을 사용

프로토타입이 무엇인지 학습했다.Javascript는 프로토타입 기반 언어이다.Javascript에서 객체를 상속하기 위해 프로토타입 방식을 사용한다.프로토타입은 원형객체(original form)이다.모튼 객체들은 메소드와 속성들을 상속받기 위한 템플릿으로 프로토타입

프로토체인이 무엇인지, .prototype ,\_\_proto\_\_ 키워드에 대해 학습 했다.프로토타입 체인을 알기전 프로토타입이 무엇인가에 대해 짚고 넘어가야한다.프로토타입이란 간단하게 말하자면 프로토타입 = 원형객체(original form) = 부모 객체 유전자

✏️ 마치며

✏️ 마치며

✏️ 마치며

✏️ 마치며

코드스테이츠에 섹션2 부터 시작하는 반딧불이반이 있다.종합퀴즈나 과제 등을 평균 보다 낮을 경우 선정되는데..종합퀴즈 문제를 잘못 읽어 풀어서 이번 반딧불이반에 선정 됐다.과제는 오늘 진행한 React Twittler Intro 레퍼런스 의사코드 작성하는 것이다.JSX

✔️ 시작 React SPA가 도입된 배경과 어떻게 진행되는지 학습했다. 📍알게된 것 ✏️ 마치며

Props, State의 특징과 이를 활용한 이벤트 처리에 대해 학습했다.변하지 않는 외부로 부터 전달 받은 값부모 컴포넌트(상위 컴포넌트)로 부터 전달 받은 값props를 함수의 전달인자 처럼 전달 받아 이를 기반으로 화면에 어떻게 표시 되는지를 기술하는 React

이전 학습시간에 배웠던 state, props, event를 활용해 푸는 과제를 진행했다.다른 부분은 생각 보다 쉬워서 금방 진행 되었는데Tweets.js에서 새로운 트윗 입력 후 버튼 클릭시 최상단으로 업로드 하는 영역이 어려웠다.✏️ 마치며

코드스테이츠에 섹션2 부터 시작하는 반딧불이반이 있다.종합퀴즈나 과제 등을 평균 보다 낮을 경우 선정되는데..종합퀴즈 문제를 잘못 읽어 풀어서 이번 반딧불이반에 선정 됐다.과제는 오늘 진행한 React Twittler Intro 레퍼런스 의사코드 작성하는 것이다.JSX

✏️ 마치며

✏️ 마치며

✏️ 마치며

✏️ 마치며

✏️ 마치며

✏️ 마치며

✔️ 시작 📍 ✏️ 마치며

재귀 함수에 대해 학습했다.함수가 자기 자신을 호출하는 함수반복문(while, for문)으로 표현할 수 있다.재귀함수를 사용한 알고리즘은 코드의 가독성이 좋다.간단하게 구혆 할 수 있어 유용하다.재귀 : 원래의 자리로 되돌아 가거나 되돌아 옴최적화 기법(memoizat

JSON이 무엇이고 JSON 데이터 변환과 그에 관련된 과제를 진행했다.JavaScript Object Notation 줄임말데이터 교환을 위해 만들어진 객체 형태의 포맷서로 다른 프로그램 사이에서 데이터를 교환하기 위한 포맷범용적으로 유명한 포맷객체를 문자열로 변화하

✏️ 마치며

figma 특징과 사용 방법에 페어분과 함께 과제 진행을 했다.GNB, 모달, 토글, 탭, 아코디언 드롭다운, 자동완성figma는 확실히 웹 브라우저 기반 프로그램으로 어도비 프로그램 보다 가벼웠다.프론트엔드는 백엔드, 디자이너와 협업을 진행하는데figma를 통해 디자

✏️ 마치며

✏️ 마치며

이전 Figma로 작업했던 모달창, 토글 버튼, 탭 메뉴 등을직접 구현하는 과제를 페어분과 같이 진행했다.삼항 연산자를 사용해 버튼 클릭 시 화면 다르게 노출하기{ , } 만 있다면 함수, 조건문 등을 넣어 해결 할 수 있다.이벤트 핸들러에 인자를 넣어줘야하는 상황이

어제 과제를 이어서 진행했다. 과제는 이미 어느 정도 마무리한 상태였고스타일 수정하는데 집중했다. 부모 컴포넌트에 이벤트 핸드러가 있을 때 자식 컴포넌트에 실행되지 않게 하는 방법onClick={(event) => event.stopPropagation()}를 추가해

Redux의 흐름을 배우면서 페어분과 함께 과제를 진행했다.상태 관리 라이브러리전역 상태를 관리할 수 있는 저장소 Store를 제공해 문제를 해결한다.React 말고도 JavaScript 등 어느 문법에서도 사용 가능하다.Action(객체) → Dispatch(함수)

✏️ 마치며

이번 종합 퀴즈 중복 정답이 많았는데 둘 다 아깝게 하나 씩 빠져서야간자율학습반(반딧불이반에서 변경 됨)에 선정되었다.✏️ 마치며

웹에서 표준적으로 사용되는 기술이나 규칙사용자가 어떤한 운영체제나 브라우저를 사용해도 웹 페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는웹 페이지 제작 기법최신 웹 브라우저들은 모두 웹 표준을 지원한다.각 영역이 분리 되면서 유지보수가 용이해 졌고, 코드가

✔️ 시작 📍 배운 것 웹 접근성(Web Accessibility) 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것 >###

WAI-ARIA 무엇인지 어느 상황 일 때 사용해야 하는지 학습했다.WAI-ARIA는 WAI와 ARIA를 합친 단어WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격HTML 요소에 추가적으로 의미를 부여웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관장애가

✔️ 시작 📍 알게 된 점 ✏️ 마치며

✔️ 시작 네드워크 심화 과정에 대한 이론을 학습했다. 이해할 내용도 많고 단시간에 이해하기엔 시간이 부족했다. 📍 네트워크 ✔️ 네트워크의 시작 냉전시대에서 핵전쟁을 대비하기 위한 통신망 구축을 위해 추진되었다.이 때 기존에 사용 되었던 회선교환 방식이 아닌 패킷

✏️ 마치며

✏️ 마치며

OAuth에 대해 학습하면서 어떤 원리도 작동하는지 등에 대해 학습했다.우리가 흔히 볼 수 있는 소셜 로그인 인증 방식은 OAuth 2.0이라는 기술을 바탕으로 구현 된다.인증을 중개해 주는 메커니즘이다.보안된 리소스에 액세스 하기 위해 클라이언트에게 권한을 제공하는

이번 종합 퀴즈와 과제의 결과가 좋지 못해 야간자율 학습반에 선정하게 되었다.Cookie/Session 튜토리얼, Token 과제, OAuth2.0 과제의 인증 흐름을 그림으로 정리하여 블로깅 작성하게 되었다.📍

✏️ 마치며

벌써 Section3가 끝나 버렸다…이번 섹션은 솔직히 제대로 지킨것도 별로 없고 소홀해져 반성의 회고이다.하루에 한 두번 이상 하기 싫다고 말한 거 같다... 사실 이번에는 제대로 지킨게 있나 싶다…블로깅은 생각 외로 꾸준히 진행했다. (이론 학습의 경우 거의 복붙…

스택(Stack), 큐(Queue)에 대해 알아 보았다.스택과 큐는 입출력 방식이 다른 점을 참고해 각각의 구조와 특징을 알아보았다.여러 데이터의 묶음을 저장하고, 사용하는 방법을 정의 한 것문자, 숫자, 소리, 그림, 명상 등 실생활을 구성하고 있는 모든 값데이터는

✔️ 시작 📍 배운 것 ✔️ 트리(Tree) 이름 그대로 나무의 형태를 가지고 있다. (정확히는 나무를 거꾸로 뒤집어 놓은 듯한 모습) 여러 구조 단방향 그래프의 한 구조로, 하나의 뿌리로 부터 가지가 사방으로 뻗은 형태 이진트리(Binary tree) 자식 노드

✔️ 시작 대표적인 소프트웨어 개발방법론인 워터폴과 애자일 방법론이 무엇인지 학습했다. 이번 솔로 프로젝트를 5일 동안 진행하는데 그 때 애자일 방법론을 구체적으로 실현하기 위해 준비 운동을 했다. 📍 배운 것 소프트웨어 개발 방법론 소프트웨어 개발에 대한 체계적인

React에 대해 좀 더 심화적인 부분에 학습했다.React는 UI의 상태를 추적하고 변화가 일어난 요소들을 빠르게 업데이트할 수 있도록 가상 DOM이라는 가상의 DOM 객체를 활용한다.가상 DOM이 생기게 된 이유는 이전 DOM으로 부터 거슬러 올라가야한다.문서 객체

📍 마치며

Custom Hooks, 코드 분할에 대해 학습했다.개발자가 스스로 커스텀한 Hook을 의미한다. \- 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있다. 주로 여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한

그동안 배웠던 Hook을 이용해 과제를 푸는 형식의 과제를 진행했다.json 파일을 이용해 REST API 서버를 구축해 주는 라이브러리이다.전역에 설치해 준다.React 앱 파일 내에 설치하면 제대로 작동하지 않을 수 있다.data 폴더로 이동 뒤 \--port 30

디자인 시스템, 아토믹 디자인, storybook을 활용한 디자인 시스템 등에 대해 학습했다.디자인 원칙 부터 재사용할 수 있는 UI 패턴과 컴포넌트 코드로 구성된 시스템전체 서비스에 효율적이고 일관된 디자인을 적용할 수 있도록 도와준다.디자인 원칙, 스타일 가이드,

기존에 구현한 솔로 프로젝트에 Storybook을 사용해 프로젝트 인터페이스를 디자인 시스템으로 변환하는 작업을 진행했다.Storybook 먼저 설치해야하지만 그 부분은 이전 학습에서 동일한 방식으로 진행되어 굳이 작성하지 않았다.기존의 프로젝트에서 사용 중인 모든 U

일단 계속 진행은 했지만... 모르겠다.. 이게 맞나..?결론만 말하자면 솔직히 많이 진행하지 못했다.또한 이게 맞나? 싶기도 하다. 그래서 간략하게만 작성하려고 한다.Logo.jsLogo.stories.js사실 로고의 "Coz Shopping" 부분을 label로 바

마이크로 소프트에서 개발한 JavaScript의 상위 집합(Superset)언어이다.JavaScript에 정적 타입 검사와 클래스 기반 객체지향 프로그래밍 등의 기능을 추가해 개발된 언어이다.JavaScript가 발전하면서 생긴 단점(타입의 명시성이 부족한 단점으로 인

✔️ 시작 📍 알게 된 점 숫자형 열거형(Enum) 특정 값의 집합을 정의할 때 사용된다. 숫자형, 문자열 또는 이 두가지의 조합으로 정의될 수 있다. 기본 값은 숫자 형을 사용한다. 각 값은 자동으로 0부터 시작해 1씩 증가한다. (수동으로 값을 지정할 수 있다.

✔️ 시작 📍 배운 것 ✏️ 마치며

배포에 대해 학습하고 실습하는 시간을 가졌다.기존 서버의 경우 전산실 등에 컴퓨터를 배치하고 인터넷을 연결해 서비스를 제공했다.수용 능력에 한계(주기전인 유지 관리, 공간의 한계)를 느꼈고 이를 해결하기 위해 클라우드가 등장했다.이는 가상화(Virtualization)

✔️ 시작 📍 알게된 점 개발 프로세스의 발전 개발 프로세스 소프트웨어 개발 프로세스 모델은 소프트웨어 개발 생명주기(SDLC, Software Develpment Life Cycle)를 기반으로 만들어 졌다. CI/CD CI(Continuous Integra

CI/CD에 대해 알아보고 직접 실습하는 학습을 진행했다.개발자를 위한 자동화 프로세스인 지속적인 통합CI를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 리포지토리에 통합되기에여러 명의 개발자가 동시에 애플리케

다른 도메인에서 API를 요청해서 사용할 수 있게 해 주려면 CORS 설정이 필요하다.교차 출처 리소스 공유(Cross-Origin Resource Sharing)추가 HTTP 헤더를 사용해 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수

뭐지.. 뭐했지...한거 없는데 Section 4가 끝이 났다.이제 남은 기간 동안 프로젝트만 남았다ㅠㅠ과연 내가 프로젝트를 잘 할 수 있을지 걱정이고취업도 성공할 수 있을지 이런 저런 걱정이 생기고 있다.이번 Section 4에서 나는블로깅 꾸준히 업로드 하기진짜 생

길면 길고 짧으면 짧았던 코드스테이츠 프론트엔드 부트캠프 6개월이 끝이 났다.추웠던 2월 부터 시작해 8월 3일까지 쉬엄없이 달려온 거 같다.마무리하는 느낌으로 코드스테이츠 부트캠프 회고를 진행하려고 한다.각 섹션 마다 과제가 있는데 혼자하는게 아닌다른 동기 분들과 같