WEB (6) 썸네일형 리스트형 어떤 코드를 작성해야하나요? https://www.wanted.co.kr/events/pre_challenge_fe_5 원티드 프리온보딩 프론트엔드 챌린지에 참여한 이후, 인상 깊은 내용을 정리한 글입니다. 프리온보딩 프론트엔드 챌린지 1월 | 원티드 프리온보딩 챌린지는 2주의 단기간 몰입학습과 4주의 취업 챌린지로 구성되어있습니다. 참여 신청하고, 챌린지의 주인공이 되어보세요! www.wanted.co.kr '왜요?' 논리적으로 기술에 대한 자신의 견해를 밝힐 수 있는 사람이 되어야합니다. 그렇다더라 식의 공부는 전혀 논리적이지 못하고, 이는 경험이 부족하더라도 앞으로의 성장을 기대할 수 있음 이는 기본기와 연관되는 표현으로 기본 지식이 아니라, 지식을 다뤄온 태도를 볼 수 있음. 따라서 취향은 갈릴 수 있지만 이유가 있는 코드를.. [WEB 동작 방식] 브라우저에 웹 주소를 입력하면 어떤 일이 발생하나요? [WEB 동작 방식] client가 웹 브라우저를 통해 인터넷에 연결된 server에게 request를 보내면, server는 요청을 처리하여 client에게 response합니다. 1. 브라우저에 URL 입력 💡Web browser💡 인터넷에서 웹 서버의 모든 정보를 볼 수 있도록 + 문서 검색을 도와주는 응용 프로그램 ex) Google Chrome, Apple Safari, Naver Whale 2. 브라우저가 URL을 DNS서버에게 전달하며 request, DNS서버는 IP주소를 response 💡IP💡 웹사이트가 있는 서버의 실제주소로, 유일성을 보장 ex) 63.245.217.105 💡도메인💡 IP를 기억하기 쉽지 않으므로, 사람이 쉽게 기억하고 입력할 수 있도록 문자로 만든 인터넷주소 ex).. TypeScript를 왜 사용해야하나요? JavaScript 동적 타입 언어(dynamic type language) 개발 시, 타입 체크 불가능 -> 런타임 오류의 발생이 쉬움 코드 실행중에 오류가 발생 디버깅에 많은 시간이 소요되며, 코드의 유지보수 및 확장성이 낮아짐 동적 타입 언어(dynamic type language) 프로그램의 실행 시점에 변수의 데이터 타입이 동적으로 결정되는 프로그래밍 언어 변수에 할당되는 값에 따라 변수의 타입이 자동으로 결정하므로, 코드 작성 및 컴파일 과정에서 발생할 수 있는 에러를 런타임에 발생시킴 TypeScript 정적타입언어(static type language)로, javaScript의 슈퍼셋(Superset) 정적 타입 체크(Static Type Checking) 기능을 제공 자료형을 명시함으로 .. [Package Manager] NPM, yarnBerry, yarn Package 코드의 구성 요소를 묶어서 사용하기 쉽게 만든 소프트웨어 모듈의 집합 일반적으로 라이브러리나 실행파일을 포함 컴파일한 소프트웨어의 바이너리, 환경 설정에 관련한 정보, dependency에 관련한 정보를 갖는 코드의 배포 단위에 해당 Dependency - package를 동작시키기 위한 다른 package - dependency에 dependency를 설치해야하는 상황이 끊임없이 이어지는 경우 = dependency hell 사용자가 패키지를 관리하는 것이 불가능하므로, package가 자신의 dependency의 정보를 갖고 패키지 매니저가 설치를 도움 Package Manager 소프트웨어 패키지를 관리하고 설치, 업데이트, 제거 등을 쉽게 진행하도록 돕는 도구 패키지의 depende.. <a>, window.open() SPA에서 button을 click하는 경우, 외부 페이지로 새 창이 뜨는 기능을 구현해야한다. onClick: () => window.open( 'https://www.naver.com/' ) 팝업허용을 하는 순간 무한 로딩이 발생 ~가 원인인 것으로 확인했다 button 결국 로 수정했다. 502 Bad Gateway issue : 배포된 웹사이트에서의 502 Bad Gateway 발생 problem : https에서의 연결이 불안정 solution : https(443)에서 node server(3000)로 port 안내 설정 배포된 웹사이트가 502 Bad Gateway 에러가 뜨면서 터진 것을 확인했다. 우리 프로젝트의 경우에는 node server위에 api server가 올라가 있는 구조로, 요청이 발생하는 경우 client - node server - api server로 연결 되는 구조를 갖는다. 그래서 443port(https)에서 3000port(node server)로 안내하는 설정이 필요한데, EC2 instance의 초기화가 발생해 기존에 했던 설정이 없어진것으로 파악된다. 해서 우리 서버는 44.. 이전 1 다음