분류 전체보기

TIL] 2021/08/17

오늘의 공부 자바스크립트 자바스크립트 (딥 다이브)를 읽었습니다. 확실히 실행 컨텍스트를 어제 읽은 부분을 다시 읽으니 처음보다 이해가 잘 되었습니다! 인프런 김태원 님의 자바스크립트 알고리즘 문제 풀기를 수강하였습니다. forEach, map, filter, reduce 메서드의 작동원리에 대해 배웠습니다. 기초 부분에 대해 한번 짚어서 공부하니 확실히 도움이 많이 되는 것 같습니다! 타입스크립트 드림 코딩 엘리님의 강의를 들으며 모션 프로젝트를 진행했습니다. 타입스크립트로 프로젝트를 진행하는 건 어렵지만 재미있는 것 같습니다! 리액트 벨로퍼트님의 모던 리액트를 참고하여 공부하였습니다. 커스텀 훅에 대해 배웠고 다음 토이 프로젝트 때 커스텀 훅을 적용시켜 프로젝트를 만들 예정입니다! 커스텀 훅은 코드의..

Redux] 리덕스 툴킷에 대해

리덕스 툴킷이란 무엇일까요? 리덕스 툴킷은 리덕스를 더 사용하기 쉽게 만들기 위해 리덕스에서 공식 제공하는 개발도구입니다. Redux 사용 시 문제점 기존 리덕스는 스토어를 구성하는 것이 복잡합니다. 리덕스가 유용해지려면 추가적으로 여러 패키지들이 필요합니다. 한 작업에 필요한 코드 양이 많습니다. 리덕스 툴킷 설치 npm install @reduxjs/toolkit 사용 방법 createSlice 액션과 리듀서를 전부 가지고 있는 Ducks 패턴입니다. createSlice({ name: '액션의 경로를 잡아줄 이름', initialState: [], //액션으로 구분을 준 리듀서 reducers: { //액션을 선언하고 해당 액션이 dispatch되면 state를 가지고 액션을 처리합니다. actio..

ErrorNote] 리액트&리덕스 토큰이 정상적으로 들어오지 않는 현상

export const logInDB = (user_info) => async (dispatch, getState, { history }) => { const username = user_info.username; const password = user_info.password; try { const login = await instance.post('/login', { username, password, }); const login_info = { token: login.data.token, username: login.data.username, }; ------------------------------ //dispatch(SetUser(login_info)); //history.replace('/'..

TIL] 2021/08/16

오늘의 공부 자바스크립트 인프런 김태원 님의 자바스크립트 알고리즘 문제 풀기를 수강하였습니다. 알고리즘 문제에 대한 접근과 문제를 푸는 방식에 대해 배우는 게 너무 재미있었습니다! 자바스크립트(딥 다이브) 를 읽었습니다. 실행 컨텍스트 부분은 아직 어려워서 읽은 부분들이 잘 생각이 나지 않아 내일 다시 처음부터 읽을 생각입니다! 타입스크립트 드림 코딩 엘리님의 강의를 들으며 모션 프로젝트를 진행했습니다. 타입스크립트로 프로젝트를 진행하는 것은 역시 어려웠습니다.... 열심히 공부해서 프로젝트를 완수하고 여러 번 복습할 예정입니다! 리액트 벨로퍼트님의 모던 리액트를 참고하여 공부하였습니다. 리액트 훅에 대해 공부를 하였는데 리액트 훅을 제가 정확하게 아는 것이 아니라는 생각이 들어 내일은 벨로퍼트님의 모던..

TIL] 2021/08/15 및 8월 둘째 주 WIL

오늘의 공부 자바스크립트 노마드 코더님의 바닐라 JS로 크롬 앱 만들기를 완강하였습니다. 날씨 API를 활용하는 법을 배웠는데 현재 이용자의 위치를 알아내는 함수인 getCurrentPosition은 정말 흥미롭고 대단한 것 같습니다! // 사용방법 function onGeoSuccess(매개변수) { const lat = 매개변수.coords.latitude; const lon = 매개변수.coords.longitude; } function onGeoFail() { //위치 정보에 대한 처리를 실패했을 때의 처리 } navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoFail)​ 자바스크립트 (딥 다이브)를 읽었습니다. this는 정말.....😭 ..

TIL] 2021/08/14

오늘의 공부 자바스크립트 노마드 코더님의 바닐라 JS로 크롬 앱 만들기 강의에서 투두 리스트를 만들었습니다. 투두 리스트를 만드는 것은 리액트로도 많이 해보았는데 자바스크립트로 만들어보니 색다르고 재밌었습니다! 자바스크립트(딥 다이브)를 읽었습니다. 자바스크립트로 알고리즘 한 문제를 풀었습니다. 벨로퍼트님의 모던 리액트의 기초 부분을 읽고 실습했습니다! 타입스크립트 컴파일에 대한 공부를 했습니다! 타입스크립트로 이제 곧 프로젝트를 시작하는데 타입스크립트로 프로젝트를 진행하는 것은 어렵지만 과정도 재미있고 완성했을 때 뿌듯할 것 같아 기대가 됩니다! 토이 프로젝트 뷰를 완성하고 회원가입을 구현했습니다! 뷰를 그릴 때 theme과 최소 단위 컴포넌트를 사용하는데 손에 익숙하지 않아서 자잘한 실수를 많이 하는..

TIL] 2021/08/13

오늘의 공부 자바스크립트 노마드 코더님의 바닐라 JS로 크롬 앱 만들기 강의에서 시간을 추가하고 10개의 명언을 추가한 뒤 그 명언을 랜덤으로 나오게끔 만들었습니다! 자바스크립트 (딥 다이브)를 읽었습니다. 자바스크립트로 알고리즘 한 문제를 풀었습니다. 엘리님의 타입스크립트 강의에서 자바스크립트 강의 복습을 진행하였습니다. this와 promise 그리고 module에 대한 것을 공부했습니다. this는 자바스크립트에서 정말.......😭... 헷갈리게 하는 요소인 것 같습니다. 하지만 전에 공부했던 내용이어서 한번 되짚어보니 처음보다 어렵지 않았습니다! 프로미스도 선행학습을 해둔 것이 있어서 많이 어렵진 않았지만 헷갈릴 수 있어 조심히 사용해야 할 것 같습니다. 모듈에 대해서 배울 땐 제가 리액트에서 ..

TIL] 2021/08/12

오늘의 공부 자바스크립트 노마더 코더님의 바닐라 JS로 크롬 앱 만들기 강의에서 자체적으로 브라우저의 로컬 스토리지를 통해서 데이터를 유지하는 법을 배웠습니다. 자바스크립트(딥 다이브)를 읽었습니다. 자바스크립트로 알고리즘 한 문제를 풀었습니다. 타입스크립트 다양한 유틸리티 타입을 배웠습니다. 타입스크립트는 정말 어려운 것 같습니다... 열심히 공부해서 타입스크립트를 자유자재로 쓰고 싶습니다..! 토이 프로젝트 로그인 유지와 글 삭제 기능을 구현하였습니다. 토이 프로젝트는 기간을 정하지 않으면 너무 긴장감이 없을 것 같아 기간을 정해놓고 진행을 하는데 수정 기능을 시간이 부족해서 구현하지 못한 것이 너무 아쉽습니다. 하지만 토이 프로젝트를 통해 많은 것을 배우고 저번 프로젝트 때보다 많이 발전한 것 같아..

이미지 커뮤니티

프로젝트 개요 이미지를 업로드하고 간단한 게시글을 작성할 수 있는 사이트입니다. 팀 토이 프로젝트를 하면서 느낀 점 API 설계의 중요성과 프론트엔드에서 데이터 관리의 중요성을 느꼈습니다. 데이터 관리가 미숙하다 보니 실수가 많았고 정해진 기간 내에 모든 기능을 넣지 못했습니다😭 하지만 실패는 성공의 어머니라고 저번 프로젝트 때 실패한 Read를 구현하여 기분이 좋았습니다. 프로젝트를 하며 어려웠던 점 데이터 관리와 리덕스 툴킷을 사용하는 것이 어려웠습니다. 프론트엔드에서 정말 중요한 데이터 관리에 대해서 공부를 열심히 해야겠다는 생각이 들었습니다. 리덕스 툴킷은 프로젝트를 하면서 점점 이해가 되는 것 같아 기분이 좋았습니다🥰 토이 프로젝트는 정말 재미있는 것 같습니다. 하지만 재미있는만큼 어려웠고 배운..

TIL] 2021/08/11

오늘의 공부 자바스크립트 노마드 코더님의 바닐라 JS로 크롬 앱 만들기 강의 자바스크립트로 웹 조작하는 법을 배웠습니다. 제로초님의 강의를 통해 배운 것들이 많아서 이해하는 것에 어려움이 덜 했습니다. 자바스크립트 (딥 다이브)를 읽었습니다. 프로토타입은 아직 어렵지만 프로토타입을 통해 메서드를 계속 생성을 하지 않을 수 있다는 것이 기억에 남았습니다! 메서드를 계속 생성하게되면 성능 저하가 올 수 있기 때문에 메서드를 중복 사용한다면 프로토타입을 사용해야 할 것 같습니다! 마지막으로 자바스크립트로 알고리즘 한 문제를 풀었습니다! 타입스크립트 Type Alias와 Interface의 차이점에 대해 배웠습니다. 타입스크립트는 아직은 익숙하지 않아서 어렵게 다가오는 것 같습니다. 타입스크립트로 프로젝트를 얼..