본문 바로가기

분류 전체보기

SQL 기초 & 자주쓰는 쿼리문 정리 SQL을 배워야하는 이유 데이터베이스와 SQL 우리는 일상 속에서 'DB' 또는 '데이터베이스'라는 단어를 어렵지 않게 접한다. 보통 '관리 목적으로 데이터를 모아놓은 것'을 의미할 때 사용한다. 이 '데이터베이스'는 언제부터 우리의 일상 속에 녹아들었을까? 1970년으로 거슬러 올라가 보자. 당시 대기업과 엔지니어들은 누구나 쉽게 데이터를 정리 정돈할 수 있는 전문적인 소프트웨어가 필요로 했다. 이러한 수요에 발맞춰, 영국의 컴퓨터 과학자, 에드거 테드(1923~2003)는 IBM에서 일하는 동안 데이터베이스 관리를 위한 모델을 만들었다. 그리고 그의 이론에 기반해서 여러 가지 관계형 데이터베이스가 등장하기 시작했다. 데이터베이스의 가장 핵심적인 기능은 'CRUD'이다. 각각 생성(Create), 조회.. 더보기
[PR 코드리뷰] 우아한테크코스 프론트엔드 레벨1 - 지하철 노선도 미션 우아한테크코스 프론트엔드 과정 레벨1 을 수행하며 우아한형제들의 @HyunaKwon 님께 리뷰를 받을 수 있었다. 코드를 꼼꼼하게 리뷰해주셨다. 전반적으로 에러핸들링이 부족하다는 피드백을 주셔서 페어와 함께 에러와 에러핸들링을 어떻게 풀어나갈지 고민해볼 수 있어서 좋았다. 👍👍👍 미션 1단계 피드백 👉 PR 바로가기 1. 예외처리는 꼼꼼하게 전체적으로 예외 처리가 부족해 보인다. generateInputValidator와 hasPropertyValue에서 throw해주는 Error를 아무데서도 처리하지 않고있다. try-catch 문을 추가하는 연습을 추천한다. 에러 처리는 중구난방으로 하지 않고 통일성을 갖추어 사용하는 것이 좋다. '처리 후 early return' 방식 또는 'error throwi.. 더보기
웹팩(Webpack) 밑바닥부터 설정하기 최근 웹팩을 설정해서 과제를 제출했다. 웹팩을 '활용'했다고 하기에는 사용한 기능이 빙산에 일각에 불과한데, 이마저도 대부분을 페어로부터 배웠다,,, 혼자 해보면 정말 못할 것 같아서, 다시 처음부터...! 정리를 해보려고 한다. 웹팩 설정 파일(webpack.config.js)을 차근차근 완성해가며 웹팩의 주요 개념을 익혀보자. 0. 웹팩(webpack)이란? 웹팩 공식 Github 에서는 웹팩을 '모듈(module)'을 위한 '번들러(bundler)' 라고 소개한다. 웹팩에 대해 알아보려면 '모듈'과 '번들러'가 무엇인지부터 알아보아야겠다. webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage.. 더보기
[PR 코드리뷰] 우아한테크코스 프론트엔드 레벨1 - 나만의 유튜브 강의실 미션 우아한테크코스 프론트엔드 과정 레벨1 을 수행하며 쿠팡의 @wow9144 님께 리뷰를 받을 수 있었다. 리뷰어님께서 실생활의 예시를 비유로 들어주시면서 상세하게 설명해주신 덕분에, 비전공자로서 어렵게 느껴질 수 있는 개념을 보다 쉽게 접근할 수 있었다. 👍👍👍 미션 1단계 피드백 👉 PR 바로가기 1. DOM요소에 데이터 저장은 지양 버튼에 모든 videoData를 저장하는 것이 좋은 방법은 아니다. 버튼은 videoId 만 알면 된다. 클릭 시 해당 videoId에 대한 정보를 저장 요청하는 외에, videoData 중 구체적으로 어떤 정보를, 어디에 어떻게 저장할지는 버튼의 관심사가 아니다. 따라서 버튼(DOM)에 저장할 필요가 없다. 검색요청을 통해 받은 데이터를 JS에서 이미 알고 있고, 버튼을 .. 더보기
쉽게 쓰인 유튜브 API 튜토리얼 유튜브에서 제공하는 API를 이용하면 내가 만든 웹페이지에서 유튜브와 관련된 다양한 기능을 추가할 수 있다. '영상 검색하기'를 기준으로 유튜브 API 기본 사용법을 익혀보자. 1. API 키 발급부터 KEY 없이는 API를 쓸 수 없다! API를 사용하기 위해서는 먼저 key를 발급받아야 하고, key를 발급받기 위해선 구글 계정이 필요하다. 인증 없이는 대부분의 API를 사용할 수 없어서 구글 계정이 반드시 필요하다. 구글 계정이 준비되었다면 구글 개발자 콘솔(Google Dev Console) 로 접속하고 하단 왼쪽 그림과 같이 새 프로젝트를 생성한다. 만들기 버튼을 누르면 잠시의 로딩 끝에 하단 오른쪽 그림과 같이 프로젝트 생성이 완료된다. 'API 및 서비스 사용 설정'을 클릭하자. 'API 및.. 더보기
[PR 코드리뷰] 우아한테크코스 프론트엔드 레벨1 - 로또 미션 우아한테크코스 프론트엔드 과정 레벨1 을 수행하며 토스페이먼츠의 @Jbee 님께 리뷰를 받을 수 있었다. 슬랙 내 소통할 수 있는 전용 채널을 따로 만들어주시고, 항상 미리 공지된 시간에 리뷰를 남겨주셔서 스케줄 조정도 도와주시고, 양질의 참고자료도 틈틈이 전달해주셔서 엄청 꼼꼼하게 케어해주신다는 느낌을 받았다. 감사합니다...🙏👍 미션 1단계 피드백 👉 PR 바로가기 1. HTML 태그는 웹표준을 준수해서 내에서 '입력값 제출'을 위해 을 사용할 때는 type="button"이 아니라 type="submit"을 사용하는 것이 접근성에 맞다. 의 submit 이벤트를 활용해보는 쪽을 추천한다. 또한, 을 사용할 때는 과 함께 사용하며 이 을 자식으로 포함하거나 for와 name으로 의미론적으로 연결되어야.. 더보기
HTML <form> 태그 총정리 + <input>, <button> 로또 미션 HTML 문서에는 과 이에 필요한 , 등이 자주 사용되지만 제대로 찾아보지 않고, 필요할 때 주먹구구식으로 찾아쓰기 바빴다. 리뷰어님의 코멘트를 보고 찾아보니 의 type 속성만 해도 22가지 type을 지원하고 있었다. 앞으로는 몰라서 못쓰는 일이 없도록 이번 기회에 각 태그의 속성들을 잘 정리해놓자. 태그 태그는 이 글에서 나오는 모든 태그 중 가장 상위 태그에 해당한다. 사용자로부터 데이터를 입력받을 때 사용하며, 의도에 따라 다음의 11가지 태그들을 적절하게 조합해서 사용한다. 각 태그는 간단히 살펴보고, 사용빈도와 중요도가 높은 📌 과 📌 은 태그를 살펴본 후 이어서 더 자세히 알아보자. 의 자식태그 📌 클릭 가능한 버튼이다. 기본 type은 submit이다. 📌 22가지 type을 .. 더보기
입력 폼(Form)에서 유의해야할 UI/UX 디자인 요소 프론트엔드에서 입력 폼(Form)을 넣을 때 고민해보면 좋을 UI/UX 디자인 요소를 간단히 정리해보자. 올바른 입력을 유도하려면 레이아웃을 잘 짜자 우선 사용자에게 몇 가지 데이터나 입력받는지, 그 데이터의 형식이 무엇인지 고려한다. 그리고 각 입력 데이터의 예상 너비까지 종합적으로 고려해서 레이아웃을 결정하도록 한다. tab키로 이동했을 때 흐름이 일관적이어야만 사용자가 더 쉽게 폼을 완성할 수 있다는 점에 유의한다. 왼쪽 위부터 입력 칸을 채우는 사용자에게 2 x 3 과 같은 레이아웃은 혼란을 줄 것이다. 따라서 입력받을 데이터가 여러 개라면, 입력필드를 한 줄로 정렬해야 한다. 정렬은 세로로 한 줄이 되도록 하는 것이 일반적이지만, 상황에 따라 가로로 정렬하기도 한다. 로또 당첨번호와 같이 항상 .. 더보기

티스토리툴바