분류 전체보기124

• 

  [섞어마셔] 코딩알려주는 누나 스터디 팀 프로젝트 OT 취업준비를 하면서 코딩 관련 유튜브를 보다가 코딩 알려주는 누나(이하 "누님")의 React 스터디를 모집한다는 영상을 보았습니다. 저는 무언가 강제적으로 일을 줘야지 엄청나게 발전한다는 것을 알고 있으며 스터디는 React초보대상이었지만 마지막에 1주간 팀프로젝트를 진행한다고 하여 이 내용을 이력서에 추가해야겠다고 생각되어 신청하게 되었습니다. 그렇게 4주가 지나고 드디어 팀프로젝트 주간이 다가왔습니다. 처음에는 누님께서 프로젝트를 해야 하는 이유, 애자일 방법론 등등 프로젝트에 관한 설명을 해주시고 드디어 팀원을 만나는 시간이 왔습니다. 처음이라 어색했지만 지금 하는 프로젝트에서 프론트팀장을 맡아서 그런지 이런 상황에서 말을 꺼내야 할 것 같아서 저도 모르게 진행을 하게 되었습니다.ㅎㅎㅎㅎ 슬랙에서 .. 프로젝트/섞어마셔(shake_drink) 2024. 4. 16.

• 

  [면접] 클로저(Closure)란 무엇인가요? 0. 개요 클로저는 매번 나오는 개념임에도 불구하고 매번 정확한 정의와 설명을 하기 어려운 개념입니다. 이번에 상세하게 블로깅을 해보면서 완벽하게 숙지해도록해봅시다. 1. 클로저의 정의 closure : 폐쇄, 종지, 폐점, 폐쇄음 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합으로, 함수가 자신이 생성될 때의 환경을 "기억하는" 특성을 가지고 있습니다. 이러한 성질 덕분에, 외부 함수의 지역 변수에 내부 함수가 계속 접근할 수 있는 것입니다. 클로저는 자바스크립트의 고유한 특성이며, 함수가 자신이 생성될 때 접근할 수 있었던 변수들을 함수가 실행될 때에도 계속해서 접근할 수 있게 합니다. 즉 클로저는 자신이 생성될 때의 렉시컬 환경(Lexical environment)을 기억하는 함수입니다. 잘 .. 카테고리 없음 2024. 4. 12.

• 

  [면접] 동등연산자("==")와 일치 연산자("===")의 차이 이해하기 0. 개요 평소에 코드를 작성할 때 "==="만을 사용하고 "=="는 타입을 비교하지 않고 값만 비교한다고만 알고 있습니다. 이러한 지식이 정확한지 블로그를 작성해 보았습니다. 1. 동등연산자 ("=="연산자) "==" 연산자는 동등 연산자로서, 두 변수의 값이 같은지 비교합니다. 하지만, 비교하기 전에 타입 변환을 수행하여 두 변수의 타입을 일치시킵니다. 숫자 '5'와 문자열 '5'를 비교할 때, 문자열 '5'는 숫자 5로 자동 변환된 후 값이 비교됩니다. console.log(5 == '5'); // true console.log(1 == true); // true 2. 일치연산자 ("=="연산자) "===" 연산자는 일치 연산자로서, 두 변수의 값과 타입이 모두 같은지 비교합니다. 타입 변환 없이 .. 면접 2024. 4. 12.

• 

  [면접] 호이스팅(Hoistin)에 대해 설명해보세요. 0. 개요 호이스팅에서 대해서 가끔씩 들어봤는데 정확한 설명을 할 수 없어서 이렇게 블로그 글로 작성하게 되었습니다. 1. 호이스팅(hoisting)이란 hoisting이라는 단어의 뜻을 보면 "끌어올리기, 들어 올려 나르기."라는 뜻을 가지고 있습니다. 그렇다면 자바스크립트에서 무엇을 끌어올리냐면 변수와 함수 선언을 끌어올립니다. 변수와 함수 선언을 물리적으로 코드의 상단으로 이동시키는 것이 아니라, 컴파일 단계에서 메모리에 저장하는 JavaScript의 기본적인 동작 방식을 의미합니다. 이로 인해, 코드 상에서 하단에 위치한 변수나 함수를 상단에서 참조할 수 있게 됩니다. 2. 호이스팅의 작동 방식 자바스크립트는 코드 실행 전에 컴파일 단계를 거치는데, 이 때 변수와 함수 선언을 먼저 처리합니다. 이.. 면접 2024. 4. 11.

• 

  [면접] 브라우저 렌더링 원리에 대해서 설명해보세요. 0. 개요 브라우저 렌더링 원리는 대충은 알고있지만 설명하라고 한다면 제대로 설명을 못 할 것 같습니다. 이번에 블로그를 정리를 하면서 제대로 답변을 할 수 있도록 해봅시다! 1. 브라우저(Browser)란? 브라우저는 우리가 보고 싶은 사이트에 들어가면 url를 통해 서버에 요청하고 서버로 부터 받은 응답(HTML,CSS,JavaScript, 이미지 등..) 을 브라우저에 표시하는 것입니다. 가장 대표적인 웹 브라우저로는 크롬, 사파리, 파이어폭스가 있습니다. 2. 브라우저 렌더링의 단계 브라우저 렌더링은 HTML, CSS, JavaScript 등의 웹 페이지 자원을 브라우저가 화면에 그리는 과정을 말합니다. 브라우저 렌더링 원리와 순서는 크게 다음과 같은 단계로 구성됩니다. 2.1 문서 파싱 HTML.. 면접 2024. 4. 10.

• 

  [면접] async/await에 대해 설명해보세요. + promise란 0. 개요 async/await는 비동기 코드를 동기적으로 처리할 때 사용하는 방법이라는 것만 알고 있습니다. 주로 api연결을 할 때 많이 사용했는데 구체적으로 공부해 본 적이 없어서 정리하게 되었습니다. 1. async 함수 async 키워드를 함수 앞에 붙여 사용합니다. 이 키워드가 붙은 함수는 항상 프로미스를 반환합니다. 함수 내에서 직접 값을 반환하더라도, JavaScript는 그 값을 자동으로 프로미스로 감싸 반환합니다. 만약 함수가 프로미스를 반환한다면, 해당 프로미스는 async 함수의 반환값을 그대로 갖게 됩니다. async function f() { return 1; } f().then(alert); // 1 명시적으로 프라미스를 반환하는 것도 가능한데, 결과는 동일합니다. async .. 면접 2024. 4. 9.

• 

  [면접] CSRF나 XSS 공격을 막는 방법은? 0. 개요 프론트엔드 개발자로 취업을 하기 위해 면접을 준비 중 생소한 단어가 나와서 블로그에 정리하게 되었습니다. 면접의 질문은 아래의 zero-base 사이트를 참고하였습니다. 현직 개발자가 정리해주는 프론트엔드 기술 면접 필수 질문, 답변 20선 (feat. 전 카카오 엔터프라 신입 개발자라면 반드시 준비해야 할 프론트엔드 기술면접 질문+답변 zero-base.co.kr CSRF(Cross-Site Request Forgery)와 XSS(Cross-Site Scripting)는 웹 보안의 두 가지 주요 공격 유형입니다. 이들은 각각 다른 방식으로 웹 애플리케이션의 취약점을 이용합니다. 1. CSRF(Cross-Site Request Forgery) 공격이란 사용자가 로그인하여 인증된 상태에서 특정 .. 면접 2024. 4. 6.

• 

  [Tars] 회고록 13일차 - 커밋메시지, 깃헙 대소문자 구분, 느린 코드리뷰 0. 개요 백엔드에서의 작업이 느려져서 느긋하게 개발을 하고 있는데 내 코드를 다시보니 느긋하게 하면 안 되는 상황이였습니다. 빠르게 코드리뷰를 해야지 진행이 될텐데 코드리뷰가 점점 느려져서 내가 해야할 일을 못 하게 되었습니다. 코드리뷰의 속도를 높일 방법에 대한 고민을 하였고 오랜만에 회의에서 유의미한 고민과 블로그에 적을 거리가 생겨서 블로그를 작성해보았습니다. 1. 커밋 메시지 팀원이 만든 공통 헤더 컴포넌트가 있습니다. 이것에 대한 사용법은 나와 팀원들은 익숙하긴 하지만 "새로운 사람이 봤을 때 바로 사용할 수 있나?" 라는 질문에 그렇지 않다고 생각되어서 아래와 같은 PR 메시지를 달았습니다. 요청을 받은 팀원분이 열심히 JSDoc기능을 사용해서 주석을 달았습니다. 여기서 JSDoc기능이 무엇.. 프로젝트/Tarss 2024. 4. 6.

• 

  [면접] API, REST, REST API, RESTful API 차이점은 무엇인가 0. 개요 프론트엔드 면접 준비를 하면서 "RESTful API에 대해 설명해주세요."라는 질 높은 답변을 하기위해 정리한 글입니다. 답변은 간단하고 명확하게 해야하지만 단순하게 암기해서 답변하는 것보다는 상세지식을 제대로 아는 상태에서 답변을 하는 것이 더 좋은 답변을 이끌어 낼 수 있다고 생각되어 이렇게 정리하였습니다. 1. API란? API(Application Programming Interface) 둘 이상의 컴퓨터 프로그램이 요청, 응답을 할 때, 어떻게 통신할지 어떻게 데이터를 주고받을 지에 대한 방법(HTTP vs HTTPS, JSON vs XML, GET, POST… )이 정의된 중계계층을 말한다. 예를 들어, 기상청의 소프트웨어 시스템에는 일일 기상 데이터가 들어 있습니다. 휴대폰의 날.. 면접 2024. 4. 5.

• 

  [github] github 대소문자 가릴줄 알게 만들기 PR을 올렸는데 netlify 배포가 실패했습니다. 이유가 무엇인지 링크를 타고 들어가서 읽어보니 OnBoardingPage -> OnboardingPage로 바꾸어서 에러가 생겼습니다. 참고로 저는 저 링크 타고 가면 흰 배경만 나오는데 시크릿모드로 들어가면 잘 뜹니다. github은 기본적으로 대소문자 구분을 못 한다고 하니 대소문자를 구분할 수 있게 만들어 보겠습니다. 1. 대소문자 구분 코드 $ git config core.ignorecase false 이 명령어는 github에게 대소문자를 구분하라고 명령을 내립니다. 2. git 추적 변경 $ git rm -r --cached . Git 추적 목록에서 모든 파일들을 제거합니다. 하지만 실제 파일들은 작업 디렉터리에 남깁니다. 이렇게 함으로 대소.. 개발/github 2024. 4. 3.