프론트엔드

과제 [ ] 학습 목표 cp2. 타입 [x] 데이터 타입이 무엇인지 이해한다. [x] JavaScript의 데이터 타입 중 Number, String, Boolean이 있다는 것을 기억한다. [x] Number 타입에 사용가능한 연산자를 사용하여 간단한

두 단어를 입력받아 두 단어의 평균 길이를 내림하여 리턴해야 합니다.인자 1 : word1string 타입의 알파벳 문자열word1.length는 10 이하인자 2 : word2string 타입의 알파벳 문자열word2.length는 10 이하number 타입을 리턴해

✅ 특정한 조건에서만 실행되는 코드를 작성할 수 있다.✅ truthy와 falsy 가 조건문에서 작동하는 방식을 이해할 수 있다.✅ 비교 연산자를 통한 엄격한 비교(=== , !==)에 대해 이해할 수 있다.✅ if, else if, else를 사용하여 여러 개의 조건

cp6. 함수 학습 목표 ✅ 함수표현식, 함수선언문으로 함수를 정의하고 호출할 수 있다. ✅ 매개변수와 전달인자에 대해 설명할 수 있다. ✅ 함수에 return문이 필요한 이유를 이해한다. ✅ 함수를 이용해 구구단 n단을 출력하는 재사용이 가능한 코드를 작성할 수 있다

연습문제 풀이

HTML: 웹 페이지의 구조를 담당하는 마크업 언어

HTML 문서의 기본 구조 Doctype(DTD) !DOCTYPE html 문서의 HTML 버전을 지정하여 웹 브라우저에게 알려주는 용도 HTML5 (표준) HTML, HEAD, BODY의 개념 html 태그 : html 문서의 전체 범위 (어디

CSS 개요 기본 문법, 주석 기본 문법 선택자 { 속성: 값; } 선택자 : CSS(스타일)를 적용할 대상 속성 : CSS(스타일)의 종류 (Property) 값 : CSS(스타일)의 값 주석 브

계산기 목업을 만들어 보았다. 근데 보노보노를 곁들인..

명령어 뒤에 옵션이나 내용 작성 시 띄어쓰기 후 작성해야 함ex) cd ..: 현재 위치에서 상위폴더로 이동 | cd..: cd..라는 명령어가 없다고 뜸프롬프트(Prompt): 터미널 프로그램에서 키보드의 입력을 확인하고 편집할 수 있는 한 줄의 공간터미널: CLI(

배열 = 순서(인덱스)가 있는 값(요소)인덱스는 0부터 시작되는 Zero-based numbering대괄호(square bracket)를 이용해서 만들고, 각각의 원소(element)는 쉼표로 구분값은 인덱스를 이용해 접근배열은 중첩하여 2차원, 3차원 배열을 만들 수

createPhoneNumber 문제 0-9 사이의 정수를 요소로 갖는 배열을 입력받아 전화번호 형식의 문자열을 리턴해야 합니다. 주의 사항 반복문(for, while) 사용은 금지됩니다. 배열의 길이가 8인 경우, 앞에 [0, 1, 0]이 있다고 가정합니다. 입출력

{ name: "seulgi", dream: "SW engineer" }

stack, heap 그게 뭔데..

변수의 유효범위 스코프에 대해 알아보자

클로저가 뭐야? 클로저 함수?

자바스크립트 koans 풀이를 하며 처음 본 내용과 헷갈렸던 부분이 있어 이러한 부분들에 대해 추가 학습을 통해 알게 된 것을 정리 해 보았습니다.

DOM이란?

Node와 Element

CSS 눈 감아..

Section 1 마무리하며 그 동안 배운 내용을 토대로 기술면접 질문에 대해 준비해보았다.

비포장도로를 향해

어지러워요..

객체 지향 프로그래밍(Object Oriented Programming)

JavaScript는 프로토타입 기반 언어이며, 프로토타입(Prototype)은 원형 객체를 의미한다.

Underbar 과제: underscore.js나 lodash 같은 라이브러리를 만들어보기

동기와 비동기, 콜백함수, 프로미스

React/JSX/Component/CRA

React의 props와 state

React로 Twitter 구현하기

클라이언스 - 서버 아키텍처/프로토콜/API

URL과 URI/IP와 Port/ Domain과 DNS

HTTP(HyperText Transfer Protocol): HTML과 같은 문서를 전송하기 위한 프로토콜

AJAX/XHR과 Fetch/SSR과 CSR

REST와 REST API, RMM

Side Effect / Effect Hook

React 상태 끌어올리기

Project: States Airline Client

HTTP 트랜잭션 해부 문서를 참고하여 mini node server를 구현하기

node로 만들었던 서버를 express로 리팩토링 하기

Section 2를 마무리하며, 그 동안 배웠던 개념과 관련된 기술면접 질문에 대한 답변을 정리 해보았다.

UI / UX 의 개념 + Figma로 실습하기

과제: 원하는 사이트를 클론 -> 피그마로 유튜브 와이어프레임 그리기

CDD / CSS in JS / Styled Components

React에서 DOM 주소값 활용하기

React, Styled-Component, Storybook을 활용해 UI 컴포넌트 개발

&: 자기 자신을 참조. 위의 예시 코드에선 button 태그(Button 컴포넌트) 자신을 참조한다.

Redux로 상태 관리하기

Redux 챕터를 마무리하며, 헷갈리거나 잘 못 알고 있던 개념에 대해 복습해보았다.

목표: React useState로 상태를 관리했던 지난 Cmarket Hooks를 Redux를 사용하여 구현

웹 표준의 개념과 웹 표준을 지켰을 때의 장점

검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업으로, 크게 On-Page SEO와 Off-Page SEO 두 가지로 나뉘어진다.On-Page SEO : 말 그대로 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HT

웹 접근성의 개념과 웹 접근성을 갖추면 얻을 수 있는 효과

HTTP + SSL/TLS 프로토콜 = HTTPS

Cookie (쿠키) 쿠키는 웹 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각이다. 쿠키는 사용자가 웹 사이트를 방문할 때마다 사용자의 정보를 저장하고 사용자의 관심사를 기억하는 데 사용된다. 해당 도메인에 대해 쿠키가 존재하면 웹 브라우저는 도메인에게

OAuth 2.0, 소셜 로그인 인증 방식

자료구조 - Stack과 Queue

문제 마트에서 장을 보고 박스를 포장하려고 합니다. 박스를 포장하는 데는 폭이 너무 좁습니다. 그렇기에 한 줄로 서 있어야 하고, 들어온 순서대로 한 명씩 나가야 합니다. 불행 중 다행은, 인원에 맞게 포장할 수 있는 기구들이 놓여 있어, 모두가 포장을 할 수 있다는

재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요.재귀 함수는 자기 자신을 호출하는 함수를 의미합니다. 재귀를 활용하기 좋은 상황은 순환 알고리즘을 구현할 때이며, 재귀를 사용하면 코드가 간결해지고 이해하기 쉬워집니다.예를 들어 팩토리얼을 구현할 때, 재귀

최적화의 사전적 의미: 주어진 조건으로 최대 효율을 낼 수 있도록 하는 것. 컴퓨터 공학에서의 최적화: 가능한 적은 리소스를 소모하면서 가능한 한 빠르게 원하는 결과를 얻을 수 있도록 하는 것을 의미한다.

단축평가가 되는 특징이 있다.조건문 안에서, 밖에서 다르게 동작한다.Boolean 값으로 변환하여 평가함&& : 모두 true여야 true, 하나라도 false라면 false|| : 모두 false여야 false, 하나라도 true라면 true&&: truthy한 경우

CI/CD란, 개발자들이 새로운 코드를 작성하고 기존 코드를 수정할 때마다 지속적으로 소프트웨어를 테스트하고 배포하는 프로세스를 의미한다.이를 통해 개발자들은 새로운 코드나 수정된 코드의 문제점을 빠르게 발견하고 수정할 수 있다.클라이언트 배포란, 웹 브라우저나 모바일

CORS는 웹 애플리케이션에서 다른 도메인의 리소스를 요청하는 것을 말한다. 브라우저는 보안상의 이유로 이러한 요청에 대해 제한을 두는데, 이러한 제한을 해결하기 위해 다음 두 가지 방법을 사용할 수 있다.추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플