Scope : 변수, 너에게 닿을 수 있는 그 범위

자바스크립트에서 변수를 선언하고 값을 할당하고 여러 기능을 구현할 때,값이 할당된 변수에 접근해 해당 값을 활용하곤 하는데이 때, 스코프(scope) 라는 개념이 적용된다. 중요한 개념 중 하나이니 쓱 정리해 보고 가자.  스코프란?스코프를 구글에 검색하면 총에 사용하는 조준경이 가장 먼저 나온다.억지 같긴 하지만 조준경과 자바스크립트의 스코프의 공통점을 찾아보자면 범위라는 점이 있다. 조준경은 넓은 범위에서 타겟이 있는 위치의 범위를 좁히는 역할로 사용하는 장비라면자바스크립트의 스코프는 어떠한 변수에 접근할 때, 그 변수에 접근할 수 있는 범위를 의미한다.범위라는 개념만 보면 조준경과 자바스크립트의 스코프는 대충 비슷한 개념이다. 그렇다면 왜 이 범위가 중요한 개념이라고 하는 걸까?var age = 1..

• format_list_bulleted Stack/JS
• · 2024. 11. 2.
• textsms

var, let, const : 자바스크립트 변수 선언 3대장

자바스크립트를 배울 때 가장 먼저 접하게 되는 개념이 변수라는 개념이다.변수는 말 그대로 '변할 수 있는 수'를 의미하는데자바스크립트에서는 해당 변수에 다양한 값을 할당할 수 있고,이러한 변수를 이용해서 다양한 기능도 구현할 수 있다. 자바스크립트에서 변수는 기본 중에 기본이 되는 개념인데,이러한 변수를 선언할 때 3가지 방법이 있는데, 방법마다 명확한 차이가 존재하기에 이 점을 정리해 보고자 한다. 변수 선언 및 할당 방식var a = 1;let b = 2;const c = "text";변수는 선언 키워드를 작성하고 그 옆에 변수 이름을 작성한 뒤,변수에 담을 값을 입력하는 방식으로 변수를 선언하고 값을 할당한다. 변수에는 어떠한 값이든 담길 수 있다.현재 예시에서는 숫자와 문자를 할당했는데, 함수, ..

• format_list_bulleted Stack/JS
• · 2024. 10. 31.
• textsms

Box model : 여긴 내 구역이야 XX들아!

지난 포스팅 중 개발자 도구 뜯어먹기 : Elements 편에서 마지막에 Box-model에 대해서 짧게 언급하고 지나갔었다.근데 이게 프론트엔드 면접 질문으로 나올 수도 있다기에 조금 더 정리해 보려고 작성해 본다. 먼저 읽고 오면 좋은 글개발자 도구 뜯어먹기 : Elements Box model기본적으로 박스 모델에 대한 정의를 해보자면 모든 HTML 요소를 이루고 있는 구조다.기본적인 구성은 margin, border, padding, content로 구성이 되어있다. 모든 HTML 요소를 이루고 있는 구조라고 하는 말은 HTML에서 사용한 각 태그마다 이 박스 모델을 가지고 있다는 것을 의미한다.모든 태그가 이 박스 모델을 가지고 있다는 것은 결국 문서의 레이아웃을 구성하기 위함이라고 볼 수 있겠..

• format_list_bulleted Stack/CSS
• · 2024. 10. 21.
• textsms

attribute와 property의 차이 : 아니 왜 같은 속성인데 왜 달라요?

한국어는 같은 글자라고 하더라도 어떤 상황에서 사용하느냐에 따라 그 의미가 달라지는 경우가 있다.예를 들어 사과, 다리, 굴 등등 그 수를 셀 수 없을 정도로 많다.물론 영어도 그런 단어들이 있다. like, fire, right 등의 단어가 있다.그렇다고 여러 국가의 동음이의어에 대해서 알아볼 건 아니다. 이번에 알아볼 내용은 웹 프로그래밍에서 attribute와 property의 차이점이다.한국어로 번역하면 두 글자 모두 '속성'이라는 동일한 의미를 포함하고 있다.하지만 같은 속성이라고 하더라도 웹 프로그래밍에서 두 속성은 분명한 차이점이 존재한다.  Attribute & Property먼저 attribute를 한 마디로 설명하면 HTML 태그에 부여한 속성이다. 검색예를 들어 위와 같은 코드가..

• format_list_bulleted Stack/HTML
• · 2024. 10. 17.
• textsms

DOM이란? : 돔돔 돔돔 돔돔

프론트엔드 개발을 막 시작하고, 자바스크립트라는 언어를 만나게 되면 DOM이라는 개념에 대해 듣게 된다.감성돔, 참돔, 허구연 아저씨의 돔구장까지는 아는데 DOM이라고 하는 생소한 개념을 마주하게 된다. 그냥 모른 채 넘어가도 자바스크립트로 DOM에 접근해 다양한 기능을 구현하는데 별 무리는 없지만그래도 기왕 흘러 흘러 여기까지 온 거면, DOM이 정말 궁금하거나 혹은 면접을 준비하고 있을 테니스리슬쩍 찍먹을 해보도록 하자. DOM 우선 DOM의 의미부터 알아보자면 영어로 Document Object Model (문서 객체 모델)의 약자고,조금 더 풀어서 설명하면 문서의 구조의 계층을 표현한 객체를 인지하는 방식을 DOM이라고 한다.사실 이 말도 어렵다. 좀 더 쉽게 풀어보자. const title = ..

• format_list_bulleted Stack/HTML
• · 2024. 10. 16.
• textsms

HTML에서 JS를 불러오는 최적의 위치와 설정은?

HTML과 CSS를 통해 웹 페이지의 뼈대와 살을 붙여봤다면, 이제 JS를 이용해 페이지가 살아 숨 쉬도록 해줘야 할 차례다.HTML 파일에다 link 태그를 통해 CSS를 불러온 것과 유사하게, JS 파일도 불러와서 사용해야 하는데어떤 위치에서 혹은 어떤 속성을 통해 사용하느냐에 따라 실행되는 시점이 달라지고이에 따라 페이지 성능에 차이가 발생할 수 있다. 갑작스레 등장하는 들기름 아니 스크립트를 어떻게 제어할 수 있을지 알아보자.head vs body// index.html Hello! // 2번 // app.jsconsole.log("hello world")첫 번째 방법으로는 head 태그 사이에 script 태그를 통해 불..

• format_list_bulleted Stack/HTML
• · 2024. 10. 11.
• textsms

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

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

• format_list_bulleted Stack/HTML
• · 2024. 9. 25.
• 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