티스토리

수끼옹

검색하기

블로그 홈

수끼옹

sookkiong.tistory.com/m

쓸모있는 내가 되기!

구독자: 1

방명록 방문하기

주요 글 목록

[React][TypeScript] 간단하게 정리한 소셜로그인 Flow 안녕하세요 !! 오늘은 제가 프로젝트를 진행하면서 다뤘던 소셜로그인에 대해 포스팅 해보려고 합니다! 저는 '있어요?' 프로젝트를 하면서 소셜로그인을 처음 구현해보았습니다. 처음엔 정말 뭐가 뭔지 하나도 모르겠더라구요.. 많이 혼란스러웠습니다 ㅠㅠ 그래서 여기저기 블로그를 찾아보면서 이해하려고 했습니다. 결국엔 이해가 되더라구요 !! 그래서 제가 이해한 소셜로그인 방식을 한번 얘기해보겠습니다. ✅ 동작 화면 먼저 저희 프로젝트의 소셜 로그인 동작을 보여드리겠습니다. 메인에서 로그인/회원가입 이동 -> 카카오로 시작하기 -> 동의하기 및 사용자 정보 입력 -> 리다이렉트 창 -> 로그인 완료 입니다. ✅ 플로우 먼저 간단히 플로우를 정리해보았습니다. 예전에 어디선가 친절하게 플로우를 설명해주신 분이 있어서 .. 공감수 2 댓글수 0 2023. 3. 24.
[React][TypeScript] 내가 경험한 react-query에 대한 정리 안녕하세요! 이번 주면 약 두 달간 진행된 '있어요?' 프로젝트가 끝나네요 ㅎㅎ 차차 또 프로젝트 하면서 다뤘던 것에 대해서 포스팅해보겠습니다악!! 최근 며칠 간 댓글 기능이 있는 상세페이지 작업을 했는데 작업을 하며 react-query를 다뤄보게 되었습니다. 댓글 등록, 수정, 삭제가 제 파트였는데 리액트 쿼리를 다루게 된 배경은 이렇습니다. 새로운 댓글을 등록, 수정, 삭제하면 서버에서 fetch된 댓글 리스트를 다시 불러와줘야 되는데 ..? 라는 문제점에 봉착했었습니다. 처음에는 단순하게 생각해서 그러면 또 서버에서 댓글 리스트를 뿌려주는 api를 호출해주면 되지! 라고 생각을 하였습니다. 근데 댓글을 작성하고 다시 댓글리스트를 호출하는 로직을 작성하게 되면 받아온 데이터를 또 state에 넘겨주.. 공감수 1 댓글수 2 2023. 3. 20.
[React][TypeScript][있어요?] 타입스크립트로 유효성 검사 기능 제작하기 안녕하세요 (～￣▽￣)～ 오랜만에 쓰는 블로그네요... 핫핫 저는 지금 "있어요?" 라는 프로젝트를 진행 중에 있습니다. 이 프로젝트는 고민해결 전단지 웹 사이트로 사용자가 고민 내용을 작성해서 전단지로 붙여 놓으면 다른 사용자와 댓글, 오픈채팅, 이메일로 소통할 수 있는 서비스를 제공합니다. 나중에 배포가 되면 사이트에 대해 포스팅 좀 해보겠습니다 ㅎㅎ 본론으로 돌아와서.. 제가 지금 맡고 있는 부분이 바로 전단지 작성 페이지를 제작하는 것인데요! 체크 여부, 공백금지, 글자수 제한 등의 조건을 지켰을 때 전단지를 붙일 수 있게 하는 것이 핵심이었습니다. 먼저 결과물을 보시겠습니다. 위 결과물의 유효성 검사 동작 설명드리면, 처음에 아무것도 양식을 채우지 않고 전단지 붙이기(제출) 버튼을 누르면, 먼저.. 공감수 2 댓글수 0 2023. 2. 22.
[React][SD] 단순 css로 hover시 글자 밑에 밑줄 생기게 하기 안녕하세요? 2023년 첫글이네요 ㅎㅎ 오늘 열심히 페이지를 만들다가 삽질시킨 문제를 데려왔습니다. 먼저 완성작을 보여드리겠습니다. 어떤 링크요소에 hover를 하면 밑줄이 쫘악 쳐지는 기능입니다. 저는 저걸 처음에는 animation를 이용해서 만들어보려고 state도 만들고, useEffect로 settimeout을 쓰려고도 하고 id를 주기 위한 함수도 만들고 하다보니 어딘가 점점 꼬이고 헷갈리기 시작하더라구요? 그러다 어떤 천사께서 간단하고 쉽게, 오직 css로만으로 만들 수 있는 정보를 주셨습니다 .. 🤍 그렇담 이제 방법을 써보겠습니다. [사용한 파일] main.jsx 1. 먼저 요소를 생성하고 스타일컴포넌트로 스타일을 줍니다. after요소를 쓸 거라서 밑줄을 보이게 할 요소엔 꼭 posit.. 공감수 1 댓글수 2 2023. 1. 9.
[React][SD] 함수를 이용하여 카테고리 별 컨텐츠 필터링 하기 안녕하세요? 저는 지금 카테고리별로 컨텐츠를 띄워보는 기능을 완성하고 오는 길입니다 ㅎㅎ 또 역시나 기억하기 위해 쓰는 글이 되겠네요 !! 먼저 결과물 입니다 카테고리는 방영작 전체, 방영 중, 종영작 이렇게 3개 입니다. 방영작 전체를 클릭하면 작품들이 모두 떠야하고, 방영 중과 종영작을 클릭하면 구조체에서 onAir를 식별해 각각 맞는 작품을 띄워줘야 합니다. [사용한 파일] - Contents.jsx - Contents.js (구조체 작성) 먼저 카테고리 별로 작품을 띄워보겠습니다. map을 써야하기 때문에 먼저 구조체를 만들어야 합니다. 구조체에는 작품별 id, 방영여부, 제목, 출연진, 연출진들을 넣었습니다. 원하는 대로 수정하세요!! // Contents.js export const Works.. 공감수 1 댓글수 2 2022. 12. 29.
[React][SD] 스타일이 다른 header를 하나의 컴포넌트로 해결하기 (오늘의 포스트는 그냥 제가 기억하기 위해 쓴 포스트이니 ... 허접한 글일 수 있겠네요) 안녕하세욥? 저는 지금 열심히 studio dragon사의 웹사이트를 리팩토링 하는 중이랍니다 ㅎㅎ 요즘은 옛날보다 작업속도가 조금 빨라진 것 같아서 나름 뿌듯하지만 현직 개발자에 비하면 애송이 baby 그 자체. 더욱 스스로를 채찍질 해야겠어요 - 어쨌든, 본론으로 돌아와서! 페이지 작업을 하다보니 이 웹사이트는 header가 두 가지 스타일이더라구요 하나는 뒤의 background가 없이 요소들의 색이 black이고 구분선이 있는 header이고, 다른 하나는 뒤의 background 이미지가 있어서 white로 색을 통일하고 구분선이 없어진 header입니다. 저는 그냥 단순하게 생각을 해서 header 컴포.. 공감수 0 댓글수 4 2022. 12. 27.
[React] yarn을 이용해 CRA 진행하기(feat. git 레포지토리 생성) 안녕하세요? 제 대학생활의 마지막 기말고사를 치루고 오랜만에 포스팅 합니다 ㅎㅎ 마지막 시험은 정말 잘 마무리하고 싶어서 잠시 제 본업을 놓았었네요... 반성합니다 3주동안 비어진 잔디들을 보고 많이 현타가 왔네요 다시 열심히 달려봅시다! 저는 NHN 웹사이트의 리뉴가 거의 끝나가서 Studio Dragon사의 웹사이트 리뉴를 시작해보려고 합니다. 그래서 오늘의 포스팅은 yarn을 이용해서 새로운 프로젝트를 생성하고, git에 레포지토리를 생성하는 것까지의 과정을 간단하게 담아보려고 합니다. - 1. 컴퓨터 폴더에서 프로젝트를 생성할 폴더로 들어간다. 2. 폴더의 빈공간 아무곳에나 오른쪽 버튼을 눌러 Git Bash Here을 눌러 명령창을 연다. 3. yarn을 처음 써본다면, 즉 yarn을 설치하지 .. 공감수 0 댓글수 4 2022. 12. 21.
[React][NHN] 다음 기사, 이전 기사의 제목을 띄워보고 페이지 이동시키기 이번 포스팅은 앞과 이어집니다. 기사 리스트를 클릭하면 그 기사에 맞는 세부페이지가 띄워지겠죠? 그런데 저는 여기서 또 다른 기능을 만들어보고 싶었습니다. 흔히 어떤 사이트의 보도자료 페이지를 보면 앞, 뒤 기사들로 이동할 수 있는 버튼이 있더라구요 저도 만들어보았습니다. 먼저 결과물입니다. 다음 글을 클릭하면 다음 기사로 넘어가고, 이전 기사를 누르면 이전 기사로 넘어갑니다. 단 첫 번째 기사와 마지막 기사는 이전 글과 다음 글이 없음을 알려줘야 합니다. 한번 살펴보겠습니다? 👉 원리 내가 들어온 기사의 id값을 이용하면 끝이다..! 이전 글은 id가 -1인 것의 페이지를 띄워주면 되고, 다음 글은 id + 1인 페이지를 띄워주면 됩니다. 👉 코드 [사용한 컴포넌트] Detail.jsx, article.. 공감수 0 댓글수 2 2022. 11. 26.
[React][NHN] url 파라미터를 이용해 각 기사에 맞는 세부페이지 띄우기 안녕하세요? 저는 지금 NHN 페이지의 '보도자료' 페이지를 만드는 중입니다. 만들기 전에는 뭐 onClick이벤트로 navigate를 써서 페이지 이동시켜주면 되겠지 라고 생각했는데 막상 만들다보니 그럼 각각의 기사에 맞는 세부 페이지로 어떻게 이동시켜야 되는 거지? 라는 의문이 들기 시작했습니다. 그래서 쉬운 것은 없구나라는 깊은 깨우침을 얻었습니다.. 먼저 결과물입니다 기사를 클릭하면 그 기사에 맞는 세부페이지로 이동합니다. 그렇담 만든 과정을 설명해보겠습니다? 👉 원리 route값을 설정한다(route path는파라미터 id값을 이용한다) -> 기사마다 onClick 이벤트로 url 파라미터에 만들어 놓은 객체의 id 값을 넘겨준다. 👉 코드 [사용한 컴포넌트] App.js(route naviga.. 공감수 0 댓글수 4 2022. 11. 26.
[React][NHN] 어떤 요소에 mouseover시, 다른 내용으로 바뀌는 기능 만들기 안녕하세요? 지금은 NHN 웹사이트를 열심히 다시 만드는 중이랍니다? 정보 사이트라 수월하게 만들어질 것 같았지만... 생각보다 막히는 기능들이 생기네요 이번에는 회사의 기본윤리를 소개하는 페이지에서, 다음과 같은 기능을 만드는 데에 조금 애를 먹었습니다.. 원에 mouseover가 되었을 때 원의 컨텐츠가 다른 컨텐츠로 바뀌는 기능입니다. 여러가지 방법을 생각해봤습니다 겁도 났습니다 내가 과연 이 기능을 만들 수 있을까?? 아직 많이 부족한가봅니다... 이렇게 해보면 안 될까? 하고 생각이 뿅 하고 나는데, 그럼 그걸 어떻게 구현해야 되지? 뭐부터 만들어봐야 하지? 라는 생각부터 드네요 ~! 그치만 해야 됩니다 차근차근히 해보겠어요 난 찐따 개발자니까... 👉원리 [원 제작] 원 안에 들어갈 내용들을 .. 공감수 1 댓글수 2 2022. 11. 13.
[React][NHN] state함수를 이용해서 hover 효과 만들기 나는 지금 NHN 홈페이지를 리디자인 후 그걸 바탕으로 사이트를 다시 만들어보는 중이다. '소개' 페이지를 만들던 중 기존의 기본hover 기능만으로는 부족한 hover효과를 만들어야 했다. 0:11 동영상 default 값으로 버튼 하나에 hover 효과가 넣어져 있고, 다른 버튼에 mouseon이 되면 그에 맞게 hover 효과가 적용되는 기능이다. 바로 여기서 눈치를 챘어야 했다. state함수를 쓰면 되는 것이다. 👉 원리 버튼을 클릭했을 때 onMouseOver 이벤트로 state 값을 변경시키고, state값과 버튼의 id값이 같으면 스타일 컴포넌트의 id값을 준다. 👉 순서 state 함수를 만든다 -> onMouseOver 이벤트로 state를 변경시킨다 -> state값과 버튼의 id값을.. 공감수 1 댓글수 1 2022. 11. 9.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.