가수면

errors.email?.type과 errors.password 둘 다 undefined일 때는 버튼이 활성화되도록 조건을 주었다. 분명 맞게 쓴 것 같은데 자꾸 안 되어 아래처럼 해주었더니 적용되기 시작함. 논리곱을 잘못 이해하고 있었다. ~~and ~~가 아니라 왼쪽 값이 트루여야 오른쪽으로 넘어간다는 건데...

포트폴리오에 넣을 프로젝트를 새롭게 시작했다. 기획했었던 아이템도 중간에 엎어지고 새로운 기술 스택도 도입하려다 보니 많은 것들을 하진 못했지만, 머리 터질듯 고민했었던 코드들도 있었다. 이번 주 익힌 것들 타입스크립트 (계속 공부 중) 리액트 쿼리 v4 (계속 공부 중) 라우터 v6 React Hook Form 라이브러리 달력 구현하기 (공휴일 적용) 트러블 슈팅 - React Hook Form에 유효성에 따른 css 입히기 - 라이브러리는 최대한 덜고 가고 싶었지만 React Hook Form도 한번 다뤄보자는 팀원의 말을 따르기로 함. 유효성에 따라 alert창 없이 인풋창의 테두리 색이 서서히 바뀌었으면 좋겠다는 요구를 반영하던 중, 라이브러리를 커스텀하는 데 어려움이 있었다. 해결 과정 및 해결..

이번 주차엔 velog를 클론 코딩하는 프로젝트를 진행했었다. 프로젝트 이름은... consolog다. 처음 코딩을 시작하고 남들 다 부트스트랩 쓰며 토이프로젝트를 만들 때 굳이 css만 쓰며 머리 깨졌었던 경험이 굉장히 큰 도움이 되었다. 개인적으론 똑같이 뷰따는 건 어렵지 않았는데, 디테일한 애니메이션을 넣는 작업들엔 어려움이 있었다. 갑자기 추워진 날씨 탓에 팀원들의 컨디션이 안 좋아져 비록 생각했었던 기능과 페이지를 구현하지 못한 부분들은 조금 아쉬웠지만, 만들고보니 제법 그럴싸해 만족스럽다. 이번 주차에 내가 구현한 기능들 메인, 상세페이지 만들기 분기별 헤더 변경 (로그인/비로그인, 메인/상세) 메인 페이지 트렌딩, 최신 GET / 상세페이지 R D / 댓글 CRUD axios 인스턴스화 트러..

주차에 배운 것들 styled-components 숙달 defaultProps, 컴포넌트 내 선택자 사용, 컴포넌트 속성 재정의, 컴포넌트 재활용, 조건부 컴포넌트 출력, 글로벌 스타일 'react-cookie'를 활용한 로그인, 회원가입 기능 구현 axios 인스턴스, 인터셉트 baseURL 인스턴스로 만들고 env적용 인스턴스와 인터셉트를 활용한 토큰 보내기 트러블 슈팅 - styled-components 사용에 대한 문제 - 버튼과 인풋창, div를 컴포넌트화하는 작업에서 컴포넌트 하나로 전부 돌려쓰겠다는 생각을 하다보니 선택자, 속성 props 등 라이브러리 사용에 대한 어려움을 겪은 문제 해결 과정 및 해결 (1) 평소대로 구글링해봤지만 원하는 결과를 얻지 못함. (2) 찾다가 찾다가 못 찾아서..

리덕스와 리덕스 툴킷을 배울 때까지만 해도 쉬웠었는데 axios로 서버와 통신하는 순간부터 어느 때보다도 많은 에러를 접할 수 있었던 주차였다.. 생소한 axios와 thunk를 접하며 비동기까지 섞이니까 확실히 지금까지 배운 과정 중에선 제일 어려웠던 듯... 그래도 쓰다보니 익숙해지긴 했지만 axios를 사용하는 다른 방법들이 또 있다고 하니 다음 주차엔 배운 것들을 다지며 채워나가는 시간을 가져야 할 것 같다, 이번 주차에 한 것들 작성한 redux코드들을 redux toolkit으로 전환 () axios와 thunk를 이용한 get, post, delete, patch extra reducers 객체 표기법으로 썼다가 RTK 2.0에서 객체 표기법이 삭제될 것이라는 말에 빌더 콜백 표기법으로 수정..

이번 주는 리덕스와 기타 리액트 훅들을 접하고 연습하는 시간을 가졌다. 생성, 변경, 소멸에 대한 라이프 사이클에 취약했던 함수형 스타일이 떡상할 수 있었던 건 모두 리액트 훅들 덕분아니겠는가. 훅들을 연습하면 할수록, 새로운 기능을 구현해보면 해볼수록 점점 리액트라는 녀석과 제법 친해지고 있는 느낌이 든다. 기술의 발전에 따라, 지식의 축적에 따라 시간이 지날수록 개발하기 편한 환경이 조성되고 있다. C에 뒤를 이어 C++가 나오고 자바, 파이썬, 자바스크립트, 리액트, 리액트 훅... 이렇듯 편하게 코딩할 수 있는 환경에 감사한 마음도 들지만, 한편으로 AI로 인해 박살난 미술계를 보고 있노라니 미래에 대한 불안이 엄습해오는 것도 사실이다. 그런데 뭐, 별 수 있나. 실력 있는 개발자가 되어 살아남는..

이번 주차에서 익힌 것들을 정리해보고자 한다. props, state를 이용한 Todo List Todo List 구현 (CRUD) 구조 분해 할당을 통한 코드 정리 리액트 리렌더링 조건에 대한 개념 이해 스프레드 연산자의 다양한 활용법 고유한 ID값에 대한 이해 (...칭찬받음) id: `todos_${new Date().getTime() + Math.random()}` redux redux를 이용한 Create, Read기능 구현 다음 주에는 라우터를 곁들여 나머지 Update, Delete까지 구현해볼 계획이다. 아쉬웠던 점 Update와 Delete 구현에 상당히 애를 먹었었다. 특히나 Update 기능인 완료와 취소를 구현하는 데 있어서 접근법 단계에서부터 막혔었는데, 팀원들과 기술 매니저님에게..

이번 주의 대부분은 알고리즘 문제를 풀면서 보냈던 것 같다. 이를 바탕으로 한 주간 겪었던 일들을 간단히 적어보고자 한다. Javascript 함수와 친해지기 화살표 함수와 고차 함수가 중요하다는 소리를 계속 들을 수 있었다. 사실 함수 개념도 헷갈리는 마당에 그런 것들까지 신경 쓸 겨를이 있을까 했었지만... 역시 뭐든 하면 느는 법이었나. 주차를 진행하며 아래의 결과들을 얻을 수 있었다. 함수에 대한 이해도 증가 고차 함수, 삼항 연산자, 화살표 함수에 대한 숙련도 증가 ES6와 친해지기 자바스크립트의 표준과 규격을 가리키는 용어 ES. 고차함수, 화살표 함수와 더불어 ES6가 중요하다는 소리를 귀에 딱지가 앉도록 들었기에 찾은 결과를 쉽게 옮겨보고자 한다. const and let Arrow fun..

한 주를 마무리하며 큰 이벤트들을 간략하게 정리해보고자 한다. 미니 프로젝트 과정에서 새롭게 배운 것 카카오 맵 지도 API 가져와 입력된 검색 값을 브라우저에 띄우는 작업 GitHub를 터미널로만 사용하는 것이 아닌 소스 트리와 VS Code로 사용하는 법 셀레니움을 사용한 크롤링 모달 창 띄우기 애니메이션 효과 추가 겪었었던 문제와 해결 문제 1 지도 API의 경우, 본래 목표는 현 위치 버튼을 띄우고 그걸 누르면 내 현 위치로 이동해 그 주변의 값을 가져오게 하는 것이 목표였다. 그러나 현 위치로 이동은 되는데, 검색 값은 처음 중심 좌표에서 요지부동이었고, 이걸 해결하기 위해 코드를 수정하면 지도가 사라지며 작동이 되질 않는 문제가 발생했다. 미 해결 프로젝트 기간 4일 중 꼬박 하루를 사용해 이..

이번 주차는 새로운 팀원들이 모여 4일 간 미니 프로젝트를 만드는 주다. 목표로 했던 스코프를 기술 매니저님의 의견을 수용해 줄이기로 결정. 나는 사용자의 주변 지역 애견 카페를 지도에 띄우고, 해당 카페들을 크롤링해와 카페명, 주소 등을 목록화하고, 해당 카페들에 댓글을 달 수 있는 기능을 담당하게 되었다. 즐겨찾기 기능은 덤. 그리고 아무리 수정해도 지도의 위치가 고정되어 움직이지 않는 등 역시나 쉽지 않다... 지도 api 활용 라이브러리라 정해진 틀을 바꾸기 쉽지 않다. 지도 위로 버튼이나 이미지를 띄우는 것이나 정해진 라이브러리의 기능을 벗어나는 기능('키워드로 검색'에 중심 좌표를 옮기려는 행위 등)은 건드릴 수 없는 듯 하다.

이번주 작성한 TIL을 읽어보며 휘발되었었던 개념들과 휘발될 것 같은 개념, 각 챕터의 문제들을 다시 풀어봤을 때 안 풀렸던 문제들을 정리해보고자 한다. 이론 &&(논리곱) 둘 중 하나라도 false라면 false 반환. 그렇기에 프로그램은 양쪽 모두 확인하게 됨 왼쪽이 true면 오른쪽을 뱉음 왼쪽이 false면 왼쪽 을 뱉음 ||(논리합) 둘 중 하나라도 true라면 true를 반환. 그렇기에 앞에 것이 true라면 뒤에 걸 확인하지 않음. 왼쪽이 있다면 왼쪽을 뱉고, 왼쪽이 없다면 오른쪽을 뱉음 for in vs for of for in => 숫자 for of => 요소 for in 좀 더 구체적인 예시 const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업'] for ..

토이 프로젝트 때 터미널 명령어로 팀원들과 굉장히 복잡하게 협업을 했었던 것이 Sourcetree를 사용하니 굉장히 우스워져 버렸다.(도구의 위대함...!!!) 그렇다고 삽질했던 그 경험들이 의미 없진 않았다. 그 경험 덕에 강의 내용을 따라가기 너무도 수월했고, 이게 왜 안 될까 골머리를 앓았던 경험들은 시스템적인 개념을 이해하는 데 도움이 되었다. 그런데 하다보니 문득 궁금증이 생겼다. Git 도대체 무슨 원리일까? '어떻게 git은 바뀐 코드들을 바로바로 캐치하고 이걸 띄워서 사용자에게 보여주는 걸까?' 찾아본 내용을 간단하게 요약해보자면, init을 하며 만들어진 .git 폴더 안의 내용물 중에는 Working Tree (Working Directory)라는 것이 있는데, 그곳으로 add된 파일들..

토이 프로젝트 도중 현재 상영작을 포스트 하는 방식에서 문제가 생겼다. 데이터를 크롤링해서 저장하는 과정에서 mongo DB에 순서대로가 아닌 랜덤으로 저장되는 문제가 발생했고, 이를 가져오다 보니 순서가 뒤죽박죽으로 섞여서 출력되는 상황으로 이어졌다. 때문에 페이지를 열 때마다 아예 출력이 안 되거나, 새로고침할 때마다 순서가 달라지는 문제도 있었다. 문제 해결 과정 1. 원인 찾기 이를 해결해보기 위해 먼저 팀원이 적어놓은 코드가 정상적인 코드인지를 확인해보기로 했다. 기본 세팅 코드들만 남긴 뒤 돌려보니 정상 작동되는 것을 확인했다. 그러나 다시 @app.route('/') def home(): return render_template('index.html') . . [POST] . . [GET] ..

오늘도 즐거운 코딩 공부~ 1. 영화 목록 창 위 사진의 문제를 해결하기 위해 display: flex를 주었었는데, 그럴 경우 영화가 지정된 범위를 벗어나 정렬되어버리는 바람에 어찌할 바를 몰랐었던 것을 드디어 해결했다. 방법은 flex에 아래와 같은 코드를 붙여주면 됐다. flex-wrap: wrap; 2. 메뉴 창 뷰포트를 수정하고 메뉴창을 정렬시키는 과정에서 아래 사진과 같은 문제가 발생했다. hr도 건드려보고 온갖 삽질을 했었지만, 원인은 @media 설정을 해주면서 길이를 그대로 가져간 것이 문제였다. 메뉴 창의 길이를 450px로 지정해둔 상태다 보니 450px 이하로 줄어드는 순간 칸이 줄어들지 않고 공간을 밀어내는 것이다. @media를 줄 때는 width와, margin을 다시 수정해주..

팀원이 로그인 회원가입 버튼을 만들어달라고 해서 추가했다. 행렬에 대해 조금 익숙해진 터, 사용한 코드들의 큰 개념을 한 번 정리해놔야 할 필요성을 느꼈다. 줄 display: inline; 줄바꿈 없이 순서대로 한 줄에 보이도록 해줌 width와 height 속성을 지정해도 무시하는 특징이 있음. float: left; 비슷한데 한줄로 착착 쌓음. 이렇게 사용하면 display랑 다르게 묶이지 않고 독립적인 영역으로 사용 가능...? display: block; 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지. display: inline-block; inline처럼 순서대로 한 줄에 보이도록 해주면서 block처럼 width와 height 지정도 가능해지는 하이브리드 코드. display: ..

오늘의 목표는 프로젝트의 마무리! 1. 상단바에 반응형 적용 사진처럼 pc에서는 정상적인 듯한 모습이지만, 제대로 나오지 않는 모습이다. 코드를 조금 지저분하게 짠듯하여 스타일을 갈아엎기로 했다. .menu { font-size: 45px; display: flex; flex-direction: row; justify-content: center; align-items: center; } 가운데 정렬 사총사를 .menu에 적용시켜주고, @media (max-width: 600px) { .menu { font-size: 35px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: ce..

아직 구현하지 못한 프로젝트의 나머지 기능들을 구현해보고자 한다. 1. D-day 구현하기 만들려고 하는 것이 구글에 돌아다니는 d-day 만들기와는 구조적으로 조금 달라 상당히 해멨지만, 직관적으로 어렴풋이 복잡하진 않을 것 같다는 느낌이 들었다. 그렇게 코드를 이해하는 데 상당한 시간을 들이길, 지금 상황에서 불필요한 코드들을 전부 쳐내고 심플하게 접근하는 방법으로 원하는 기능을 구현해낼 수 있었다. let today = new Date() let dDay = new Date(date) let remain = today - dDay let diffDay = Math.floor(remain / (1000 * 60 * 60 * 24)) 2. D-day가 0이 되면(영화가 개봉하면) 목록에서 없애기 if ..

토이 프로젝트 3일 차. 진행 상황과 그 과정에서 겪은 몇 가지 이슈에 대해 다뤄보고자 한다. 이슈 1. 프린트 공백 드디어 어제 골머리를 싸매게 만들었던 문제를 동기의 도움을 받아 해결했다! (동기 사랑 나라 사랑!) tagTemp = '#contents > div.wrap-movie-chart > div.sect-movie-chart > ol:nth-child(number) > li' for i in range(4,51,2): tag = tagTemp.replace('number',str(i)) movies = soup.select(tag) for movie in movies: title = movie.select_one('div.box-contents > a > strong').text print(..

문제 크롤링을 하다가 문제에 부딪혔다. 배운 대로 크롤링을 하기 위해 2022.10.29(토)에 있는 영화의 제목들을 'selector 복사' 해왔다. #contents > div.wrap-movie-chart > div.sect-movie-chart > ol:nth-child(4) > li:nth-child(1) > div.box-contents > a > strong #contents > div.wrap-movie-chart > div.sect-movie-chart > ol:nth-child(4) > li:nth-child(2) > div.box-contents > a > strong 아래와 같이 중복되는 부분을 잡고 그 제목 부분을 추출해냈다. movies = soup.select('#content..

목표 각 조원이 아이디어 낸 것을 투표한 결과, 우리 조는 cgv 홈페이지를 크롤링해보기로 했다. 내가 구현해야 할 기능은 아래와 같다. 상영예정작 페이지를 만드는 것으로, cgv 홈페이지에서 포스터, 제목, D-day, 예매율, 개봉 날짜를 크롤링해와야 할 것으로 보인다. 진행상황 cgv, 무비차트, 상영예정작, 코멘트 남기기에 해당 페이지로 넘어갈 수 있도록 각각 하이퍼링크 걸어놓음 구글과 함께 html 틀을 완성시켰다. 아래 포스터 만드는 부분에서 꽤 시행착오를 겪었다. 처음엔 배운 대로 부트스트랩을 이용해보려고 했는데 카드박스의 실선이 제대로 표시되지 않아 한참을 뒤적인 결과, 부트스트랩 스크립트를 따로 추가해줘야 한다는 걸 알았다... (강의 땐 템플릿을 그냥 무지성 복붙 해서 스크립트 추가해줘..