2023년부터 로그 기록 2023년부터 로그 기록

재현 강사님께서 기술면접 대비 특강이 진행을 준비해 주신 내용을 정리했다.질문에 대해 모법답변이 없는 경우도 있고, 가이드 라인만 제시되어 있는 경우도 있다.1. 기술 면접에서는 이런 문제가 나온다. 코딩 인터뷰에서 실제 답변하는 것처럼 구어체로 답변하도록 하자.많은 사람들 또는 인터뷰에 앞서서 떨리는 것을 위해 좋은 준비법은 미리 해보는 것이다.오늘은 쉬운 내용에 대해서 질문하고 다뤄본다.1-1. section 요소와 article 요소의 사용 용도에 대해 설명해 주세요.더보기🎈 모범답변 :둘 다 HTML 문서를 구획짓는 nav 나 body 요소같은 sectioning 요소에 속하며, section 요소는 제목을 가지고 있는 비슷한 주제의 컨텐츠의 그룹을 나타낼때, article의 경우 문서 내에서 ..

GitHub Repo. : https://github.com/FRONTENDSCHOOL7/final-12-HoloNyamNyam 배포 사이트 : https://holonyam.netlify.app/ 테스트 계정: holo_nyam@gmail.com 비밀번호: holo_nyam 1. 한재현 강사님 피드백 - 발표자료 애니메이션 (Canva) 멋졌다. - 사용자의 배려가 곳곳에서 느껴졌다. - 안내 텍스트, 게시물 위로가기 버튼, 꼼꼼하게 작업했다는게 느껴졌다. - 블러처리도 원금감 처리 정말 잘했다. - 테스트 계정 시작하기도 만들어서 - 마우스 호버시 효과와 로딩 인디케이터, 로딩 스켈레톤 화면이 인상적이다. - 공유하기, 맵으로 이동하기 - 카카오톡 공유하기 기능을 회사들이 원하기 때문에 공유하고 공유..

목차 1. 오늘 팀 프로젝트 업무 2. 배포를 위한 GitHub Fork 3. Netlify로 배포하기 4. GitHub Pages로 배포하기 1. 오늘 팀 프로젝트 업무 1-1. 댓글관련 버그 및 접근성 개선 - Home 페이지에서 Feed 댓글 개수가 안보이는 버그 해결 - Feed 이미지뿐만 아니라 Text를 포한한 FeedContent에서 마우스 커서를 Pointer로 변경 - FeedContent에서 마우스를 클릭하면 DetailFeed 페이지로 이동하고, DetailFeed에서는 Click Event 제거 - Feed Comment 추가 시 쌓이는 위치를 제일 아래에서, 제일 위로 변경 1-2. 새로운 Upload 구현 및 Issue 생성 - 새로운 Feed를 작성할 수 있는 게시물 업로드 페..

feat branch 를 main 브랜치와 동기화- 업데이트된 main 브랜치를 내 브런치와 병합할 때 다음과 같은 명령어를 사용한다.- git fetch --prune origin 명령어는 원격 저장소(origin)에서 최신 변경 사항을 가져오고, 로컬 브랜치와 원격 브랜치 간의 차이를 동기화한다. --prune 옵션은 원격 저장소에서 삭제된 브랜치를 로컬에서도 제거한다.- git reset --hard origin/main 명령어는 로컬 브랜치를 origin/main 브랜치와 동일한 상태로 되돌린다. --hard 옵션은 작업 디렉토리의 변경 사항까지 모두 지우고 원격 브랜치의 상태로 리셋한다.# git fetch --prune : 더 이상 원격 저장소에 없는 원격 추적 분기(삭제된 브랜치)를 정리gi..

프론트엔드와 백엔드 개발자 그리고 서버 엔지니어의 기술 면접 질문으로 나올 수 있는 질문이다. DNS 에 대해 설명하세요 1. 30초 답변: DNS(Domain Name System)는 컴퓨터가 통신을 하는데 사용하는 숫자로 된 IP 주소(Internet Protocol Address)를 사람이 이해하기 쉬운 도메인 이름으로 변환(mapping)하고 라우팅 정보를 제공하는 계층형 분산 데이터베이스 시스템입니다. 전화번호부와 비슷한 역할을 하며, 전 세계에 분산되어 있는 DNS 서버들이 계층적으로 도메인 이름과 IP 주소의 정보를 저장하고 공유합니다. 이를 통해 기억하기 어려운 IP 주소를 모르더라도 도메인 이름을 사용하여 원하는 웹사이트나 웹 자원에 쉽고 빠르게 접근할 수 있습니다. 2. 상세 답변: 2..

일반적으로 Low Level 의 V8 엔진 작동원리의 내용까지 깊게 신경쓸 필요는 없다.그러나 정말 JavaScript 의 최적의 성능을 사용하고 싶다면, V8 엔진에서 어떤 식으로 코드가 해석되고 실행되는 지에 대해 어느 정도 이해가 필요하다. 잘 짜여진 JavaScript 는 인터프리터 언어임에도 불구하고 컴파일 언어인 C++에 근사한 성능을 낼 수 있다고 한다. 1. 크롬 브라우저의 V8 엔진에서 코드를 기계어까지 해석하는 과정 V8 JavaScript 엔진은 JavaScript 를 바이트코드(bytecode)로 컴파일(compile)하고 실행하는 방식을 사용합니다. 특히 적응형 JIT(AJIT : Adaptive Just In Time) 컴파일 방식을 채택하여, 코드가 실행될 때 기계어로 컴파일 ..

목차 1. 비동기 2. json-server 만들기 3. Fetch API 를 이용해 서버와 데이터 통신하기 오늘은 비동기 개념을 보충해주는 특강이 있다. 즐거운 한가위를 맞이하기 전 마지막 수업으로 찝찝했던 부분을 일부 해소할 수 있었다. 이전까지는 간단한 database 없이, html 에 바로 생성하거나 브라우저 로컬스토리지를 이용 todo 리스트를 만들어 보았다. 이번 수업에서는 간단한 json 서버를 만들고 데이터를 생성하고, 읽어오고, 제거해 본다. 추석 연휴 전날까지 고생해주신 강사님께 감사할 따름이다. 1. 비동기 1-1. 동기적인 처리 - 비동기 처리는 동기적으로 처리되지 않는 것을 이야기한다. -하나의 흐름에서 순차적 - 출력1 > 출력2 > 출력3 - 각각의 함수는 완전히 종료되며 이..

오늘의 기술면접 주제는 REST API 에 대해서 다룬다. 1. REST API 1-1. 30초 답변 REST API는 클라이언트와 서버 간의 통신 방식을 정의한 REST(REpresentational State Transfer)라는 아키텍처 스타일을 따르는 웹 API입니다. 이 중에 REST 아키텍처 스타일을 완벽하게 준수하는 API의 경우 RESTful API라고 부릅니다. REST API는 HTTP 요청을 통해 클라이언트와 서버 간에 리소스를 주고받을 수 있습니다. 리소스는 JSON, XML, HTML 등의 다양한 형식으로 표현될 수 있으며, URI(Uniform Resource Identifier)로 식별됩니다. REST API는 상태가 없으므로 각 요청이 독립적이고 자기 서술적인 특징을 가집니다..

목차 1. CORS란 무엇인가요? 2. Proxy 전자책 집필을 목표로 프론트엔드 개발자 기술면접 질의 응답을 정리해보고자 한다. 오늘의 주제는 CORS(Cross-Origin Resource Sharing) 와 Proxy Server 이다. 1. CORS 란 무엇인가요? 1-1. 30초 답변 CORS 란 교차 출처 리소스 공유라는 의미로, 웹 어플리케이션이 출처가 다른 자원에 접근할 수 있도록 브라우저와 서버가 협력하는 방식입니다. CORS 에 대처하는 방법은 서버 측에서 허용하는 Origin 과 메서드, 헤더 등을 응답 헤더에 명시하는 것 입니다. CORS를 우회하는 방법은 프록시 서버를 사용하거나 JSONP와 같은 기법이 있습니다. 1-2. 상세 설명 CORS 는 한 출처에서 실행되는 웹 어플리케이..

목차 1. 미디어쿼리의 사용법 2. 다양한 미디어쿼리의 활용 3. JS 를 이용한 화면 사이즈 분기 4. 미디어쿼리는 단순히 사이즈만 나누는 것이 아니다. 1. 미디어쿼리의 사용법 1-1. 미디어쿼리의 기본 - HTML Link 태그로 사용 (실무에서 사용 잘 안함) > 파일을 나눠서 사용함 > - CSS @media 키워드로 사용 (일반적인 사용법) - @media only all and (조건) and (조건( {} > all : 미디어 설정, 생략시 기본값 all, screen | print 를 주로 사용 > only : 특정 미디어에만 적용하는 경우, screen | print 를 지정하는 경우 > and : 미디어 쿼리의 조건은 모두 and 키워드로 연결 > 조건 : 반드시 괄호 () 안에 조건..

목차 1. 요약 2. 실행 컨텍스트 3.실행 컨텍스트의 생성과 식별자 검색 과정 모던 자바스크립트 딥 다이브 스터디 3-1, Ch. 23, 실행 컨텍스트, 스코프 이 글은 모던 자바스크립 딥 다이브 책 中 실행 컨텍스트 부분을 타이핑한 것입니다. 내용의 이해가 어려워서 직접 타이핑과 그림을 그려가며 이해 했습니다. 1. 요약 - 실행 컨텍스트는 소스코드를 실행하기 위한 필요한 환경을 제공하고 실행 결과를 실제로 관리하는 영역이다. - var 키워드로 선언한 변수 x 는 '선언 단계'와 '초기화 단계(undefined)'가 동시에 진행된다. - 전역 코드 평가 시점에 객체 환경 레코드의 BindingObject 를 통해 전역 객체에 변수 식별자를 키로 등록한 다음, 암묵적으로 값을undefined 를 바인..

목차 1. 기술면접 2. CS 관련 질문 3. 네트워크 관련 질문 프론트엔드 직군의 기술면접관련 책 집필을 진행하고 있다. 저번 FE 기술면접 단골 질문(OOP와 ES6 이후 추가 기능) 에 이어서, 이번에 내가 맡은 주제는 네트워크과 컴퓨터 공학(CS) 관련 질문들이다. 시간이 충분히 주어지지 않기 때문에 우선 ChatGPT 에게 물어보고, 그 답변을 기준으로 방향을 잡아 자료조사 및 내용의 퀄리티를 높여갈 계획이다. 아래 내용들은 Microsoft Bing 의 웹용 AI 를 사용했다. 다소 퀄리티가 부족하더라도, 급한 사람들에게는 다듬어지지 않는 내용이라도 도움이 되지 않을까 싶어 공유한다. 1. 기술면접 기술 면접이란? 더보기 기술 면접이란, 입사 지원자의 개발 역량과 협업 능력을 평가하는 과정입니..

목차 1. 디스코드 사용법 2. 노션 페이지 3. 공통질문 답변 원티드 FE 프리오보딩 챌린지를 참여하기로 했다. (9/4 시작) OT 참여를 시작으로 열심히 한번 해보자 1. 디스코드 사용법 1-1. 디스코드에 Notion 링크를 공지할 예정 1-2. 전체 온보딩 챌린지 OT 이다. 1-3. 프리온보딩 챌린지 - 공고는 내려갔지만 노션에 링크로 들어가면 다시 내용 확인이 가능하다. - 각 챌린지마다 주제 - 강의주간 : 기술역량향상 (2주), 4차까지 각 3시간 수업을 진행 - 언제 강의가 진행되는지 노션페이지 참고 - 취업 챌린지 (4주) : 구직활동을 서포팅하는 주간, 이력서 특강, 채용 큐레이션 페이지 제공 - 채용 큐레이션 페이지란? 최소 연봉을 3천 이상 구인중인 기업 필터링하여 각 직군별로 ..

💡 아래 고민점들에 대해 방향성 찾고 구체적인 행동 계획 세워보기 학습 방향성과 우선순위 결정 - 어떤 게 중요하고 어떤 건 듣고 넘겨도 되는지 판단이 잘 안된다 - 수업 내용의 중요도 구분이 어렵다. - 공부에 대한 우선순위 선별(input이 너무 많다…🤮) 자기관리와 컨디션 관리 - 아침,오후 컨디션 관리 방법 - 평소 공부량… 줄어들고 있는 실태에 대한 고찰 - 체력, 멘탈관리 방법 실전 적용과 포트폴리오 준비 - 개인이나 팀 프로젝트를 시작하는 방법 - 이력서와 포트폴리오를 지금부터 준비하는 방법 - 학습 방법 개선 하는 방법 (내가 복습을 잘 하고 있는건지) 이렇게 진행해주세요 (~09:40) MC와 함께 서기 역할을 한 명이 자원해주세요. 간단한 아이스브레이킹을 진행해주세요 (5분이내) 위 3..

목차 1. 인트로 2. D3.js 3. Chart.js 오늘은 JS 로 그래프를 그리는 라이브러리 특강이 있어 기록을 남긴다. 필수 준비 사항은 아니지만 채용 공고에서 자격요건 또는 우대사항에 있는 경우, 강사님께서는 취업 후 하루 이틀 공부하고 가는 것을 권고한다. 또한 JavaScript 를 잘 다루는 개발자라면 기본 기능이야 하루 이틀만에 익숙하게 다룰 수 있다고 한다. 포트폴리오를 돋이게 꾸미고 싶다면 단순 Text 대신 Graph 로 대체하여 응용할 수 있겠다. 1. 인트로 1-1. 당부의 말씀 - html, CSS, JS, React - D3.js, Chart.js, Canvas - 하고 싶은게 아니라 필요한 걸 공부하세요. - 지금 필요한 것은 React 지, D3.js 가 아닙니다. - 이..