분류 전체보기 7

[JS] 자바스크립트에서 Class???

클래스클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.클래스는 문법적 설탕(syntactic sugar)이라고도 불리며, 내부적으로는 프로토타입 기반으로 동작하기 때문, 이는 자바스크립트의 유연성을 유지하면서도, 개발자가 보다 쉽게 접근할 수 있도록 도움!Syntatic Sugar란?프로그래밍 언어 차원에서 제공되는 논리적으로 간결하게 표현하는 것중복되는 로직을 간결하게 표현하기 위해 나타나게 됨원문Syntactic sugar, or syntax sugar, is a visually or logically-appealing “shortcut” provided by the language,..

Front-end/JS 2024.11.08

[FE] "use strict" 엄격 모드란?

"use strict"; 이 무엇인가요? 사용 시 장단점이 무엇인가요?use strict는 자바스크립트에서 엄격한 모드를 활성화하는 지시어로, 코드에서 잠재적 오류를 빠르게 찾아내고, 불필요한 전역 변수 생성을 방지하는 등 코드의 안정성과 품질을 향상 시킵니다. 또한 일부 브라우저에서는 성능을 최적화 할 수 있지만, 구형 브라우저에서의 호환성 문제와 기존 코드에 영향을 미칠 수 있어 신중하게 사용해야 합니다.Strict Mode의 등장 배경 💡 JS는 오랫동안 호환성 문제 없이 발전해왔습니다. 새로운 기능이 추가되면서도 기존 기능은 변경되지 않았습니다. 이로 인해 기존 코드의 안정성이 보장되는 장점이 있었습니다. 그러나 동시에 자바스크립트 창시자들의 실수나 불완전한 결정이 언어에 영구히 남게 되는 단점..

[FE] HTTP 와 HTTPS의 차이가 뭘까?

HTTP와 HTTPS 차이면접 대답HTTP와 HTTPS는 웹에서 데이터를 주고받는 프로토콜입니다. HTTP는 데이터를 암호화하지 않고 전송해 보안에 취약하지만, HTTPS는 SSL/TLS 암호화를 적용해 데이터를 안전하게 전송할 수 있습니다. HTTP는 80번 포트를, HTTPS는 443번 포트를 사용하며, HTTPS는 보안 인증서를 통해 서버의 신원을 검증하기 때문에 로그인, 결제 같은 민감한 정보가 필요한 웹 사이트에서 필수적으로 사용됩니다.HTTP란?HTTP는 하이퍼텍스트 전송 프로토콜의 약자로, 네트워크를 통해 데이터를 전송하는 데 사용되는 프로토콜 또는 정보를 표현하기 위한 규정된 순서와 구문입니다. 웹 사이트 콘텐츠 및 API 호출을 포함하여 인터넷을 통해 전송되는 대부분의 정보는 HTTP 프..

[JS] 실행 컨텍스트와 콜 스택

자바스크립트 실행 컨텍스트와 콜 스택자바스크립트의 실행 컨텍스트는 코드가 실행될 때 필요한 환경 정보를 담은 객체다. 실행 컨텍스트는 코드의 실행 중에 접근할 수 있는 변수, 함수, 객체 등의 선언 정보를 포함한다..JavaScript에서 실행 컨텍스트를 생성하는 코드 뭉치들전역 공간 - 파일 전체를 의미하는 공간함수 - 각 함수는 별도의 실행 컨텍스트를 가짐module - ES6 모듈을 사용하는 경우, 각 모듈마다 별도의 컨텍스트가 생성.eval - 여러 문제를 유발할 수 있는 위험한 코드로, 실행 중에 코드 문자열을 평가함.실행 컨텍스트의 종류전역 실행 컨텍스트 (Global Execution Context)코드가 처음 실행될 때 생성되는 컨텍스트로, 전역 변수와 함수를 관리하고 프로그램이 끝날 때까..

Front-end/JS 2024.11.07

[FE] 프론트엔드 기술 면접 질문

기술 면접 질문 리스트업개요프로그래머스 데브코스 WTL시간에 기술 면접을 준비하기 위해서 팀원들과 각자 하나의 질문을 매주 월요일 까지 뽑아오고 그 주 금요일에 발표하는 형식으로 진행하게 되었다.첫 주차, 기술 면접 WTL에 진행한 내용이다.1. 동기와 비동기란?동기(Synchronous) 방식은 작업이 순차적으로 진행되는 방식입니다. 즉, 이전 작업이 완료되어야 다음 작업이 시작될 수 있습니다. 이 방식은 간단하지만, 시간이 오래 걸리는 작업이 있을 경우 전체 프로세스가 지연될 수 있다는 단점이 있습니다.비동기(Asynchronous) 방식은 작업이 동시에 진행될 수 있는 방식입니다. 이전 작업이 완료되지 않아도 다음 작업을 시작할 수 있기 때문에, 효율적인 처리가 가능합니다. 하지만, 작업의 순서가 ..

Front-end 2024.11.07

[CSS] Flex와Grid 비교 분석

CSS - Flex와 Grid웹 페이지를 만드는데 있어서 레이아웃 구성이 되게 힘들고 중요합니다. 그래서! CSS에서는 Flex와 Grid를 사용하여 레이아웃을 만들 수 있습니다. 이번 글에서는 Flexbox와 Grid의 개념, 특징, 사용법, 예제 코드, 그리고 두 가지의 차이점에 대해 설명하겠습니다!!🔥 1. Flex란?1.1 개념Flexbox(Flexible Box Layout)는 CSS의 레이아웃 모듈로, 주로 1차원 레이아웃을 구성하는 데 사용됩니다.Flexbox를 사용하면 요소들을 쉽게 정렬하고 배치할 수 있으며, 공간을 효율적으로 활용할 수 있습니다.Flexbox는 주로 수평 또는 수직 방향으로 요소를 정렬하는 데 좋습니다.1.2 주요 특징1차원 레이아웃 유연한 크기 조정 정렬 및 배치 정..

Front-end/CSS 2024.11.07

TITTO 회고록

TITTO 프로젝트교내 경진대회2024.01.10 ~ 2024.04.01 동안 대학교 교우들과 프로젝트를 진행했습니다. 모두 프로젝트 경험이 많지 않은 학생들이었고 디자이너와 기획자 없이 백엔드 개발자와 프론트엔드 개발자가 모여서 생각하고 프로젝트를 하느라 어려운 부분이 있었던 것 같습니다.결국에는 유종의미를 거두어 경진대회 2등 은상을 타긴 했지만 아쉬웠던 점과 더 나아가야 할 방향들을 작성해보려고 합니다. 3개월간 했었던 프로젝트 회고록을 이제서야 작성해보려합니다..TittoGithub 링크프로젝트 설명'티토'는 멘토와 멘티를 매칭하고 질문에 대한 답변을 제공하는 서비스입니다. '토'와 '티'는 각각 '멘토'와 '멘티'를 나타내며, 이를 결합하여 '티토'라는 이름을 만들었습니다. 영어로는 TITTO로..

회고록 2024.11.07