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..
Post 요청으로 데이터 추가하기
Post 요청으로 데이터 추가하기
Node.js
2024.08.30 05:10
{a : "a", b : "b"} 객체 데이터에 c : "c"를 추가해줄 것이다.그 다음에 페이지를 리프레쉬 했을 때 추가한 값이 들어갈 수 있도록 해줄 것이다.  데이터를 추가할 때는 fetch 메소드를 사용하여 POST 요청을 보내준다.(Client에서)그렇게 c : "c" 값을 추가해주는 요청을 보내고, 이 요청을 받아주는 부분이 있어야 한다. request.method : 요청 메소드를 반환한다.위쪽에 reqest.method === "POST" && reqest.url === "/home" 조건의 if문을 하나 더 작성해준다.조건에 부합할 때 request.on() 메소드를 실행한다.=> 특정 event를 listen 할 수 있게 해주는 기능을 가지는데,여기서 인자로 'data'와 콜백 함수를 ..
논리연산자&& (AND)
논리연산자&& (AND)
Javascript
2023.07.13 18:58
요즘 다시 자바스크립트의 개념을 공부하고 있는데, 그동안 많이 헷갈렸던 부분에 대하여 이번에 배우게 되어 정리를 해보고자 한다. 나는 논리연산자 &&, 즉 AND가 둘 다 true일 때 true를, 하나라도 false이면 false를 출력하는 용도로만 사용되는 줄 알았다. 근데 이 방식은 전통적인 프로그래밍 방식이라고 한다. alert(true&&true); // true alert(false&&true); // false alert(true&&false); // false alert(false && false); // false if(1 && 0) { // 피연산자가 숫자형이지만 논리형으로 바뀌어 true && false가 됩니다. alert("if 문 안에 falsy가 들어가 있으므로 alert창은 ..
다시 한 번 자바스크립트 class 파헤치기
다시 한 번 자바스크립트 class 파헤치기
Javascript
2023.06.13 11:59
사실 예전에 분명 class를 공부한 부분이 있지만 너무 쉽게 휙 넘어가버려서 매번 class 문제를 마주할 때마다 정신이 혼미하다... 그래서 준비했다. 나를 위한 class 파헤치기!! class 외에도 이전에 다 공부했지만 쏙쏙 많이도 까먹었더라... 물론 다시 개념 좀 살펴보고 하면 되지만 class는 그것조차 잘 되지 않더라 이 말이다...! (class 할 때마다 너무 고통스러워요...) 그럼 얘기는 여기까지 하고, 바로 class에 대하여 알아보도록 하겠다. - Class란? 자바스크립트에서 class는 ES6부터 지원을 하기 시작했다. 자바스크립트에서 class는 함수의 한 종류이다. 익스플로러에서는 class를 지원하지 않으며, 최신 브라우저에서는 class를 지원한다. class를 사용..
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