코딩연습장

오늘 백엔드분들이 API서버를 배포해주셔서 간단하게 메인페이지의 데이터를 get할 수 있었다. 다행히 별 다른 문제 없이 잘 받아왔다. 그런데 글을 등록하는 곳에서 문제가 발생했다. 특정 데이터들을 담은 객체를 만들고 그 객체를 Thunk에 dispatch해주어야했는데, dispatch가 실행될 때 아래와같이 오류가 발생했다. Uncaught TypeError: Cannot read properties of undefined (reading 'type') 해결하려고 여기저기 뒤져봤는데 잘 나오지 않았다. 머리도 제대로 안돌아가서 일단 쉬고 일요일에 좀더 작업해 볼 생각이다. 끝.

1. 브라우저 세션 기간 동안만 사용할 수 있고, 탭이나 창을 닫으면 삭제된다. 2. 새로고침을 해도 유지된다. 3. 변경된 사항은 현재 페이지에서 닫힐 때까지 저장되어 사용할 수 있다. //밸류를 세션스토리지에 저장 sessionStorage.setItem('name', 'minkyu'); //세션스토리지로부터 밸류값 가져오기 sessionStorage.getItem('name');//minkyu //세션스토리지 밸류 제거하기 sessionStorage.removeItem('name');//name값 제거 sessionStorage.clear();//모든 값 제거

1. 사용자 세션 데이터를 유지할 수 있다. 2. 브라우저를 닫고 다시 열 때에도 지속된다. 3. 탭을 여러개 열어도 공유된다. 4. 명시적으로 삭제될 때 까지 지속된다. 5. 변경사항은 저장되어 현재 및 향후 사이트 방문 시 사용할 수 있다. ====>>>>> 사용자가 브라우저 창을 닫았을 때 데이터는 삭제되지 않으며, 만료날짜 없이 사용자 정보 데이터를 저장한다. //밸류값 local storage에 저장하기 localStorage.setItem('name','minsoo'); //local storage에 있는 밸류값 가져오기 localStorage.getItem('name')//'minsoo' //local storage에 있는 밸류 값 삭제하기 localStorage.removeItem('nam..

오늘 미니프로젝트를 시작했다. 주특기를 배우고 백엔드분들과 처음 협업하는 것이라 좀 두렵다. 백엔드분들은 이래저래 슥슥 api를 작성하고 팍팍 하는게 신기했다. 프론트엔드는 첫날 와이어프레임 짜고, api명세서 읽어보고, View를 작성하느라 정신이 없다. api명세서는 익숙하지도 않아서 이게왜 이건지,, 모를때도 많다... 오늘 희석님께서 SA작성을 주도하셨는데, 정책(제한사항)도 미리정하는 것이 신기했다. 또 github 협업 repo에서 project를 만들어 issue가 한 곳에서 확인이 가능 하도록 하는 것도 신기했다. 오늘은 딱히 trouble shooting도 없었다. 첨부파일의 크기를 확인하는정도? const foodImgChangeHandler = (e) => { //첨부파일 정보 변수화..

주특기 심화주차 팀프로젝트가 끝이 났다. 마지막에 배포하는 부분에서 문제가 발생했었다. db.json파일을 vercel로 배포했는데, vercel로 배포한 db.json은 읽기전용이어서 get요청은 잘 작동하지만, patch, post 등 데이터를 변경하는 행동은 작동하지 않았다. 다행히 동석님께서 도와주셔서 db.json을 복사해서 변환하고 그걸 동일화하는 작업을 설정해주셔서 해결이 되었지만 결국 또 동석님의 도움을 받아 ec2로 배포를 할 수 있었다. 배포는 너무 어렵다~

오늘 댓글 수정을 하는 버튼에대한 기능을 완성했는데, 수정하기 버튼을 누르면 이전에 있던 값이 input창에 미리 적어져있기를 바랬다. 그래서 수정버튼으로 수정하는 공간을 보이게 할 때 comment에 저장되어있는 commentdesc가 NewCommentDesc로 미리 setState를 해 input칸에 들어가있도록 설정했다. 아직 코로나기운이 많이 남아있어 너무 힘들다. 어지럽고 기침이나오고 목이아프고 빨리 나아서 금요일에 시작하는 프로젝트에 지장이 없으면 좋겠다.

외부에서 폰트를 파일형식으로 가져와 적당한 위치에 놓는다. 같은 위치에서 css파일을 생성해 위와같이 @font-face에 대한 font-family와 src를 설정한다. 해당 css를 import해주고, 원하는 스타일드 컴포넌트에 font-family속성을 지정해준다.

환경변수란 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임이다. 이름 자체에 어떤 변수값을 말하는데, os에서 자식프로세스를 생성할 때 참조하는 변수들 이라고 생각하면된다. env란 환경변수의 목록을 출력하거나 현존하는 환경을 수정하지 않고도 변경된 환경 내에서 다른 유틸리티를 실행하는데 사용할 수 있다. env를 사용함으로써 변수를 추가하거나 제거할 수 있으며, 기존 변수는 새로운 값을 이들에 할당함으로써 변경할 수 있다. dotenv는 환경변수를 .env라는 파일에 저장하고 process.env로 로드하는 의존성 모듈이다. 이를 사용하는 이류로는 개발과정에서 사용되는 고유 api key값, DB 접근 비밀번호 등 민감한 정보의 보안을 위해서다. 깃헙같이 오픈소스에 공개될 경우 ..

이번주는 리덕스를 활용하여 입문주차때 했던 Todolist를 만드는 것이었다. 분명 props를 사용해 state를 내려주는 것 보다는 전역상태관리가 더 효율적이라는 것은 알겠지만, 공부하는데 너무 고통스러웠다. 전에 사용했던 props는 내가 직접 내려주고 받아서 사용하다보니 뭔가 직관적이어서 이해가 쉬웠는데, 중앙store에서 state를 관리하고 그것을 뿌려주는 형식이다보니 이해가 어려웠다. 클래스, 함수형 컴포넌트 각각의 lifecycle은 예전에 정리했었다. https://codingpracticenote.tistory.com/62 Hook이란? component의 lifecycle이란? component가 리렌더링되는 조건은? Hook이란 기존 class바탕의 코드를 작성할 필요 없이 상태 값..

토요일부터 상태가 좋지 않았다. 일요일에 강의를 다 듣고 코딩작업을 늦어도 월요일에 시작해야지 했는데 일요일에 상태가 매우 안좋아지더니 월요일에도 좋지않아 이틀 내리 쉬었다. 아무래도 목요일까지 과제 완성이고, 금요일부터 미니프로젝트 시작이다보니 더 쉴수는 없을 것 같아 오늘 다시 참석하여 강의를 듣고 코딩을 시작했다. 재정님께서 내 분량도 많이 도와주셔서 팀프로젝트는 많이 진행된 상태였다. 하지만 나는 강의도 듣지못했어서 일단 빠르게 thunk부분까지 듣고 코딩을 진행했다. 아직 optimize, customhook, s3배포를 듣지 못했는데, 이는 어느정도 코드를 완성하고 들어야겠다. 오늘 강의를 어느정도 듣고, 재정님과 다른분들이 진행하신 코드를 먼저 읽었다. 이해가 가지않는 부분은 강의와 비교해가..