HTML은 프로그래밍 언어인가요?

이 질문은 약 16년 전 스택오버플로우에 올라온 질문이다. 수많은 답변과 그 답변에 대한 댓글이 달리고, 날이 선 토론과 논쟁을 유발할 수 있다는 이유로  현재는 추가적인 의견 작성이 막혀버린 전설의 질문이다. 이 질문을 통해 개발자라면 한 번쯤 봤을 법한 수많은 밈과 짤이 나돌게 됐는데밈만 보고 '하하하 맞지, 누가 HTML을 프로그래밍 언어라고 하는 거야? 나 참 하하' 하고 웃고 넘길 수 있는데누군가 '왜 아니야?' 라고 물어봤을 때, 무심코 하늘을 멍하니 쳐다보게 된다면 오늘 이 글을 주목해 보자.HTML우선 HTML의 풀 네임을 살펴보면 Hyper Text Markup Language다. 뜻의 풀이를 보면 관련 있는 항목을 연결하는 텍스트로 구성된 언어라는 건데,쉽게 말해서 페이지의 구조를 잡는..

• format_list_bulleted Stack/HTML
• · 2024. 9. 25.
• textsms

google reCAPTCHA v3 적용기 (Next.js ver)

이번 포스팅에서는 로고만 봐도 뭘 하는 녀석인지 바로 알 수 있는 구글 reCAPTCHA에 대해서 정리해본다. 웹 사이트를 이용하다 보면 종종 '로봇이 아닙니다' 하는 문구와 함께신호등을 선택한다거나 문자를 입력하는 절차를 종종 거치게 된다.이러한 과정은 웹사이트를 공격하는 봇으로 부터 내 웹사이트를 보호하고자 하는 절차인데해당 과정이 없을 경우 다양한 방식의 피해를 입을 수 있기 때문에 이러한 안전장치는 반드시 필요한데,구글 reCAPTCHA는 이러한 부분을 도와주는 고마운 녀석이다. reCAPTCHA v3현재 (25년 06월 기준) reCAPTCHA는 v2와 v3를 제공하고 있는데v2의 경우 앞서 예를 들었던 것 처럼, 웹 사이트의 이용자가 특정 버튼을 클릭하거나 요구하는 조건을 선택하는 방식으로해당..

• format_list_bulleted Stack/Next.js
• · 2024. 3. 19.
• textsms

[Next.js_Library] Amplitude 적용기

이번에는 Amplitude 다.이번 프로젝트 하면서 느끼는 거지만 내가 아직 경험하지 못한 분야가 너무나도 많구나 하는 것을 느끼면서우물안 개구리에서 이제 막 우물 밖을 쳐다보고 있는 중인 개구리인 느낌이다. 아무튼 이번에도 해당 기능을 어떻게 적용했는지 한번 정리해 보려고 한다.  * 참고 사항 혹시라도 내 글을 읽고 도움이 될까? 해서 들어온 분들을 위해 내 프로젝트 상황에 대해서 전반적인 정리를 해두겠다. 프레임워크 : Next.js (ver 14.1.0)라이브러리 버전 : 2.5.2 추가로 App router 환경에서 구현했다.  Init Setting npm install @amplitude/analytics-browser 거두절미하고 일단 설치부터 진행한다.....사실 처음 적용하는 입장에서 ..

• format_list_bulleted Stack/Next.js
• · 2024. 3. 18.
• textsms

[Saida Lab] Next-auth 적용하기 (3)_build error

이제 로그인과 관련된 기능들도 잘 동작하고 끝났다고 생각 했는데, 요기 베라의 명언은 이 개발씬에서도 매번 적용이 되는거 같다. 끝날 때까지 끝난게 아니다 - Yogi Berra 왜 또 뭐가 문제인데? 이번에는 build 과정에서 발생한 문제였다. Type error: ... Property 'authOptions' is incompatible with index signature. Type 'AuthOptions' is not assignable to type 'never'. 6 | 7 | // Check that the entry is a valid entry > 8 | checkFields

• format_list_bulleted Stack/Next.js
• · 2024. 3. 17.
• textsms

[Saida Lab] Next-auth 적용하기 (2)_callback

지난 번에는 Next-auth를 이용해서 간단하게 카카오 로그인을 구현해 봤다. React를 사용 했을 때와 비교해 봤을때, 초기에 세팅하는 구조가 달라서 조금 헷갈릴 수 있겠지만 사용하는 방법은 (개인적으로) 월등하게 편하게 사용할 수 있지 않나 하는 생각이 든다. 거기다가 useSession을 사용하면 어떤 페이지에서도 가져와서 사용할 수 있다는 점도 좋은 점 중 하나인 것 같다. 그렇게 카카오 로그인을 해결한 개발자는 오래오래 행복하게 살ㅇ... 뭐가 문젠데? 현재까지 적용한 것만 보면 카카오에서 전달해준 유저의 기본적인 정보와 카카오에서 제공하는 토큰을 사용할 수 있게 됐다. 그러나 서버의 API는 카카오의 토큰을 사용할 수 없고, 서버에서 제공해 주는 토큰을 사용해야만 통신을 할 수 있다. 그래..

• format_list_bulleted Stack/Next.js
• · 2024. 3. 16.
• textsms

[Saida Lab] Next-auth 적용하기 (1)_app router + kakao Login

전에 리액트를 이용해서 소셜 로그인 (카카오 로그인)을 구현했던 경험이 있었다. 그 때 기억 때문에 이번에 프로젝트 진행할 때, 그 방법 그대로 하려고 하다가 CTO님께서 '다른 프로젝트에서도 Next-auth 사용해서 적용했으니 이번에도 적용해봐요' 라고 하셔서 몇일간의 고생 끝에 적용한 내용을 기록하려고 한다. React로는 어떻게 했더라.. 카카오 디벨로퍼에 있는 문서를 보면 REST API를 사용하는 방식으로는 위와 같은 방식을 진행한다고 적혀있다. 실제로 나도 위 문서를 토대로 로그인 작업을 진행했었다. a 태그에 카카오 인가코드 받을 수 있는 링크 연결해 주고, 리다이렉트 경로 설정해서 내 프로젝트의 설정한 경로로 오게 되면 서버로 인가 코드 보내줘서 서버가 토큰을 받아오게 하거나, 아니면 클..

• format_list_bulleted Stack/Next.js
• · 2024. 3. 15.
• textsms

[React_Library] Framer-Motion 적용기

전에 개발을 할 때는 간단한 애니메이션 (팝업 효과라던지, 뭐 디졸브 라던지...) 들은대부분 직접 만들어서 구현하곤 했었는데, 최근에 개발하면서 기획자분께서 뿅? 뿅? 하고 튀어나오는애니메이션을 원하셔서 라이브러리의 힘이 절실했다. 일단 해보겠읍니다! 하고 지른 뒤 ChatGPT나 stackoverflow 형들에게 도움을 요청하면 되겠지 했는데공식문서만 봐도 간단하게 적용할 수 있는 라이브러리라서 어떻게 적용했는지만 기록해 보려고 한다. Installnpm install framer-motion 해당 라이브러리는 사용하고자 하는 프로젝트에서 위와 같이 설치를 진행하면 된다. * 참고 Stack *프레임워크 : Next.js (ver 14.1.0)스타일 라이브러리 : sass (1.70.0)애니메이션 라..

• format_list_bulleted Stack/REACT
• · 2024. 3. 14.
• textsms

React에서 map 메서드 쓸 때, key prop을 사용해야 하는 이유?

프론트엔드 개발을 할 때, UI에 반복되는 구조를 하드코딩 하지 않고 Map 메서드를 사용해서 구현하는 경우가 매우 많다. 배열이나 객체로 된 데이터를 서버 혹은 상수데이터로 받아와서 동일한 UI 구조에서 데이터만 다르게 표시되도록 구현하는데 이 과정에서 map 메서드를 사용하게 된다. 이 때, 가장 부모요소에 key prop을 기입하게 되는데, 왜 이 key prop이 필요한 걸까? Problem {SampleData.map((el)=>{ return ( {el.title} ) })} 위와 같은 형태로 UI를 구성했다고 가정해 보자. 현재 SampleData라는 데이터를 map 메서드를 이용해 주고, 데이터 안에 있는 요소 중 title이라는 데이터를 화면에 그려주고 있다. 이러한 상태에서 개발 서버를..

• format_list_bulleted Stack/REACT
• · 2023. 9. 14.
• textsms

[TypeScript] props로 setState 넘겨주는 방법

react.js를 사용하면서 아래왜 같은 경우가 굉장히 다분하게 있을 것이다. 부모 컴포넌트에서 만든 state를 변경하는 setState를 자식 컴포넌트로 내려서 사용하는 것 이런 경우가 굉장히 많기에, 우리는 react.js에서 이렇게 사용해왔다. // Parents.js const Parents = () => { const [state, setState] = useState(""); return ; }; // Child.js const Child = ({setState}) => { return {setState("1")}}>클릭; }; react.js에서는 편-안하게 props로 넘겨주고 사용해서 부모에 있는 state를 변경할 수 있었다. 그런데.. Typescript에서는 그렇지 않았다.. Pr..

• format_list_bulleted Stack/TS
• · 2023. 4. 17.
• textsms

[TypeScript] scss module 사용할 때, 발생하는 에러 해결하기

Problem Typescript로 초기 세팅을 마친 후 본격적인 프로젝트에 돌입..! 하자마자 에러가 터졌다 scss 사용할 때 module 쓰려고 기존에 사용하던 방식처럼 적용했는데 빠른 에러메세지와 함께 시작부터 발목을 잡아버리는 사태가 벌어졌다. Vscode에서 보니까 '모듈 또는 해당 형식을 찾을 수 없다' 라는 메세지가 나온 것을 발견했는데, 어떻게 해야할지 모르겠어서 바로 구글링을 시전했다. 한 5분정도 구글링을 했을까? 바로 딱 원하는 해결 방법을 찾아내 버렸다 ㅎㅎ ChatGPT를 사용할 때도 그랬지만, 정확한 질문이 얼마나 중요한지 또 다시 느껴버린 순간이었다. Solution 해결 방법은 의외로 간단했다. src 폴더 아래에 하나의 파일을 만들면 됐다. src 폴더 아래 global...

• format_list_bulleted Stack/TS
• · 2023. 4. 17.
• textsms