어제보다 더 나은 오늘

기술 과제를 진행하면서 styled-components를 사용해 공통 ui 컴포넌트를 만들던 중 input 입력란의 텍스트 정렬을 다르게 가져가야 할 필요가 생겼다. 아래의 화면 이미지와 같이 우편번호 input은 중앙정렬, 그 외에 input은 일반적인 좌측 정렬로 화면 디자인이 구성되어 있었다. 이를 위해 input ui 컴포넌트에서 prop으로 textAlign 값을 줘서 제어하려고 시도했다. // 공통 ui 컴포넌트 선언부 export const Input = styled.input` box-sizing: border-box; width: ${(props) => props.width || 'inherit'}; height: 40px; padding: 9px 13px; border: 1px soli..

아래 포스팅에 쓴 것처럼 바닐라JS로 DOM을 조작해서 더미데이터를 화면에 뿌려주던 것을 fetch API로 서버에 데이터를 요청해 받아오는 방식으로 리팩토링을 해보았다. fetch로 서버에 데이터를 요청해서 응답으로 받은 데이터를 agoraStatesDiscussions 라는 변수에 담는 것이 목표였다. 1. 1차 시도 const agoraStatesDiscussions = []; fetch("http://localhost:4000/discussions/") .then((res) => res.json()) .then((data) => { agoraStatesDiscussions.push(...data); console.log(agoraStatesDiscussions); // 데이터 담김 }); cons..

전자정부 프로젝트로 첫 출장을 갔던 튀니지에서 서버 개발자들을 대상으로 연수 프로그램 통역을 했을 때 '화면에 뿌려준다'는 말을 처음 들었다. 당시 IT 프로젝트 통역을 처음 맡았던 거라 Apache, 라우터, 게이트웨이, L4 스위치, 데이터베이스 서버 등 알 수 없는 말들이 난무했는데 저런 기술 용어들은 만국 공용어인지라 정작 통역을 하는 나는 무슨 말인지 몰라도 그냥 그대로 통역을 하면 엔지니어들끼리는 찰떡 같이 알아들었다. 하지만 '화면에 뿌린다'는 건 무슨 말인지 몰라서 그대로 직역을 했더니 튀니지 개발자들도 못 알아듣더라고 😇 결국 연사(speaker)였던 한국 개발자 분에게 화면에 뿌린다는 게 무슨 의미인지 조금 더 구체적으로 설명해 주실 수 있냐고 요청드렸고, 서버에서 받아온 데이터를 화면..

📍 구현 과제 : 데이터 객체가 배열에 담긴 더미 데이터를 끌어와서 화면에 렌더링 각자 취향대로 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 메소드를 사용하는 다음과 같은..

부트캠프에서 회원가입 페이지의 유효성 검사를 하는 과제가 주어졌다. 요구사항은 아주 간단했다. 아이디가 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를 살펴..