본문 바로가기

전체 글168

210227_TIL (MongoDB, Mongoose) 🍎 오늘 한 일 ✔️ MongoDB, Mongoose MySQL을 써보고 나니까 NoSQL은 어떻게 쓰는지 궁금해져서 Javascript를 기반으로 하는 MongoDB, 그리고 mongoose 라이브러리를 써봤다. 먼저 공식문서를 보면서 설치하고 데이터베이스 서버에 접속을 해봤다. 유저 관련 설정을 하다가 오류가 생겨서 해결하는데 시간을 좀 쓰기도 했다 ㅠ.ㅠ 몽고디비는 테이블이 없어서 자유롭게 데이터를 넣을 수 있지만, 때론 이런 자유로움이 불편함을 초래하기도 한다. 예를 들어 실수로 잘못된 자료형 데이터를 넣거나, 없는 필드의 데이터를 넣을 수도 있다. 몽구스는 몽고디비에 데이터를 넣기 전에 노드 서버단에서 데이터를 한번 필터링해주는 역할을 한다. 오늘은 이런 몽구스를 이용해서 Node.js와 Mon.. 2021. 3. 1.
210226_TIL (DB설계, SQL) 🍎 오늘 한 일 ✔️ DATABASE 설계 며칠 전에 인스타그램 스키마를 만들어봤었는데, 테이블들 간의 관계나 데이터 종류들을 잘 표현한 것 같지 않기도 하고, 어떤 순서로 접근해야 좀 더 빠짐없이 데이터베이스를 제대로 설계할 수 있을 지를 알고싶어서 데이터베이스 설계 방법에 대해 공부했다. 기본적으로 설계는 요구사항 분석 → 개념적 설계 → 논리적 설계 → 물리적 설계 → 구현 단계로 이어지는데, 개념적 설계를 하는 부분에 대한 이해가 부족했었다는 것을 깨달았다. 명세서가 주어지면, 요구사항을 보며 객체와 속성을 추출해내고, 객체들 간의 관계를 잘 정리해두면 나머지 설계단계가 굉장히 수월하게 진행될 것 같았다. 관계도를 다이어그램으로 그려보는 연습을 좀더 해야할 것 같다. ✔️ SQL - 다중쿼리 처리.. 2021. 2. 27.
DATABASE 트랜잭션 기초 트랜잭션이란? 데이터베이스의 조건 ✔️ 다수 사용자가 동시에 사용해도 모순없이 정확한 데이터 유지해야함 ✔️ 장애 발생시에도 빠르게 복구할 수 있어야 함 트랜잭션 ✔️ DB 회복, 병행 제어를 가능하게 해 일관된 상태를 유지하게 해줌 ✔️ 하나의 작업을 수행하는 데 필요한 DB 연산들을 모아둔 것 (DB의 논리적 작업 단위) ex. 계좌이체 트랜잭션 → 2개의 UPDATE문으로 구성 1) 보내는 사람 잔액 감소 2) 받는 사람 잔액 증가 //1 UPDATE 계좌 SET 잔액 = 잔액 - 5000 WHERE 계좌번호 = 100; //2 UPDATE 계좌 SET 잔액 = 잔액 + 5000 WHERE 계좌번호 = 200; ex. 상품주문 트랜잭션 → INSERT, UPDATE문으로 구성 //1 UPDATE 계.. 2021. 2. 26.
dotenv Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology. .env 환경변수 파일은 Node.js에서 프로그래밍에 필요한 값들을 관리하는 역할을 한다. 쉽게 말해 설정들을 모아두는 곳이다. .env 파일에 정의된 미리 정의된 값을 애플리케이션에서 활용하고 싶을 때 사용한다. 참고로 환경변수는 특정 process를 위한 key-value 형태의 변수라고 할 수 있는데, Node.js 기반이라면 .. 2021. 2. 26.
210225_TIL 🍎 오늘 한 일 ✔️ CMarket - database 연결하기 Cmarket이라는 쇼핑몰의 데이터베이스를 구축해보는 스프린트였다. 기존에는 데이터를 fs 모듈을 이용해서 파일하나에 저장하고 읽어오고 이런 방식을 사용했는데, 데이터베이스와 연결해 3티어 아키텍쳐를 완성할 수 있었다. 모든 요청을 데이터베이스를 통해 구현함으로써 배열, 객체같은게 아니라 진짜 데이터를 메모리에 저장할 수 있게 되었다. MySQL에 접속해서 Cmarket DB를 생성하고, 스키마를 확인하면서 MySQL에 테이블들을 생성해봤고, 웹 서버를 통해 MySQL 데이터베이스에 데이터를 삽입하고, 불러올 수 있게 했다. 여러 개의 레코드들을 한번의 쿼리로 처리하는 방법도 배웠다. ✔️ MySQL SQL로 데이터베이스를 생성하고, 데이터.. 2021. 2. 26.
210222_TIL 🍎 오늘 한 일✔️ Redux 연습해보기 먼저 Vanilla Javascript와 함께 썼을 경우를 연습해보면서 전체적인 흐름에 대해 이해를 하고, 그 다음에 React와 함께 사용해봤다. 리듀서..액션..디스패치 등등 굉장히 새로운 개념들이 쏟아져나와서 순서가 딱 정리되지 않는 느낌이었는데 확실히 코드를 따라가면서 보니까 좀 그려지는 느낌이었다. ✔️ Redux - CMarket Hooks 로 만들었던 C-Market을 이번에는 Redux를 사용해서 다시 구현해봤다. 상품 페이지와 장바구니 페이지 두 페이지로 간단하게 구성되는데, 각 페이지에서 필요한 Action, Reducer를 직접 작성해보고 리듀서를 combineReducer을 통해 하나의 rootReducer로 만들어 Store를 생성할 때 c.. 2021. 2. 23.
Redux 알아보기 Redux는 리액트 상태 관리 라이브러리로, 컴포넌트 상태 업데이트 관련 로직을 다른 파일로 분리해 효율적으로 관리할 수 있게 해준다. 컴포넌트의 상태를 따로 한군데서 관리하기 때문에 코드의 유지보수도 용이해지고, 작업효율도 높아진다는 장점이 있다. 특히 React와 Redux를 함께 사용하면, Redux의 상태관리 전용 장소(store)에서 상태를 따로 관리하고, React에서는 UI 요소만 관리가 가능해진다. 우선은 이러한 Redux와 관련된 중요 개념들부터 알아보자. Store 모든 상태들을 관리하는 중앙관리소 같은 곳이다. 형태는 그냥 아래처럼 JSON같이 생겼다. 스토어 안에는 현재 상태, 리듀서 등이 포함된다. 프로젝트에 리덕스를 적용하기 위해 스토어를 생성해야 하며, 한 프로젝트당 하나의 스.. 2021. 2. 22.
200220_TIL 🍎 오늘 한 일 ✔️ Hooks로 CMarket만들기 라우팅까지만 구현되어있는 쇼핑 앱인 C market을 완성하는 스프린트였다. 상품 페이지에서 장바구니에 담기 버튼을 누르면, 장바구니 페이지에 해당 상품이 담기고, 또다시 누르면 수량만 올라가도록 Hooks를 이용해서 구현했다. 그리고 장바구니에서 수량을 늘리고 줄일수도 있게 하고, 삭제버튼을 누르면 한번에 삭제되도록 만들었다. 내가 처음부터 만들면 내 마음대로 함수명과 변수명을 짓고, 데이터 흐름을 구성했을텐데 함수명과 변수명이 이미 어느정도 정해져있는 상태에서 기능을 추가하다보니까 오히려 파일을 파악하는데 시간을 많이 쏟게 되었던 것 같다. 그래서 혼자했지만 뭔가 협업을 하는 느낌이 들기도 했고 다른 사람이 짜놓은 코드를 읽고 파악하는 연습도 된 .. 2021. 2. 21.
210219_TIL 🍎 오늘 한 일✔️ HA 영화 정보를 동적으로 보여주는 어플리케이션을 만드는 문제가 나왔다. 클라이언트 부분과 서버 부분을 각각 만들었는데, 어제 한번씩 연습해본 덕에 금방 끝낼 수 있던 것 같다. 🍎 더 공부할 것✔️ Redux ✔️ 반응형 웹페이지 만들기 ✔️ Hooks - useReducer 써보기 ✏️ 23기분의 세션이 있었는데 퍼포먼스도 물론 뛰어나시지만 태도나 마음가짐에서 배울점이 많은 분인 것 같다는 생각이 들었다. 일단 말투나 내용에서 긍정적인 분위기가 엄청나게 났는데 보고 아 정말 개발을 즐기시는 분이구나 싶었다. 이런저런 조언도 해주셨는데, 재밌는걸 찾아서 하고 그렇게 하다보면 다 배우게 되어있다고 하셔서 재미만 찾아다니는 나에게는 뭔가 굉장히 동기부여가 되기도 했다. 그리고 혼자 토이.. 2021. 2. 20.
210218_TIL 🍎 오늘 한 일 ✔️ 투두리스트 App 만들어보기 Hooks를 이용해서 할일을 체크하는 todo list 앱을 간단하게 만들어봤다. useState, useCallback, useRef를 사용해봤는데 역시 개념만 봤을 때는 무슨소린가 싶던게 직접 만들어보니까 조금씩 알 것 같았다. 특히 useCallback은 그냥 모든 함수에 습관적으로 써야할 것 같다. + input과 button의 이벤트를 한번에 관리하기 위해 form태그도 써봤는데 onSubmit에 이벤트핸들러 함수를 작성하면 돼서 편한 것 같다. ✔️ SCSS CSS와 비슷하게 생긴 SCSS를 사용해봤다. 클래스 안에다가 중괄호를 연속해서? 쓰는 식으로 사용하는데 일렬로 나열해서 쓰던 CSS보다 확실히 컴포넌트나 요소들간의 관계나 상태에 따른 스.. 2021. 2. 19.
210217_TIL 🍎 오늘 한 일 ✔️ React - Youtube 클론코딩 유튜브 API를 이용해서 검색 기능을 구현하는 걸 가장 먼저 진행했다. url의 쿼리부분을 이용해서 키워드에 따라 플레이리스트에 있는 영상들이 바뀌도록 했고, 리스트 중 클릭한 영상을 메인 영상으로 보여주도록 만들었다. 그리고 나서 페어분과 디자인과 댓글, 서버 등 기능들을 추가로 덧붙여보기로 했다. 댓글을 등록하면 서버에 POST 요청을 보내 데이터가 추가되고, 댓글 컴포넌트도 화면에 하나 더 추가된다. 각 댓글에는 좋아요, 싫어요 기능이 있어서 클릭하면 숫자가 증가하고 이 버튼들도 마찬가지로 누르면 서버에 POST요청을 보내 도록 했다. 여기서 좋아요 개수를 기반으로 정렬을 할 수 있도록 댓글 정렬 기능도 추가했다. 정렬버튼을 누르면 인기순 .. 2021. 2. 18.
210216_TIL 🍎 오늘 한 일 ✔️ Toy - Insertion sort 삽입정렬 알고리즘을 이용해서 배열을 순서대로 정렬하는 문제였다. 저번에 풀었던 bubble sort와 비슷한 느낌이었는데, 뭔가 그렇게 효율적인 정렬방식은 아닌것 같다는 느낌이 들었다. ✔️ React - Hooks 함수형으로 컴포넌트를 선언할 때도 상태 관리를 가능하게 해주는 Hooks에 대해 공부했다. 클래스형에서 setState를 썼던 것 처럼 함수형에서는 useState, useEffect 등이 있었다. useStates는 한 함수당 하나의 상태값을 관리하게 해줬고, useEffect는 기본적으로 렌더링 직후에 실행되며 특정작업을 실행하게 설정할 수 있게 해준다. 이 외에도 좀 더 다양한 상태를 다른값으로 업데이트 할 때 쓰는 useRed.. 2021. 2. 17.
반응형

티스토리툴바