멋쟁이사자처럼_프론트엔드 스쿨 1기

21년 10월 29일 멋쟁이사자처럼 프론트엔드 스쿨 시작 🏃‍♀️

MDN 참고Visual Studio Code 설치 및 환경설정!youtubeXs5aM9FYuic코드스니펫git? 소스코드 및 파일의 변경내역을 저장하는 분산버전관리시스템github? 공유 폴더 개념HTML(Hyper Text Markup Language): 뼈CSS(C

Working Backwards? 기존의 일하는 방식을 거꾸로 뒤집어 수행하는 것기존 방식: 제품/서비스 개발 프로세스가 아이디어로부터 시작해 개발을 완료한 후 고객에게 제공워킹 백워즈: '고객 경험'을 먼저 정의한 후, 이를 시작으로 거꾸로 되짚어가며 반복적으로 일하

21년 11월 02일 📎 HTML 폼 태그 보충 ` : The ` HTML element is a container element into which a site or app can inject the results of calculation or the outcom

Box Model - boxsizing: content-box일 때,Box Model - boxsizing: border-box일 때,width, heightborder, radiusmargin, paddingpadding : 콘텐츠와 border 사이의 여백 / ba

box-sizing 속성은 박스의 크기에 대한 기준을 정한다.box-sizing: content-box일 때,box-sizing: border-box일 때,<span style="color:display 속성은 박스의 성질을 지정하여 요소를 어떻게 보여줄지 결정&

팀원들과 유대관계 형성=> 오픈 채팅방 만들어서 팀원들과 대화하려고 노력함팀원들에게 어려운 부분 묻기=> 아직 못 물어봄조급해하지 않기=> 밀린 TIL 작성으로 나름 계획했던 주말 공부를 하지 못한 덕분에 아직도 조급한 것 같은데 이 부분도 여기에 포함이 되려나?명상하

justify-content와 수직축 방향 정렬flex-wrap: wrap이 설정된 상태에서 아이템들의 행이 2줄 이상일 경우, 수직축 방향 정렬=> 수직축 방향의 justify-contentalign-items의 아이템 버전align-items가 전체 아이쳄의 수직축

html, css 추가하기확장 가능한 벡터 그래픽(Scalable Vector Graphics)으로 HTML 기반의 2차원 그래픽HTML 태그의 집합으로 이루어져 있어 CSS와 JavaScript로 컨트롤이 가능아무리 확대를 해도 이미지가 깨지지 않는다.=> 벡터 그래

perspective : 3D-positioned element에 원근법을 제공하기 위해 z=0 평면과 사용자 사이의 거리를 결정CSS perspective MDNCSS Perspective Explained with Example 3D Transform in CSST

21년 11월 10일 📝 CSS 📎 코딩 컨벤션 📎 perspective 보충 📎 과제 - 반응형 웹 구현 1만 시간의 법칙

특정 조건(단말기 유형, 화면 해상도, 뷰포트 너비 등)에서 특정 스타일만 적용되도록 만드는 기능@media <span style="color: 적용할 스타일}all : 모든 장치print : 인쇄 결과물 또는 인쇄 미리보기 화면에 표시하는 경우screen :

21년 11월 12일 📝 CSS 📎 함께 코드 작성 - 반응형 웹 구현 1만 시간의 법칙 📎 CSS 설계 기법

시간 계획 세워서 지키도록 노력 : 공부/운동/수면/식사 시간=> 아직 균형있게 계획을 세우지 못했다! 하지만 앞으로 어떻게 해야겠다는 생각이 그려지는 중이다.=> 잘 하는 중인 것 같은데.. 다음에 피드백 받아보면 알겠지~ 밀려도 하기=> 수업 내용 되도록 자세히 읽

개발자마다 의견이 다르다.의견 1 : 단순히 디자인을 위한 <br> 사용은 지양한다.의견 2 : 의미없는 개행을 위한 것이라면 의미없는 태그를 사용해도 무방하다.flex로 구현외국 기업은float보다 flex를 더 많이 사용하나요?=> 확인 필요!=> 외국 기업은

21.11.08-TIL 참고각 영역(Grid Area)에 이름을 붙이고, 그 이름을 이용해서 배치하는 방법<span style="color: 위의 예시처럼 각자 차지하는 셀의 개수만큼 해당 위치에 이름을 적어준다.각 셀마다 공백을 하나씩 넣어 구분header :

=> 생활코딩님 강의를 꽤 들었는데 들었던 강의가 뭐였는지 기억이 안나네.. 히히마무리

📎

21.11.16-TIL과 연결되는 내용입니다.되도록 높이는 설정하지 않는다.=> 요소 내의 콘텐츠가 변동될 가능성이 있으므로 높이 값을 지정해 놓으면 콘텐츠의 변동에 따라 UI가 깨질 수 있다.페이지 내에 id 값이 none인 곳으로 이동을 의미<a href="=

=> 클래스 명 짓기 어렵...=> 웹 개발 프로젝트\_1 과제를 보니 저기 닫기 버튼이 그 닫기가 아니었다?! (별점 reset 버튼이었음 히히)21.11.09-TIL정글 시네마 - 소스코드 보기시간 계획 세워서 지키도록 노력 : 공부/운동/수면/식사 시간=> 평일에

여러가지의 이미지를 하나의 이미지 파일 안에 배치하여 이미지 로드 부담을 줄이는 방법변경될 수 있는 이미지Sprite 이미지의 용량이 너무 큰 경우아주 일부분에만 사용하는 폰트일 경우, 폰트의 용량을 고려해서 이미지로 대체하여 용량을 줄이기 위해CSS Sprites G

구름IDE라는 클라우드 서비스를 이용하여 Linux가 설치된 컴퓨터를 무료로 빌려서 실습무언가를 빌려쓰는 것Google docs, 네이버 클라우드, 구글 클라우드 등, 내 컴퓨터에 없는 소프트웨어 또는 하드웨어를 빌려 쓰고 있는 것<span style="color

사용자 인터페이스로 시스템 하드웨어를 관리할 뿐만 아니라 응용 소프트웨어를 실행하기 위한 하드웨어 추상화 플랫폼과 공통 시스템 서비스를 제공하는 시스템 소프트웨어=> 사용자가 컴퓨터의 하드웨어를 쉽게 사용할 수 있도록 인터페이스를 제공하는 소프트웨어공급되는 시장에 따라

프로젝트를 진행할 때 파일을 분리하여 코드 관리각 프레임 별(\_header.scss, \_home.scss) CSS를 분리\_variable.scss, \_mixin.scss 분리메인 파일인 style.scss에 분리했던 파일들을 @import=> 파일을 스타일, 기

와아아아아 TIL 밀리고 있다아아아

때는 바야흐로 2차 세계대전이 끝나고 냉전이 한창이던 1960년대..미국과 소련 양대 강국의 가장 큰 고민, 바로 핵무기!=> 어떻게 하면 적의 핵 공격에도 군 통신망을 유지할 수 있을까?당시의 통신 방식은 중앙 집중적인 회선 교환 방식으로 이를 대체하기 위해 통신 장

소스코드 보기학습 세부 계획=> 차근차근 진행중취업 방향성=> 어렵구만... 그냥 재미있게 일할 수 있는 곳으면 더할나위 없이 좋을듯 싶은데... 그런데 이제 높은 연봉을 곁들인TIL 작성=> 이번주는 많이 밀렸네요commit => 자주 하는 중!실습 한 번 더 해보기

JavaScript는 세상에서 제일 잘못 이해되고 있는 언어이다콘솔 모드에서 let 변수만 재선언이 되는 이유window 객체는 브라우저 탭에 존재하는 자바스크립트 전역 최상위 객체window 객체 안에 document 객체가 존재하고, document 잠재적으로 보여

📎

21년 12월 01일 📝 Javascript 📎 연습문제 풀기 📎 배열(array)

지금은 mixin만 사용했지만 조건문이나 반복문, 함수 또는 Javascript가 같이 포함된다면 어짜피 순서는 바뀌게 되어있으므로 크게 고려하지 않아도 된다.더 같단하게 사용하기 위한 변수의 변수명이 길게 작성되어 있으므로 일관성이 있고 간결한 변수명을 사용해야 한다

자기 자신을 호출하는 함수자신을 무한히 연쇄 호출할 수 있다.호출을 멈출 수 있는 탈출 조건이 반드시 필요=> 탈출 조건이 없는 경우, 무한 반복에 빠져 stackoverflow 에러를 발생반복적으로 stack 메모리 공간을 이용하기 때문에 성능이 좋지 않다.호출되는

자바스크립트의 모든 값은 데이터 타입을 갖는다.원시 값은 변경 불가능한 값(immatable value)이다원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다.원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다.=>

학습 세부 계획=> 이번 주는 세부 계획을 잘 세우지 못했고, 그날그날 배운 내용을 너무 자세하게 들여다보느라 놓친 부분들이 많았던 것 같다.취업 방향성=> 취업은 아직 잘 모르겠지만 집중해보고 싶은 부분은 생김!TIL 작성=> 나름 잘 채워가는 중이라고 생각!comm

자바스크립트에서 객체를 표현하는 형식으로 데이터를 표현한 것 => 값이나 객체를 나타내주는 범용 포맷다른 형식에 비해 가볍고 자바스크립트와 호환성이 높아 널리 사용JSON은 JavaScript 객체 리터럴 문법을 따르는 문자열JSON 안에는 JavaScript의 기본

이해 + 화이트 보드 테스트 준비예쁘게 쓰기 1-1. 글자가 많다고 해서 날려쓰지 않기1-2. 간격 맞추기화살표로 주석 작성하기이해가 안 되는 부분은 채팅창에 키워드로 작성해서 올리기객체 : '키-값'쌍으로 이루어진 프로퍼티가 저장프로퍼티 플래그 : 객체의 프로퍼티 추

함수의 이름은 동일하지만 매개변수의 타입 또는 개수가 다른 메서드를 구현하고 매개변수에 의해 메서드를 구별하여 호출하는 방식=> 자바스크립트는 오버로딩을 지원하지 않지만 arguments 객체를 사용하여 구현할 수 있다.부모의 메서드를 자식의 클래스에서 재정의하여 사용

자주 사용하는 코드를 재사용 할 수 있는 형태로 가공하여 프로그래밍 효율을 높여주는 코드경량의 자바스크립트 라이브러리JQuery를 이용하면 DOM과 이벤트에 관한 처리를 쉽게 구현할 수 있다.또한, Ajax 응용 프로그램 및 플러그인도 JQuery를 활용하여 빠르게 개

요소 제어 : DOM API를 이용하면 요소를 새롭게 생성하고, 위치하고, 제거할 수 있다.캡쳐 사진 넣기

학습 세부 계획=> 세부 계획은 세우지 못했지만 매일매일 공부를 할려고 노력했다취업 방향성=> 일단 공부에 집중을 해보자!TIL 작성=> 내용 채우기 열심히 하는 중!commit=> 굳굳실습 한 번 더 해보기=> TIL 작성하면서 간단하게 복습하는 정도로 해보는 중적극

자바스크립트는 인터프리터 언어로 컴파일러의 역할을 테스트를 통해 대신 수행하여 기능의 구동을 보장=> 코드를 안정적이고 견고하게 만든다.구현해야하는 기능에 대한 높은 분석을 요구=> 서비스에 대한 이해도가 높아지고 품질을 우선하는 사고를 하게된다.테스트 코드를 따로 작

플랫폼에 익숙해지기사용 가능한 라이브러리 확인언어 선택(속도 : c++, 풀이 : python)코드 스니펫(트리, 검색, 순열, 조합, 최단경로(ex 다익스트라)), Cheat sheet와 종이 미리 준비유용한 라이브러리 정리예외처리 하기문제1) 1부터 10,000까지

\*선택자 사용을 줄여야한다고 알고 있는데, 수강 중인 유데미 강의에서 항상 \* { box-sizing : border-box};형태로 사용하는 것에 대해 궁금했었다.존님에게 질문한 결과next app 셋팅하면 기본 CSS이다.vw, vh를 많이 쓰다보니 많이 사용하

트리 구조는 그래프의 일종으로, 여러 노드가 한 노드를 가리킬 수 없는 구조=> 회로가 없고, 서로 다른 두 노드를 잇는 길이 하나뿐인 그래프주로 이진 트리(binary tree)형태 구조로 많이 사용되고, 탐색 알고리즘 구현에 만힝 사용트리 구조 시각화 : https

브라우저는 보안을 위해 자바스크립트의 기능에 제약을 걸어놓았다.=> 제약이 있는 이유? 악성 웹페이지가 개인 정보에 접근하거나 사용자 데이터의 손상을 막기 위해브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없다. 그런데 자바스크립트를 사용해 한 창에서 다른 창을 열

학습 세부 계획=> 세부 계획은 있으나 시간은 부족... => 시간 쪼개기 오케이~취업 방향성=> 아직 방향을 찾지 못한 것 같다. 좀 더 내가 원하는 방향에 대해 생각해 볼 것!TIL 작성=> 부족한 부분이 있어도 너무 매달리지 않고 다음으로 넘어가는 중commit=

Make it work, Make it right, Make it fast\- Kent Beck사용자의 경험이 좋아진다.면접 문제로 많이 나옵니다.😀올바르게 동작하게 만들고 === 리소스=> 자원 소모를 얼마나 많이 하는가?=> 메모리, 네트워크 트래픽빠르게 동작하게

왜 웹 서비스를 만드는가?핵심 요소는 무엇인가?누가, 어떤 기기를 가지고 이 홈페이지를 방문하는가?어떤 기능을 제공하는가?시행착오를 줄이기 위해원하는 결과물을 잘 구상하기 위해규모에 따라 사용하는 툴이 다름 (\* 소규모 툴 기준으로 설명)정보 구조 설계(I.A.)화면

Chart.js 홈페이지 보다 Chart.js - W3Schools이 정리가 더 잘 된 것 같습니다.Canvas API는 Javascript와 HTML <canvas>요소를 통해 그래픽을 그릴 수 있는 수단을 제공애니메이션, 게임 그래픽, 데이터 시각화, 사진 조

내용 추가하기Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임=> 즉, 기존에는 브라우저를 통해 JavaScript를 구동했던 것과 달리, Node.js를 통해 JavaScript 프로그램을 실행할 수 있는 것서버를 만들 수 있으나 서버만

=> 욕심이 많아지니까 하고 싶은 일들의 양이 점점 늘어나고 목표가 한 없이 멀어지는 중~=> 아침마다 스트레칭을 매일 하지만 그 외의 움직임이 매우 부족합니다아=> 잠깐 바빠서 소홀했습니다. 다시 열심히 작성해볼게요 헷조금만 더 자기=> 목표 수정했는데 큰 변화 없어

Javascript 런타임=> 런타임: 프로그래밍 언어가 구동되는 환경이벤트 기반, non-blocking I/O 모델을 사용=> 가볍고 효율적브라우저 내에서 JavaScript가 독점적으로 이용할 수 있었으나, 브라우저 내에서만 사용할 수 있으므로 확장성이 좋지 않았

네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 혹은 프로그램=> 클라이언트의 요청에 대해 응답하는 역할웹사이트에 접속할 때 클릭 또는 url 입력을 통해 들어간다.이때 우리는 클라이언트(사용자)가 된다.그리고 url을 통해 요청을 하게 된다.서버는 그에

npm이 필요한 이유?chapter 4에서 서버를 구축할 때, 처음부터 모든 것을 개발한 것이 아니라 const http = require("http")를 통해 http라는 패키지를 설치하여 서버 구축을 편리하게 했다.다른 개발자가 만들어 놓은 패키지를 사용해서 개발을

요청에 따라 처리를 해주는 것routing의 출발점인 app.js 파일에서HTTP Method를 POST로 선택한 후 send를 누르면=> Not Found 확인 해당 url에 접근했을 때, 콜백함수로 나오는 request와 responserequest : 요청에 대

21년 12월 31일 / 22년 01월01일 / 02일 📌 액션 플랜 재설정 1순위 : 목표 작게 쪼개기 => 목표치를 한꺼번에 다 하려고 하지 않고, 조금씩 나눠서 하려고 노력중 2순위 : 틈틈히 움직이기 => 밖에 나갔을 때 좀 돌아서 집에 와야겠다아 => 추워

=> 목표는 작게 쪼개지는 거 같은데 목표 달성률이 낮은 것 같다. => 마트 구경으로 조금 더 움직여 보았다!=> 마트 구경 너무 재밌어어~=> Next.js랑 React로 새 시리즈 만들어 작성 중이다.=> 수업 내용에 한정된 TIL만 작성했었는데 다른 내용으로 블

=> 큰 목표가 있어서 그런지 작게 쪼개지지도 않았고, 작은 목표를 세우지도 않았...=> 나름의 노력을 했다!=> 그러나 조금 더 노력을 해야겠다!=> 일주일 내내 꽉꽉 채워서 작성하지는 못했지만 틈나는대로 작성했다.=> 프로젝트 관련 글을 쓴 것은 나름의 시도였고,

하나의 큰 자바스크립트 파일로 개발=> 유효범위와 크기, 가독성, 유지보수에 문제가 발생각 기능이 있는 스크립트를 모듈화해서 개발=> 너무 많은 스크립트 파일을 로드할 경우, 네트워크의 병목현상을 발생=> 여러 개의 파일을 로딩하더라도 같은 스코프를 공유하기 때문에 전

=> 쪼개고 뭐고 그냥 냅다 되는대로 해버림=> 결국 목표를 달성하지 못했고... => 주변 분들께 징징거리다가 차분히 하기로 마음 먹음(꺼억-) => 그냥 움직일 수 있음에 감사함 느끼기 => 매일매일 블로그 글 작성하는 삶을 살고 싶다아감귤마켓 프로젝트 잘 진행해서