본문 바로가기

전체

 (94)
Development/Web Bundle 개념과 WebPack 사용 방법 들어가며 웹 페이지는 html, css, js, 이미지 파일과 같은 다양하고 많은 파일로 구성되어 있다. 이렇게 개발된 웹 페이지를 로딩하면 웹 페이지를 구성하는 파일들이 다운로드되는 것을 확인할 수 있다. 이와 같은 방법으로 웹 서버를 운영하면, 사용자 요청 수 증가에 따른 많은 비용이 발생, 성능 저하 등과 같은 문제가 발생할 수 있다. 이와 같은 문제를 해결하기 위해 등장한 개념이 Bundler이며, 단어의 의미 그대로 여러 파일을 묶어주는 개념이라고 할 수 있다. Bundler에 해당하는 도구로는 대표적으로 WebPack, Broserify, Parcel이 있는데, 이중에서 대중적으로 사용되는 WebPack에 대해서 공부한 내용을 정리해보았다. 예제코드 : https://github.com/cho..
Development/Python venv 개념 정리, 그리고 BeautifulSoup4와 pymongo 들어가며 3주차에서는 파이썬 기초 문법, bs4(BeautifulSoup4)를 사용한 웹 페이지 스크래핑(크롤링), pymongo를 사용한 MongoDB 사용 방법에 대해서 다루었다. 단, 처음 파이썬을 접한 상황이라면 이 강의로는 파이썬 기초를 잡기에는 턱없이 부족하니, wikidocs나 구글링, 유튜브를 통해서 어느정도 기초 지식을 쌓고 수강하는 것을 추천한다. 특히, 문자열 및 리스트의 인덱싱과 슬라이싱, 딕셔너리 정도만 숙지하여도 3주차 강의를 수월하게 이해하고 따라갈 수 있다고 생각한다. package와 venv package 이미 누가 짜놓은 소스코드를 현재 내가 진행 중인 프로젝트로 불러와서 사용할 수 있다. 이렇게 다른 사람이 구현해놓은 기능의 소스코드를 패키지, 모듈, 라이브러리라고 한다..
Development/Web JavaScript와 JQuery, 그리고 Ajax 들어가며 2주차 강의에서는 jQuery와 Ajax에 대해서 다루는데, 여기부터 내가 이 교육 과정을 신청하게 된 이유가 드러난다. 나는 jQuery나 Ajax 요청을 배우지 않고, HTML, CSS, Javascript만 간단히 공부하고 바로 React로 넘어왔기 때문에 jQuery나 Ajax에 대해서는 지식이 부족하다. React로 개발할 때에는 axios를 사용하여 API를 요청하였는데, 기본적으로 Ajax에 대해서는 알고 있어야 할 것만 같은 찜찜함이 늘 가시지 않았다(jQuery나 Ajax도 혼자서 공부하기에 어렵지 않은 부분이지만, 혼자서 스파게티식 교육을 하기 보다는 커리큘럼이 있는 교육을 받고 싶었다). jQuery + Javascript 연습 Q1. 빈칸 체크 함수 만들기 ❓ 문제 버튼을 ..
Development/SQL 서브 쿼리와 WITH, SUBSTRING, 조건문(CASE) 들어가며 4주차에서는 Sub Query와 실전에서 유용한 SQL 문법에 대해서 공부하였는데, 약 2일 정도 손에 익을 때까지 계속 연습한 후에 개발일지로 정리하였다. Sub Query 서브 쿼리는 말 그대로 보조역할을 하는 쿼리로, 정확히는 쿼리 안에 있는 하위 쿼리라는 의미이다. 이는 하위 쿼리의 결과를 상위 쿼리에서 활용하기 위해 사용되며, WHERE, SELECT, FROM에서 사용된다. WHERE에서의 서브 쿼리 서브 쿼리는WHERE ~ IN ()을 통해 WHERE절에서 사용할 수 있다. WHERE ~ IN ()이 무엇인지 알기 위해 간단한 예를 들어보도록 하자. 먼저, WHRER절로 users 테이블에서 특정 아이디에 해당하는 정보만 불러오면 다음과 같다. SELECT * FROM users W..
Development/SQL 테이블 간 결합(INNER JOIN, LEFT JOIN)과 결과 조합(Union) 들어가며 JOIN이란 공통된 필드를 갖고 있는 여러 테이블을 하나의 테이블처럼 보이도록 연결하는 것이다. 이는 엑셀에서 VLOOKUP 함수와 같은 개념이라고 할 수 있다. JOIN의 종류에는 INNER JOIN, LEFT JOIN, OUTER JOIN이 있는데, 강의에서는 INNER JOIN과 LEFT JOIN에 대해서만 다루었다(OUTER JOIN은 실제로 잘 사용하지 않는다고 한다). INNER JOIN INNER JOIN은 기준이 되는 필드에 데이가 없으면 아예 해당 행 자체를 보여주지 않는다. 즉, 서로 다른 테이블 간의 교집합으로 테이블을 결합하며, 가장 일반적으로 사용되는 방식이다. 예를 들어, users 테이블과 point_users 테이블을 INNER JOIN으로 결합하는 쿼리문은 다음과 ..
Development/Web HTML + CSS 자주 등장하는 질문 정리 들어가며 작년 여름, 퇴사한 이후 처음으로 웹 개발의 매력에 빠져 혼자서 꾸준히 공부해온 탓에 지금은 Node.js를 사용한 API 서버 개발, React로 간단한 웹 사이트 개발은 가능한 수준이라고 생각은 되나, 제대로 된 기초가 없어서 그런지 매번 개발 과정이 순조롭지 않다고 생각하여 웹 개발 기초 교육를 통해 기초를 쌓아가자는 의미에서 스파르타코딩클럽 내일배움단의 '웹개발 종합반'을 신청하였다. 1주차 내용은 정말 기초적인 HTML, CSS, JavaScript에 대해 다루기 때문에 기초 개념 설명은 기록하지 않고, 슬랙(slack) 질문 채널에 자주 올라온 질문 중에서 중요하다고 생각하는 내용을 선택하여 스스로 답해보는 형식으로 정리해보겠다. CSS 선택자의 우선순위를 결정하는 명시..
Development/SQL 통계 값을 구할 때의 기준(GROUP BY)과 정렬(ORDER BY) 들어가며 매일 8강의씩 들을 수 있기 때문인지 교육 2일차에 벌써 2주차 수업에 접어들었다(강의 영상은 평균 10분 이내로 짧지만, 퀴즈와 과제를 해결하다보면 몇 시간으로도 부족하게 느껴진다). 1주차 강의에서는 원하는 데이터를 날것 그대로 가져오는 쿼리문을 다뤄보았다면, 2주차에서는 데이터를 그룹화해서 통계를 구하는 쿼리문을 다루었다. 데이터 통계 넓은 범위에서 데이터 통계는 굉장히 복잡하고 어렵게 느껴질 수 있지만, 좁은 범위에서의 통계는 최댓값, 최솟값, 평균, 합계 정도를 구하는 것으로 매우 쉽고 간단하다. 쿼리문 작성 요령 스파르타코딩클럽에서 쿼리문을 작성할 때 한 가지 요령을 알려주었는데, 그건 바로 쿼리문 작성 순서이다. 개인적으로는 쿼리문이 복잡할수록이 요령을 떠올려보며 차근차근 쿼리문을 ..
Development/SQL DB와 조건(WHERE)에 따른 데이터 조회(SELECT) 들어가며 응용 프로그램을 개발하면서 이것저것 검색해가며 SQLite, MySQL을 써보았지만, 다시 기초를 다잡고 가자는 마음에 스파르타코딩클럽 내일배움단을 통해 SQL을 공부하고자 하였다. 이 교육과정에서는 CRUD(Create, Read, Update, Delete) 중에서 READ만 다루고 있다. 처음에는 이 부분이 아쉽게 느껴졌으나, 1주차 강의를 듣고나서는 READ만 제대로 알아도 데이터 가공과 다양한 응용을 하는데 충분하다고 느꼈다. 데이터베이스 대부분 직장에서 가장 기본적으로 사용하는 데이터 관리용 문서는 엑셀이라고 생각한다. 엑셀 필터, 함수 등 다양한 기능을 활용하여 데이터를 보기 쉬운 표로 관리할 수 있으나, 데이터가 많아질수록 처리 속도가 늦어지거나, 동시작업이 불가능하다는 한계가 있..
Algorithm/개념정리 자료 구조(Data Structure)의 큐(Queue) 개념 정리 들어가며 지난 포스팅에 이어서 이번에는 큐에 대해 공부한 내용을 정리해보았다. 큐 스택과 달리 큐(queue)는 가장 먼저 넣은 데이터를 가장 먼저 꺼내는 선입선출(FIFO, First In First Out) 방식으로 데이터 입/출력을 처리한다. 선입선출은 신선도를 고려한 편의점과 마트의 상품 진열 방식을 생각하면 이해하기 쉽다. 즉, 데이터를 맨 뒤에서 넣고 앞에서 꺼내는데, 이를 각각 인큐(enqueue)와 디큐(dequeue)라고 한다. 이와 같이 큐는 맨끝에서 맨앞으로 데이터를 밀어넣어 꺼내는 방식이며, 큐의 맨 앞의 원소를 프론트(front)라고 하고, 맨 뒤의 원소를 리어(rear)라고 한다. 예를 들어, 인큐와 디큐를 간단히 나타내면 다음과 같다. queue = [] 1. enqueue(1..
Algorithm/개념정리 자료 구조(Data Structure)의 스택(Stack) 개념 정리 들어가며 알고리즘 문제를 풀 때 리스트(이하, 배열)로는 해결하기 어려운 경우가 있으며, 이와 같은 상황에서는 스택이나 큐를 사용해야 한다. 따라서, 이번에는 스택에 대해서 공부한 내용을 정리해보았다. 스택 스택(stack)은 '마룬 풀을 쌓은 더미', '겹겹이 쌓음'을 뜻하는 단어로, 데이터가 쌓인 데이터 집합이라고 할 수 있다. 이는 데이터를 임시 저장할 때 사용하는 자료구조이며, 후입선출(LIFO, Last In First Out) 방식으로 데이터를 입/출력할 수 있다. 즉, 데이터를 맨 위에서부터 쌓고, 맨 위에서부터 꺼낸다는 의미이며, 이를 각각 푸쉬(push), 팝(pop)이라고 한다. 예를 들어, 푸쉬와 팝을 간단히 나타내면 다음과 같다. stack : [] 1. push(1) → stack..

티스토리툴바