코드스테이츠

2022.12.15Day1프론트엔드를 배우기 위한 기본적인 학습 툴과 커리큘럼에 대해 학습했다.코드스테이츠에서 제공하는 평일 스케쥴에 추가로 3시간 복습하는 스케쥴 결정했다.중요페어 프로그래밍은 실무 환경에서의 작업역량을 기르기 위해 중요한 과정으로서 최선을 다해 집중

템플릿 리터럴의 사용 방법을 숙지하고 활용한다알고리즘의 효율을 위한 리팩토링 작업을 시도한다(ex) 소수 문제에서 루트를 활용한 실행횟수 효율증가)동치연사자 사용시 ==가 아닌 ===로 작업하는거 확인파이썬, C언어, Java 언어에 대한 경험이 있어 해당 유닛은 비교

체크포인트 후기

Color : 글자 색상text-decoration : 밑줄, 가로줄등 텍스트 꾸미기 옵션background-color : 텍스트 배경색font-size, font-family ... : 글자 크기 및 스타일등 관련 font 옵션 확인할 것 절대 단위(px, pt) :

체크포인트 계산기 목업

Pormpt: 터미널,CLI에서 명령을 받을 준비가 되어있는 명령줄 대기모드 ⬅️ 페어분의 도움으로 디자인한 터미널터미널 명령어 : ls, cd, rm, mkdir, pwd 등을 사용하며 함양npm : Node Package Manager로 외부 라이브러리를 다

체크포인트 배열 : 순차적 타입의 데이터를 담는 자료구조로 이름, 인덱스, 값로 이뤄져있음 -Array.isArray : 해당 변수가 배열 인지 확인하고 맞으면 true, 아니면 false 반환 -반복문for과 잘 어울림(i 가 인덱스 역할) 객체 : 후기 -

원시 자료형 : 하나의 변수에 하나의 데이터만 담을 수 있는 구조\-Ex) null, string, number, boolen, undifined, 변수선언후 지정 값참조 자료형 : 실제 데이터는 heap에 담기고 할당시에는 heap을 가르키는 주소값을 할당되는 다양한

: Document Object Model이라는 뜻으로 HTML에 담긴 객체(태그)에 접근-인식하는 모델(방식): tree 형식의 구조를 따름(예시를 참고하며 만든 예시).creatElement를 통해 요소를 생성할 수 있지만 위의 상태에서는 트리에 추가(append)

일급객체변수에 할당(표현식 스타일)할 수 있음다른 인자로 함수 전달 가능함수가 리턴 되는 함수 일 수 있음고차함수함수의 결과로 함수가 리턴되거나인자 함수로 함수가(콜백) 전달되는 함수내가 이해한 함수의 집합관계일급객체 === 함수 > 고차함수 > 클로저 > 커링filt

클래스특정 인트턴스(객체)를 생성하기 위해 변수, 매소드를 정의하고 있는 청사진과 같은 역할을 함ES5에서는 함수 정의하듯 정의하고ES6에서는 class 문법과 생성자(constructor)을 사용해 클래스 생성\++ 생성자는 반환값이 존재하지 않음인스턴스new를 사용

each 구현의 경우 배열과 객체가 들어왔을 때, 인자를 다르게 밖에 옳바르게 동작하도록 구현filter의 경우 콜백 함수의 결과에 따라 true로 통과되는 요소만 걸러 새로운 배열에 담도록 구현each를 사용해 요소를 받고 콜백 함수에 해당 요소를 넘겨 반환 되는 결

React에서 UI를 구성할 때 사용하는 문법으로 JS를 확장한 문법(!! 포인트는 '문법' 이라는 것)JSX는 바로 브라우저가 해석할 수 있는 코드가 아니기 때문에 Babel을 통해 JS 코드로 변환해줌Jsx -> Babel을 통한 JSX 컴파일 -> JS -> 브라

: 페이지 전체 로드가 아닌 page 갱신에 필요한 데이터를 받아와 해당 데이터로 페이지를 업데이트하여 페이지 사용자와 소통하는 웹 혹은 app장점빠른 속도의 상호작용과 적은 데이터 로드에 의한 저부하빠른 렌더링을 통한 유저맞춤단점Js의 비중이 커 첫 화면 로드시 전체

: 외부로부터 전달받은 변하지 않는 값, 컴포넌트의 속성부모 컴포넌트로부터 전달 받음객체의 형식Porps는 읽기 전용 객체구조할당을 활용해 데이터를 사용하면 간단한 코드 작성 가능: 컴포너트 내에서 변할 수 있는 값(개수, 무게, 체크박스..), 즉 상태에 해당하는 값

데이터 및 리소스 정보를 보관-관리하는 서버와, 해당 리소스를 요청하고 전달받아 사용하는 클라이언트로 이루어짐2티어 아키택쳐라고도 불림, 클라이언트-서버-DB의 구조로 서버를 요청과 정보를 전달하는 역할만하는 3티어 아키택쳐 구조가 일반적클라이언트는 플랫폼에 따라 나누

REST API : Representational State Transfer의 약자로 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 의미 자원은 uri로, 행위는 매소드로, 자원 및

React에서는 단방향 데이터 흐름을 지키고 있으며, 하향식의 방식으로 데이터가 전달됨데이터(상태) 부모 컴포넌트에서 자식 컴포넌트로 props의 형태로 전달딤자식 컴포넌트에서 부모 컴포넌트로 부터 상태변경함수를 전달 받아, 부모의 상태를 변경시킬 수 있음단방향 데이터

: Same-Origin-Policy의 줄임말로 출처 즉, 프로토콜, 호스트, 포트 모두 동일해야 리소스 공유가 가능하다는 정책해당 정책으로 인해 의도하지 않은 코드가 동작해, 사용자의 정보가 유출되고 악의적으로 사용되는 것을 방지함하지만, 개발과정에서 다른 출처의 리

9개월안에 초봉 3000~3600 개발자가 되기 위한 역량을 갖추고 입사해 경력 쌓기Keep1일 1 커밋1일 1 기술면접 작성(평일)추가 주말(기타 스터디 활동)유닛별 블로깅7시-10시 학습 시간 변경Problem수면 시간 조절에 종종 실패함스켸쥴 확인에 실패해 당황한

: 자기 자신안에서 자기 자신을 호출하며, 원하는 상황까지 호출을 반복하는 함수문제 상황을 나누어 질 수 없을 때까지 나누어 해결해 재귀로 문제를 해결할 수 있는 경우 더 간결한 클린 코드로 문제해결 가능주어진 문제를 비슷한 구조의 해결로직으로 더 작은 문제로 나눌 수

: 사용자와 컴퓨터간의 상호작용을 위한 시스템으로, 그래픽요소와 마우스와 같은 물지적인 요소 또한 UI에 포함됨GUI, CLI, NUI, AUI모달(Modal): 기존에 사용되면 화면에 새로운 창의 구성으로 오버레이(겹치게)하는 것을 의미하며, 모달 화면을 종료하기 전

: 인터넷으로 연결된 환경에서 다양한 사용자들이 소통하고 정보를 공유하는 공간인 웹을 설계할때 표준적으로 사용되는 기술과 규칙유지 보수 용이: 웹 표준을 사용하면서 웹 설계를 위한 각각의 영역이 분리돼 정리되었으며, 지속적으로 유지보수하면 클린코드 작업이 이루어져 코드

네크워크 회선교환 방식 vs 패킷교환 방식 회선교환 : 통신회선을 통신 전 미리 설정하고 할당해 통신하는 방식으로, 전용선이 통신 선에 연결되어 있음으로 새로운 연결을 위해 연결을 끊고 새롭게 연결과정을 수행해야함으로 즉시성이 떨어짐 패킷교환 : 전송하고하는 데이터를

Cookie : 서버가 일방적으로 클라이언트에 전달하는 4KB이하의 작은 데이터로, 웹 서버와 웹 브라우저간의 연결 정보를 저장 및 제공해, 비효율적이고 반복적인 데이터 요청을 줄이고 생산성을 높힐 수 있음 Cookie 옵션 종류 Domain > 포트 및 서브 도메인

9개월안에 초봉 3000~3600 개발자가 되기 위한 역량을 갖추고 입사해 경력 쌓기Keep1일 1 커밋1일 1 기술면접 작성(평일)추가 주말(기타 스터디 활동)유닛별 블로깅8시-11시 학습 시간 변경Problem수면 시간 조절에 종종 실패함에러코드를 파악해 침착하게

: 웹 서버와의 양방향 통신을 통해 제공되는 정보를 HTML 및 일반미디어, 멀티미디어 등의 컨텐츠를 볼 수 있게 해주는 GUI 방식의 SW이며 브라우저는 페이지 다운로드 용도로 응용계층의 HTTP를 사용해 통신함: 브라우저에서 제공되는 웹은 다양한 정보를 hypert

: FE에서는 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음이란 의미로 파일간의 의존관계를 해석해 그룹화해 다양한 문제를 해결함파일 코드를 하나로 묶고 압축하는 과정에서 용량이 크게 줄어들어 실행속도 및 메모리 자원 활용에 이점을 가짐번들링 및 압축된 상태에서는

Virtual DOM : React 환경에서 UI의 상태를 추적하고 변경된 요소를 적용시켜 갱신시키기 위한 가상의 DOM, 실재 DOM 객체를 대응함 실제 DOM트리에 직접적으로 접근에 변경하는 것이 아닌 변경점을 적용한 가상의 트리와 비교해 변경점으로 변경하는 방식으

: 컴퓨터는 H/W와 S/W가 합쳐진 형태H/W는 전자회로 및 기계 장치로 되어 입출력 장치, 중앙처리장치(CPU), 기억장치 등으로 구성되어 있으며, S/W의 경우 하드웨어를 제어하며 작업을 수행하는 프로그램임: 컴퓨터가 이해할 수 있는 형식으로 데이터와 명령을 받아

GraphQL은 Facebook에서 처음으로 개발했으며 오픈 소스로 제공된 쿼리 언어Graph + Query Language의 줄임말로 Query Language 중에서도 Server API 를 통해 정보를 주고받기 위해 사용하는 Query Language를 뜻합니다요

: 코드를 작성하기 전 정상적인 코드가 동작해야하는 결과를 미리 예상하고 이를 바탕으로 테스트를 작성해 테스트를 통과하는 코드로 로직을 작성해 개발하는 S/W 개발 방법론 작은 단위의 테스트 케이스를 작성하고, 이를 통과하는 코드를 작성하는 과정을 반복하는 것작은 단

: 가장 적은 자원(메모리, 시간 복잡도..등)를 사용하면서 원하는 결과를 효율적으로 얻도록 코드 작업을 실시하는 것을 코드 최적화라고 함필요성이탈률 감소전환율 증가수익 증대더 나은 UX 제공HTMLDOM 트리 가볍게: 트리의 깊이아 깊어 질 수록 트리의 상위 요소 및

: 아마존 웹 서비스(AWS)란 아마존이 자사의 노하우를 살려 제공하고 있는 ‘클라우드 컴퓨팅 서비스’를 의미컴퓨팅, 스토리지, DB, 분석, 모바일, IoT, 보안, 엔터프라이 app등 다양한 서비스를 제공해주면 해당 서비스를 사용해 인프라 구축을 원하는대로 할 수

: s/w 및 시스템 개발 및 유지보수를 목적으로 수행되는 활동들의 절차를 의미하며, 전체적인 과정에 대한 가이드라인을 제공함 (SDLC)요구분석 및 시스템 명세 작성: 문제분석 단계라고도 하며, 개발할 sw 기능, 성능, 기타 사항에 대해 사용자와 함께 정확히 정의하

Alogrithm : IT 분야에서는 " 문제를 해결하기 위한 프로세스 및 로직을 의미 "로 해석되며, 추가적으로 그저 단순히 "해결"이 아닌, "효율성, 정확성"등을 만족하는 최적의 로직을 의미 코딩에서는 어떤 문제를 해결하기 위해서 일련의 절차를 정의하고, 공식화한

Github 프로젝트 GitHub Repository에 꼭 필요한 파일 README.md : 프로젝트 관련 기타 상세 정보 프로젝트 이름 프로젝트 핵심 기능 소개 팀원 소개 .gitignore : git으로 관리하지 않는 파일 모음 secret token 설정 파일