목록전체 글 (150)
On a couch
기술 회고 이슈 노트 : 잘 이해되지 않았던 개발 기술이나 부족했던 기술 Http / Https, 쿠키, 세션, 토큰 등 통신/보안 과정을 이해하고 코드로 구현하는 것 React 상태 변경과 의존성, 컴포넌트 렌더링 순서에 대한 이해 Redux 의 reducer와 store 관리 방식 sementic한 HTML 마크업과 CSS 컨벤션 적용 좋았던 점 백엔드와의 협업을 통해 Http 통신이 코드에서 실제로 표현되는 방식을 알고 사용 가능한 기능을 완성했다. React-redux, redux-persist 등 필요한 기능이 있을 때 스스로 검색해서 공부하고 적용하는 과정을 통해 자신감을 얻었다. Styled component의 활용 방식에 조금 더 익숙해졌고, login, tab, tag 등 자주 쓰이는 U..
배운 것 게시판의 글 작성/수정 부분을 요소로 작업해 두었는데, 이걸 에디터 라이브러리로 교체했다. 에디터 라이브러리가 이렇게 많은 줄도 처음 알았고, WYSIWYG이 특정 라이브러리 이름이 아니라는 것도 처음 알았다. html 파싱 돕는 라이브러리도 너무 많아서 가장 많이 사용되는 걸 검색해서 dompurify로 썼다. 에디터 적용하면서 참고한 튜토리얼 [react] 간단한 리액트 게시판 만들기 : WYSIWYG ckeditor - ① 인터페이스 에디터는 글에 적용된 스타일 태그를 포함한 string 덩어리를 주므로, 이걸 db에 저장했다가 페이지를 열 때마다 가져와서 파싱해야 한다. 이 때 파싱한 결과를 div에 주입하면서 innerHtml을 직접 수정하게 되는데(위험하니까 하지 말라고 배운 거..)..
배운 것 글 수정 기능을 구현하던 도중 다음과 같은 오류를 만났다. 구현하려던 것 : 위에 있는 input (textarea) 창에서는 자유롭게 수정을 하고, 밑에 있는 Original Body 부분에서는 기존 글 내용이 보여져야 한다. 만난 오류 : 기존 글 내용을 useEffect 안에서 axios로 받아온 뒤, 해당 내용을 input 의 body 상태로도 넣었다. 그 뒤 다시 body 상태의 내용을 value Original Body의 내용으로 넣었다. const [body, setBody] = useState('') let originalPost = body const getOriginalPost = () => { axios .get(`/v1/${mode}/${id}`) .then((res) =>..
이전 상태 부트캠프 세션을 통해서 하루동안 redux의 개념을 배우고 또 하루 동안 예제를 통해 실습을 했다. 그런데 당시에는 react를 배운 지도 얼마 안 돼서 props의 오르내림에 대한 개념도 오락가락 하는 상태였다. 그 위에서 redux를 배우고 있자니 어디까지가 react의 기능이고 어디까지가 redux의 기능이며 그 기능 뒤에서 어떤 함수가 작동하고 있는지도 파악이 너무 어려웠다..! (울고 싶었음) '내가 지금 당장 이해하기에는 복잡한 기능이다'라는 생각에 한동안 손을 떼고 있었는데, 얼마전에 todolist 만들면서 기능 추가할 때마다 어마어마한 props 이동이 필요한 걸 보고 겁이 났다. 아.. 이대로 프로젝트 만들면 props 수정하다가 토하겠다.. 상태 관리가 필요할 수밖에 없는 ..
이번 회고는 KPT보다는 주절주절 적어봐야겠다. 섹션3 마무리 기간부터 섹션4 중반까지가 나에게는 가장 큰 고비였다. 가장 큰 문제는 스트레스 관리였다. 항상 해왔듯이 자취방에서 데스크탑으로 공부를 하는데, 이상하게 숨이 턱턱 막히고 잠이 쏟아지고 도저히 텍스트가 머릿속에 들어오질 않았다. 꾸준하게 해 오던 블로깅도 미완성인 채로 넘기는 날이 많아지니, 뭐 하나 도저히 끝맺음이 안 됐다. 의욕이 안 생기니 청소하고 밥 차려먹는 것도 버거웠다. 그때그때 도움이 될 만한 것들은 자주 해 봤다. 짧게 낮잠을 자기도 하고, 명상을 하기도 하고, 간식도 들여놓고, 저녁에 산책을 나가기도 하고, 날씨가 더워지면서는 실내 자전거를 들였다. 다 어느정도 도움은 됐다. 그런데 매일의 수업에서 받는 타격이 그에 비해 너무..
기간 오전 10시 ~ 오후 8시 정도 결과물 레포 : https://github.com/sol-namoo/colorful-todolist 배포 : https://sol-namoo.github.io/colorful-todolist/ 디자인 레퍼런스 : https://pomofocus.io/app 피그마 작업 : https://www.figma.com/file/mPPEM8nsPQyThD45Fc2373/%EA%B0%9C%EC%9D%B8%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8---todolist?node-id=1%3A3 과정 + 참고자료 State 설계 * 삼항연산자 중첩 사용법 https://jong-hui.github.io/devlog/2020/08/12/(JavaScript)-ne..
회고 그동안 야금야금 눈팅만 하던 정규표현식을 테스트자동화 공부하며 드디어 한 번 써 봤다. 테스트해야 할 경우의 수가 무려 8가지x2가지 = 16가지인데, if문 안에 그렇게 길고 지저분한 코드를 넣고 싶지가 않았다 ㅠ // Discover 카드번호는 항상 6011, 65, 644에서 649까지의 숫자로 시작하고 16 또는 19자리의 숫자입니다. let discoverPrefix = /^['6011''65''644''645''646''647''648''649']/ let discoverLength = /\d{16,19}/ if(discoverPrefix.test(cardNumber) && discoverLength.test(cardNumber)){ return "Discover" } 원하는 표현식은 '..
Point 1 실행 컨텍스트 객체에는 3가지가 담긴다 1. VariableEnvironment : 생성 당시의 모습 2. LexicalEnvironment : 생성 후의 변화 반영 3. ThisBinding : this 식별자가 바라볼 객체 LexicalEnvironment는 두 가지 정보를 담는다. (1) EnvironmentRecord : 현재 컨텍스트 내의 매개변수명, 변수의 식별자, 선언한 함수의 함수명 수집 => 호이스팅과 연관됨 (2) outerEnvironmentReference : 상위 컨텍스트의 EnvironmentReconr => 스코프와 연관됨 Point 2 호이스팅이란 EnvironmentRecord가 식별자를 수집해 미리 알고 있는 것을 '끌어올린다고 표현'한 개념이다. Envir..
Point 1. 변수는 변경 가능한 데이터가 담길 수 있는 공간이고, 식별자는 그 변수의 이름이다. 원시형 데이터타입도 결국 '데이터가 저장되어 있는 주솟값'을 참조한다. (한 단계) 참조형 데이터타입은 ''데이터가 저장되어 있는 주솟값' 을 참조하는 배열/객체의 주솟값'을 참조한다. (두 단계) 보통 초심자들에게는 여기서 한 단계씩을 빼고 설명해주느라 약간의 부정확성이 생긴다고 한다. Point 2. 깊은 복사 : 배열/객체의 껍데기와 내부 데이터의 주솟값이 모두 달라지는 복사 얕은 복사 : 배열/객체의 껍데기만 새 주솟값을 갖고, 내부 데이터의 주솟값은 여전히 예전의 것을 공유하는 복사 참조형 데이터를 복사하는 메서드는 보통 current depth에서만 주솟값을 교체하므로, 깊은 복사를 하고 싶다면..
프로젝트 하면서 몇 가지를 배웠고, 이로 인해 멘탈이 휘청했다. 1. 이때까지 급하게 씹어 넘겼던 학습 내용이 거의 소화되어 있지 않았다는 점 2. 사실상 스스로 배운 것을 곱씹어 본 적이 없었다는 점 3. 그런데 내 눈높이는 높아져서 이번 프로젝트의 목표를 욕심내어 높였다는 점 4. 그리고 결국 원하던 기능의 반도 완성하지 못했다는 점 5. 이로 인해 스스로 많은 스트레스를 받았다는 점 식욕도 너무 없었는데 '어쩌면 에너지가 없어서 더 다운되는 걸지도 몰라' 싶어서 억지로 먹고, 또 먹는 동안 멘탈을 잡아줄 오디오북을 들었다. 문제를 맞고 버티자. 버티면 그릇이 커질 것이다. 그릇이 커지면 더 이상 문제가 문제가 되지 않을 것이다.