멋쟁이 사자처럼 프론트엔드 스쿨 3기
1.멋쟁이 사자처럼 프론트엔드 스쿨 3기
열심히 활동하여 지금의 저와 다른 모습으로 발전시켜 나아가겠습니다.
2.22-08-29-TIL
오늘은 일단 만들어보는 HTML/CSS 강의를 들어보면서 한 페이지의 이력서 형태를 만들어 봤습니다.상단 탭에 표시되는 태그로 head 태그에 포함html 파일과 css 파일을 연결해 주기 위해선 link 태그 사용 (head 태그 안에 위치)class로 도움받기 (c
3.22-08-30-TIL
오늘은 깃허브에 관하여 살짝 배웠다.잔디 심는것도 중요하다고 하셨는데 삭제하면 잔디가 없어지는 것도 모르고 삭제해버린 저장소들이 너무나 많다....😭😭매번 잔디 심는걸 귀찮아했는데 이번 기회에 좀 더 관리해보려고 합니다~!🤔동시 수정Ctrl + Alt + 아래방향
4.22-08-31-TIL
HTML, CSS, JavaScript 웹 페이지를 만드는 개발자 (모바일, PC 화면 등 포함)Q ) 아직까지 <div> 태그를 사용하는 경우A ) 호환성 때문에 아직까지 사용하는 경우가 있다.Q ) 시맨틱한 태그를 사용해야 하는 이유A ) <div> 태그
5.22-09-01-TIL
깃허브 오늘은 매번 저를 괴롭혔던 깃허브에 대하여 공부를 해봤다. 기본적인 틀 느낀점 > 오늘 수업을 통해 확실히 깃과 깃허브에 대하여 알게된 것 같다. 매번 팀원들과 깃허브 관련한 부분에서 애먹어가지고 나중에는 zip으로 주고받았지만 이제는 오늘 배운 것들을 잘
6.22-09-02-TIL
🧐 오늘은 이종찬 강사님의 CSS 특강을 들었다. 아직 CSS에 대해 지식이 부족한 나에게 이번 시간은 너무나 유익한 시간이었다. CSS 기초 탐구 레이아웃 파악하기 시각적으로 볼 때 몇 개의 덩어리로 나뉘어 있는지 파악하고 들어가기 가장 큰 덩어리
7.1주 차 주간 회고
만족하거나 좋았던 점 😁
8.22-09-05-TIL
오늘은 임동준 강사님과 회고 시간을 가졌다.앞으로 우리가 성장하기 위해 필요한 부분들을 생각해보는 시간을 가졌다.HTML 작성을 최대한 효율적으로 작성하기!!h1은 페이지당 하나만 작성header -> h1을 품는 영역, 주로 navp 태그 안에 p 태그는 문법 오류u
9.22-09-06-TIL
특정한 기능을 가진 위젯인가? 독립적인가?다른 페이지 중간에 들어가도 어색하지 않은가?시간 정보 표현무조건 크다고 제목이 아니라 그 부분을 대표적으로 나타내는 것을 제목이라고 판단하기브라우저에게 파일 위치 및 파일명 알려줌
10.22-09-07-TIL
코덱 vs 포맷코덱 -> 녹화하면 얻는 원본 영상포맷 -> 코덱을 담아 재생 가능한 플레이어에 전달되는 컨테이너 역할🔍 폼 동작 방식form에 데이터 입력웹 서버로 데이터 이동Web Server에서 App Server 호출App Server에서 DB로 데이터 전송DB
11.22-09-08-TIL
CSS 1주차
12.2주차 주간 회고
2주차 주간 회고 작성
13.22-09-13-TIL
text 관련 내용
14.22-09-14-TIL
HTML 태그 위치 지정요소를 띄워서 좌,우로 정렬하는 속성을 가짐그림을 따라 흐르는 텍스트 레이아웃을 구현블록 박스 요소 정렬하는 기본적인 방법인라인 요소에 float 적용 -> display 속성 값이 자동으로 block으로 변경됨 -> 인라인 요소도 width,
15.22-09-15(1)-TIL
CSS Selector, CSS Combinator
16.22-09-15(2)-TIL
Flex
17.22-09-16-특강-TIL
현재 개발자로 재직 중이신 분들의 말씀을 들어보면서 저 자신을 돌아보는 하루가 된 것 같습니다.📋 특강 해주신 분들의 말씀과 개인적인 목표를 포함해서 정리해봤습니다.
18.3주 차 주간 회고
3주차 주간 회고입니다.
19.22-09-19-TIL
flex-basis, flex-grow, flex-shrink 는 flex-container의 상태에 따라 flex-item의 레이아웃을 결정하는 속성부모 컨테이너 요소 안에서 x축 y축 모두 이요하여 배치하는 내부 디스플레이 타입
20.22-09-20-TIL
원근법 - perspective
21.22-09-21-TIL
오늘은 온라인 테킷 동영상 강의를 보고 정리한 내용입니다.
22.22-09-22-TIL
CSS 실무 테크닉
23.4주 차 주간 회고
😊 5주차... 자바스크립트 시작~!!! 같이 자바스크립트 뿌셔봐요~!!!👊
24.22-09-26-TIL
반응형, 미디어쿼리
25.22-09-30-SaSS, SCSS
SaSS (Syntactically Awesome Stylesheets), SCSS
26.22-10-01-Bootstrap
부트스트랩 웹 프레임워크 - 최소한의 작업으로 빠른 결과물 생성 반응형 사이트 최적화 그리드 시스템 전체 화면을 12개의 컬럼으로 나눔 12개 컬럼이 모여 1개의 row 넓이 100% 모두 사용하고 싶은 경우 -> .container-fluid 사용 컬럼 사이 여백(패딩,마진) 제거 -> .row에 .no-gutters 적용 ...
27.22-10-01-Tailwind CSS
Tailwind CSS
28.22-10-01-JavaScript
JS 1일차
29.5주 차 주간 회고
😊 6주차... 주위에 휘둘리지 말고 내가 할 수 있는 만큼 열심히 하자!!! 👊
30.22-10-04-JavaScript(2)
js 2일차
31.22-10-05-JavaScript(3) Array
배열
32.22-10-06-JavaScript(4) Array
반복문, 조건문
33.22-10-11-JavaScript(5) 함수
구조분해할당 배열 속성을 해체하여 할당 선언만을 먼저 할 경우 const 대신에 let 사용해야 함 반복문 구조분해할당 일반변수 선언의 구조분해할당 좌변 갯수가 우변보다 많아도 할당을 안해준 경우이므로 undefined가 나옴 객체구조분해 할당 받을
34.22-10-12-JavaScript(6)
this, set, map
35.22-10-13-JavaScript(7) 정규표현식, Date()
정규표현식, Date()
36.22-10-14-JavaScript(8) DOM(1)
DOM (Document Object Model) 자바스크립트의 기능이 아닌 브라우저에서 제공하는 기능 HTML 문서 내용을 트리 형태로 구조화 함 -> 웹 페이지와 프로그래밍 언어 연결 문서를 객체화해서 모델링 각각 표현하는 단위를 노드 node (텍스트, 컨텐츠, 주석 또한 노드로 인식!!) 돔 트리에 접근하기 docu...
37.22-10-17-JavaScript(9) 비동기 프로그래밍
동기와 비동기 동기 - 순차적인 흐름을 가짐 하나의 작업이 실행되는 동안 다른 작업들은 대기 상태 비동기 - 비순차적 작업 순서를 기다리지 않고 바로 다음 작업 수행 비동기 처리 처리 완료되지 않아도 다음 코드 실행 데이터를 받아 온 후 코드 실행되는 경우 비동기 처리 자바스크립트는 싱글 스레드로 동작 웹이 ...
38.22-10-18-JavaScript(10) 비동기 Fetch, D3, Chart.js, canvas, 콜백 지옥, 로컬스토리지
Fetch 비동기 네트워크 통신 구현을 위해 사용하는 Web Api Ajax Asynchronous Javascript and XML (비동기) 서버에게 비동기적으로 데이터를 요청하고 받은 데이터를 동적으로 페이지에 렌더링 하는 방식 비동기 통신 -> 응답 받을 때까지 기다리지 않고 다른 일을 처리하는 방식 Ajax 이전) ...
39.22-10-19-JavaScript(11) DOM(2)
이벤트, 캡처링, 버블링
40.22-10-25-JavaScript(12) 객체지향 프로그래밍
객체지향 프로그래밍 객체와 객체의 상호작용 객체란? 자바스크립트의 객체 : 데이터의 묶음 객체 지향의 객체 : 우리가 표현하고자 하는 사물을 추상적으로 표현한 것 객체는 행동, 상태를 가짐 행동-> 메소드 상태 -> 프로퍼티 객체와 객체가 서로 메소드를 통해 상호
41.22-10-26-JavaScript(13) 최적화
최적화 (Optimization) 1) 작동하게 만들기 2) 올바르게 작동하도록 만들기 3) 빠르게 만들기 시간 초기 구동시간 : 초기에 애플리케이션이 로드 되는 시간 계산시간 : 동일한 계산을 얼마나 빠르게 수행하는지 반응 시간 : 사용자 행동에 얼마나 빠르게 반응
42.22-10-31-자료구조, 알고리즘
워밍업 문제 1차원 점들 중 가장 거리가 짧은 것의 쌍을 출력하는 함수 작성 S = [1, 3, 4, 8, 13, 17, 20] 이 주어졌다면, 결과값은 (3, 4) 방법 1 방법 2 Infinity로 시작해서 최솟값을 계속 바꿔준다는 점이 인상깊었다. 스택과 큐 스택 : 삽입 (push), 삭제 (pop) 큐 : 삽입 (push), 삭제 (shif...
43.22-11-01-자료구조, 알고리즘 (2)
선택정렬 , 삽입정렬 , 병합정렬 ,퀵 정렬
44.22-11-02-자료구조, 알고리즘 (3)
트리 - 깊이 우선 탐색, 너비 우선 탐색
45.22-11-02-jQuery & Ajax (1)
자바스크립트의 라이브러리 중 하나인 jQuery가 있다.
46.22-11-07-jQuery & Ajax & HTTP/HTTPS (2)
Ajax & HTTP / HTTPS
47.22-11-08-리액트(1)
React는 jQuery와 같은 프론트엔드 개발을 위한 라이브러리이다.
48.22-11-09-리눅스, 우분투
운영체제 사용자 인터페이스로 시스템 하드웨어 관리, 응용 SW를 실행하기 위한 하드웨어 추상화 플랫폼과 공종 시스템 서비스 제공하는 시스템 소프트웨어 리눅스 리누스 토르발스가 만들게 되었다. 무료로 사용이 가능하며 유닉스와의 호환성이 좋다. 편리한 GUI 환경 제공 리눅스의 구조 커널 : 리누그의 핵심으로 컴퓨터의 모든 자원 제어하는 기능 수행 셸 :...
49.22-11-09-Node.js
Node.js javascript 런타임 (자바스크립트가 동작할 수 있는 프로그램) 웹 브라우저에서만 동작하는 javascript를 V8엔진에다 살을 붙여 실행시킬 수 있는 런타임을 만든 것 서버를 만들 수 있지만 서버만 만드는 것은 아니다. 특징 Non-Blocking I/O - 다 처리하지 않고 일단 전달 싱글 쓰레드 노드를 사용하는 이유 웹 브라우...
50.22-11-10-리액트(2)
React 사용 이유 페이지 구성 요소를 컴포넌트화 하기 위해 사용 대규모 프로젝트의 복잡도를 줄일 수 있다 유지보수가 가능하게 해준다. 싱글 페이지나 다수의 정적
51.22-11-14-리액트(3)
특정 변수를 지정하여 해당 변수가 변할 때마다 페이지를 업데이트하기 import문에 {useState} 추가
52.22-11-15-리액트(4)
Style, module css, 합성 컴포넌트
53.22-11-16-리액트(5)
리액트 라우터는 페이지 새로 고침을 하지 않고 dom만 조작해서 페이지를 보여줍니다.
54.22-11-17-리액트(6)
useEffect, useRef
55.22-11-21-리액트(7)
useMemo, useContext, custom Hook
56.22-11-22-리액트(8), Redux
Redux 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 시간여행형 디버거와 결합된 실시간 코드 수정 개발자 경험 제공 Redux를 다른 뷰 라이브러리나 리액트와 함께 사용 가능 상태 관리 라이브러리 바닐라 JS에서의 Redux 리액트에서 클릭 이벤트 발생 -> Hook을 사용 (useState) 리액트에게 값의 변경을 알림 Redux Toolkit...