아이클라우드 동기화 변경하고, 다시 리액트 공부하러 create-react-app 설치를 하는데 src 디렉토리가 생성되지 않았다. CRA 템플릿이 설치되지 않음을 터미널에서 확인할 수 있었다. CRA 구버전이라고?! yarn global add create-react-app create-react-app folder 위 명령어로 버전 업데이트하니 CRA 템플릿이 잘 설치되었다. 별 것도 아니었는데 계속 삭제했다가 설치했다가 시간 보냈네!
for 배열 내장함수는 아니지만 반복문을 이용하여 배열에 접근하는 가장 쉬운 방법입니다. 제곱근을 구하는 함수를 for, forEach, map 배열 함수를 이용하여 작성하여 각자 코드를 비교해 보겠습니다. const arr = [1, 2, 3, 4, 5, 6, 7, 8]; const squared = []; for (let i = 0; i < arr.length; i++) { squared.push(arr[i] * arr[i]); } forEach for와 코드 라인 수는 같지만 for는 반복문을 돌리기 위해 임시 변수 i를 할당했습니다. 지금처럼 테스트하는 경우엔 문제가 되지 않지만, 코드의 양이 많아지는 큰 프로젝트에는 가독성을 떨어 뜨립니다. 또한 forEach는 콜백 함수의 첫번째 인자로 각 값..
Ajax (Asynchronous JavaScript and XML) 예전에는 서버에서 매번 새로운 페이지를 내려준 후에 클라이언트가 렌더링해서 보여주었습니다. 그러나 거의 10년 전부터는 데이터의 수신을 다 기다리지 않고, 필요한 부분의 데이터만 가져와 바로 다른 작업을 실행합니다. 이에 따라 불필요한 페이지의 로딩을 기다리지 않아 웹 속도를 빠르게 하여 UX 향상에 도움이 됩니다. 화면에 영향을 주지 않고(새로고침하지 않고) 데이터를 서버에서 가져오는, 즉 비동기적으로 가져오는 방법을 의미합니다. JSON (Javascript Object Notation) JSON은 데이터 구조 형식입니다. 자바스크립트의 오브젝트(객체)처럼 키와 밸류가 쌍으로 묶여져 있는 표기법입니다. { blog: "minimal..
웹 페이지를 만들 때 백엔드와 서버를 이해하기 위해 부스트코스 강의를 보며 해보았습니다. 이 작업에서 url 매핑 값을 설정하며 url 설정에 대한 이해를 할 수 있었습니다. html에서는 공통 네비게이션과 페이지 내용을 구분하기 위한 내용을 간단히 작성합니다. servelet으로는 현재 시간을 나타내는 자바를 작성합니다. 1. file > new > dynamic web project aboutme 라는 프로젝트명 생성 2. 프로젝트 하위 WebContent 하위에 html 파일 작성 3. 최상위 루트 aboutme 우클릭 > new > servelet 4. Java package와 Class name 작성 후 next 5. 매핑 컨텐츠에는 앞에서 작성했던 클래스명이 기본으로 되어 있습니다. http:..
서블렛을 작성하고 톰캣으로 서버를 실행시켰더니 404 에러 페이지가 떴습니다. 이 방법, 저 방법을 하면서 결국 해결은 됬지만 정확히 어떻게 해서 해결된 것인지는 모르겠네요. 그래도 제일 가능성 높았던 해결 방법은 포트번호 수정이었던 것 같습니다. 해결 방법 1. 이클립스 재시작 후 다시 서버 실행시키기 어떤 에러든 제일 먼저 해보는 껐다 키기! 안된다면 2번 방법으로. 2. 포트 번호 수정하기 아파치 톰캣의 기본 포트는 8080번입니다. 이클립스와 톰캣의 포트 번호가 충돌이 있을 수 있습니다. 서버 탭에서 톰캣을 더블클릭하면 서버 상세내용이 나옵니다. 저는 수정을 한 상태라 8012번으로 나오지만, 수정을 하지 않았다면 8080으로 나옵니다. 8080을 원하는 번호로 수정하면 됩니다.
Apache Tomcat이란? 아파치 톰캣은 아파치 소프트웨어 재단에서 개발한 세계에서 가장 많이 사용되는 WAS(Web Application Server)입니다. 우리가 컴퓨터에 window OS를 설치해야 사용할 수 있듯이, 자바를 이용하여 작성된 웹 어플리케이션은 WAS가 있어야만 실행될 수 있습니다. 다운로드 및 설치하기 1. http://tomcat.apache.org 로 들어가서 좌측 메뉴에서 Tomcat 8을 선택합니다. Tomcat 8로 들어가면 보이는 우측 내용에서 zip을 다운로드합니다. 2. 압축 해제 후에 터미널을 실행합니다. 3. 터미널에서 톰캣을 다운로드한 경로로 이동합니다. 저는 데스크탑에서 tomcat폴더를 생성하여 받았습니다. cd /Users/Mac/Desktop/tomc..
오라클에서 java jdk를 설치한 이후에 환경설정을 해야 합니다. 한 번 해보면 쉽지만 vi에 익숙하지 않다면 vi 명령어를 따로 검색해보는 것을 추천합니다. 1. 터미널을 열어 아래 명령어 작성 cd /Library/Java/JavaVirtualMachines ls -la 설치한 jdk 버전이 나오니까 확인해 주세요. 2. 버전 확인 후 아래 명령어 작성합니다. jdk1.8.0_221.jdk 는 제가 설치한 버전입니다. 각자의 버전에 맞게 수정하여 입력해 주세요. cd /Library/Java/JavaVirtualMachines/jdk1.8.0_221.jdk/Contents/Home 3. 경로 이동 후에 관리자로 권한을 바꾸는 명령어를 입력합니다. 관리자 권한으로 변경하지 않으면 vi 저장할 때 오류..
HTTP란? 팀 버너스리와 그의 팀은 HTML 뿐만 아니라 HTTP를 발명했으며, HTTP는 어떠한 종류의 데이터(ex. 오디오, 이미지, 텍스트 등)도 전송할 수 있도록 설계되어 있습니다. 서버와 클라이언트가 인터넷 상에서 데이터를 주고 받기 위한 규약, 서로 통신하기 위한 약속입니다. HTTP 작동 방식 클라이언트는 서버에게 요청하고, 서버는 요청을 받아 다시 클라이언트에게 응답합니다. 응답 후에 서버는 바로 클라이언트 와의 연결을 끊습니다. 그렇기 때문에 바로 다시 이전의 클라이언트가 와도 서버는 같은 클라이언트인지 알 지 못합니다. 예를 들어 쇼핑몰에서 쇼핑하고 결제하려고 하는데, 뭘 쇼핑했는 지 모르는 상태가 발생합니다. 이러한 특징을 무상태(Stateless)라고 하며, 이런 문제를 해결하기 ..
이 글은 노마드코더의 초보를 위한 Vanila JS를 공부한 기록입니다. Javascript란? 웹에서 쓸 수 있는 하나 뿐인 언어이다. 백엔드 개발자는 파이썬, 루비, 자바 등 선택할 수 있는 언어가 다양하지만 웹 화면을 다루는 프론트엔드 개발자는 다루는 언어가 오직 자바스크립트 하나이다. 이는 단점이지만 장점으로, 모든 브라우저가 자바스크립트를 쓰므로 매우 빠르게 발전하며 강력한 성능의 언어가 된다. ES5, ES6, ECMA2016.... 무슨 버전을 배워야 해?! ECMA는 specification, 즉 규격, 사양, 표준. ES는 ECMA script의 준말이고, 뒤에 숫자는 버전을 의미한다. (니콜라스가 어떤 내용과 버전을 배울 지는 전혀 걱정하지 말고 자기한테만 배우면 된다고 했을 때, 멋있..
