Youngble_개발스토리

진행중인 웹페이지 메인화면 오늘은 메인 화면을 꾸미는시간을 많이 보냈다. 위와같이 스토리라인 만들고 오른쪽엔 자신의 간략한 프로필 정보와 팔로우 추천목록을 보여준다. 이때 오른쪽페이지는 고정을 하고 왼쪽 포스트부분만 스크롤하게 해주었다. 먼저 해당 내용물이 한줄띄거나 30자 이상일때는 더보기 버튼이 보여서 눌르면 전체 글이 보이는 기능을 수정하였다. 위의 코드와 같이 content.length 가 30자이상이거나 length 변수(해당컨텐츠에서 \n가 있으면 split으로 나눠주게함, 그렇게하면 띄어쓰기가 있는 문자열은 배열의 길이라 2이상이됨) 가 1보다 클때 더보기가 활성화 되도록해주었다. 그리고 다음 보는거와 같이 반응형 웹 화면이 되는걸 볼수있다. 반응형 웹을 위해 쓴 부분중 가장 큰부분은 @me..

인스타그램 클론코딩 메인화면 메인화면에 header부분을 display: fixed 로 고정하게하고 포스트의 가로길이와 header길이를 50%로 일치하게해주었다. CSS 속성값 응용 margin에 px와 %퍼센트를 같이 쓸수있다. 지정된 width초과시 하단스크롤생성 Trouble Shooting 문제 좋아요 비동기처리소스 좋아요 기능부분에서 위와 같이 DB에서 받은걸로만 useEffect 부분에서 dispatch로 요청할려고했다. 리덕스스토어에 저장하여 state값이 바뀔때 자동으로 그부분만 랜더링하여 교체된 부분을 보여주는 방식으로 하지않았다. 이렇게했을때 하트의 색깔이나 좋아요 갯수부분이 될때도 있고 안될때도있고 원활하게 작동하지않았다. 해결소스 -> componentDidMount 부분에서 DB..

수요일까지 axios 와 postman 을 통해서 서버연결및 필요 데이터가 잘오는걸 확인했고 그걸 이용하여 CRUD +좋아요 데이터를 활용하는데 성공했지만 리덕스에 저장하여 실시간으로 보이게 하거나 새로고침시 특정페이지에서 에러가 뜨는경우가 있었는데 오늘은 그런 오류나 디테일한부분을 수정하는 시간이였다. Trouble Shooting 1.상세페이지에서 새로고침시 기존에 가지고있던 리덕스 값이 날라가서 에러가뜸 → 먼저 useEffect 을 사용하여 그안에 조건문으로 만약 해당 상세페이지의 postId에 해당하는 값이 없으면 componentDidMount 일때 다시 DB에 데이터를 요청하여 불러오도록했다. 1.1. useEffect의 componentDidMount 부분이 실행하려면 일단 한번 쭉 렌더링..

기존 인스타 화면 기존 인스타그램을 보면 댓글다는 창안에 게시 라는게 있는데 클론코딩 주차중에 이걸 오늘 넣었다. 다른것도 많이 추가했지만 이것에 대해서 써보려고한다. Input 안에 텍스트 넣기 (placeholder 아님) 클론코딩중인 내 화면 빨간 테두리처럼 input 안에 게시 라는 text 를 넣을려면 정확히는 ‘넣는게’ 아니고 position을 absolute 로 절대값을 줘서 겹쳐도 밀리지 않고 그 위로 뜨게 해준다. 그리고 position의 위치를 오른쪽 끝에 둬야하므로 position 과 같이 쓰는 left 를 전체화면의 70% 로 주어서 해당 위치에 뜨게한다. 이렇게 안쓸때는 연한색으로 클릭을 안하게하고 글을 쓰면 게시가 찍해지면서 클릭할수있게 해주는건 comment_text.lengt..

로그인 유지를위해 cookie, localStorage를 이용해야했다. 새로고침하면 redux에 있던 기존 데이터가 날라가면서 로그인이 유지가 안된다 따라서 cookie 와 localStorage에 기록을 남겨 새로고침시에도 데이터가 날라가지 않아서 그것을 이용하여 유지하도록 한다. 위와같이 module 부분 user에서 axios 로 로그인을 요청후 response로 받게되는 token 값을 localStorage.setItem을 이용하여 "token" 이라는 이름으로 그값을 넣고, 현재 유저정보도 axios 로 요청하여 response 얻게된걸 localStroage.setItem에 "nickname"이라는 변수로 닉네임을 넣어주었다. nickname까지 넣어준건 새로고침시에도 nickname 이라는..

미니프로젝트 보여줘 홈즈 다방 과 같은 집을 구하거나 입주자를 구하기위한 소셜 커뮤니티 사이트이다. 요번주는 그전주에 배운걸 프론트엔드 +백엔드 협업 과정을 배웠다. 안그래도 그전주까지 파이어베이스를 이용하여 서버와 연동하고 데이터상태관리, 컴포넌트 구성등을 따라가느냐고 복습할시간도 없고 정리할시간도 많이 없었는데 그걸 이용해 파이어베이스를 버리고 백엔드로 서버를 구축하고 DB 를 만든걸 써야했는데, 처음 2틀간 그전에 배운걸 조금 다시 복습을 하면서 큰틀은 지난주걸 참고하고 그대로 쓰되 이해하면서 처음부터 다시 틀을 잡았다. 우리가 필요한 컴포넌트와 페이지를 와이어프레임에 넣었고, api 를 통해 무엇을 백엔드와 프론트간에 똑같이 써서 request,response를 받을지 정하였다. 처음이라 그런지 ..

깃, 깃허브 정리 (협업) 깃허브 배포자 Repo 를 만들고 만들고난후 메인페이지에서 나오는 순서대로 진행하여 init 과 branch 를 main 으로 바꾸어준다. 그리고 setting 에서 Manage Access 에서 같이 협업할분을 초대한다. 깃허브 협업자. 초대를 받은 access를 승낙을 한후 클론할 폴더를 새로 만들고 그 폴더안에서 git clone [주소] 를 해준다. 그리고 git branch [이름] 으로 자기가 따로 쓸 브랜치를 만들어주고 git checkout 으로 만든 브랜치로 이동설정한후. 코드를 수정한것을 add, commit, push 를 해준다. 그럼 해당 브랜치에 같을때 Push 하여 들어온 파일들이 있다. 이것을 나중에 PR Pull Request 를 해줘서 Merge ..

요번주는 심화주차로 그전에 기본과 숙련과정에서 배운걸 +해서 많은 기능과 세분화된 컴포넌트, 상태관리, 리덕스,파이어베이스 쓸때 좀더 편리하게 쓸수있는 툴?라이브러리 사용해보았다. 6일안에 4주차 강의들 다 듣고 CRUD와 로그인,회원가입, 무한스크롤,댓글,좋아요 기능까지 해야하는등 많아서 다 구현하지 못하고 큰 흐름만 배우는걸로 만족했다. 심화과정 과제화면 우리 흔히 보는 인스타그램과 같은 같은 기능을 쓰게 되었는데 확실히 기능과 컴포넌트들이 많으니 코드도 길어지고 로직을 따라가기가 여간 쉽지 않긴했다. 다음주부턴 백엔드쪽과 협업을 하면서 미니프로젝트를 하게되는데 복습도 계속하면서 리액트를 좀더 편하게 사용할수있도록 해야겠다. Problem 과 해결과정 처음 스크린샷처럼 InifinityScroll 컴..

우리가 실시간으로 ‘감사합니다’ 를 검색할때 ㄱ,ㅏ,ㅁ,ㅅ,ㅏ,ㅎ,ㅏ,ㅂ,ㄴ,ㅣ,ㄷ,ㅏ라고 칠때 연관 검색어가 같은걸 빨리 바꿔줄수있는데 너무 빨리 한다면 서버 요청이 날아가는걸 막기위해 특정시간마다 1번씩 또는 키보드 입력이 멈출때만 1번 연관검색이 뜨게 줄일수있다. 따라서 이런 연관 검색어 부분의 여러차례 빈번하게 발생하게되는 랜더링도 막아 줄수있다. 또한 파이어스토어에서는 무료 요청횟수가 한정적이라 더이상 요청못할수도있다. 따라서 이런걸 막기위해서 debounce와 Throttle 을 사용한다. Debounce란? 이벤트가 일어나면, 일정 시간을 기다렸다가 이벤트를 수행한다. 일정시간 내에 같은 이벤트가 또 들어오면 이전 요청은 취소한다. throttle이란? 일정시간동안 일어난 이벤트를 모아서 주..

심화과정으로 배워야할 내용과 구현해야할 기능들이 많아서 몇일동안 블로그 관리를 못했다. 기존의 배운 CRUD를 이제 많은 컴포넌트 단위로 잘르고 페이지와 최소화 컴포넌트를 이어서 만드는등 아직 많이 해보지않았어서 이해하는데 애를 먹었다. 그리고 기존의 방식으로 firebase나 리덕스에 연결하는게 아니라 redux-actions 로 좀더 간결하게 쓸수있도록 해주는등 아직도 생소한게 많아서 이건 WIL 일때 정리해도록하겠다. 오늘은 회원가입시 이메일형식으로 아이디를 입력받아야하기 때문에 정규식을 써서 test를 하는 방식을 배웠다. 정규식은 // 안에 내용을 쓰는데 처음부터 해석하면 ^는 처음 맨앞에 나올 문자를 정해준다. 숫자와 영대소문자가 가능하다. 그다음엔 ()로 이루워져있는데 뒤에 *을 사용하기위함..