Front-End Developer 되기

의사코드를 왜 작성해야 할까?큰 규모의 계획을 코드로 옮기기 위해 먼저 가장 작은 단위의 계획을 코드로 옮기는 연습을 하듯이, 처음 학습할 때에는 작은 규모의 계획에도 의사코드를 작성한다. 현직 개발자의 큰 고민 중 하나는, "대충 어떻게 해야 하는지 알 것 같은데 막

노션으로 보기Javascript는 ‘동적언어’변수를 선언할 때 데이터타입을 따로 선언하지 않아도, 변수에 할당된 값에 따라 동적으로 타입을 지정→ 변수에 어떤 데이터타입을 할당해도 에러가 발생하지 않음.변수 : 각 보관함에 붙인 이름을 의미, 재사용성데이터 보관함(

노션으로 보기조건에는 Boolean으로 결과가 나오는 비교구문이 들어간다.비교연산자논리연산자논리연산자 Notundefined = falsy한 값으로 취급 = false‘Hello’ 문자열 = Truthy한 값으로 취급 = true: 아래 6개는 if문에서 false로

반복할 조건을 초기화, 조건식, 증감문 순으로 넣어준다.반복할 조건 중 조건식 만 괄호 안에, 초기화, 증감문 따로2~9까지의 구구단 한번에 출력하기

노션 정리

노션으로 보기HTML로 작성한 웹 애플리케이션의 구조에 → 웹 페이지 스타일 및 레이아웃을 정의하고, 디자인을 적용할 수 있는 스타일 시트 언어반드시 HTML이 있어야만 동작 → 독립적으로 기능 X웹 사이트 사용자가 HTML문서에 작성된 콘텐츠를 잘 이해할 수 있도록

노션으로 보기레이아웃: 각각의 요소를 목적에 배치하는 것와이어프레임: 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것목업: 실물 크기의 모형: 실제 제품이 작동하는 모습과 동일하게 HTML문서를 작성 → 트윗 작성자, 트윗 내용등을 HTML 문서

노션으로 보기HTMLCSS배경이미지 위치 설정background-position :center top; 배경이미지 : 중앙, 상단background-position :center bottom; 배경이미지 : 중앙, 하단background-position :left

3, \* , 3, enter, enter, enter ⇒ 2433, enter, enter, enter, \* , 3 ⇒ 93, enter, enter, enter, -, 3, enter ⇒ 03, enter, enter, enter, +, 3, enter ⇒

Command-Line Interfacenano : 텍스트 에디터npm : 패키지 매니저nvm : Node.js의 버전관리 매니저Node.js : Javascript의 또다른 실행환경Git : 분산 버전 제어 시스템Linux : 오픈 소스 유닉스 계열 운영체제※GUI

노션으로 보기: 순서(인덱스, 0부터)가 있는 값(=요소, element)let 배열이름 = x, y, z배열 조회 : \*\*배열이름\[z] → myNumber3 //61\*\*배열 안에 배열의 인덱스에 접근하려면(2차원 배열) : 배열이름\[z]\[z배열의 x번째

노션으로 보기객체는 키와 값의 쌍(key-value pair)로 이루어진다.객체의 값을 사용하는 첫번째 방법 : Dot notation(반 노테이션)동적일 때는 사용할 수 없다.두번째 방법 : Brackeet(대괄호) notation → 대괄호 안에 문자열 형식으로k

노션으로 보기원시자료형(primitive data type) : 고정된 저장공간을 차지하는 데이터로, Method를 가지지 않는다.하나의 변수에 = 하나의 원시 자료형 데이터만 담을 수 있다.number, string, boolean , undefined, symbo

노션으로 보기ES6 : JavaScript의 일종의 버전인 ECMAScript6\*\*JavaScript(ES6)의 Spread 와 Rest 쉽게 설명하기\*\* \*rest parameter는 여러개의 인자를 받고 그것들을 합쳐서 새로운 배열/객체를 만든다.\*Spr

노션으로 보기\*\*expect(테스트하는 값). 기대하는 조건\*\*expect(isEven(3)).to be.trueexpect(1+2).to.equal(3).equal은 두 값의 타입까지 엄격하게 같은지 검사한다(Strict equality)‘기대하는 조건’에 해

노션으로 보기Document Object Model의 약자 → HTML의 요소를 Object처럼 조작할 수 있는 Model을 말한다,즉 JS와 DOM을 이용해 HTML에 접근 및 조작 → HTML로 구성된 웹페이지를 동적으로 움직일 수 있다.HTML에 JavaScrip

노션으로 보기버튼 채우기 효과배경화면 투명 효과로그인페이지 만들기눈내리는 효과 만들기 → 실패함 ㅠㅠㅠ 다시 해보자 !!!\*\*Designing successful sign-up pages\*\*velog - 유효성 검사CSS 에니메이션

노션으로 보기Staging area : commit 하기 전에 내용을 기록하는 장소 commit : staging에 코드 묶음을 저장하기 위해(git commit) staging area 모드의 용도를 적어두는 것(커밋 메세지 -m “commit message”)git

노션으로 보기참고자료 \[CSS 버튼 채우기 효과 만들기 - 웹디자인 버튼 HTML CSS 강의 버블 효과 애니메이션 \[아고라 스테이츠 샘플 github 블로그 만들기 1\. 나만의 블로그 만들기 Git hub blog!! (github.io) 초보자

노션으로 보기질문의 요지를 파악하지 못하고 장황하게 설명하지 않기 → 간결하고 정확하게 !잘 모르는 것에 대해 아는 것처첨 포장하여 설명하지 않기원리를 이해하지 못하고 질문 답변을 단순 암기 → 원리 이해가 먼저 !특정 기술 스택/프로그래밍 언어를 근거없이 비난하지 않

변수에 할당(assignment)할 수 있다 → 이를 통해 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있다.→ 또한 함수를 데이터(string, number, boolean, array, object)처럼 다룰 수 있다.다른 함수의 전달 인자(argument)로

“ 객체 지향 프로그래밍” 은 절차 지향 프로그래밍과 다르게 “데이터와 기능을 한 곳에 묶어서 처리한다”속성과 메서드가 → 하나의 “객체”라는 개념에 포함되며, 자바스크립트의 객체(object)대신 클래스로 부른다.객체.메서드() 과 같이 객체 내에 메서드를 호출하는

prototype : 모델의 청사진을 만들때 쓰는 원형 객체, 클래스가 일종의 프로토타입이다.constructor : 인스턴스가 초기화될 때 실행하는 생성자 함수this : 함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context: new 키워드로

Javascript proto vs prototype 차이 먼저 자바스크립트에서 함수는 객체이다. 그리고 객체는 property 를 가진다. 따라서 함수 또한 property를 가진다. 함수 정의 아래 함수를 하나 가정하면, Person이라는 새로운 객체가 생성된

부모 클래스 > 자식 클래스로 상속하는 방법 MDN : Classes in JavaScript Teacher() 생성자 함수 정의 여기서 call() 함수란 : call() 함수의 첫번째 매개변수는 다른 곳에서 정의된 함수를 현재 컨텍스트에서 실행한다. 실행하고자

filter, map, reduce 와 같이 배열의 내장 고차 함수이며, 동시에 배열 메서드이다, .for.Each() 는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한번씩 실행한다. 다만 삭제했거나 초기화하지 않은 인덱스 속성에 대해선 실행하지

배열, 객체를 다루는 Underbar라는 라이브러리를 직접 구현해 → 자바스크립트 내장 메서드가 어떻게 콜백 함수에 활용하는지 학습하여라.

Application Programming Interface의 줄임말로, 클라이언트가 요청한 내용에 대해 서버가 ‘사용 규칙을 제공하는 것(응답)’을 말한다.Node.js는 "비동기 이벤트 기반 JavaScript 런타임”이다. 따라서 Node.js의 경우 많은 API

fetch API로 URL을 통한 네트워크요청(비동기 요청)이 가능하다.→ 이 과정은 비동기로 이뤄지기 때문에, 경우에 따라 시간이 소요될 수 있다. 하지만 이 시간동안 blocking이 발생하면 안되므로, 특정 DOM에 정보가 표시될 때 까지 로딩창을 대신 띄우기도

Part1. 필기 Part2. Part3.

HTML/CSS/JS 나눠서 작성하지 않고 → 한 파일에 명시적으로 작성할 수 있는 JSX를 활용한 선언형 프로그래밍을 지향한다.리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 한다.컴포넌트로 분리하면 서로 독립적이고 재사용이 가능 →

<i className= "far fa-comment-dots></i>‘fontawesome’에서 가져오고 싶은 아이콘 클릭 후 → HTML 형식 그대로 가져온다.시맨틱 엘리먼트(요소)란?시맨틱 엘리먼트는 ‘의미있는 요소’라는 의미를 가지며, 브라우저와 개발

노션으로 보기

노션으로 보기

노션으로 보기

노션으로 보기

노션으로 보기

노션으로 보기

노션으로 보기

노션으로 보기

노션으로 보기

javaScript 문서는 여기💡 아래 구조분해할당의 구조에 대해 파악해보자.javascript에서 가장 많이 사용되는 두가지 데이터 구조는 Object와Array이다.Object : 키별로 데이터 항목을 저장하는 단일 entity를 만들 수 있다. Array : 데

일반적인 재귀함수의 템플릿함수 arrSum의 경우 number타입을 요소로 갖는 배열을 입력으로 받고, number 타입을 리턴한다.입력값이나 문제의 순서와 크기가 중요하다.주어진 입력값 또는 문제 상황을 크기로 구분할 수 있거나, 순서를 명확하게 정할 수 있다면 문제

문제를 작게 쪼갠다. 문제가 더 작아지지 않을 때까지, 가장 작은 단위로 문제를 쪼갠다. 가장 작은 단위의 문제를 풂으로써 전체 문제를 해결한다.문제가 더 이상 쪼개지지 않게 되면 → 가장 작은 단위의 문제를 해결한다.어떻게? ⇒ 가장 마지막으로 쪼갠 문제부터 거꾸로

재귀란 특정 문제 해결을 위해 동일한 로직의 작은 단위부터 문제를 해결하는 방법을 의미한다.작은 단위를 수행하는 함수 하나를 스스로 호출하는 것이 재귀함수이다.즉 재귀는 반복할 구문을 함수 단위로 쪼개서, 특정 조건이 만족할 때까지 함수를 호출하는 패턴이다.이러한 이유

JSON(JavaScript Object Notation)은 데이터 교환을 위해 만들어진 객체 형태의 포맷이다💡 객체 : 객체는 타입 변환을 이용해 String으로 변환할 경우 → 객체 내용을 포함하지 않는다. 따라서 Javascript에서 객체를 문자열로 변환하기

UI는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다대표적으로 화면상의 그래픽 요소를 들 수 있으며, 키보드, 마우스도 컴퓨터와 상호작용하는 UI이다.GUI는 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경을 말한다.대표적으로 Window, Mac OS

UI 디자인 패턴은 과거 자주 반복되는 문제점을 다른 사람이 해결한 결과물을 재 사용하기 좋은 형태로 만든 패턴을 말한다.재귀로 구현한 Tree UI도 자주 쓰이는 UI 디자인 패턴 중 하나이다.기존에 이용하던 화면 위에 오버레이되는 창을 말한다.닫기버튼 or 모달범위

꼭 목적에 맞지 않고 비실용적이더라도, 추가적인 기능을 제공하는지도 판단한다.계산기로 예를 들면, 계산기의 디자인은 기능자체에 영향을 주지 않지만, 심미적 기능을 제공한다고 판단한다.가능한 단순하면서 직관적이고 사용하기 쉬운 제품이나 서비스가 사용성이 높다.이 요소는

합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보를 항상 제공해야 한다.피드백은 존재하는가?피드백이 즉시 제공되는가?피드백이 명확한가?ex) 첨부하는 파일의 업로드 상황을 표시한다.내부 전문용어가 아닌 사용자에게 친숙한 단어, 구문, 개념을 사

레고처럼 조립할 수 있는 부품단위로 UI 컴포넌트를 만드는 개발 방법을 말한다.재사용할 수 있는 UI 컴포넌트로 → 프로젝트/팀간 같은 UI 컴포넌트 공유가 가능하다.컴포넌트 단위로 만들어 → 페이지를 조립하는 상향식 개발 방식이다.프로젝트 규모나 복잡도가 점점 더

React로 CDD 할수 있는 대표적 도구인 Styled Components의 사용법과,컴포넌트들을 문서화하고 관리할 수 있는 도구인 Storybook의 사용법을 알아보자.Styled Components는 CSS를 컴포넌트화해 React 환경에서 사용 가능한 라이브러리

react를 공부하면서, react 애플리케이션을 만들 때 → DOM을 직접 조작하는 것은 지양해야 한다고 배웠다.헌데 개발을 하다보면 DOM을 직접 건들여야하는 상황도 있는데 → 이때 사용할 수 있는 것이 바로 useRef라는 Hook 함수이다.react론 할 수 없

상태는 2가지로 나눌 수 있다.상태 변경이 일어나는 곳상태 변경의 영향을 받는 곳fetch와 같은 API 요청이 필요한 컴포넌트를 만들 때 → Side Effect가 불가피하게 발생하고, 또 side effect에 의존적인 상태도 있을 수 있다.특정 컴포넌트 안에서만

'전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망'을 의미하며웹 뿐만 안니라 온라인게임, 모바일 앱, 이메일 등 네트워크를 사용하는 다양한 서비스를 모두 포함한다.한 마디로 '공간'을 의미하는데, 문서, 이미지, 영상 등 다양한 정보를 여러사람들과 공유할 수 있는

말 그대로 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법이다.웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법이다.광

나아가 모든 어떤 상황이든, 어떤 사람이든 모두가 동등하게 정보를 제공받을 수 있도록 함이 ‘웹 접근성’의 궁극적인 목적이다.사용자층 확대다양한 환경 지원 : 운전 중, 마우스 사용 불가, 다양한 전자 기기 등사회적 이미지 향상 : 모든 콘텐츠는 사용자가 인식할 수

Redux는 컴포넌트와 상태를 분리한다.Redux에선 'Action → Dispatch → Reducer → store' 순서로 데이터가 단반향으로 흐른다.상태가 변경되야하는 이벤트 발생 시 → 변경될 상태 정보가 담긴 'Action' 객체를 생성한다.Action 객체

패킷교환 방식은 “패킷” 이라는 단위로 데이터를 잘게 나눠 전송하는 방식을 말한다.각 패킷엔 출발지와 목적지 정보가 있어 패킷이 목적지로 가는 가장 효율적인 방식을 찾아 이동한다.→ 이 방식으로 패킷교환 방식은 특정 회선을 전용선으로 사용하지 않기 때문에 빠르고 효율적

표준화를 통해 → 포트, 프로토콜의 호환 문제를 해결하고네트워크 시스템에서 일어나는 일을 → 해당 계층 모델을 이용해 쉽게 설명할 수 있다.문제가 발생 했을 때 네트워크 관리자가 → 문제가 물리적인 문제인지, or 프로그램과 관련이 있는지 등의 원인을 쉽게 파악할 수

HTTP/1.1, HTTP/2는 TCP 기반이며 HTTP/3는 UDP 기반 프로토콜이다.클라이언트 : 서버에 요청을 보내고, 응답을 대기하면서버 : 요청에 대한 결과를 만들어 응답한다.장점 : 서버의 확장성이 높다(스케일 아웃)단점 : 클라이언트가 추가 데이터를 전

HTTPS는 HTTP Secure의 약자로, 기존의 HTTP 프로토콜을 더 안전하게 사용할 수 있음을 의미한다.HTTPS는 HTTP 요청과 응답으로 오가는 내용을 암호화해 → 더 안전하게 사용할 수 있다.데이터를 암호화할 때엔 → 암호화할 때 사용할 키, 암호화한 것을

: 어떤 웹 사이트에 들어갔을 때, 서버가 일방적으로 클라이언트에게 전달하는 작은 데이터즉, 서버가 웹 브라우저에 정보를 저장하고 불러올 수 있는 수단으로,해당 도메인에 대해 쿠키가 존재하면 → 웹 브라우저는 도메인에게 http 요청 시 쿠키를 함께 전달한다.사용자 선

: 서버가 클라이이언트에 암호화된 ID를 부여하는 방식으로, 중요 데이터는 서버에서 관리한다.1️⃣ 사용자가 웹 사이트에서 아이디와 비밀번호로 로그인을 시도했을 때사용자가 정확한 아이디와 비밀번호를 입력했다면 → 서버는 인증(Authentication)에 성공했다고 판

해싱은 가장 많이 쓰이는 암호화 방식 중 하나로, 복호화가 가능한 다름 암호화 방식과 달리, 해싱은 암호화만 가능하다.해싱은 해시 함수(Hash function)을 사용해 암호화를 진행하는데 → 해시 함수는 다음과 같은 특징을 가진다.항상 같은 길이의 문제열을 리턴한다

전통적으로 직접 작성한 서버에서 인증을 처리해는 것과 차이가 있다.OAuth는 보안된 리소스에 액세스하기 위해 → 클라이언트에게 권한을 제공하는 프로세스를 단순화하는 프로토콜이다.웹이나 앱에서 흔히 쓰는 소셜 로그인 인증 방식 이 바로 → OAuth 2.0이다.검증되지

자료구조 : 여러 데이터의 묶음을 저장하고, 사용하는 법을 정의한 것문자, 숫자, 소리, 그림, 영상 등 실생활을 구성하고 있는 모든 값을 말한다.데이터는 분석하고 정리해 활용해야만 → 의미를 가진다.필요에 따라 데이터의 특징을 잘 파악하고 분석해 → 정리하고 → 활용

스택(Stack)과 큐(Queue)는 리스트(List) 자료구조의 특별한 경우이다.Stack은 후입선출(Last In First Out, LIFO) 구조로 → 가장 마지막에 넣은 데이터가 스택의 맨 위에 위치하기 때문에 가장 먼저 빼서 사용할 수 있다.배열과 마찬가지로

자료구조 Tree는 나무를 뒤집어놓은 모습을 가진다.단반향 그래프 구조로 하나의 뿌리로부터 가지가 사방으로 뻗은 형태이다.데이터가 바로 아래에 있는 하나 이상의 데이터에 → 한 개의 경로와 하나의 방향으로만 연결된 계층 자료구조이다. \- 선형구조 : 데이터를 순

그래프는 여러 개의 점들이 서로 복잡하게 연결되어 있는 관계를 표현한 자료구조이다.두 정점을 이어주는 간선이 있다면 두 정점은 인접하다.입접 행렬의 인접 상태는 → 2차원의 배열 형태로 나타내고,인접해있다면 → 1 (true)인접해있지 않다면 → 0 (false)만약