connecting dots

1. 개요패스트캠퍼스 데브캠프: 김민태의 프론트엔드 개발 1기비기너반 프로젝트로써 진행한 영상공유 SNS 플랫폼 개발 프로젝트 소개 및 회고를 해보겠습니다. 2. 깃허브 주소https://github.com/Dev-FE-1/Toy_Project_3_BeginAgain GitHub - Dev-FE-1/Toy_Project_3_BeginAgainContribute to Dev-FE-1/Toy_Project_3_BeginAgain development by creating an account on GitHub.github.com 3. 팀원소개 및 역할분담 처음에는 7명으로 시작했던 비기너반이 최종적으로는 4명이 되어 프로젝트를 진행하였습니다. 특히나 프로젝트가 시작되고 기획 및 디자인 단계에서 두 분이나 개인..

프로젝트 배포까지 깃허브에서 간단하게 끝낸 후 그룹 스터디, 토이 프로젝트 1 팀원들 그리고 강사님께도 공유 드려서 피드백을 부탁드렸다 ! 역시나 아직 배울게 많고 배웠어도 적용이 안되는 것이 많구나 ,, ㅎ  1. HTML 코드에서 각 스크립트가 서로 데이터나 함수를 공유하는 부분이 없어서 순서대로 호출될 필요가 없어 보입니다. 그래서 defer 처럼 HTML 요소가 준비되면 실행하지만, 동기가 아닌 비동기로 각 스크립트가 호출될 수 있는 async 속성을 사용하는 게 현재 프로젝트에서는 더 좋은 방법입니다.기존 코드 피드백 코드 ==> defer와 async의 공통점과 차이점은 뭐지 ? (여태 defer만 알고 있어서 정말 새로운 정보였다) async는 스크립트가 다운로드되는 즉시 실행되며, 문서 파..

부트캠프에 참여한지 두달 반 정도된 이 시점, 여태까지는 개인적으로 '무언가 만들어보자' 라는 생각을 안 했던 것 같다.비기너반 프로젝트가 3주가 남지 않은 이 시점에 슬슬 작은 프로젝트라도 시작해보고 싶었는데마침 그룹스터디에서 앞으로의 스터디 방향성을 의논하다가 각자 개인 프로젝트 만들어서 공유하는 시간을 갖는건 어떤가 하는 의견이 나와서 본격적으로 프로젝트를 시작해보게 되었다 !웹 개발을 배우면 거의 처음해보는 프로젝트로 굳어진 것 같은 (?) 투두 앱 만들기 !어떤 주제로 뭘 만들까 고민하다가 ,, 이러다가는 고민하고 기획하다가 일주일이 다 갈 것 같아서 스터디 같이하는 분이 예전에 비기너 시절 해보셨다고 소개해주신 nomadcoder todo app 을 수강하며 만들어나가기 시작했다 !강의의 경우..

const loginForm = document.querySelector("#login-form"); document에서 id가 login-form인 요소를 찾아 loginForm이라는 변수에 할당 const loginButton = document.querySelector('.login-form');const loginButton = loginForm.querySelector("button"); 위 두 코드는 같은 의미를 지니는데1) document에서 class가 login-form인 요소를 찾아 lodginButton이라는 변수에 할당2) loginForm에서 button을 찾아 loginButton이라는 변수에 할당 --> html을 보면 안에 이 있는 구조를 가지고 있음 💡 _______.qu..

https://github.com/Dev-FE-1/Toy_Project_Team_1 GitHub - Dev-FE-1/Toy_Project_Team_1: 토이 프로젝트 1_사내 인트라넷 시스템 개발을 위한 1팀의 레포지토토이 프로젝트 1_사내 인트라넷 시스템 개발을 위한 1팀의 레포지토리입니다. Contribute to Dev-FE-1/Toy_Project_Team_1 development by creating an account on GitHub.github.com  막 가나다라를 배웠는데 글을 쓰라는 과제를 받은 기분으로 시작했다초반 기획 회의에서 '코드 컨벤션도 비슷하게 갈까요 ?' 하는데컨벤션이 뭔지 몰라서 크롬에 바쁘게 검색하면서도표정은 평화로움을 유지하는, 물 안에서는 바쁘고 바빴다토스트 팝업이..

SPA 방식Single Page Application(SPA)는 단일 HTML 페이지로 구성된 웹 애플리케이션 방식입니다. SPA에서는 페이지 전환이나 데이터 로드 시 전체 페이지를 새로 고치지 않고, 필요한 부분만 동적으로 업데이트합니다. JavaScript를 사용하여 클라이언트 측에서 이러한 작업을 처리합니다. 왜 SPA를 사용할까?  • 빠른 사용자 경험: 페이지 전환 시 전체 페이지를 다시 로드하지 않아서 더 빠르고 부드러운 사용자 경험을 제공합니다. • 부드러운 내비게이션: 전체 페이지를 새로 고치지 않으므로 사용자 인터페이스가 더 부드럽고 자연스럽습니다. • 효율적인 서버 통신: 필요한 데이터만 서버에서 가져오므로 네트워크 사용량이 적습니다. SPA의 작동 원리  1. 초기 로드: 애플리케이션..

BBlock; 그 자체로 의미가 있는 독립적인 부분header, container, menu, checkbox, input  EElement; 독립적인 의미가 없고 해당 블럭과 연결된, 블록의 일부block에 의존적인 형태로 block 안에서만 의미를 가짐block 뒤에 '__'를 붙여 사용header__title, menu__title, checkbox__caption MModifier; 속성해당 부분이 다르게 동작하거나 색상 등의 스타일이 다른 경우 사용block이나 element 뒤에 '--'를 붙여 사용 - 불리언(boolean) 타입active 상태로 속성을 주는 것--> active 상태가 true라고 가정하고 사용  메뉴 1 메뉴 2   https://www.youtube.c..