봉보로봉봉

올해까치 올해까지?"올해까치" 까치와 함께 올해 목표를 세워보고 알찬 한해를 보내보세요. thisyearkkachi.netlify.app 프로젝트 소개 신년 목표를 세우고 6개월 뒤 리마인드 하고 싶은 사람을 위한 신년 목표 1개월 시즌 메일링 서비스 제작 기간 : 22.12.09 - 12.28 (약 3주) 서비스 기간 : 22.12.28 - 23.1.31 (약 1달) 팀원 : Design 1명, FE 2명, BE 1명 협업방식 툴 : 피그마, 노션 회의 : 첫 주는 기획 회의를 위해 2-3일에 한번 다 같이 회의 진행, 그 후 단체 회의는 1주에 한 번 진행. 포지션 별로 회의가 필요할 때 개별적으로 약속을 잡아 회의 진행 사용언어 및 개발환경 FE : Vite, React.js, Typescript,..

프로젝트를 진행하는데 이미지 저장 기능이 우리 서비스의 메인 기능 중 하나다. 기능 구현을 하고 카카오톡 인앱브라우저에서 테스트해보는데 사진 저장 버튼을 누르면 버튼이 눌리기만 하고 저장이 안 됐다. https://brunch.co.kr/@b30afb04c9f54dc/45 카카오톡은 왜 인앱 브라우저를 고수할까 인앱브라우저와 인앱결제에 대하여 | 카카오톡,인스타그램은 왜 인앱 브라우저를 고수하는걸까? 친구가 카카오톡으로 공유해준 인스타그램 게시글 링크를 선택하면, 인스타그램으로 바로 넘어 brunch.co.kr 찾아보니 인앱브라우저는 아주 사악한 녀석이라는 것을 알게 됐다. 인앱브라우저는 보통 브라우저에서 지원하는 기능들을 지원하지 않는 것이 많으며 브라우저 높이 반환값 같은 것들도 이상하다고 한다. 개..

state를 map 돌려서 JSX Element를 리턴하려는데 화면에는 아무것도 안뜨고 빨간줄만 죽죽 떴다. Type 'void' is not assignable to type 'ReactNode' 이유 map을 돌릴땐 return을 적었는지 꼭 확인합시다! 😉 // 안 된 이유 state.map((data)=>{{data.content}}) // return을 잊지말자 state.map((data)=>{return {data.content}})

요즘 sns 프로젝트를 진행하고 있다. 유저가 포스트에 사진을 첨부해 업로드하면 DB에 저장하는 방식으로 진행하려고 했다. 백엔드 팀원도 나도 처음 구현해보는 기능이라 생각처럼 안되서 사진 저장 서비스를 이용하기로 했다. 전에 한 번 사용해본 사진 이미지 크기를 조정해서 저장할 수 있는 Cloudinary를 이용하기로 했다. cloudinary npm 패키지도 있지만 REST API를 사용해서 추가로 설치하지는 않았다. cloudinary를 가입하면 받는 cloud name, API key등은 .env 파일로 관리했다. 설정에 들어가서 upload에 Upload presets를 만들어줘야한다. 기본으로 signed로 되어있는데 그럼 업로드마다 로그인을 해줘야 하므로 로그인을 하지 않아도 되는 Unsign..

// 컴포넌트 setHeart((prev) => !prev); // 에러~~~~~~~ setFeeds((prev: MainFeedStateType[]) => { const newData = [...prev].map((feedData) => { return feedData.id === id ? { ...feedData, count_likes: feedData.count_likes, is_liked: feedData.is_liked, } : { ...feedData }; }); return newData; }); // 타입 export interface FeedProps { ... setFeeds?: (prev: MainFeedStateType[]) => void; } cannot invoke an obje..

HTTP (Hypertext Transfer Protocol) html을 전송하기 위해서 만들어진 통신 규약 HTTPS 마지막의 S는 Over Secure Socket Layer의 약자 http에 보안장치가 결합되어있는 방식의 통신, 전송하는 데이터가 암호화되기 때문에 제삼자는 몰래 볼 수 없다. SSL https와 ssl은 같지만 다르다. ssl 프로토콜 위에서 https가 동작하기 때문이다. SSL과 TLS 네스케이프에 의해서 SSL이 발명되었고, 이것이 점차 폭넓게 사용되다가 표준화 기구인 IETF의 관리로 변경되면서 TLS라는 이름으로 바뀌었다. SSL 디지털 인증서 서버 간의 통신을 제삼자가 보증해주는 전자화된 문서 클라이언트가 서버에 접속하면 서버는 클라이언트에게 인증서 정보를 전달한다. 접속..

param이 undefined일 수도 있으니까 타입스크립트가 안된다고 한다... 한 번만 봐주라... 네가 봐주면 안 될까..? 🥲 const param: string | undefined ... const param = useParams().id; ... axios.get('../data/feeds.json').then((res) => { // param에 빨간줄 setFeedData(res.data.feeds[param - 1]); setHeart(res.data.feeds[param - 1].is_liked || false); setSave(res.data.feeds[param - 1].is_marked || false); }); ... The left-hand side of an arithmeti..

얕은 복사와 깊은 복사를 주소를 참조하는지, 데이터를 복사하는지로 알고 있었다. 그래서 복사를 하고 싶을 때 깊은 복사를 해서 잘 사용하고 있었는데 오늘 깊은 복사를 했는데도 얕은 복사를 한 것처럼 작동하는 상황을 만나 새로운 사실을 알게 됐다. 얕은 복사(shallow copy) 얕은 복사는 해당 요소를 참조하는 데이터 주소를 할당하게 된다. 그래서 얕은 복사를 한 요소를 변경하면 원본 요소가 변경된다. ===를 사용해서 비교해봐도 똑같다고 나온다. const original = { name: 'original' }; const copy = original; console.log(original.name); // original console.log(copy.name); // original copy...