전체 글 (31) 썸네일형 리스트형 프론트엔드 개발자 면접 질문 정리 면접 대비 용도로 일단 중요한 것만 간단하게 정리. 1. 브라우저 랜더링 과정 주소창에 주소를 입력하면 dns가 실제 서버를 찾아줌 랜더링에 필요한 리소스 요청 및 응답함 응답받은 html, css 파싱, 렌더트리 생성 응답받은 자바스크립트 파싱, 파싱하면서 dom 객체를 변경할 수 있음, 렌더트리 결합 렌더 트리 기반으로 브라우저에 페인팅 2. 호이스팅 자바스크립트에서는 변수를 선언하면 선언단계와 초기화 단계를 거친다. 그런데, 이러한 변수가 선언되면 소스코드에서 어디에 위치하든 실행되는 시점이 아니라 제일 먼저 실행된다. 그리고 단순 변수 선언 뿐 아니라 class, function, class 등 모든 식별자가 호이스팅 된다. 3. let, const를 사용하는 이유 일단 var 키워드는 같은 변수.. [알고리즘] 프로그래머스 - 정수 제곱근 판별 1.요구사항 문제 설명 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. 제한 사항 n은 1이상, 50000000000000 이하인 양의 정수입니다. 입출력 예 121 144 3 -1 입출력 예#1 121은 양의 정수 11의 제곱이므로, (11+1)를 제곱한 144를 리턴합니다. 입출력 예#2 3은 양의 정수의 제곱이 아니므로, -1을 리턴합니다. 2. 문제 풀이 function solution(n) { var answer; var x; x = Math.sqrt(n); answer = Number.isInteger(x); if(ans.. react로 만든 웹사이트 렌더링 속도 개선 사이트를 배포하고 나니 페이지 로드 시간이 너무 오래 걸린다는 단점이 있었다. 처음부터 next JS 로 프로젝트를 생성하면 좋았겠지만, creat-react-App으로 만들어진 프로젝트를 개선해야하므로 다음과 같은 방법들을 적용해 보았다. 1. 폰트를 html에서 로드하도록 설정 다음과 같이 html style 태그 내로 코드를 옮겨주었다. 웹사이트를 랜더링할 때 html 파일이 가장 먼저 파싱 되기 때문에 css에 폰트 링크를 넣는것 보다 html로 옮겨주는 것이 더 빠르다고 한다. + 한가지 문제가 있었는데, 여러 폰트 중 하나가 css 파일에서 로드해야만 동작했다. 우선은 해결하지 못하여 css 파일에서 적용해주었다..😂 2. 이미지 크기 조정 나의 경우 초기 랜더링 페이지에 메인으로 차지하는 이.. [aws] ec2, mongo db + react 프로젝트 배포하기 1. aws 계정 생성 -> 인스턴스 생성(Ubuntu)로 인스턴스 시작 (+키 생성) 보안 포트 범위 설정 mongo db 포트와 react의 포트 번호, 그리고 nginx의 80번 설정( 내 경우엔 3000,5000,80 ) 2. 윈도우는 주로 PUTTY를 사용하는 듯하다. PUTTYGen으로 private key file을 생성하고, PUTTY로 키 파일 경로 찾아서 넣어주고, 호스트이름은 aws 해당 인스턴스에서 퍼블릭 IPv4 DNS를 확인한다. ubuntu@퍼블릭 IPv4 DNS 로 key는 auth에 파일경로로 넣어주고, putty를 실행해준다. putty 사용법은 구글링하면 많이 나온다. 3. ✔ 우분투 명령어를 입력할수 있는 터미널이 정상적으로 작동하면 성공, 몽고디비 사이트에가도 doc.. 비전공자,문과의 IT개발자 취준기 요즘들어 참 개발자, IT 업계에 발들이는 사람이 많아진 것 같다. 비전공자도 도전할 수 있다는 부트캠프 광고들을 많이 봤다. 일단 나는 부트캠프를 수강해본 적은 없다. 소위 말하는 국비수업 정도만 수강한 양산형 국비 코더이다. 아직 취업하지도 못했지만, 문과생이 IT에 도전한다는게 정말 쉽지 않다는 걸 매일 몸소 느끼고 있다. 일단 최근들어 스타트업이나 중소기업에 코딩테스트를 치르는게 매우 당연한 절차가 되어버렸다. 알고리즘에 대해 공부하지 않으면 과연 취업할 수 있을까? 하는 의구심이 들 정도이다. 코테가 수능화 되었다는 말도 있을 정도이다. 기업입장에서는 최대한 좋은 인력을 뽑기 위해 필요한 절차라고 생각하겠지만, 취준생 입장에서는 조금 부담이 되는 것도 사실이다. 작년이나 재작년쯤 까지만해도 코테.. [react] router로 url은 바뀌지만 component가 갱신 안될때 개발하다보면 참 어이없는 이유로 의도와 다르게 작동될 때가 많다. 이것도 그런 사례 중 하나였다. 쇼핑몰 기본 랜딩페이지에서 상품 클릭시 상품 디테일 페이지로 링크를 걸어놨는데 주소창의 url은 바뀌는데 ui가 안바뀌고 랜더링 자체가 실행이 안되는거 같았다. 구글링해보면 스택오버플로우에 hooks를 활용한 해결 방법이있다. 하지만 나의 경우엔 다른 이유였다. 이런식으로 라우터를 구현했는데, 주소를 입력하면 라우터가 "/"로 인식하여 랜딩페이지의 컴포넌트를 불러왔다. 랜딩페이지의 라우터 부분을 제일 아래로 보내주자 간단히 해결되었다. 더보기 처음에 이렇게 라우터를 구현해뒀는데, 첫번째줄의 "/api/product/:id는 :id 부분에 어떤 값이 들어와도 Detail 페이지로 보내주도록 구현되어있다. 따라.. [java script] 호이스팅 그리고 var,let,const의 차이점 -본 포스팅은 이웅모 저자님의 모던 자바스크립트 deep dive를 참조하였습니다. 1. 자바스크립트가 변수를 선언하는 방식 변수 = 하나의 값을 저장하기 위해 확보한 메모리 공간을 식별하기 위해 붙인 이름 할당 = 변수에 값을 저장하는 것 참조 = 변수에 저장된 값을 읽어 들임 선언이란 변수를 생성하는 것을 말한다. 값을 저장하기 위해 메모리 공간을 확보하고, 확보된 메모리 공간에 값을 저장할 수 있게 준비하는 것이다. 우리가 변수를 선언하면 js 엔진은 undefined 라는 값이 없는 상태로 초기화한다. '선언'만 된 상태에서는 변수를 참조해보면 undefined가 읽어질 것이다. 🐣변수선언의 수행 선언단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림. 초기화단계 : 값을 저장하.. [react] state를 활용하여 로그인 유무에 따라 ui 변경 별로 대단한 기능은 아니지만 구글링하면 구버전 react로 구현된 예시만 있고 최신 프로젝트에서 참고하기는 어려웠다. 보통 웹사이트에서 우리가 로그인하면 로그인 및 회원가입 페이지로 이동되는 ui나 버튼, 링크 등을 안보이게 처리한다. 만들고 있는 쇼핑몰 사이트에 해당 기능을 적용시키기 위해 구현해 보았다. 이보다 더 좋은 방법이 있을 것이라 생각되고, 초급 수준 개발자이니 참고만 하길 바란다. 1. reducer 세팅 우선 내가 만들고 있는 프로젝트는 reducer를 사용하여 상태를 업데이트하는 로직들을 만들어놓았다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 const initialState = { isLoggedIn:false } export default.. 이전 1 2 3 4 다음
