수끼옹

안녕하세요 !! 오늘은 제가 프로젝트를 진행하면서 다뤘던 소셜로그인에 대해 포스팅 해보려고 합니다! 저는 '있어요?' 프로젝트를 하면서 소셜로그인을 처음 구현해보았습니다. 처음엔 정말 뭐가 뭔지 하나도 모르겠더라구요.. 많이 혼란스러웠습니다 ㅠㅠ 그래서 여기저기 블로그를 찾아보면서 이해하려고 했습니다. 결국엔 이해가 되더라구요 !! 그래서 제가 이해한 소셜로그인 방식을 한번 얘기해보겠습니다. ✅ 동작 화면 먼저 저희 프로젝트의 소셜 로그인 동작을 보여드리겠습니다. 메인에서 로그인/회원가입 이동 -> 카카오로 시작하기 -> 동의하기 및 사용자 정보 입력 -> 리다이렉트 창 -> 로그인 완료 입니다. ✅ 플로우 먼저 간단히 플로우를 정리해보았습니다. 예전에 어디선가 친절하게 플로우를 설명해주신 분이 있어서 ..

안녕하세요! 이번 주면 약 두 달간 진행된 '있어요?' 프로젝트가 끝나네요 ㅎㅎ 차차 또 프로젝트 하면서 다뤘던 것에 대해서 포스팅해보겠습니다악!! 최근 며칠 간 댓글 기능이 있는 상세페이지 작업을 했는데 작업을 하며 react-query를 다뤄보게 되었습니다. 댓글 등록, 수정, 삭제가 제 파트였는데 리액트 쿼리를 다루게 된 배경은 이렇습니다. 새로운 댓글을 등록, 수정, 삭제하면 서버에서 fetch된 댓글 리스트를 다시 불러와줘야 되는데 ..? 라는 문제점에 봉착했었습니다. 처음에는 단순하게 생각해서 그러면 또 서버에서 댓글 리스트를 뿌려주는 api를 호출해주면 되지! 라고 생각을 하였습니다. 근데 댓글을 작성하고 다시 댓글리스트를 호출하는 로직을 작성하게 되면 받아온 데이터를 또 state에 넘겨주..

안녕하세요 (～￣▽￣)～ 오랜만에 쓰는 블로그네요... 핫핫 저는 지금 "있어요?" 라는 프로젝트를 진행 중에 있습니다. 이 프로젝트는 고민해결 전단지 웹 사이트로 사용자가 고민 내용을 작성해서 전단지로 붙여 놓으면 다른 사용자와 댓글, 오픈채팅, 이메일로 소통할 수 있는 서비스를 제공합니다. 나중에 배포가 되면 사이트에 대해 포스팅 좀 해보겠습니다 ㅎㅎ 본론으로 돌아와서.. 제가 지금 맡고 있는 부분이 바로 전단지 작성 페이지를 제작하는 것인데요! 체크 여부, 공백금지, 글자수 제한 등의 조건을 지켰을 때 전단지를 붙일 수 있게 하는 것이 핵심이었습니다. 먼저 결과물을 보시겠습니다. 위 결과물의 유효성 검사 동작 설명드리면, 처음에 아무것도 양식을 채우지 않고 전단지 붙이기(제출) 버튼을 누르면, 먼저..

안녕하세요? 2023년 첫글이네요 ㅎㅎ 오늘 열심히 페이지를 만들다가 삽질시킨 문제를 데려왔습니다. 먼저 완성작을 보여드리겠습니다. 어떤 링크요소에 hover를 하면 밑줄이 쫘악 쳐지는 기능입니다. 저는 저걸 처음에는 animation를 이용해서 만들어보려고 state도 만들고, useEffect로 settimeout을 쓰려고도 하고 id를 주기 위한 함수도 만들고 하다보니 어딘가 점점 꼬이고 헷갈리기 시작하더라구요? 그러다 어떤 천사께서 간단하고 쉽게, 오직 css로만으로 만들 수 있는 정보를 주셨습니다 .. 🤍 그렇담 이제 방법을 써보겠습니다. [사용한 파일] main.jsx 1. 먼저 요소를 생성하고 스타일컴포넌트로 스타일을 줍니다. after요소를 쓸 거라서 밑줄을 보이게 할 요소엔 꼭 posit..

안녕하세요? 저는 지금 카테고리별로 컨텐츠를 띄워보는 기능을 완성하고 오는 길입니다 ㅎㅎ 또 역시나 기억하기 위해 쓰는 글이 되겠네요 !! 먼저 결과물 입니다 카테고리는 방영작 전체, 방영 중, 종영작 이렇게 3개 입니다. 방영작 전체를 클릭하면 작품들이 모두 떠야하고, 방영 중과 종영작을 클릭하면 구조체에서 onAir를 식별해 각각 맞는 작품을 띄워줘야 합니다. [사용한 파일] - Contents.jsx - Contents.js (구조체 작성) 먼저 카테고리 별로 작품을 띄워보겠습니다. map을 써야하기 때문에 먼저 구조체를 만들어야 합니다. 구조체에는 작품별 id, 방영여부, 제목, 출연진, 연출진들을 넣었습니다. 원하는 대로 수정하세요!! // Contents.js export const Works..

(오늘의 포스트는 그냥 제가 기억하기 위해 쓴 포스트이니 ... 허접한 글일 수 있겠네요) 안녕하세욥? 저는 지금 열심히 studio dragon사의 웹사이트를 리팩토링 하는 중이랍니다 ㅎㅎ 요즘은 옛날보다 작업속도가 조금 빨라진 것 같아서 나름 뿌듯하지만 현직 개발자에 비하면 애송이 baby 그 자체. 더욱 스스로를 채찍질 해야겠어요 - 어쨌든, 본론으로 돌아와서! 페이지 작업을 하다보니 이 웹사이트는 header가 두 가지 스타일이더라구요 하나는 뒤의 background가 없이 요소들의 색이 black이고 구분선이 있는 header이고, 다른 하나는 뒤의 background 이미지가 있어서 white로 색을 통일하고 구분선이 없어진 header입니다. 저는 그냥 단순하게 생각을 해서 header 컴포..

안녕하세요? 제 대학생활의 마지막 기말고사를 치루고 오랜만에 포스팅 합니다 ㅎㅎ 마지막 시험은 정말 잘 마무리하고 싶어서 잠시 제 본업을 놓았었네요... 반성합니다 3주동안 비어진 잔디들을 보고 많이 현타가 왔네요 다시 열심히 달려봅시다! 저는 NHN 웹사이트의 리뉴가 거의 끝나가서 Studio Dragon사의 웹사이트 리뉴를 시작해보려고 합니다. 그래서 오늘의 포스팅은 yarn을 이용해서 새로운 프로젝트를 생성하고, git에 레포지토리를 생성하는 것까지의 과정을 간단하게 담아보려고 합니다. - 1. 컴퓨터 폴더에서 프로젝트를 생성할 폴더로 들어간다. 2. 폴더의 빈공간 아무곳에나 오른쪽 버튼을 눌러 Git Bash Here을 눌러 명령창을 연다. 3. yarn을 처음 써본다면, 즉 yarn을 설치하지 ..

이번 포스팅은 앞과 이어집니다. 기사 리스트를 클릭하면 그 기사에 맞는 세부페이지가 띄워지겠죠? 그런데 저는 여기서 또 다른 기능을 만들어보고 싶었습니다. 흔히 어떤 사이트의 보도자료 페이지를 보면 앞, 뒤 기사들로 이동할 수 있는 버튼이 있더라구요 저도 만들어보았습니다. 먼저 결과물입니다. 다음 글을 클릭하면 다음 기사로 넘어가고, 이전 기사를 누르면 이전 기사로 넘어갑니다. 단 첫 번째 기사와 마지막 기사는 이전 글과 다음 글이 없음을 알려줘야 합니다. 한번 살펴보겠습니다? 👉 원리 내가 들어온 기사의 id값을 이용하면 끝이다..! 이전 글은 id가 -1인 것의 페이지를 띄워주면 되고, 다음 글은 id + 1인 페이지를 띄워주면 됩니다. 👉 코드 [사용한 컴포넌트] Detail.jsx, article..