본문 바로가기

Daily89

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.
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.
210215_TIL 🍎 오늘 한 일 ✔️ React - Recast.ly 유튜브 페이지처럼 데이터에 따라서 영상 목록이 쭉 뜨고, 목록에 있는 영상들 중 중 하나를 선택하면 해당 영상을 볼 수 있는 플레이어가 뜨는 페이지를 리액트를 이용해서 만들었다. 그래도 처음 접했을 때 보다는 편리함을 아주 조금씩 느껴가고 있는데, 데이터 흐름이 일방통행이기 때문에 뭔가 좀 더 복잡한걸 만들게 되면 꼭 각 컴포넌트의 기능과 관계도, 데이터 흐름도를 정리해야겠다는 생각이 들었다. 컴포넌트 단위의 개발에 최적화된 스토리북이라는 도구도 써봤는데 스토리북도 잘 알아두면 유용하게 쓰일 것같아서 (리액트부터 마스터하고) 공부해봐야겠다.! ✔️ Toy - BFS DFS방식을 조금 응용해서 BFS 문제도 풀어보았다. DFS에서의 깊이가 결국 BFS에.. 2021. 2. 16.
210212_TIL 🍎 오늘 한 일 ✔️ React - Lifecycle 이해 페이지가 렌더링되기 전부터 사라질 때까지 컴포넌트는 수명주기라는 것을 갖는다. 모든 컴포넌트는 마운트, 업데이트, 언마운트 세 가지 단계를 거치는데 각 단계별로 몇개의 메서드들이 정해진 순서대로 호출된다. 이렇게 호출되는 메서드들을 lifecycle 메서드라고 한다. 마운트 단계는 DOM 생성 이후 웹 브라우저상에 나타나는 단계이고, 업데이트는 마운트 이후 컴포넌트의 props, state등 변경사항이 생겼을 때를 말한다. 언마운트는 컴포넌트가 DOM에서 제거되는 시기로 말 그대로 컴포넌트 소멸시기라고 할 수 있다. 컴포넌트를 하나 만들고 각 메서드들이 실행되는 시기와 내용을 콘솔창을 통해 눈으로 확인해보니까 좀 더 이해가됐다. 첫 렌더링을 마친.. 2021. 2. 13.
210210_TIL 🍎 오늘 배운 것 ✔️ React 말로만 듣던 리액트를 드디어 배웠다. 아예 처음 접해봐서 공식 가이드부터 봤는데, 생긴걸 보니 일단 당황스러웠다. 자바스크립트랑 HTML이 막섞여서 약간 보기 불편하고 혼종같은느낌..이들었다. 트위틀러를 만들기 전에 좀 익숙해지려고 예제들을 계속 따라해보니까 전체적인 흐름을 조금씩 알 것 같았다. 그리고 사실 지금까지 배웠던 this, OOP같은 개념들을 조금 지나면 까먹지 않을까 하고 걱정했었는데 리액트에서 정말 자주쓰여서 쓸데없는 걱정이었단 것도 깨달았다.. 갑자기 너무 많은 개념들이 쏟아져 들어오기도 했고 내일 보면 또 다시 낯설 것 같아서 설 연휴동안은 리액트에 익숙해지도록 계속 써봐야겠다. ✔️ React로 Twittler 만들기 전에는 순수 HTML, Java.. 2021. 2. 11.
210209_TIL 🍎 오늘 한 일 ✔️ Express Node.js 에 내장되어있는 http 모듈을 이용해 만들었던 http 서버를 express라는 프레임워크를 사용해 리팩토링 했다. 진짜 훠얼씬 간단하기도 하고 미들웨어 종류도 엄청 많았다. get, post, options같은 HTTP 메서드들도 그렇고, url 에 따라 라우팅을 할 때도 그렇고 원래는 if문을 통해 일일이 구분해줬었는데, 아예 자제적인 요청 메서드들이 내장되어있었고 라우터도 제공해줘서 굉장히 간단하고 편했다. 가장 많이 쓰인다는 미들웨어들을 써봤는데 HTTP body(payload) 부분을 받아오게 도와주는 body parser, 모든 요청이나 응답에 cors 헤더를 아예 붙여줘서 따로 헤더를 작성해줄 필요가 없는 cors를 사용해봤다. 직접 콘솔창.. 2021. 2. 10.
210208_TIL 🍎 오늘 한 일✔️ Chatter Server 어제는 이미 구축되어있는 AWS 서버와 연결했었는데, 오늘은 대신 Node.js를 이용해 localhost와 연결해봤다. 서버를 생성하는 곳과 실제로 요청을 처리하는 파일을 구분했는데, 각 파일에서 모듈을 export로 내보내고 다른곳에서 require을 통해 받아와 사용하기도 했다. 작성한 코드를 토대로 처음으로 서버 API 문서도 작성해봤는데 그렇게 많은 내용은 아니었지만 약간 진짜 개발자가 된 느낌이었다ㅎ ✔️ fs모듈로 데이터 관리하기 따로 데이터를 관리하는 json 파일을 만들어 두어 서버가 꺼졌다가 켜져도 데이터가 유지되도록 했다. readFile 메서드로 데이터를 읽어오고, writeFile 메서드로 받아온 데이터를 파일에 추가로 써주어서 해결할.. 2021. 2. 9.
반응형

티스토리툴바