Youngble_개발스토리

인스타그램 클론코딩 메인화면 메인화면에 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 이라는..

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS 교차 출처 리소스 공유 (CORS) - HTTP | MDN 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라 developer.mozilla.org 교차 출처 리소스 공유 (CORS) 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다..

미니프로젝트 보여줘 홈즈 다방 과 같은 집을 구하거나 입주자를 구하기위한 소셜 커뮤니티 사이트이다. 요번주는 그전주에 배운걸 프론트엔드 +백엔드 협업 과정을 배웠다. 안그래도 그전주까지 파이어베이스를 이용하여 서버와 연동하고 데이터상태관리, 컴포넌트 구성등을 따라가느냐고 복습할시간도 없고 정리할시간도 많이 없었는데 그걸 이용해 파이어베이스를 버리고 백엔드로 서버를 구축하고 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 컴..

https://programmers.co.kr/learn/courses/30/lessons/17683 코딩테스트 연습 - [3차] 방금그곡 방금그곡 라디오를 자주 듣는 네오는 라디오에서 방금 나왔던 음악이 무슨 음악인지 궁금해질 때가 많다. 그럴 때 네오는 다음 포털의 '방금그곡' 서비스를 이용하곤 한다. 방금그곡에서는 TV, programmers.co.kr 내가푼방식 function solution(m, musicinfos) { var answer=[]; var numb=[]; for(var i=0; i< musicinfos.length; i++){ var b= musicinfos[i].split(","); var totalmusicplay=0; var end= (b[1].substr(0,2)/1)*6..

syntactic sugar는 한국어로 직역을 하자면 '문법적 설탕'이다. 이 문법적 설탕(syntactic sugar)라는 것이 의미하는 것은 문법적 기능은 그대로인데 그것을 읽는 사람이 직관적으로 쉽게 코드를 읽을 수 있게 만든다는 것이다. 예를 들면 다음과 같은 것들이 있다. // syntatic sugar sample function () { } // 13 typing 이렇게 함수는 13글자를 타이핑해야 선언을 할 수 있다. 그런데 이걸 syntactic sugar로 표현을 한다면 다음처럼 줄일 수 있다. () => { } // 8 typin 보기에 훨씬 직관적이면서도 쓰는 것이 훨씬 간편해졌다. function Obj() { } Obj.prototype.method = function () { ..