JAY⌨️CODE

🥲 프론트엔드 개발자가 정처기는 웬 말. 제목에 썼듯 나는 비전공자로 부트캠프 후 직무를 맡은 지 1년 정도 되어가는 주니어 프론트엔드 개발자이다.비전공자로 현업에 있다 보면 서버 개발자와 소통할 때 잘 이해가 되지 않을 때가 있는데,CS지식이나 습득해 보자는 마음으로 ... 열정 넘치던 시기인 연초에 반은 충동적으로 정보처리기사에 도전하게 되었다. 정처기는 무조건 1회 차를 봐야 한다는 동료의 조언에, 불합격해도 창피하지 않도록그냥 경험이라 생각한다며 필기를 접수했던 기억이 난다...(그날로부터 현생은 사라졌고요... ^^)    ✍️ 실기를 위해 필기에서 이론을 숙지해 둔다고 생각하기!   나는 직장 병행이라 단락별, 기출풀이 연도별로만 일정을 세우고 하루에 목표량을 달성하지 못할 경우다음날 채우는..

자바스크립트는 ECMA Script6 (2015) 이후 여러 편리한 문법이 도입되었다. 신문법 중 ... 을 활용한 문법을 몇 개 볼 수 있는데, 일반적으로 점점점(...)을 말줄임표로 사용하는 것처럼 '이것 등등', 혹은 '특정 기능이 생략되어있다' 라는 뜻을 가지는 직관적인 표현식이라고 할 수 있다. 대표적으로 이 점점점(...) 을 활용해서 편리하게 코딩할 수 있는 자바스크립트 문법 세 가지를 소개한다. 1️⃣ Rest Parameter (나머지 매개변수) Rest Parameter 는 말 그대로 Rest(나머지)의 역할을 한다. 함수 작성 시 매개변수의 개수를 지정하지 않고 함수 사용 시 작성된 arguments 입력값을 모두 배열로 받아준다. 사용 방법은 함수 작성 시 parameter 앞 에 ..

부트캠프 마지막 과정은 리액트 프로젝트였다. 기본적인 SNS 서비스에 대한 API를 제공받은 후 디자인, 아키텍처, 라이브러리 사용까지 모두 자유 주제로 진행했던 프로젝트에서 TanStack Query를 사용하면서 느꼈던 어려움과 장점과 단점 등 주니어 개발자로서 겪었던 경험을 기록해 보고자 한다. 우선 해당 게시물에서는 API를 호출하는 핵심 기능인 useQuery와 useMutation에 대해서 작성하고, 쿼리 업데이트를 하기위한 부가 기능과, 무한 스크롤, 에러바운더리에 대한 부가 기능은 이어서 작성해보고자 한다. 1️⃣ TanStack Query란? TanStack Query는 서버 데이터와의 동기화 및 업데이트하는 작업을 편하게 할 수 있도록 도와주는 역할을 하며, 비동기 처리 로직을 간결하게 ..

❤️‍🔥 Liked 멋쟁이 사자처럼 프론트엔드 5기를 수료하면서 가장 크게 배워간 것은 협업 능력과 팀 문화인 것 같다. 실제로 경험해 보니 정기적으로 진행되는 수업이나 프로젝트 과정에 몰두하다 보면 스스로를 한계까지 몰아가기도 하는데 외부에 있는 친한 친구들 보다도 같은 목표를 가지고 공부하는 동료들에게 많이 의지할 수 있었다. 나이나, 지역 등 환경의 차이를 넘어서서 끈끈하게 서로 응원해 주고 지지해주고 있다는 느낌을 자주 받을 수 있다. 같은 목표를 두고 있는데 경쟁하지 않고 서로 응원해 주는 소중한 경험은 사회에서 쉽게 얻을 수 없기 때문에 더 소중했던 경험! 팀문화가 생성될 수 있도록 분위기를 조성해주는 운영진 분들의 능력이 정말 탁월하다고 느꼈다. 덕분에 더 열심히 해서 기대 이상으로 성장할 ..

❤️‍🔥 Liked 프로그래머스 0단계를 꾸준히 풀고 있는데 대부분의 문제를 배열 형식으로 메소드체이닝해서 풀고 있었지 데이터를 저장하고 관리하는 자료구조 방법론으로 접근하기는 처음이었다. 자료구조에 작동 방식에 따른 성능 차이에 대한 지식을 보완할 수 있었고 절차적 해결력을 키우는 데 도움이 되었다. 컴퓨터의 논리로 사고하는 것을 더 연습해야겠다. Jasmin, Jest를 사용해서 간단한 TDD를 진행해 봤는데, 실무에서 주니어 개발자가 바로 투입되는 영역은 아닐지라도 수업을 통해 전체적인 TDD 개발 프로세스를 이해해 볼 수 있는 경험이라 유익했다. 장애인, 소수자 인권을 위해 제도를 개선하기 위해서는 많은 투쟁과 비용, 시간이 필요하다. 이번주, 카카오 소속 김혜일님의 웹 접근성 특강을 통해 결함을..

🤔 포스팅 작성에 앞서 권고드립니다! 혹시 자바스크립트 입문자 분이 이 글을 읽고 계시다면 fetch(), promise 객체에 대해 충분한 이해를 먼저 진행하시기를 권장드립니다. 저 역시 입문자로 API 호출 패턴에 대해 충분히 반복학습을 진행한 뒤에 반복되는 코드를 발견하고 생산성을 높이기 위해 스니펫 제작을 진행하게 되었습니다. 해당 게시물은 fetch() 메소드를 promise.then 메소드를 활용해 실행하는 방식과, async/await을 활용해 실행하는 방식 두 가지로 구성되어 있으며 Visual Studio Code 프로그램을 기준으로 작성되었습니다. 😎 스니펫 설정 방법 vscode 에서 사용자 코드 조각 구성(snippets) 설정으로 이동. 전역(global.code-snippets)..

❤️‍🔥 Liked 이번주 수업에서 git 심화과정이 있어서 좋았다. 범재강사님이 일부러 팀끼리 PR, Merge 과정에서 에러가 나는 상황을 만들었고, History가 꼬이는 화면을 보여주시면서 해결하는 걸 보니 확실히 도움이 됐다. 실제 현업에서 남기는 커밋 메시지와 기록을 보는 것도 큰 동기부여가 되었다. React 마지막 파트에서 customHook을 배우면서 무한 스크롤을 구현했는데 꿀잼! 왜 재밌어지자마자 끝나버리니 리액트... 과정이 너무 짧아요... 계속 배우고 싶어요... promise, fetch 계속해도 이해가 안 가고 어렵더니 그냥 통째로 외워버리니 편-안. API를 가져오는 구조에 대해서는 충분히 이해했다는 생각이 들어서 스니펫으로 만들어버렸다. 주말에 공공 API 가져와서 실습해..

1️⃣ fetch API 란? API(애플리케이션 프로그래밍 인터페이스)가 등장하고 애플리케이션을 데이터베이스와 서버에 연결해야 할 필요성이 커짐에 따라 현재 HTTP 요청의 중요성은 아무리 강조해도 지나치지 않게 되었다. 자바스크립트에는 이러한 요청을 수행할 수 있는 매우 편리한 내장 메서드인 fetch() 가 있다. fetch()는 HTTP 요청에 사용되는 Promise 기반 API 이며, 이전의 XMLHttpRequest와 같은 복잡한 네트워크 요청 절차를 사용하기 쉽도록 개선한 문법이다. 2️⃣ fetch API의 주요 장점 Fetch는 promise 기반으로, 비동기 작업을 사용하고 관리하는 것을 쉽게 해준다. 간단하고 깔끔한 구문을 제공하므로 코드의 가독성과 유지 관리가 더욱 쉬워진다. cat..

❤️‍🔥 Liked 요즘 React 수업은 재현님이 반복 학습을 진행하고 있다. 추가로 코어자바스크립트의 지은이 재남님이 번역하신 React 공식문서를 읽으면서 보완학습을 진행하고 있어서 Component, Props, State에 대한 개념은 어렵지 않게 잡을 수 있었다. 리액트 라이브러리의 사용 목적이 재사용성을 위해 상태에 따라 컴포넌트를 사용자 정의 요소로 표현하는 것이므로 동작 원리에 대한 개념을 잡는 것을 중점으로 공부하고 있다. 프로젝트 조편성을 위해 객관식문항을 비롯한 간단한 코딩 테스트를 진행했는데 시간 내에 Javascript 동작이 되도록 구현은 해냈다. 코드 품질은 개선해야겠지만 열심히 순서도를 그리는 연습을 했던 결과가 돌아온 것 같아서 뿌듯! React도 JS 기반의 언어이다 보..

⚠️ 일반적인 조건부 로직으로 사용되는 if문을 다른 작성 패턴으로 대체하는 이유? if문 조건이 한 번에 너무 많은 요소를 비교할 경우 중첩(nested) 조건이 많아지므로 가독성이 떨어진다. 조건식에서 동일한 코드가 반복되는 경우 소스코드가 너무 길어지고 비효율적이다. 특정 부분의 변경이 필요하면 모든 조건을 살펴봐야 하기 때문에 유지보수가 어렵다. 위와 같은 이유로 if, else 문과 같은 조건문을 남발하면 가독성을 해치는 코드를 작성하게 된다. 아래에 이어서 문제를 해결할 수 있는 대안을 소개하고자 한다. if (user) { if (user.accessLevel) { if (user.accessLevel === 'admin') { console.log("관리자님 안녕하세요."); } else ..

❤️‍🔥 Liked 밴딩머신을 JS Class로 만들어서 모듈패턴을 이해해 보는 수업을 했는데 수업 자료를 기반으로 getter와 setter를 활용하면서 직접 만들어보고 회고조원 분과 같이 코드리뷰를 하는 시간을 가졌다. 회고조원 분은 함수형으로 처음부터 끝까지 다 짜셨는데 보면서 문제해결 방식에 대한 영감도 얻을 수 있었고 큰 도움이 됐다. 💙🩵 스터디에서 게임 만들기 실습을 하고 있어서 간단한 가위바위보 게임을 만들었다. 게임을 만드는 게 실무에 꼭 도움이 된다고 할 수는 없겠지만 이론으로만 배운 개념을 어떻게 적용해 볼까, 플로우차트는 어떻게 만들까 로직을 그려보는 훈련이 되는 거 같다. 최종적으로 레트로 미니게임 모음집을 하나 토이프로젝트로 완성해보려고 한다! :) 본격 리액트 시작! JS 서버..

1️⃣ class 란? 2016년 ES6 부터 도입된 instance를 생성하는 생성자 함수. 객체를 생산하는 붕어빵 틀과 같은 개념으로 흔히 설명하는데, 생산 도면 혹은 청사진이라고도 표현할 수 있다. class + 이름 + { constructor ... } 로 구성. constructor()는 new 연산자로 호출되는 인스턴스의 기본 상태를 자동으로 설정해주는 생성자 메서드. 특별한 절차 없이 객체를 초기화 할 수 있다. class내부에 있는 Field는 변수와 비슷하게 사용되는데, Constructor와 Method 전체에서 사용되며, 소멸되지 않는다는 특징이 있다. 자바스크립트만의 사용자 정의 타입 생성(객체 생성) 방법을 다른 언어의 클래스 문법처럼 바꿔준 것. 이처럼 내부적인 동작은 동일하지..

❤️‍🔥 Liked 드디어 React 시작!.... 가보자고! 🔥🔥🔥 (울지 말고 천천히 말해봐...) 스터디에서 팀 repo를 만들어서 처음으로 git folk를 했다. 진행하면서 CLI 명령어를 보기 쉽게 자료로 정리했는데 곧 포스팅으로 올릴 예정! 협업에 익숙해지고 싶어서 조원들과 같이 알고리즘 문제풀이를 할 수 있도록 Organizations계정도 만들었다. 🙂 이번 주는 메모장 만들기 실습 과제가 있었는데 과제 구현을 하면서 DOM제어와 LocalStorage에 대해 많이 공부할 수 있었다. 새벽 내내 에러와 씨름하다 3시간 자고 수업 들으려고 일어나자마자 내내 안 보이던 수정할 코드가 보이는 경험을 했다. 아직 원하는 기능을 구현하기에 미숙하고 개발 속도도 너무 느리지만 뭔가 일단 만들어 보는..

❤️‍🔥 Liked 정규표현식 진짜... 아득했는데, 다 외워서 능숙하게 사용하는 방법을 습득하기보다는 기본 문법만 숙지하고 패턴은 그때그때 보면서 구현하면 될 것 같다! 객체지향 프로그래밍에 대해 객체리터럴 문법, 프로토타입 문법, 클래스 문법을 비교해서 작성해 보면서 차이점을 비교해 볼 수 있어서 좋았다. 주말에 할 일은 너무 많고 계획도 밀렸는데 혼자 프로토타입에 꽂혀서 공부하다 보니 몇 시간이 후루룩... 그래도 시간이 하나도 아깝지 않았다. 프로토타입 공부하다가 closer 패턴을 이해해버림... 👍 JS 초보자 스터디에 가입했다. 비전공자도 있고 나처럼 다른 업무를 하다가 개발자로 전향하신 분도 있고, 숙련자가 없으면 효율이 떨어질 수 있는데 모두 적극적으로 스터디에 참여하면서 JS 지식을 공..

1️⃣ 객체 지향 프로그래밍이란? 객체 지향 프로그래밍(Object-Oriented Programming, OOP)이란 객체를 데이터 목록으로 보는 시각에서 벗어나 각각 독립적인 기능을 하는 부품과 같이 상호작용하도록 하는 프로그래밍 방법론. 추상화 상속 다형성 캡슐화 4가지의 특징을 갖고 있으며, 설계의 이점들을 가장 잘 살릴 수 있는 방향으로 각 객체들의 역할을 정의해 나가는 것에 초점을 맞춰 프로그래밍을 진행한다. 객체 지향적 설계를 통해 직관성과 재사용성이 높은 코드를 작성할 수 있으며, 반복 없이 간결하고 변경이 용이한 유연한 프로그램을 만들 수 있다는 장점이 있다. 대표적인 객체 지향 설계 요소로 class가 있다. 해당 게시물에서는 객체리터럴 프로토타입 클래스에 대한 예제를 소개하고 간단하게..

❤️‍🔥 Liked 줌이라곤 회의할 때 밖에 사용해보지 않은 나...ㅋㅋㅋ 온라인으로 수업을 듣고 채팅으로 사람들과 대화하는 건 아직도 낯설지만 그래도 새로운 사람들을 알아가는 건 참 즐거운 일이다. 각자 다른 환경에서 다른 사연으로 어렵게 지원해서 치열하게 학습하고 있는 동기들의 개인적인 면모를 들여다볼 때마다 참 이 경험이 소중하기도 하고 시간이 지나도 기억에 남겠다는 생각이 든다. 이번 주말 거의 대부분의 시간을 집에서 복습하는데 보냈다. 수업 시간에 다 끝내지 못했던 mbti 페이지도 완성해서 배포했고, 함수, 객체, 배열, 배열메소드를 유튭 강의랑 병행해서 복습하다 보니 예전에는 전혀 이해하지 못했던 내용들이 자연스럽게 습득된 게 느껴졌다. 몇 번을 다시 보고 또 봤는지...... 자바스크립트를..

1️⃣ @mixin 🌟 Sass에서 @mixin을 사용하면 스타일시트 전체에서 재사용할 수 있는 스타일 그룹을 정의할 수 있다. @mixin지시문을 통해 mixin을 생성하고 필요한 경우 @include기능을 통해 불러와서 값을 넣어 재사용하는 방식. @mixin을 더 유연하게 사용하기 위해서 Arguments 값을 전달할 수도 있다. ( $key : value ) 형태로 작성하면 arguments가 공란일 때 기본값도 설정할 수 있다. (기본 값은 생략 가능) 자동화 되어있는 _mixin.scss 그대로 가져와서 사용해 보는 것을 추천. 실제 현업에서도 _mixin은 새로 작성해서 사용하지 않고 고정되어 있는 경우가 많다. ⚠️ 반복하는 모든 코드를 하나의 @mixin에 몰아넣어서 사용하는 건 권장하..

1️⃣ 비슷한 기능을 하는 for..in, for ...of 무슨 차이가 있을까? JavaScript는 Object, Array, Map 및 String과 같은 Collection을 반복하는 여러 메서드를 제공한다. for in과 for of는 ES6에서 요소를 순회하기 위한 목적으로 새롭게 추가 되었다. 두 메서드의 구현 방식은 동일하다. 그렇다면 차이점은 뭘까? 아래 예제를 통해 살펴보자. 1️⃣ for...in loop ✅ Object와 함께 for...in 사용 for...in은 Object의 key를 순회. 아래 예시와 같이 사용하면 key를 순회하면서 value값도 함께 표시할 수 있다. // for..in Input const car = { make: "🚘Tesla", model: "Mode..

❤️‍🔥 Liked JavaScript 예습했던 게 살짝 빛을 발했던 한 주. 그동안 예습했던 거 4일 만에 진도 다 나간 거 실화인가... 매일 만족도를 체크하는데 이번 주는 100%가 없다...🫠 그만큼 쉽지 않았던 자바스크립트 기초. 그나마 예습해서 다행이었다고 생각한다. 차근차근 정확히 이 기술을 습득하는 데 집중하자. 자바스크립트에서 너무 헷갈리는 배열 메소드들... 아직 완벽하게 손에 익은 건 아니지만 입문자 수준에 맞게 다 풀어서 설명해주셔서 큰 도움이 됐다. 능숙하게 활용하는 날이 오길 바라면서 열심히 복습하자. 호준 님이 다 이해하려고 하지 말고 외울 건 외워라! 하고 암기할 것들을 따로 알려주셔서 좋았다. 이해해야 하는 것도 있고 암기할 것도 있을 텐데 자바스크립트 입문자는 구분하기 어..

❤️‍🔥 Liked 이번 주는 온라인 학습이 있어서 일단 프로덕트를 몇 개 따라서 만들어봤는데 결과물이 나오니까 재밌었다.(물론 어려움....) 어렵게만 생각했던 Sass를 호준님 강의로 드디어 입문하게 되었다. 실무에서 가장 유용하다는 mixin 기능을 실습해보고 싶어서 과제 하나를 Sass로 구현해 보면서 감을 잡았다. Java Script와 비슷한 구석이 있어서 스크립트를 잘 다루게 되면 사용할 수 있는 기능이 더 많을 것 같아서 나중에 다시 활용해 봐야겠다! 회고조분들에게 화면공유를 받아서 과제에 있는 JavaScript 버튼 구현을 배웠는데 유익했다. 이번주는 같이 게임도 하고 점점 편해지는 회고조 활동, 그리고 특이하고 재밌는 멘토님 덕분에 많이 웃었던 한 주였다. ㅋㅋㅋㅋ 😊 멋사 특강 강사..

1️⃣ Sass 란? Sass는 CSS로 컴파일되는 스타일 시트 확장 언어이며 CSS 전처리기 브라우저가 Sass파일을 직접 읽지 못하기 때문에 Sass를 기반으로 개발한 후, 일반 CSS로 컴파일! 컴파일 하는 방법으로는 터미널을 이용하는 방법과, VS Code의 익스텐션을 사용하는 방법이 있다. Sass와 Scss가 있는데 일반적으로 CSS와 동일하게 중괄호를 사용하는 Scss를 사용. 본 포스팅은 Scss문법을 기준으로 작성되어 있습니다. :) //SCSS 형식 {} css와 동일하게 중괄호를 사용하기 때문에 권장됩니다. $font-stack: Helvetica, sans-serif; $primary-color : #333; body { font: 100% $font-stack color: $pri..

❤️‍🔥 Liked 원래 seo에 관심이 많았는데 불확실한 정보나 광고가 많다 보니 양질의 정보를 얻기 힘들었는데 마케터 수준의 딥한 정보는 아니어도 정리된 가이드를 받을 수 있어서 좋았다. seo 관련 tag를 스니펫으로 만들어 놓는 아이디어... 누가 이런 정보를 선뜻 가르쳐줄까? 멋사에서는 개발 기술은 물론이고 유용한 꿀팁들을 많이 알려준다. 현업에서 정말 큰 도움이 될 것 같아서 감사하다. 이번 주는 주로 실습이 많았고 강사님이 코드리뷰를 해주는 기회가 있었는데 완성은 못 했지만 운 좋게 리뷰를 받게 되었다. 나름 꼼꼼히 작성했는데도 실수투성이 내 코드...❤️‍🩹 부족한 점을 확실히 보완할 수 있는 기회가 생겨서 기뻤다. 마크업은 비교적 저평가받는 기술인데 시멘틱 마크업 기술을 모르고 하는 소리..

1️⃣ Transform : translate() 가운데 정렬하고 싶은 요소의 부모 요소에 position : relative 속성을 주고 기준을 생성. 가운데 정렬하고 싶은 요소에 position : absolute 속성을 주고 left, top 50%, 50%씩 이동시켜 중앙으로 이동. position을 통해 이동시킬 때 요소의 width, height 값을 포함해서 이동하기 때문에 transform: translate(-50%, -50%); 값을 추가하면 요소의 width, height 값의 -50% 만큼 다시 되돌려서 배치되어 상하좌우 중앙 정렬 완성! 요소 크기에 대한 transform 값을 퍼센티지로 주기 때문에 유지보수에 용이해서 가장 보편적으로 사용하는 방법. .parent { /* 부모 ..

❤️‍🔥 Liked 이번 주는 실습이 많았다. 따라서 타이핑만 하는 것보다 확실히 실습을 하고 나니 반응형 웹을 구현하는 css들에 대해서 관념으로만 알고 있던 것들의 작동 원리를 파악하게 되었다. 저번주에 이어 이번주에도 특강이 두 번 있었는데 강의의 질이 정말 좋다고 느꼈다. 네이버 현업 개발자 우상훈님의 강의는 실제 경험들을 바탕으로 문제 해결을 위해 어떻게 적정 기술을 구현하고 출시할 것인지에 대한 현실적인 인사이트를 얻을 수 있어서 좋았다. 빔캠프 이종찬님은 그냥 기술로만 넘어갔던 css 작동 원리에 대해 정말 쉽고 명확하게 설명을 해주신다. 덕분에 css flex나 margin 등 기초적이지만 은근히 헷갈리는 요소들의 개념을 정확하게 세울 수 있었다. 타고난 언변가! 왜 그렇게 모두가 좋아하..

1️⃣ 태그의 src 와 alt 속성 img의 src 속성은 브라우저에게 이미지 파일의 경로, 파일명을 알려주는 역할. img태그 안의 이미지 파일이 보이지 않을 때 alt 속성은 이미지 대신 텍스트를 표시하는 역할. 스크린리더와 같이 시각적으로 접근이 어려운 경우에도 이미지에 대한 정보를 텍스트로 제공. alt 속성은 SEO(Search Engine Optimization)에 도움된다는 사실! 저는 블로그 이미지에도 전부 alt 속성을 입력하고 있습니다! :) 2️⃣ 반응형 이미지를 위한 srcset 속성 반응형을 위해 사용하는 속성. 여러 해상도에서도 브라우저가 자동으로 최상의 이미지를 출력할 수 있게 선택권을 넘긴다. x(pixel density) 와 w(viewport) 서술자는 동시에 사용 불가..

1️⃣ Grid 란? display:grid 를 선언하면 자식에게 적용. 부모요소는 grid-container 자식요소는 grid-item 웹페이지를 위한 2차원 레이아웃(x축, y축) 시스템. Gap 을 통해 셀과 셀사이의 간격을 설정. 2️⃣ grid-container ↔️ grid-template-columns 열방향 그리드 트랙의 사이즈를 설정. ↕️ grid-template-rows 행방향 그리드 트랙의 사이즈를 설정. .container{ display:grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 200px 100px; } .container{ display:grid; grid-template-columns: 1fr ..

❤️‍🔥 Liked 1주일 늦게 합류한 멋사 FES 5기, 회고조를 잘 만나야 한다고 들었는데 나는 운이 좋았던 것 같다! (우리조 최고 🦁) 시스템이 체계적으로 준비되어 있다. 비대면 온라인 수업이지만 수강생 그룹별로 매니저가 배정되어 있어서 실시간 피드백을 받을 수 있다. 제출할 서류가 있었는데 운영을 담당하는 매니저가 있어서 쉽게 DM을 주고받으며 바로 처리! 전 기수들의 시행착오를 겪으며 더 나은 교육체계를 만들기 위해 노력하는 모습을 보면 앞으로 제공될 수업은 얼마나 더 좋을까 기대도 되고, 지원해 주는 만큼 열심히 습득하고 따라가기만 하면 되겠다는 생각이 든다. 질문을 해도 답변을 잘 해주는 분위기. 짧은 4개월 과정인 만큼 나처럼 내성적인 사람도 좀 더 적극적으로 행동한다면 훨씬 얻어갈 게 ..

1️⃣ flex의 구조 flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃. 공간에 맞추기 위해 축소되거나 여백의 공간을 채우기 위해 변형된다. 즉 유연한 비율로 사이즈를 조정하는 기능! 부모 요소는 flex-container 자식 요소는 flex-item 2️⃣ flex-direction 아이템을 배치할 때 주축과 방향을 지정! ➡️ row 기본값. 왼쪽에서 오른쪽 배치. ⬇️ column 위에서 아래로 배치. ⬅️ row-reverse 오른쪽에서 왼쪽 배치. ⬆️ column-reverse 아래에서 위로 배치. 3️⃣ Justify-content row, column의 주축을 기준으로 배치. flex-start 기본 값, 시작 축 기준으로 배치. flex-end 마지막 축 기준으로 ..

1️⃣ if, else if else조건문은 JS에서 가장 기본적인 제어문 중 하나. if문은 조건식이 True인 경우에 코드를 실행. else문은 조건식이 False인 경우에 실행. //조건문 구조 if (num > 10) { console.log('🔍 num이 10보다 크다.'); } else { console.log('🔍 num이 10과 같거나 작다.'); } const won = 1000; if (won > 800) { console.log('🥖800원에 구매 가능'); } else if (won > 400) { console.log('🧀400원에 구매 가능'); } else { console.log('돈이 없는 분은 구매할 수 없습니다...'); } // = 🥖800원에 구매 가능 //2중 조건..

1️⃣ for문 가장 보편적인 반목문! for() 조건이 true 반복문 실행, false면 실행 안 함. for( 초기화; 조건; 종료식 ) { 반복 실행 내용 } 구조 종료식에서 숫자 + ++ 는 한 개씩 증가시킨다는 뜻. for(;;) for문 무한 반복 //기본 구조 for( let i = 0; i < 10; i++) { console.log(`😀Hello for ${i}`) } // = '😀Hello for 0' ~ '😀Hello for 9' //구구단 예제 // 9단 for (let i = 1; i