프론트엔드 킹왕짱이될테다 프론트엔드 킹왕짱이될테다

Q.Semantic HTML의 필요성을 예시를 들어 설명해주세요. Semantic HTML은 웹 페이지의 구조와 의미를 명확하게 전달하는 마크업 방식을 의미합니다. 이를 사용함으로써 웹 페이지의 가독성과 접근성을 향상시킬 수 있습니다. John Doe Software Engineer 이 코드는 이름과 직함을 담은 두 개의 문장을 포함하고 있는데, 그 문장이 무엇을 의미하는지는 알 수 없습니다. 이를 Semantic HTML을 적용하여 다음과 같이 수정할 수 있습니다 About the Author John Doe Software Engineer 위 코드에서 `` 요소는 페이지 내용을 구분하고 있으며, `` 요소는 섹션의 제목을 나타내고 있습니다. `` 요소는 페이지의 주요 내용을 포함하고 있으며, `` 요..

Q. 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여설명해주세요. 순수함수 부수효과 없는 함수. 즉, 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수 외부 상태를 변경하지 않는 함수 순수함수와 순수함수가 아닌 것 function add(a,b){ return a+b; } console.log(add(19,6)) 언제 어디서 add함수를 실행해도 add(19,6)은 항상 25를 리턴하고 외부상태를 변경하지 않았기 때문에 add는 순수하다. let c=10; function add2(a+b){ return a+b+c } console.log(add2(10,3)) c=20; console.log(add2(10,3)) add2는 c라는 변수값이 변하면 결과값도 달라지기 때문에 순수함..

Q. useRef가 필요한 상황을 예시를 들어 설명해주세요 1. 폼요소에 자동으로 초점을 맞출 때. useRef를 이용해 해당 요소를 선택하고 focus()메서드를 호출하여 초점을 설정할 수 있다. 2. 이전 상태 저장하기 useState 를 이용할 때 이전샅애를 유지하고 싶은 경우, useRef를 사용하여 이전 값을 저장하고 변경을 추적할 수 있습니다. 이것ㅅ은 상태가 변경되어도 컴포넌트가 다시 렌더링 될 때마다 동일한 값을 유지할 수 있습니다. 3. 애니메이션 컨트롤 useRef를 이용하여 애니메이션을 컨트롤 할 수 있습니다. 애니메이션을 시작, 일시중지 또는 싸디 시작할 때 사용됩니다. 4. DOM요소 조작 useRef를 사용하여 DOM요소에 직접 접근하고 해당 요소의 속성을 변경할 수 있습니다. ..

Q. require와 import차이점을 설명해주세요. 각각 어떤 상황에서 쓸 수 있나요? A. require는 NodeJS에서 사용되고있는 CommonJS키워드이고, import는 ES6에서 새롭게 도입된 키워드입니다. 두개의 키워드는 모두 하나의 파일에서 다른 파일의 코드를 불러온다는 동일한 목적을 가지고있습니다. require는 다른 변수를 할당하듯이 모듈을 불러오는 반면에, ES6방식을 따른 import방식은 Java나 python처럼 import 키워드를 이용해 좀 더 명시적으로 모듈을 불러옵니다. //CommnJS const moment = require("moment"); //ES5 import moment from "moment"; follow up question ES6모듈 시스템의 이점..

9. this의 동작원리와 용법 this는 현재 실행중인 함수의 객체를 참조하는 키워드입니다. this를 통해 함수 내부에서 객체의 속성에 접근하거나 메소드를 호출할 수 있습니다.this의 동작원리는 호출되는 방법에 따라 달라지는데, 함수를 일반적인 방법으로 호출하면 this는 전역 객체를 참조하게 됩니다. 그러나 객체의 메소드로 호출하면 this는 해당 객체를 참조하게 됩니다. 또한, 함수를 생성자로 호출하면 this는 새로운 객체를 참조하게 됩니다. 객체의 메소드를 호출할 때 this를 사용하여 해당 객체의 속성에 접근하거나 메소드를 호출할 수 있습니다. 또한, 함수를 생성자로 사용하여 새로운 객체를 생성할 때 this를 사용하여 해당 객체의 속성을 초기화할 수 있습니다. this를 사용할 떄 주의할..

HTTP에 대해 설명하고, 알고있다면 HTTP 메세지 구조에 대해 더 자세히 설명해주세요 position 을 어떻게 사용하는지 알려주세요 HTTP란, HTTP는 HTML과 같은 문서를 전송하기 위한 Application Layer Protocol입니다. HTTP는 웹브라우저와 웹서버의 소통을 위해 디자인되었습니다. 클라이언트가 HTTP 메세지 양식에 요청을 보내면, 서버도 HTTP 메세지 양식에 맞춰 응답합니다. HTTP메세지는 요청과 응답의 유형이있으며, 헤드부분(start line, HTTP headers)과 바디부분 (payload)로 구성됩니다. HTTP 메세지는 Request message Start line에는 세가지 요소가 있다. 1. HTTP method : (GET, PUT, POST 등..

5. 프레임워크와 라이브러리 차이점에 대해 설명해주세요. 프레임워크와 라이브러리의 차이점은 "제어 흐름"의 권한이 어디에 있는가입니다. 라이브러리를 사용할 때 사용자는 애플리케이션 코드의 흐름을 직접 제어해야 합니다. 개발 시 필요한 기능이 있을 경우 능동적으로 라이브러리를 호출하여 사용하거나 기존에 구성된 함수나 코드를 가져다 써야 합니다. 반면 프레임워크는 애플리케이션의 코드가 프레임워크에 의해 사용됩니다. 애플리케이션 코드는 프레임워크가 짜 놓은 틀에서 수동적으로 동작하기 때문에 제어의 흐름은 프레임워크가 가지고 있고 사용자가 그 안에 필요한 코드를 작성하게 됩니다. 여기서 제어의 역전(IoC, Inversion of Control)이란, 어떠한 일을 하도록 만들어진 Framework에 Contro..

Hoisting 이란? TDZ란? 호이스팅은 코드를 실행하기 전에 선언된 변수 및 함수를 해당 범위의 맨 위로 이동하는 JavaScript의 메커니즘입니다. 일반적으로 선언되지 않은 변수를 접근할 수 없습니다. 마찬가지로, JavaScript에서도 선언되지 않은 변수를 접근할 수 없으며, 선언되지 않은 변수를 접근하면 ReferenceError가 발생합니다. 하지만, JavaScript는 다음 예제처럼 나중에 선언되는 변수를 미리 접근할 수 있습니다. console.log(value); // undefined var value = 'Hello' console.log(value); // Hello 변수를 최상단으로 끌어올리는 호이스팅은 장점도 존재하지만, 단점도 존재합니다.호이스팅에 의해 에러는 나지 않지..

웹페이지가 브라우저에 랜더링되는 과정을 설명해주세요. 1. DOM(Document Object Model), CSSOM(CSS Object Model) 생성. 첫번째로 서버로부터 받은 HTML, CSS 리소스를 다운받습니다. 그리고 HTML과 CSS파일은 각각 DOM tree와 CSSDOM으로 만들어집니다. 2. Render Tree생성 순수한 요소들의 구조와 텍스트만 존재하는 DOM Tree와는 달리 Render Tree에는 스타일 정보가 설정되어 있으며 실제 화면에 표현되는 노드들로만 구성됩니다. 3. Layout 브라우저의 뷰포트 내에서 각 노드들의 정확한 위치와 크기를 계산합니다. 4. Paint Layout 계산이 완료되면 요소들을 실제 화면에 그리게 됩니다. 이전 단계에서 이미 요소들의 위치와..

드디어 어제 3월 22일 항해99 11기 수료식이었다! 정말 생각도 못하고있었는데 성장부문에서 상을 받았다... ㅠㅠㅠ 여러분들 너무 고마워요 가장 모범이 되는 성장속도라니요 🥺 괜히 이게 뭐라구 절대 안우는 ENTP 살짝 울컥했음.... 수상소감 너무 거창하게 해버려서 머쓱ㅎ 너무 훈훈한 분위기의 수료식,,,,, 소감준비한건 좀 별론뎈ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 준비 안했는데요 ㅎㅎㅎㅎㅎㅎ 우리오빠 반응 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 항해하는 내내 계속 응원해줬던 루크 고마워..... 내일 드디어 모각지! 첫 오프라인 모임이다 두근두근,,

사실 네이버로그인기능을 넣기로 결정하기까지 많은 고민이 있었습니다. 네이버로그인은 검색해봐도 자료가 많지 않고, 항해 이전 기수 분들의 작품 중에도 네이버로그인을 넣은 작품이 손에 꼽습니다... 즉, 참고할 자료가 많지 않아요....! 그리고 네이버로부터 검수를 받아서 승인을 받아야 우리의 서비스에 네이버로그인을 넣을 수 있다는 사실!!! 심지어 저희 프론트엔드 삼인방은 소셜로그인은 모두 처음 구현하는 기능이기때문에 저희 모두 우리가 할 수 있을까...? 라며 두려움 그 자체였지만, 이번 프로젝트는 여러가지 도전을 해보자는 생각을 했던 저희 프론트엔드 삼인방 ㅎㅎ.. 기능구현 관련해서는 앞서 작성한 글을 참고해주시면 됩니다 :) https://jellajellaangela.tistory.com/48 33..

디자이너님께서 작업해주신 귀여운 저희 로고입니다! 예쁘죠? 로고가 있는거랑 없는게 차이가 꽤 크죠! 확실히 귀여워졌군요.. 저희팀의 노션에도 이렇게 로고를 적극활용하고있습니다 ㅎㅎ 혹시 저희의 노션이 궁금하신 분이 계시다면!!! 👉🏻 https://mountainous-promise-a24.notion.site/99-_Gnims-_-67a550352fb543b2b880f2998a5d2af2 메인페이지입니다!! 닉네임과 프로필이미지가 뜨고, 이미지에선 보이지 않지만 아래에도 예쁜 네비게이션바가 있습니다 ㅎㅎ 메인페이지에서 일정카드를 누르면 이렇게 상세보기를 할 수 있습니다. 현재는 제가 신정님께 같이 가자는 초대요청을 보내두었고, 아직 수락을 안해주셨군요!! 그렇다면 제가 한번 H2console을 이용해 ..

그님스프로젝트가 시작된지 벌써3주가 지났습니다! 프로젝트 중간발표가 바로 오늘이었고, 백엔드 재헌님께서 전체적인 발표를 진행해주셨고, 동환님께서 프론트엔드의 architecture와 기술적의사결정에 대해 발표해주셨습니다 😃 화기애애한 분위기의 중간발표 다들 표정이 밝죠 😊😊😊 사실 저는 초반에 잡아둔 스코프에서 약 90%의 기능을 마무리하고 발표하게된 것 같아서 마음이 불안했는데, 구현된 기능들이 모두 완벽하게 동작해서 멘토님과 매니저님께서 폭풍칭찬을 해주셨습니다 😄 (재헌님, 동환님께서 발표를 너무 잘해주신 덕택도 있습니다 😆) 재헌님과 동환님의 발표가 끝나자 멘토님께서 가장 먼저 하신 말씀이 너무 잘 했다, 터치할게 없는걸로 보인다. 너무 수준 높게 잘 되었고, 기능도 거의 다 된 것 같다. 아직 마..

우.주.소 📺 저희 주인님을 소개합니다. 집사로써 저희 주인님 자랑좀 하겠습니다. "저는 집사니까요" 1. 제작 기간 & 팀원 소개 2023년 1월 12일 ~ 2023년 1월 20일 5인 1조 팀 프로젝트 이상휘 BE : 로그인 + 회원가입 + 보안 + 좋아요 + 조회수 기능구현 박관우 BE : 게시글 CRUD + 상세페이지 CRUD + 웹소켓 실시간 채팅 + S3 + RDS [FE] 홍정기 FE : 게시글 CRUD + 상세페이지 CRUD 전병진 FE : 작성페이지 C +메인 Index RUD 이채정 FE : 로그인 + 회원가입 + CSS 2. 사용 기술 Back-end Front-end deploy AWS EC2 (Ubuntu 18.04 LTS) 3. 실행화면 https://www.youtube.com..

첫째날에 Html 회원가입창 구현하기 SA개인과제를 하고, 쭉 리액트 강의 들으면서 공부하다가 개인과제 어제 만들어서 오늘 제출하고 (to do list 만들기) , 팀 과제는 화요일에 끝냈다. to do list 만들기는 내 첫 리액트 과제물이라 여기 저기 또 자랑을 많이 했다.. 지난 토요일에도 공부를 오후 6시까지밖에 못하고 일요일에도 너무 놀아서 이번 주 월화수가 더 빡셌다 🥲 시험을 보면 3주차가 끝이 난다. 이번 주의 나는 팀원들에게 예쁜말로 소통하고, 100시간을 충분히 알차게 보냈을까.. 오늘은 수업 끝나고 영화 보러 가기로 했다. 앞으로 평일에 사람들 만날 일이 있으면 모두 목요일로 해야겠다. 다음 주 리액트 숙련주차는 더욱 힘내야지!!!!!

2주차의 끝.. 이틀간 혼공스 (혼자공부하는자바스크립트)를 이용해서 chapter5까지 공부하고 금요일부턴 알고리즘 문제풀이를 시작했다. 충격이 이만저만이 아니었다..... 멘붕온 나를 위로해주는 내 전 직장 동료이자 같이 코딩을 공부하고있는 내 친구의 격려 알고리즘문제는 풀다가 안풀리면 스트레스도 받고, 고생고생하다가 풀리면 그 쾌감으로 하루를 버티는 것 같다! 한 문제를 갖고 사람들마다 푸는 방법이 다른 것도 신기하고, 복잡한 코드를 작성해 푼 문제가 간단한 method 한 단어로 쉽게 풀리는 것도 신기했다. 코딩은 알 수록 재밌는 것 같다. 확실히 method 를 많이 아는 것이 알고리즘 문제를 푸는데 유리한 것 같다. 그렇게 문제 풀며 하나씩 모은 코드들!! 나중엔 풀기 어려웠던 코딩문제들도 올려..