코딩공부
1.디자이너가 하는 개발
디자이너가 하는 개발 공부 #1
2.워밍업_뇌가소성
뇌 가소성
3.Visual Studio Code(VSCode)
Visual Studio Code
4.워밍업_메타인지
## 메타인지는 자기 자신을 보는 거울이다. ## 거울을 보면서, 자기 자신을 믿는 능력이다. ## 거울을 보면서, 나의 완벽하지 않은 모습을 인정하는 것이다.
5.CLI 환경 알아보기
CLI 환경은..뭐지? 1-1 터미널이란? 터미널은 컴퓨터와 사용자 간의 소통을 가능하게 해주는 명령줄 인터페이스(Command Line Interface)이다. 터미널은 그래픽 사용자 인터페이스(GUI)가 없던 시절부터 사용되어 왔으며, 현재도 서버 관리, 개발,
6.git 과 github
git 과 github
7.HTML-이론
HTML(HyperText Markup Language)는 웹 페이지의 구조와 콘텐츠를 정의하는 기본 마크업 언어이다.HTML 문서는 크게 <head>와 <body>로 구분할 수 있는데 <head>는 웹 문서에 필요한 설정,<body>는 실제로 사
8.CSS 1-이론
1. 웹 문서를 디자인하는 스타일시트 언어 CSS(Cascading Style Sheets)는 HTML이나 XML 같은 마크업 언어로 작성된 문서의 스타일을 꾸미기 위한 스타일 시트 언어다. HTML이 문서의 구조와 콘텐츠를 정의한다면, CSS는 그 문서를 시각적으로
9.CSS 2-이론
1. CSS 박스 모델 (Box Model) 1-1) 개념 설명 박스 모델(Box Model)*은 모든 HTML 요소가 사각형 박스로 구성된다는 CSS의 기본 개념입니다. 각 박스는 네 가지 영역으로 나뉩니다. Content: 텍스트나 이미지가 들어가는 실제 내
10.JavaScript-이론
내가 정말 어려워하는..자바스크립트 시작합니다!🙌🏻 HTML은 웹 문서의 구조를 만드는 마크업 언어, CSS는 웹 문서를 디자인하는 스타일시트 언어라는 것을 학습했습니다. HTML과 CSS만 가지고도 정적인 페이지는 얼마든지 만들 수 있습니다. CSS를 잘 다룬다면
11.첫 수업, 달리자!
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.웹이란? 인터넷 상의 컴퓨터들 간에 정보를 공유할 수 있도록 해주는 네트워크 시스템이다.웹을 통해 교환되는 정보의 종류는 무척 다양하다. 글, 이미지
12.2회차 수업
HTML 이어서.. 현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다. 본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다. 1. 목록 만들기 HTML 목록은 ‘순서없는 목록’과 ‘순서있는 목록’으로 구분된다. li 태그 li 태그는 목록에 들어가
13.돌아버릴 3회차 수업
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.내가 생각하는 대환장파티 언어..앞길 먼데..css에서 쩔쩔..본격적으로 내용 복습 들어갑니다.CSS는 캐스케이딩 스타일시트(Cascading Sty
14.4회차 수업 고생한 보람이 있군!
CSS 이어서.. 현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다. 본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다. 1. 배경 박스에 배경 추가 콘텐츠와 어울리는 적절한 배경을 추가함으로써 콘텐츠를 더욱 돋보이게 만들 수 있다. 박스 모델에
15.5회차 수업
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.웹 요소에는 변형을 적용할 수 있다. 변형이란 요소의 크기나 위치를 바꾸는 것을 뜻하는데, 이때 크기나 위치는 요소의 x축과 y축을 기준으로 바꾼다.
16.6회차 .js
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.HTML은 마크업 언어, CSS는 스타일시트 언어이다.그렇다면 자바스크립트는? 자바스크립트는 프로그래밍 언어이다.자바스크립트는 서버 개발, 어플리케이
17.7회차 .js
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다. 본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다. 1. DOM DOM(Document Object Model)이란? DOM(문서 객체 모델) 은 웹 페이지(HTML 문서)를 브라우저가 이해할 수
18.8회차 .js
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.비교 연산(Comparison Operators)이란?비교 연산은 두 값을 비교하고, 그 결과를 true 또는 false(불리언 값) 로 반환하는 연
19.9회차 .js
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.createElement란?createElement는 자바스크립트로 새로운 HTML 요소를 동적으로 생성할 때 사용되는 메서드이다.이 메서드를 사용하
20.10회차 .js
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.자바스크립트에서 function은 특정 작업을 수행하는 코드 블록이다. 함수는 코드의 재사용성을 높이고, 유지보수를 쉽게 만들어 주는 중요한 개념이다
21.11회차 .js
htmljavascripthtmljavascript음....기본에 충실한..코드!추후 CSS 코드 수정해서 디자인 수정 예정
22.12회차 .js
생성자(Constructor) 는 new 키워드를 사용해 새로운 객체를 생성하는 함수이다.보통 첫 글자를 대문자로 시작하는 PascalCase 방식으로 작성한다.new Person("상희", 25)를 실행하면 새로운 객체가 생성됨.this 키워드는 새로 만들어지는 객체
23.13회차 .js
여러 개의 값을 하나의 변수에 저장할 수 있는 자료구조.Array 객체를 기반으로 하며, 인덱스(번호) 로 각 요소에 접근할 수 있음.배열의 인덱스는 0부터 시작함.✔️ \[] 대괄호를 사용하여 배열 선언 가능.💡 하지만 일반적으로 리터럴 방식(\[])을 사용하는 것
24.14회차 .js
{} 중괄호를 사용하여 객체를 직접 정의하는 방식.키(key)와 값(value) 쌍으로 이루어짐.속성(Property)과 메소드(Method)를 포함할 수 있음.✔️ 대괄호 표기법은 동적 키 접근이 가능함.메소드 내부에서 this를 사용하면 해당 객체를 참조할 수 있음
25.15회차 .js
코드가 순차적으로 실행됨.이전 작업이 끝나야 다음 작업 실행.실행 시간이 긴 경우, 다음 코드가 대기해야 함(블로킹).✅ 첫 번째 작업이 끝날 때까지 두 번째 작업이 대기.코드 실행이 즉시 멈추지 않고 다음 코드로 진행됨.시간이 걸리는 작업(네트워크 요청, 파일 읽기
26.16회차 .js
값을 다른 데이터 타입으로 변경하는 과정.암묵적 타입 변환: 자바스크립트 엔진에 의해 자동으로 수행.명시적 타입 변환: 개발자가 코드로 직접 수행.→ 명시적 타입변환보다 암묵적 타입 변환이 가독성 측면에서 이점이 있을 수 있지만 중요한 것은 코드를 예측할 수 있어야 하
27.Mini_Project_01
교육을 시작하고 첫 프로젝트!팀원을 잘 만나서 시간이 지날 수록 소통이 잘됐다. 미팅에 대비해서 소통하고 서로서로 부족한 설명을 덧붙여주기도 하면서 좋은 팀워크를 보여줬다.4단계에서 =를 눌러도 계속 +가 나오는 오류가 발생했다. 이를 수정하는 데 많은 시간을 소비했고
28.17회차 Git&Github
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다. 본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다. 1. Git Git은 2005년 리누스 토르발스에 의해 개발된 ‘분산 버전관리 시스템(Distributed Version Control Syst
29.18회차 Git&Github
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다. 본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.
30.19회차 Git&Github
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다. 본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.
31.20회차 React & Redux
1. Node.js 1) 등장 Node.js는 자바스크립트를 서버에서도 실행할 수 있도록 하기 위해 등장. 비동기 처리와 높은 성능을 제공하여 효율적인 서버 개발이 가능하게 만들었다. 기존에는 자바스크립트가 브라우저에서만 실행되었지만, Node.js는 Chrome V
32.21~22회차 React & Redux
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다. 본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다. 1. React React는 Facebook에서 만든 JavaScript 라이브러리다. 웹 애플리케이션의 UI(사용자 인터페이스)를 효율적으로
33.23~24회차 React & Redux
Element 내용이 부족해서 추가하였음 1. React 프로그래밍 1) 선언적 프로그래밍(Declarative) React는 선언적(declarative) 프로그래밍 방식을 따르는 대
34.25회차 React & Redux
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.React에서는 조건에 따라 특정 컴포넌트를 화면에 보이게 하거나 숨기는 것을 조건부 렌더링이라 부른다.가장 기본적인 조건 분기 방식이다.조건이 참일
35.26~27일차 React & Redux
React 컴포넌트의 생명 주기(lifecycle)는 컴포넌트가 생성되고, 업데이트되고, 제거될 때까지의 과정을 의미한다. 함수형 컴포넌트와 클래스형 컴포넌트에서 사용하는 방식이 다르며, 요즘은 함수형 컴포넌트 + Hooks가 표준이다.함수형 컴포넌트는 생명 주기를 u
36.28일차 SCSS
SCSS는 Sass(Syntactically Awesome Style Sheets)의 문법 중 하나로, 기존 CSS 문법과 거의 유사하지만 훨씬 더 강력한 기능을 제공한다.(문법적으로 짱멋진 스타일 시트) Sass는 CSS 전처리기(preprocessor)로, 스타일을
37.29일차 Styled-Components
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.Styled-Components는 React에서 CSS를 JavaScript 안에서 작성할 수 있도록 도와주는 라이브러리이다.CSS를 별도 파일이 아
38.30일차 tailwindcss
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다. 본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다. 1. tailwindcss Tailwind CSS는 유틸리티 퍼스트(Utility-First) 방식의 CSS 프레임워크이다. 즉, 개발자가 직
39.31일차 React & Redux
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.React 상태 관리 개념은 컴포넌트 내에서 데이터를 어떻게 관리하고 전달할지에 대한 개념이다. React는 기본적으로 "단방향 데이터 흐름"을 따르
40.32일차 React _Context API
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.Context API는 React에서 컴포넌트 간 전역 데이터를 효율적으로 공유하기 위한 기능이다.복잡한 구조의 컴포넌트 트리에서 props를 여러
41.33일차 React_Redux, Redux Toolkit
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.Redux는 자바스크립트 애플리케이션의 상태(state)를 효율적으로 관리하기 위한 상태 관리 라이브러리이다.모듈 설치npm install redux
42.34일차 React 최적화 함수
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.useMemo는 계산된 값을 메모이제이션(memoization) 하여, 의존성이 바뀌지 않으면 동일한 값을 재사용하게 하는 훅이다. 렌더링 시마다 불
43.35일차 React 최적화
컴포넌트를 바로 불러오지 않고, 실제로 그 컴포넌트가 필요할 때 불러옴React.lazy는 컴포넌트를 동적으로 import하여 코드 스플리팅을 구현할 수 있게 해주는 함수이다. 즉, 해당 컴포넌트를 실제로 필요할 때까지 로딩하지 않고, 나중에 필요한 시점에서 가져오도록
44.Mini_Project_02
요구 사항 Todo 생성 / 조회 / 수정 / 삭제 (CRUD) 기능을 구현하세요. 현재 시간 표시, 타이머, 스톱워치 중 하나 이상의 기능을 구현하세요. 랜덤 명언을 표시할 수 있는 컴포넌트를 만드세요. useState, useEffect, useRef를 각각 한 번
45.36일차 Next.js
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다. 본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다. Next.js 1. Next.js란? Next.js는 React 기반의 웹 프레임워크이다. 서버 사이드 렌더링, 정적 사이트 생성, 라우팅, API 구축 등 다양한 기능을 제공하는 것이 특징이다. 
더미데이터를 사용한 메인 페이지와 디테일 페이지 레이아웃 구성완료React-Router-Dom을 사용하여 라우팅 main.jsx 구성완료Layout Component를 사용하여 Nav바 상단 구성완료장르 리스트를 불러오지 못해 undefined 오류가 발생했는데, 구글
47.37일차 Node.js
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다. 본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다. Nods.js 1. 네트워크의 기본 구조와 개념 1) 네트워크(Network)란? 정의: 두 대 이상의 컴퓨터나 장비가 서로 데이터를 주고받기
48.38일차 Node.js
1. Node.js 서버 만들기 실습 server.js todo.html todo.css todo.js 2. Express.js 서버 만들기 실습 
웹에서 말하는 Cookie(쿠키)는 웹사이트가 사용자의 브라우저에 저장하는 작은 데이터 조각이다.로그인 상태를 기억하게 해줘요. 예: 로그인하면 쿠키에 정보가 저장되어, 새로고침하거나 페이지를 이동해도 로그인이 유지.예: 다크 모드 설정, 언어 설정 등을 저장해서 다음
50.40일차 Node.js
Token
51.41일차 Node.js
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.OAuth는 사용자의 비밀번호를 직접 공유하지 않고도 제3자 애플리케이션이 사용자 자원에 접근할 수 있도록 허용하는 인증 및 권한 부여 프로토콜이다.
52.42일차 Database
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다. 본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다. Database 1. 데이터베이스 개요 1) 데이터베이스란? 데이터베이스는 데이터를 체계적으로 저장하고, 관리하며, 필요할 때 쉽게 꺼내 쓸
53.43일차 Database
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다. 본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다. 1. 데이터 모델링 기초 1) 데이터 모델링이란? 데이터 모델링은 현실 세계의 데이터를 구조화하여, 데이터베이스에 저장하고 효율적으로 사용할 수
54.44일차 Database
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다. 본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다. # 데이터 모델링_영화 후기 플랫폼(CASE STUDY) ## 1. 후기(Review) 영화에 대한 후기를 저장하기 위한 테이블이다. 각 후기
55.45일차 Database
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.업로드중..데이터베이스의 테이블과 프로그래밍 언어의 객체(클래스)를 연결(mapping)해주는 기술이다.SQL 쿼리를 직접 작성하지 않고도, 객체 조
56.47일차 AWS
S3에 웹 프로젝트를 호스팅 하는 방법 글로 정리하기 [학습 Tip] 강의를 다 듣고나서 스스로 구현할 수 있으려면? 프론트엔드 개발자인데 AWS를 꼭 배워야 하나요? [학습 Tip] 파레토의 법칙 [학습 Tip] First Word 법칙 AWS 회원 가입 및
57.48일차 AWS
S3 웹 호스팅 설정 복습하기 CRA로 React 프로젝트 생성 Vite로 React 프로젝트 생성 Next.js 프로젝트 생성 웹 서비스를 배포할 때 사용하는 S3, CloudFront CloudFront를 활용한 아키텍처 구성 CloudFront 생성하기
58.49일차 AWS
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다. 본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다. # 1. 도메인(Domain) ## 1) DNS(Domain Name System)란? 도메인(Domain)이 없던 시절에는 특정 컴퓨터와 통
59.50~51일차 AWS
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다. 본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.
60.52일차 TypeScript
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다. 본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다. 1. TypeScript 1) TypeScript란? TypeScript 는 JavaScript 의 상위 집합(super set)으로, 자바