감귤밭 호지차 농장

🔖 JS는 객체지향 프로그래밍 언어인가? JS가 태어난 1955년에는 HTML페이지를 동적으로 만드는 것이 목적이었던 언어였기 때문에 시작은 '인터프리터 언어' 였습니다. 이후 2009년 구글은 JS의 V8엔진을 출시하고 획기적으로 발전했으며, ES6과 Node.js의 등장으로 JS는 단순 '인터프리터 언어' 가 아닌 '객체지향 언어'에 도달했다고 보는 시각이 많아졌다고 합니다. * 물론 JS을 객체 지향으로 작성 가능했었음. # 컴파일언어 고급 언어(프로그래밍 코드) → compile → 저급 언어(기계어) > 인터프리팅 방식보다 빠름. # 인터프리터언어 JS 엔진 내부에서 실행 중 컴파일이 필요한 경우에 내부에서 컴파일 🔹JavaScript, 인터프리터 언어일까? 🔖 객체지향의 주요 특징 4 가지 #..

* * 작성 중인 글입니다. * * 고차 함수(higher order function)은 함수를 전달인자(argument)로 받을 수 있고, 함수를 리턴할 수 있는 함수. # 빅보스 JS에서 함수는 1급 객체 함수. 콜백함수(callback fuction)는 다른 함수의 전달인자로 전달되는 함수 #제물 어떤 작업이 완료되었을 때 호출하는 경우가 많아서 답신 전화를 뜻하는 콜백함수라는 이름이 붙음. * 콜백함수를 전달받은 고차 함수는 함수 내부에서 이 콜백 함수를 호출(invoke)할 수 있고, 조건에 따라 콜백 함수의 실행 여부를 결정 할 수도 있습니다. 아예 호출하지 않을 수도 있고, 여러 번 실행 할 수도 있다. 특정 작업의 완료 후에 호출하는 경우는 이후에 충분히 접할 수 있음. * 함수를 리턴하는..

🔖부모 요소 적용 Flexbox 속성들 ※ 대표적 속성 display : flex ; // 정렬 축 정하기 [ display : flex ] 의 경우, 자식 요소들의 컨텐츠 width 만큼만 차지하고, height은 부모 요소 높이만큼 늘어납니다. 배치는 가로 방향으로 배치됩니다. ( inline 요소들처럼) 그래서 height가 내용물에 따라 자동으로 늘어나는 특징은 컬럼같은 경우 많이 적용한다고 합니다. flex-direction : 정렬 축 정하기 flex-wrap : 줄 바꿈 설정하기 justify-content : 축 수평 방향 정렬 // row (col)일때, 가로(세로)방향에서 자식 요소들을 어떻게 배치할 건지 align-items : 축 수직 방향 정렬 // row (col)일때, 세로(가..

main{ border: 1px dotted red; display: flex; min-width: 500px; /* height: 600px; flex-direction:row; justify-content: space-between; flex-wrap: wrap; align-items: baseline; */ } div{ border: 1px solid green; font-weight: bold; } #box2{ word-break:break-all; flex-basis: 3; } * { margin: 10px; padding: 10px; }

코드스테이츠 부트캠프 수강하면서 겸사 겸사 과제 제출 겸 나를 소개하는 페이지를 배운 CSS를 활용해서 만들어 보래서 잉차 잉차 만들어서 완성했는데 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 와 다른 분들 제출한거 보니까 제꺼는 고냥고냥 유치원 작업물 수준... 현타 오지게 맞고 잉차 잉차 수정해야겠습니다. 😂 보이시나요 제 1차 작업물 흐릿하게 보기만 해도 느껴지는 .... 할말하안의 디자인 다른 분들의 디자인을 보니 숨이 턱 막힐 정도의 멋지고 깔쌈한 디자인 뿐이었습니다.... 디자인 창작의 감각이 없는 저같은 사람들은 대책안을 찾아야죵.. 바로 다른 분들의 멋지고 깔쌈한 디자인들을 미친듯이 서칭하고 여기서 디자인의 포인트들을 뽑아낸다음 이를 바탕으로 디자인 하는 수밖에....

🔹inline element 와 block element inline element : 하나의 태그가 브라우저에서 작성된 부분만 영역을 차지해서 다른 태그들이 양 옆에 나란히 위치할 수 있는 요소 ( 텍스트 레벨 요소라고도 함 ) block element : 하나의 태그가 브라우저에서 한 줄을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소 🔹inline 요소와 block 요소의 종류 💡주의점! block 요소는 내부에 block 요소와 inline 요소를 포함 할 수 있으나, inline 요소는 내부에 block 요소를 포함할 수 없습니다. * , 와 같은 특정 block 요소들은 inline 요소만 포함할 수 있으니 참고하라구 * inline 요소를 CSS로 블럭화해서 내부에 블럭 요소를 포함할 수..

자바스크립트는 원시값(문자열, 숫자 등)을 마치 객체처럼 다룰 수 있게 해줌. 원시값에도 객체처럼 메서드를 호출할 수 있다는 거임. 다만 객체처럼 사용하는 거지 객체는 아닌거임!! 원시값과 객체의 차이점 🔹원시값( primitive type) - 원시형 값이다. - 종류 (문자string, 숫자number, *bigint, 불린boolearn, 심볼symbol, null, undefined) 총 7가지 🔹객체 - 프로퍼티에 다양한 종류의 값을 저장할 수 있음 → 장점 중 하나 - { } 대괄호를 사용해 만들 수 있음! 자바스크립트에는 여러 종류의 객체가 있는데 함수도 객체의 일종. 자바스크립트는 날짜, 오류, HTML요소(HTMLelement) 등을 다룰 수 있게 해주는 다양한 내장 객체를 제공. 이 객..

옵셔널 체이닝(optional chaining) 을 사용하면 "프로퍼티" 가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다. 참고로 옵셔널 체이닝은 연산자가 아닌 함수나 대괄호와 함께 동작하는 특별한 문법 구조체 (syntax construct)입니다. 옵셔널 체이닝이 등장한 배경 사용자 중 몇 명은 주소 정보를 가지고 있지 않았을 때, use.address.street 을 사용해 주소 정보에 접근 하면 에러가 발생할 수 있습니다. 혹은 자바스크립트를 사용해서 페이지에 존재하지 않는 요소에 접근해서 요소의 정보를 가져오려고 할 때 문제가 발생하는 경우가 있습니다. 옵셔널 체이닝 존재 전에는 이러한 문제를 해결하기 위해 && 연산자를 사용했으나, 중첩 객체의 특정 프로퍼티에 접근하기 위해 거쳐야..

HELP HELP ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 이거 어떻게 해야 하는지 모르겠네요. Figma 들어가서 디자인 뭐 수정하려다가 잘 못 눌렀는지 저렇게 일종의 Drawing? tool? 같이 남아 버림....!!!!!!!!!!!!! 갓 댐; 긴급하게 네이버 지식인에 올려야 겠음...😂

🔖 미해결 건 #221027 로그인 페이지 연습하기 그런데 등록 페이지로 넘어가지 않는다. See the Pen Untitled by Emma-Hyejin (@Emma-Hyejin) on CodePen. ▶ 해결 방법 : https://stackoverflow.com/questions/52384228/javascript-animate-toggle-for-3-forms Javascript Animate Toggle for 3 forms At the moment I have 2 forms. Login form and Registration form. I use Javascript Toggle to switch between them. But now I want to add a 3th form. How can..