어제보다 더 나은 오늘

📍 구현 과제 : 데이터 객체가 배열에 담긴 더미 데이터를 끌어와서 화면에 렌더링 각자 취향대로 css 스타일링 게시판 형태로 페이지네이션 작업 새로운 데이터 입력시 기존 더미 데이터에 합쳐서 화면에 렌더링 로컬 스토리지 이용해 새로운 데이터 저장해서 새로고침 해도 화면에서 유지 github page 이용해서 배포 링크 만들기 📍 과제 구현한 웹페이지 배포 링크 : 아바타 이미지 16종을 준비해서 사용자가 새로운 질문을 등록하면 랜덤 아바타 16개 중 하나가 배정되어서 뜨게 만들었다 🤗 https://ah-ae.github.io/fe-sprint-my-agora-states/ * 과제 코드 확인해 보고 싶으신 분은 GitHub Repository로 들어가시면 됩니다. 과제하면서 배운 것들 1. 페이지네이..

들어가기에 앞서 이 포스팅은 inDepthDev의 아티클 Here is why appendChild moves a DOM node between parents를 번역한 것입니다. 번역에 오류가 있는 경우 댓글을 통해 알려주시면 신속하게 수정하도록 하겠습니다. 나는 웹의 기본 원리를 아는 것이 무엇보다 중요하다고 믿는 사람이다. 그래서 종종 웹 개발 아키텍처나 웹 플랫폼 API에 관한 흥미로운 질문들을 하곤 한다. 이러한 질문을 던짐으로써 피면접자가 자신의 일에 대해 얼마나 열정을 가지고 있는 개발자인지, 지식에 대한 열망을 가지고 얼만큼 멀리 가봤는지를 이해하는 데 도움을 받는다. 지난주 트위터에 다음과 같은 질문을 올렸다. 아래와 같은 HTML 코드와 appendChild 메소드를 사용하는 다음과 같은..

부트캠프 코스 중에서 기술면접 대비 세션이 있었다. 이제까지 한 달 동안 배운 html, css, javascript, dom 관련 주제 중에서 면접에 나올 만한 예상 질문 리스트를 추려서 주고, 그 중에 일부를 선택해서 모의 면접을 보는 식으로 진행되는 세션이었다. 💡 기술 면접 Tip : 결론은 간명하게, 설명과 사례는 구체적으로 css의 box model, 자바스크립트의 스코프, 클로저, 원시자료형과 참조자료형의 차이 등은 충분히 예상 가능한 질문이었지만 요소는 왜 요소의 자식 요소여야만 할까? 라는 질문은 이제껏 너무 당연하게 마크업을 해오면서 한 번도 생각해 보지 못한 질문이었다. 일단 html 파일을 하나 생성해서 브라우저에 띄워보기로 했다. item1 item2 item3 item4 요소로 ..

CSS에서 처음 width, height 속성을 배우면서 max-width라는 속성을 알게 되었을 때 바로 머릿속을 스쳐 지나간 것이 하나 있었다. 바로 아이메시지의 말풍선 크기! 기본적으로 메시지 입력값의 크기만큼 말풍선이 감싸지지만 일정 크기 이상 되면 그 이상으로 커지지는 않고 아랫줄로 넘어가는 것이 max-width를 적용한 레이아웃이었구나. (무릎 탁! 🧐) 그래서 바로 따라서 만들어 본 아이메시지 화면. 짠! 자막이랑 뭘로 작업했대? ㅋㅋ 앗 첫번째 구독자다 영광 ㅋㅋㅋㅋ 가족단톡방에 공유 ㅋㅋ 구독자 5명 확보 캬캬캬 Vllo? 예전에 회사서 영상 몇 개 만들때 썼는데 걍 대충 어플 뚝닥이다 한겨 오 모바일 앱인가보네 웅 ㅋㅋㅋㅋ 하 짱귀... 3번 반복 재생 들어간다 어플 편하드라고 ㅋㅋ ..

Does it mutate? The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.Array.prototype.lastIndexOf ( searchElement [ , fromIndex ] ) doesitmutate.xyz 📍 immutable methods : - slice(), concat() - map(), reduce()

Zero CHO - 호출 스택과 이벤트 루프 https://www.zerocho.com/category/Javascript/post/597f34bbb428530018e8e6e2 https://www.zerocho.com/category/Javascript/post/597f34bbb428530018e8e6e2 www.zerocho.com

부트캠프에서 회원가입 페이지의 유효성 검사를 하는 과제가 주어졌다. 요구사항은 아주 간단했다. 아이디가 4글자 이상이어야 함 비밀번호와 비밀번호 확인창의 두 값이 일치해야 함 아이디 길이와 비밀번호 일치 여부에 따른 메시지를 각각의 상황에 적합하게 화면에 출력해야 함 기본 과제는 1) 위의 두 가지 요구사항을 확인하기 위해 true, false 두 가지 boolean 값을 반환하는 함수를 각각 만들고, 2) 해당 유효성 검사 함수 통과 여부에 따라 화면에 적합한 메시지를 출력하는 핸들러 함수를 만들어서 3) 아이디 입력창과 비밀번호 확인 입력창에 2)의 핸들러가 동작하게 하는 keyup 이벤트 리스너를 달면 통과였다. 이벤트 리스너를 달지 않고 onkeyup 으로 처리해도 과제 통과가 되긴 했는데, 기본..

children과 childNodes는 자바스크립트에서 특정 요소의 자식 요소/노드에 대해서 접근할 수 있게 해주는 프로퍼티다. 이 둘의 차이는 무엇일까? 그러려면 일단 요소와 노드의 차이부터 알아야겠다. 결론부터 얘기하자면 node는 element(요소)의 상위 개념이다. DOM 트리구조의 모든 것이 다 node이고, 그 중 element는 html 문서에서 , , , , 등과 같은 태그를 사용해서 작성된 노드이다. 늘 그렇듯 말로 푸는 설명이 더 어렵기 때문에 바로 예제를 살펴보자. menu menu menu photo news-picture news-title news-description footer 이 중에서 id가 nav인 태그를 가져와 해당 요소의 children과 childNodes를 살펴..

1. 모바일 앱 제작 - iOS 앱은 Swift로, 안드로이드 앱은 Kotlin으로 만드는 것이 정석 - 하지만 React Native를 사용해서 자바스크립트로도 모바일 앱을 만들 수 있다! - 실제 사례: 인스타, 페이스북 등 2. 비디오 앱 (화상회의) - 실제 사례: 구글 행아웃, 디스코드 등 (앱 설치 없어도 브라우저에서 작동) - 사용 기술: WebRTC (웹 브라우저 간에 플러그인의 도움 없이 서로 통신할 수 있도록 설계된 API) 3. 로봇 및 IoT 디바이스 앱 - Ardouino, Raspberry Pi : 하드웨어 제어 가능하게 해주는 초소형 컴퓨터 - 사용 라이브러리: Johnny-Five - Johnny-Five가 지원하는 분야: 각종 모터, GPS, 적외선 센서, 근접 센서 등 4..

코드스테이츠 소프트웨어 엔지니어링 부트캠프 프론트엔드 코스 21일차. 개강 후 딱 3주가 지났다. 한국에서 가장 오래된 부트캠프답게 하루하루 잘 짜여진 커리큘럼과 여러 면에서 수강생들을 챙겨주는 운영진들의 노고에 감탄을 거듭하고 있다. 그중에서 이제까지의 과제 중 화룡점정에 해당하는 Javascript Koans 과제를 마쳤다. 처음에는 명칭만 보고 자바스크립트 과제인 건 알겠는데 뭘 하라는 거지🤔 했는데, 테스트 코드 형식으로 이제까지 배운 자바스크립트 관련 개념들(변수, 자료형, 함수, 배열, 객체, 스코프, 클로저, spread syntax, 구조 분해 할당)을 총정리하는 백과사전을 만들어놓은 거였다...! 개발자 job description을 볼 때 '테스트 코드 짜 본 경험이 있는 분 우대' 등..