전체 글 (15) 썸네일형 리스트형 저스트코드 2차프로젝트 회고 부끄럽지만 회고록을 프로젝트가 끝난지 한참 지나고 나서 쓰게 되었다. 나의 이런 게으름에 반성하며 이제라도 회고록을 제대로 써보려고 한다. 1. 프로젝트 소개 우선적으로 우리 팀이 클론한 사이트는 'Pinterest'라는 스크랩하고 싶은 사진을 찜하여(pin it) 저장하고, 남들과 공유하는 형태의 디자인 사이트 이다. 진행기간 2022.07.11 ~ 2022.07.22 refactoring 2022.07.22 ~ 2022.07.29 사용한 기술스택 프론트엔드 HTML / SCSS React Javascript 백엔드 node.js express prisma mySQL AWS 커뮤니케이션 툴 Gather Slack Notion Package styled-components react-router-dom .. TIL | Data 호출을 위한 fetch()함수 백앤드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답받는다. 이 때 자바스크립트 Web API fetch()함수를 쓰거나 axios 라이브러리를 사용할 수 있다. -> 여기서 Web API는 클라이언트 측에서 사용할 수 있는 자바스크립트 내장함수이다. 1. fetch() 함수 fetch('api 주소') .then(res => res.json()) .then(res => { // data를 응답 받은 후의 로직 }); 위의 형태는 각각의 단계가 무엇을 뜻하는지 명확히 알아야 한다. 위의 함수는 화살표 함수로 몸통을 줄인 코드 이다. ES5의 함수 선언식으로 바꿨을 떄 어떤 모양인지 확인해 보자. fetch('api 주소') .then(function(res) { return res.json().. nodemon (linux 버전) address already in use오류 해결 1. 오류 형태 터미널에서 npm run start 명령어 입력 후 npx nodemon 명령어를 넣어 nodemon을 실행 시키려고 했는데 위와 같은 오류가 계속해서 발생하였다. 위에서 부터 천천히 읽어보니 정확히는 모르겠지만 8000번 포트가 현재 다른 프로세스에서 사용 중이어서 현재 서버에서는 시작할 수 없다는 에러 인 듯하다. 이를 해결하기 위해서는 8000번 포트를 사용하는 프로세스를 먼저 찾아서 강제로 종료 시켜야 하는 방법을 사용해야 한다. 2. 해결법 우선 터미널에서 활성화된 프로세스 리스트를 출력할 수 있도록 돕는 lsof 명령어와 특정 포트를 사용중인 프로세스를 보여주는 -i 옵션을 사용한다. 그러면 제일 왼쪽인 command에서 node라는 프로세스와 바로 우측의 프로세스의 PID값인.. TIL | UI 와 API 1. UI UI (User Interface)란 무엇인가? Interface는 한국어로 경계면이라고 해석하기도 한다. 즉, UI는 유저가 소프트웨어와 만나는 경게면을 뜻한다. 풀어 말한다면 유저가 소프트웨어에 접근하고, 명령을 내릴 수 있는 부분을 일컫는 말이다. 사람이 소프트웨어나 시스템과 접촉 할 수 있는 것은 모두 UI라 뜻 할 수 있다. (스크린, 키보드, 마우스, 웹 브라우저 ....) 웹 화면 개발자로서, 웹 서비스에 사용자가 접근하게 하는 기본적인 통로이다. 웹 서비스에서는 UI를 만든다 라는 표현은 사용자가 직접 사용하고, 정보를 알아들을 수 있는 웹 페이지 화면을 만든다 라는 의미로 사용하기도 한다. 2. API API (Application Programming Interface)는 이.. Code Kata 02 문제 reverse 함수에 정수인 숫자를 인자로 받습니다. 그 숫자를 뒤집어서 return해주세요. x: 숫자 return: 뒤집어진 숫자를 반환! 예들 들어, x: 1234 return: 4321 x: -1234 return: -4321 x: 1230 return: 321 풀이 const reverse = x => { // 여기에 코드를 작성해주세요. const a = x.toString().split('').reverse(); console.log(a) if(a[a.length-1]==='-'){ a.pop(); a.unshift('-'); }return Number(a.join('')); } 숫자는 number data type 이기 때문에 reverse 불가! 그렇기에 number를 string .. Code Kata 01 문제 twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요. nums: 숫자 배열 target: 두 수를 더해서 나올 수 있는 합계 return: 두 수의 index를 가진 숫자 배열 풀이법 const twoSum = (nums, target) => { //1. 숫자배열 for반복문을 사용하여 돌려주기 //2. nums -> 2개의 수 뺴내와 더해주기, 그렇기에 for문 2개 필요 //3. return 될 배열의 index 0의 자리는 nums[0]/ index 1의 자리는 nums[1] for (let i =0; i TIL | Semantic Web, Semantic Tags Semantic Web이란? Semantic은 '의미론적인' 이란 뜻으로 현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 파일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 예시 안녕하세요 안녕하세요 위와 같이 두 코드의 결과는 같게 나온다. Semantic Tag 위의 Semantic Web을 의미있게 만드는 역할을 하는것이 Semantic Tag이다. Tags의미 header 머리말 의미, 헤더, 로고, 네비게이션 검색창 nav 메뉴를 묶거나 메뉴를 담을 때 사용 section 콘텐츠/ 단락나눔 주제별 묶기, 제목태그와 단락나누며 .. 이전 1 2 다음
