유쾌하고, 유익하게

SEB_FE_45 Section 3. Unit 6. [네트워크] 심화 ✅TCP/IP 1. 패킷교환 방식의 이점에 대해 이해한다. 패킷교환 방식 이전의 통신 방식은 회선교환 방식이다. 회선교환 방식은 1:1 연결만 가능했기 때문에 즉시성이 떨어지는 단점이 있었다. 이에 개발된 방식이 패킷교환 방식이다. 패킷은 pack와 buket이 합쳐진 단어로, 소포라는 의미이다. 즉, 데이터를 패킷 단위로 나누고, 패킷에 출발지와 목적지 정보를 담아 보내는 방식이다. 이 경우 특정 회선이 전용선으로 할당되지 않기 때문에 빠르고 효율적인 데이터 전송기 가능하다. 2. IP의 비연결성, 비순서성, 비신뢰성에 대해 이해한다. IP(Internet Protocol) 출발지에서 목적지까지 데이터가 전달되기 위한 규칙의 일환으로..

SEB_FE_45 Section 3. Unit 5. [사용자 친화 웹] 웹 표준 & 접근성 ✅웹(web)이란? => '공간' 월드 와이드 웹(World Wide Web)이란 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미합니다. 간단히 줄여서 WWW나 W3라고도 부르며, 간단히 웹(Web)이라고 가장 많이 불립니다. - 출처 : http://www.tcpschool.com/webbasic/www ✅웹표준이란? W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’으로, 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있다. -출처 : 코..

SEB_FE_45 Section 2. Unit 2. 객체지향 프로그래밍 과제 beesbeesbees ✅ 과제에서 학습해야 할 개념 클래스, 인스턴스, 프로토타입 this 키워드 클래스 생성자(constructor) 상속(extends, super 키워드) 1️⃣클래스와 인스턴스 클래스 : 특정 객체를 표현하기 위한 객체의 구조(틀 또는 템플릿)이며, 객체 내 속성과 메서드를 정의하는 역할을 하며, 클래스는 함수이다. 클래스의 코드 구조는 아래와 같다. class 클래스 () { method1 () { prop1 prop2 ... } method1 () {...} method1 () {...} . . . } //클래스 - 메서드 묶음, 메서드 - 속성 묶음 인스턴스 : 클래스 구조에 데이터 값을 입력한 객..

SEB _ FE _ 45 Section 3. Unit 3. [React] Custom Component React로 프론트엔드 구축 시 보다 구조적으로 코드를 작성하는 방법을 주제로 CDD(Component Driven Development)와 CDD를 도와주는 개발도구, React Hook인 useRef에 대해 공부하였다. CDD는 컴포넌트 기반의 개발 방법을 의미한다. 즉, 부품단위로 UI 컴포넌트를 만든 후, 부품끼리 이어붙여 완성품을 만드는 방법이다. React 라이브러리와 Styled Component 라이브러리를 이용하여, HTML, CSS, JavaScript를 모두 묶어서 개발할 수 있는Custom Component가 가능해졌다. CSS 구조화 노력과 각 단계별 특징 및 장/단점 구분 특징..

SEB _ FE _ 45 Section 3. Unit 2. [사용자 친화 웹] UI/UX part.3 - Figma 역시나.. 피그마는 개미지옥이다 ㅎ 오늘도 하루가 어떻게 지나갔는지 모르겠다. 어려운데 참 재밌고, 매력있는 프로그램이다. 아래 링크는 Figma 클론 과제를 진행한 링크이다. KINFOLK 의 웹사이트를 참조하여 만들어보았다. 킨포크 매거진은 웹사이트도 매력적이다. https://kinfolk.kr/ 킨포크 매거진 & 스토어 슬로우 라이프 문화를 만들어낸 킨포크포틀랜드와 코펜하겐의 라이프스타일 큐레이션 kinfolk.kr https://www.figma.com/proto/UmHn8gATaUdn4iMGjJ5LRJ/KINFOLK-CLONE-%2F-LO-FI?node-id=57-242&scal..

SEB _ FE _ 45 Section 3. Unit 2. [사용자 친화 웹] UI/UX part.3 - Figma 복지관에서 일할 때 미리 캔버스, 망고보드로 홍보지 만들고 했던게 기억나서, 재밌는 시간이었다. 피그마를 이용해서 작업하면서 신기했던 점은 페이지, 컴포넌트 간의 관계를 맺게 하는 것이었다. 피그마로 레이아웃을 잘 짠다고, 프론트엔드 개발을 잘하는 건 아니겠지만, 뭐든 잘하면 좋지 않겠나 싶다! 와이어프레임 제품 기획 단계에서 페이지의 구성과 구조를 잡기 위한 목적으로 사용된다. 피델리티(Fidelity) 와이어프레임을 표현할 때의 품질 수준을 의미한다. Low Fidelity Wireframe(Lo-Fi Wireframe) : 손으로 빠르게 그린 수준을 의미한다. 수정이 쉬워 새로운 의견..

SEB _ FE _ 45 Section 3. Unit 2. [사용자 친화 웹] UI/UX part.2 UI 디자인 패턴 = 자주 사용하는 UI 패턴 UI 디자인 패턴은 프로그래밍 시 자주 반복되는 문제점을 해결하고자 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴이다. 이 외에 더 다양한 UI 디자인 패턴 레퍼런스 https://ui-patterns.com/patterns Design patterns User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user..

SEB _ FE _ 45 Section 3. Unit 1. [자료구조/알고리즘] 재귀 과제1. stringify - json 과제2. Tree UI 흠.. 과제를 스스로 풀기가 너무 어렵다.. 결국 레퍼런스에 도움을..ㅜㅜ Section 2 에서 배운 내용인 DOM 까지 숙지를 하고 있어야 해서 정신이 없는 과제였다... 과제에 대한 리뷰 이전에 JSON에 대해서 정리해본다. JSON ( JavaScript Object Notation ) 은 데이터 교환을 위해 만들어진 객체 형태의 포맷이다. 데이터 교환을 위해서는 발신자와 수신자가 모두 읽을 수 있는 범용 형태(ex. 문자열)여야 한다. JavaScript에서 객체를 문자열로 변환하기 위해 메서드(Object.toString())나 형변환(String..

SEB _ FE _ 45 Section 3. Unit 2. [사용자 친화 웹] UI/UX part.1 UI / UX 많이 들어봤는데...? UI(User Interface) 는 사람들이 컴퓨터와 상호작용하는 시스템을 말한다. UI는 그래픽 요소뿐만 아니라 물리적 요소(키보드와 마우스, 버튼 등)도 포함된다. 물리적 요소에 대한 예를 들어보면, 우리가 컴퓨터를 켜면 가장 먼저 윈도우를 만나게 된다. 이때, 물리적 요소인 키보느나, 마우스 같은 입력 장치가 없다면???? 아무리 좋은 그래픽 요소를 가진 프로그램도 물리적 요소가 없으면 사용할 수 없는 UI가 되는 것이다. 컴퓨터의 UI를 보면, 그래픽 기반의 UI가 많다. 이를 GUI(Graphical User Interface)라고 하며, 마우스를 이용해 ..

SEB _ FE _ 45 Section 3. Unit 1. [자료구조/알고리즘] 재귀 코드스테이츠 부트캠프 참여한지 벌써 2달이 지났다? 시간이 참 빠른 것 같다. section2는 정신없이 유닛이 진행되어 "어어~!? " 하는 사이에 끝나버린 것 같아.. 제대로 된 이해를 위해 복습하면서 블로깅을 하도록 해야겠다. Section3 는 그날 배운 내용을 바로 복습 블로깅을 목표로 해보도록 하겠다!(이미 하루 늦음..) section3 첫 유닛은 재귀다! 재귀(recursion)란 사전적의미로 원래의 자리로 되돌아가거나 되돌아옴을 의미하는 단어이다. 재귀를 잘 사용하려면 재귀적 사고가 필요하다. 재귀 함수의 입력 값 출력 값 정의하기 가장 추상적으로 또는 가장 단순하게 정의하기 ex ) A 함수 : 입력값..

SEB_FE_45 Section 2. Unit 1. [JavaScript] 고차함수 코드스테이츠 부트캠프 Section2도 이번주면 종료가 된다. 그 말은 벌써 부트캠프 참여 후 2달이 되었다는 이야기! 시간 진짜 빠르다.... 앞으로의 포스팅에서는 블로깅에 소홀해져서 작성하지 못했던 Section 2를 다뤄보도록 하겠다. Section 2는 첫 유닛부터 너무 힘들었던 기억이라 블로깅을 할정도의 에너지가 되지 않았다. 이에 이제라도 작성해보고자 한다! 시작! 일급객체란? 자바스크립트 내에서 특별한 대우를 받는 객체이며, 대표적인 일급객체는 함수(function)가 있다. 일급객체인 함수에게 주어진 특별한 대우? 변수에 할당(assignment)할 수 있다. 다른 함수의 전달인자(argument)로 전달될..

SEB_FE_45 Section 2. Unit 8. REST API REST API 에대해 블로깅을 하라고 하는데, 이해의 영역이 아닌건가 아니면 뇌가 받아들이질 못하는건가..? REST API 란?? 우선, 강의 교안인 URCLASS에서는 REST API를 아래와 같이 정의하였다. 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 다음은 챗 GPT에게 REST API에 대해 정의를 물어본 내용이다. REST API는 Representational State Transfer API의 약어로, 웹 애플리케이션 간에 데이터를 주고받기 위한 표준화된 방법입니다. 이 방법은 HTTP를 기반으로 하며, 자원 식별, HTTP 메소드,..

SEB_FE_45 Section2. Unit4. React Intro React의 3가지 특징 선언적(Declarative) : 선언적 방식으로 UI 구성할 수 있으며, 수동으로 DOM을 조작할 필요가 없기 때문에 가독성과 유지보수성이 향상됨. 이에 개발자는 어떻게 화면을 그릴지에 집중할 수 있음 컴포넌트 기반(Component-based) : 컴포넌트 기반 아키텍처(하나의 기능 구현을 위한 여러 종류의 코드 묶음)를 사용하여 UI 구성함. 컴포넌트는 재사용성과 독립성을 가짐. 개발자는 애플리케이션을 작은 단위로 나눠 개발할 수 있음 범용성(Learn Once, Write Anywhere) : 라이브러리인 리액트는 어느 프로젝트에나 사용이 가능함. 많은 개발자들이 사용하고 있기 때문에 유지보수성이 좋음...

SEB_FE_45 Section 2. Unit 2. 객체지향프로그래밍(프로토타입과 클래스) 프로토타입 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있으며, 객체 지향의 상속 개념과 같이 부모 객체의 속성과 매서드를 상속받아 사용할 수 있다. 이러한 부모 객체를 프로토타입 객체 또는 프로토타입이라 부른다. 프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이도 객체(인스턴스)를 생성할 수 있다. 자바스크립트는 흔히 프로토타입 기반 객체지향 프로그래밍 언어라 불린다. ES6문법을 통해 클래스 개념이 도입되었다. 프로토타입 체인이란 객체간의 연결을 의미하며, 이를 바탕으로 부모 객체의 속성과 매서드를 상속받아 사용할 수 있게하는 근간이다. .prototype 함수 객체만 가지고 있..

SEB_FE_45 Section 2. Unit 2. 객체지향 프로그래밍 객체지향 프로그래밍 객체지향 프로그래밍은 데이터(속성)와 기능(메서드)을 의미하는 코드를 하나의 단위(객체)로 묶으며, 이러한 단위들의 집합으로 프로그램을 표현하는 방식이다. 객체는 한번 만들고 나면, 메모리상에서 반환되기 전까지 객체 내의 모든 것이 유지된다. 클래스는 세부 사항(속성)이 들어가지 않은 청사진으로, 세부사항을 입력하면 객체(인스턴스)가 된다. 객체의 속성은 클래스(실체)의 고유한 세부사항(또는 특성)(예. 자동차 -> 브랜드, 모델명, 가격, 색상 등)이며, 구체적인 속성은 특정 클래스를 다른 것들과 구별하여 인식할 수 있게 한다. 객체의 매서드는 해당 클래스의 기능(또는 동작)(예. 자동차 -> 전진, 후진, 조향..

SEB_FE_45 Section2. Unit 2. 클래스와 인스턴스 in 객체지향 프로그래밍 클래스(class)란? 자바스크립트에서 클래스는 ES6에서 도입되었다. 자바스크립트는 프로토타입의 객체지향 프로그래밍 언어이다. 클래스란 특정 객체를 생성하기 위해 변수와 매서드를 정의하는 틀(template)이며, 이는 같은 종류의 집단(객체, object)에 속하는 속성(변수)과 행위(매서드)를 정의하는 것이다. 클래스는 같은 종류의 집단(객체) 생성에 사용되는 패턴 혹은 청사진(blueprint)이다. 인스턴스(instance)? 인스턴스는 클래스(청사진, blueprint)를 바탕으로 한 객체(오브젝트, object)를 의미한다. 모든 인스턴스는 오직 클래스에서 정의된 범위 내에서만 작동하며 런타임에 그 ..

코드스테이츠 프론트엔드 부트캠프 45기 Section1 회고 부트캠프를 시작하고 한달이 지났다. 커리큘럼을 따라오다 보니 여기까지 와있네!? 시간 참 빠르다~! 오늘의 커리큘럼이었던 section.1 회고 블로깅! KPT(KEEP / PROBLEM / TRY) 방식으로 노션페이지에 블로깅을 진행하였다. 블로깅 후에는 동기들의 글도 서로 보면서 응원하는 시간도 가져서 의미있는 시간이었다. 온라인에 비대면 수업이라 함께한다는 느낌을 받기 어려운데, 코드스테이츠는 페어프로그램이나 그룹회고 그리고 이런 블로깅에 서로 응원해주시 등을 통해 함께 한다는 느낌을 받게 해주는 것 같다. 아래는 노션페이지에 작성한 나의 1달간의 회고 내용이다. ※ 초기 목표! 수업 출석률 95%달성하기 건강 관리하기(10kg 체중 감량..

SEB_FE_45 Section1. Unit.9 JavaScript 핵심 개념과 문법(Koans) JavaScript에서 호이스팅(hoisting)이란? 출처 : https://developer.mozilla.org/ko/docs/Glossary/Hoisting 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생한다. 함수 선언식으로 작성한 함수에서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다. 단, 선언과 초기화를 함께 수..