728x90
반응형
구글 소셜 로그인 구현하기
구글 소셜 로그인 구현하기
Next.js
2024.02.06 21:10
현재 나는 Next.js 14를 사용한 플레이리스트 프로젝트를 진행 중이다. 여기서 Google과 Kakao 소셜 로그인을 구현하기로 결정을 했고, 이와 관련된 여러 문서들을 찾아보았다. 구글 로그인 API의 흐름은 이러하다. 구글 로그인 창을 클라이언트에게 보여준다. => client는 로그인을 시도한다. => 동의 항목을 체크하여 네이버 API 서버에 넘긴다. => 전달 받은 정보를 가지고 구글 API 서버는 인가 코드를 발급해준다. => 인가 코드를 통해 로그인을 유지할 수 있는 토큰을 발급해준다. 나는 여기서 구글 access token이 아닌 구글 id token을 발급 받아 그거로 회원가입을 진행할 예정이다. 소셜 로그인의 경우, 각 플랫폼으로 부터 발급받은 id token을 프로젝트의 acc..
React 4. 리액트 프로젝트 만들기 - 리액트 프로젝트 생성 / 빌드(배포) 모드
Concept
2024.06.25 00:51
2. React 프로젝트 만들기 드디어 React 프로젝트를 하나 생성했다.기존의 rcp - ch01 폴더 내에 ch01_5라는 프로젝트명으로 프로젝트를 생성했다.앞서 설명했듯이 npm보다 npx가 낫다고 판단을 하여 npx를 사용하여 프로젝트를 생성했다. npx create-react-app ch01_5 --template typescript React 프로젝트는 기본적으로 Node.js 프로젝트이다.모든 Node.js 프로젝트는 '루트 디렉토리(ch01_5)'에 항상 package.json 파일이 있다. 이제 프로젝트를 실행해야 하는데, 실행시키기 위해서는 터미널에 명령어를 입력해야 한다.package.json 폴더 내에 "script" 항목에서 이와 관련된 명령어들을 확인할 수 있다. npm run..
정규표현식 : regexp
정규표현식 : regexp
Javascript
2024.01.18 01:10
지금까지 자바스크립트를 꽤나 공부해왔다고 생각했지만, 정규표현식에 관하여 제대로 접하게 된 건 이번이 처음이었다. 검색, 유효성 검사 기능을 만들 때는 chat gpt의 도움을 많이 받았다...ㅠㅠㅠㅠ 그리하여, 고심하다 시작된 정규표현식 파헤치기! 그렇게 깊게 파헤친 것은 아니다. (너무 깊게 파고들면 시간이 엄청 소요된다고 들었기 때문에 기본적인 개념과 실습 정도만 해보도록 하겠다.) - 정규표현식의 역할 1. 문자 검색(search) 2. 문자 대체(replace) 3. 문자 추출(extract) - 테스트 사이트 https://regexr.com/ RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test ..
다시 시작하는 리액트 - 리액트 실무 기초 2
다시 시작하는 리액트 - 리액트 실무 기초 2
React
2023.03.27 15:04
2-1. 라이프 사이클 공부 후 업데이트 2-2. Ref Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공함. - 주로 Ref를 사용할 때 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로 실행시킬 때. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. - Ref 생성하기 Ref는 React.createRef()를 통해 생성되고 ref 어트리뷰트를 통해 React 엘리먼트에 부착됨. 보통, 컴포넌트의 인스턴스가 생성될 때 Ref를 프로퍼티로서 추가하고, 그럼으로서 컴포넌트의 인스턴스의 어느 곳에서도 Ref에 접근할 수 있게 함. class MyComponent extends React.Component { cons..
React 2. VSCode 개발 환경 설정
Concept
2024.06.24 17:30
내가 기존에 잘 몰랐던, 개발을 하는데 도움이 많이 될만한 것들만 작성을 하도록 하겠다.  1. 편집기 설정 파일 이해하기 일단 VSCode의 파일 → 기본 설정 → 설정에서 폰트 사이즈, 탭 사이즈 등을 설정할 수 있다.난 여기서 탭 사이즈를 4에서 2로 변경한 후, 저장을 하였다.VSCode는 설정 화면에서 바꾼 내용을 settings.json 파일에 저장해둔다. 단축키 Ctrl + Shift + P를 누르고 "User Settings"를 입력한 후, "기본 설정 : 사용자 설정 열기(JSON)"를 클릭한다.여기서 settings.json의 내용을 확인할 수 있다.원래도 많은 설정들이 되어 있었지만, 방금 추가로 설정해준 "editor.tabSize" : 2를 확인할 수 있다.   2. 프리티어 설치..
Javascript2025.12.17 18:16"18기 코딩자율학습단 자바스크립트 입문" 학습 후기

드디어 18기 코딩자율학습단 자바스크립트 입문 과정이 끝이 났습니다!혼자 했으면 자칫하면 의지가 꺾였을 수도 있을 4주간의 여정을스터디원들 덕분에 의지를 꺾이지 않고 재미나게 마쳤네요:) 스터디그룹을 직접 모집하고, 운영해 본 건 이번이 처음인데,정말 뜻깊은 경험이 아니었나 싶습니다!물론 어떻게 스터디를 진행해야 루즈해지지 않고 개념을 더 잘 이해할 수 있을까스터디그룹 팀원들과 머리를 맞대고 정말 많은 고민을 했습니다 ㅠ,ㅠ결과는 대성공...! 입문자들의 스터디인 만큼,다 같이 모여서 책을 읽고 모르는 부분을 물어보고 하는 것이 좋겠다는 생각이 들었습니다.그리고 확실히 이 방법을 사용하니까 더 이해가 쏙쏙 잘 되더라구요:)이해가 덜 됐거나 이해를 잘 끝마쳤다면AI로 여러 가지 문제를 생성하여 풀어보고 한..

카테고리 없음2025.12.07 20:21📝 부산노동권익센터 제6기 서포터즈 활동 후기

부산노동권익센터 제6기 서포터즈 활동을 마무리하며, 지난 1년간의 경험을 공유하고자 합니다.활동을 시작할 때는 노동 문제에 대한 막연한 관심만 가지고 있었지만,센터와 함께 다양한 활동을 하면서 저의 시야는 획기적으로 넓어졌습니다. 저희 서포터즈는 최저임금, 노동인권, 옥외노동자의 권리 등우리가 일상에서 쉽게 접하지만 깊게 들여다 보지 못했던 주제들을 다루는여러 가지 콘텐츠를 제작하는 것에 집중했습니다.제가 속한 팀은 주제와 관련하여 콘텐츠 영상을 제작하였습니다.이 외에도 웹툰, 카드 뉴스 등 여러 가지 콘텐츠를 제작하는 팀들이 있습니다. 이 과정에서 '노동'의 중요성을 단순히 경제 활동의 한 부분으로 인식하는 것을 넘어,인간다운 삶을 보장하는 기본적인 권리라는 것을 깊이 깨달았습니다.특히, 콘텐츠 기획 ..

🚀 현장 속으로! 노동 권익의 등불, '동네방네 노무사'가 부산 전역을 찾아갑니다 🌟
카테고리 없음2025.11.02 22:23🚀 현장 속으로! 노동 권익의 등불, '동네방네 노무사'가 부산 전역을 찾아갑니다 🌟

부산의 모든 노동자가 존중받고, 안전하며, 공정한 대우를 받는 일터는 더 이상 꿈이 아닙니다!부산노동권익센터의 핵심 사업인 '동네방네 노무사'가 바로 그 현장의 목소리에 귀 기울이기 위해 움직입니다.노동법을 잘 알지 못해 권익 침해를 당하거나,혹은 법규를 준수하는 데 어려움을 겪는 취약 노동자와 소규모 사업주를 위해 전문 노무사가 직접 발로 뜁니다.컨설팅 비용 부담 없이, 무료로 전문적인 도움을 받을 수 있는 혁신적인 서비스이죠. - 💼 사업주를 위한 든든한 지원: 노무관리 진단과 솔루션특히, 30인 미만 소규모 사업장을 대상으로 찾아가 노무관리 진단을 제공합니다.근로계약서, 임금, 휴게시간, 휴일 관리 등 노동 관계법 전반에 대한 집중 진단(1회)과 사후 점검(1회)을 통해사업주가 스스로 법규를 준수..

2025년 옥외노동자 응원 캠페인
카테고리 없음2025.07.22 12:432025년 옥외노동자 응원 캠페인 "폭염 속 얼음왕국"

뜨거운 여름, 옥외 노동자분들을 위한 감사와 응원을 담아 진행하는 캠페인본격적인 무더위가 시작되는 7월입니다.요즘 같은 날씨에는 시원한 실내에서 더위를 피하고 싶다는 생각이 간절해지곤 합니다.(저 같은 경우에는 더위를 너무 타서 여름에는 밖에 잘 돌아다니지도 못합니다)하지만 우리 주변에는 뜨거운 날씨에도 묵묵히 맡은 일을 하고 계신 분들이 있습니다. 바로 옥외 노동자분들입니다. 건설 현장에서 우리 도시를 만드는 분들,뙤약볕 아래 택배를 배달하며 우리의 생활을 편리하게 해주시는 분들,그리고 거리를 깨끗하게 유지해 주시는 환경미화원분들까지.이 모든 옥외 노동자분들의 노고 덕분에 우리가 편안하고 안전하게 지낼 수 있습니다.하지만 우리는 이런 분들의 노력에 대해 평소에는 잘 생각하지 못할 때가 많습니다.특히 여..

Concept2025.04.28 15:52비동기 함수의 단점과 프로미스.

1. 비동기 처리를 위한 콜백 패턴의 단점 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다.하지만, 전통적인 콜백 패턴에는 몇 가지 단점이 있다. - 콜백 헬로 인하여 가독성이 나쁘다.- 비동기 처리 중 발생한 에러 처리가 곤란하다.- 여러 개의 비동기 처리를 한 번에 처리하는 데도 한계가 있다. 먼저, 전통적인 콜백 패턴의 단점에 대하여 자세히 알아보도록 하겠다. 1-1. 콜백 헬로 인한 가독성 저하일반적으로 비동기 함수 내부의 콜백 함수, 이벤트 핸들러의 return문은 아무런 의미가 없다.비동기 함수 내부의 콜백 함수, 이벤트 핸들러는 비동기 작업으로 인하여 실행되기도 전에 종료된다.그렇기 때문에 즉시 값을 반환할 수 없다.(undefined) 그리고 콜백 함수의 반환문은 ..

동기 함수와 비동기 함수
Concept2025.04.28 14:00동기 함수와 비동기 함수

1. 동기 함수비동기 함수에 대하여 제대로 알아보기 전에, 먼저 동기 함수에 대하여 먼저 알아보도록 하겠다. 동기 함수란?동기 함수란 현재 실행 중인 태스크가 종료될 때까지 다음에 실행되는 태스크가 대기한다.(블로킹)즉시 결과를 반환하고, 실행 흐름을 예측 가능하고 직관적으로 만든다.동기 함수의 장점: 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장된다.동기 함수의 단점: 앞선 태스크가 종료될 때까지 이후 태스크들이 블로킹되는 단점이 있다. 함수를 호출시 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다.이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜 스텍)에 푸쉬되고 함수 코드가 실행된다.함수가 호출된 순서대로 순차적으로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸쉬된다.함수 코드의 ..

사이드 프로젝트 팀원 모집합니다! (디자이너 1-2분)
Project2025.04.17 19:37사이드 프로젝트 팀원 모집합니다! (디자이너 1-2분)

🥳 모임 기반 커뮤니티 플랫폼 BE:BEAM의 디자이너를 구합니다! 🥳 😁 프로젝트 소개BE:BEAM은부산을 대상으로 한 관심사 기반 모임 개설, 실시간 소통, 후기 공유 기능 등을 제공하는모임 중심 커뮤니티 플랫폼입니다. 작년에 이미 실사용자 피드백을 이미 받아본 경험이 있고,이를 바탕으로 기능 개선과 사용자 흐름을 지속적으로 다듬고 있습니다.현재 BE:BEAM 커뮤니티 활동에 관심을 보인 잠재적 유저층도 이미 확보되어 있으며,지금 웹사이트 리뉴얼 + 기능 추가를 앞두고, 함께할 팀원을 찾고 있어요 🤗 🧑‍🎨 모집인원 : 디자이너 1~2명웹사이트의 컨셉에 맞는 와이어프레임, 디자인을 짜주실 디자이너분을 찾고 있습니다!++ 기획력이 있으신 분이면 진짜 환영입니다!! (저희가 지금 이게 좀 부..

Concept2025.04.17 08:31타이머 - Debounce와 Throttle

짧은 시간 연속으로 발생하는 이벤트(scroll, resize, input, mousemove 등)는과도하게 호출되어 성능에 문제를 일으킬 수 있다.이럴 때 성능 최적화를 위해 사용되는 기술인 Debounce와 Throttle을 사용할 수 있다. Debounce와 Throttle은짧은 시간 간격으로 연속으로 발생하는 이벤트를 그룹화하여 과도한 이벤트 호출을 방지하는 프로그래밍 기법이다.이를 구현하기 위해서는 타이머 함수가 사용된다. 1. Debounce:특정 시간동안 이벤트가 발생하지 않을 때, 딱 한 번만 함수를 실행하는 것이다.이벤트가 연속적으로 발생하면 이전의 실헹 대기 중인 함수 호출을 취소하고,가장 마지막 이벤트 발생 시점부터 설정된 시간(delay) 이후에 함수를 실행한다. 주로 사용하는 곳은..

728x90
반응형
image