본문 바로가기

JS Ecosystem

 (44)
(React) React 폴더 구조와 export default & export React의 폴더 역할을 자주 쓰이는 범위에서 알아본다. assets : 에셋, 이미지, font 등의 파일들 common utils : 자주 쓰이는 함수들 axios : axios 설정 ( 서버 통신용. 헤더 설정 등 ) components : 자주 쓰이는 공용 컴포넌트, 페이지 내의 컴포넌트 등 컴포넌트의 집합 config : 설정 파일을 넣어놓습니다. ( firebase 등 ) .env로 환경변수를 만드시는 것도 좋은 선택입니다. pages : 라우트에 할당되는 페이지 컴포넌트들의 집합입니다. routes : 라우터를 담아놓습니다. 로그인 전처리, 로딩 등을 쉽게 접근할 수 있습니다. styles : 전역 스타일, 자주 쓰이는 스타일 등을 담아놓을 수 있습니다. tests : 테스트를 담아놓는 입니..
(Express.js) Express 란? Express는 Express.js 또는 간단히 Express라고 한다. Node.js를 위한 웹 프레임워크의 하나이다. Node.js의 사실상의 표준 서버 프레임워크라고 불리고 있다. MongoDB, AngularJS, Node.js와 함께 MEAN 스택의 벡엔드 구성 요소이다. (스택의 집합체 - MEAN Stack, MERN Stack) express 사이트(https://expressjs.com)에 보면 express는 'Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크' 라고 한다. 자바스크립트로 서버 사이드에서 작업을 한다는 것 자체가 JS의 기술적인 진보를 느끼면서 진입장벽이 낮지 않은 네트워크 처리를 Express를 통해 좀 더 쉽게 처리할 수 있게 하는 것이 장점이라고 할 수 있..
(Javascript) 크롬 개발자 도구 Local Storage 활용 구글 크롬 브라우저의 개발자 도구에서 Application 탭을 보면 왼쪽에 Local Storage라고 확인이 된다.로컬 스토리지는 쿠기나 세션과 같이 데이터를 저장하는 장소 중 하나이다. 로컬 스토리지의 데이터 저장 기간은 만료가 없고 항상 문자열로만 저장이 되어야 한다. 메소드 getItem : 로컬 스토리지에 저장되어 있는 데이터 값을 불러오는 메소드 setItem : 로컬 스토리지에 데이터를 저장하는 메소드 const greeting = document.querySelector("h1"); const yourName = localStorage.getItem("name"); if (yourName === null) { const name = prompt("이름을 입력해주세요."); localSto..
(Javascript) JSON 기본 1. 개념 Javascript(Javascript Object Notation)의 객체를 범용적으로 읽을 수 있는 문자열 형태로 변환 객체는 타입 변환을 통해 String 형 변환 할 경우 객체 내용이 포함되지 않기 때문에 JSON형태로 변환 필요 웹에서 데이터를 전송할 때 주로 사용 JSON에서 키와 속성은 오직 큰따옴표만 사용. 키와 값, 키-값 쌍사이에는 공백이 있으면 안됨 2. JSON.stringify let obj = { sender : 'holystory', receiver : 'KAKAO', date : '21.10.20', num : 1, } console.log(JSON.stringify(obj)) // '{"sender":"holystory","receiver":"KAKAO","dat..
(Javascript 에러) Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document' 트위터 클론 코딩 중이다. 게시물은 태그의 후손 선택자 로 열거되어있다. 리액트 onClick 이벤트 핸들러를 활용한 해당 게시물 삭제 기능을 구현하고 있다. 이벤트 핸들러 handleDeleteTweet로 value값 tweet.id를 전달하고 tweet.id의 값과 동일한 id 값을 가진 게시물을 (여기서는 삭제버튼을 클릭한 게시물) 변수 selected에 할당하고 삭제해주는 것이다. 이때 querySelector의 인자로 id를 넣어주었는데 SyntaxError 발생하였다. 해결방법을 찾아보았다. querySelector는 인자값으로 숫자를 받지 않는다고 한다. id는 고유의 값인데 숫자를 고유의 값으로 인식하지 않는다는 이유다. 그래서 id의 값이 숫자로만 이루어져있고 그 id값으로 태그를 선별해..
(React) React에서 map으로 여러개의 엘리먼트 표시하기 React에서 브라우저에 여러개의 태그 엘리먼트를 표시를 할 때 map함수를 사용한다. 아래와 같은 posts 배열이 있고 post를 변수로 받아서 브라우저에 표시해주는 것이다. 방법은 return 안에 map을 사용하는 방법가 아닌 방법이 있다. return 문 안에서 map 메소드를 사용할 수는 없을까요? 사용할 수 있습니다. JSX를 사용하면 중괄호 안에 모든 표현식을 포함할 수 있기 때문에 map 메소드의 결과를 return문 안에 인라인으로 처리할 수 있습니다. 코드 가독성을 위해 변수로 추출할지 아니면 인라인에 넣을지는 개발자가 판단해야 할 몫입니다. const posts = [ { id: 1, title: "Hello World", content: "Welcome to learning Rea..
(Javascript) 실행 컨텍스트, 어휘 환경, 클로저 클로저함수, 고차함수, 재귀함수들을 공부하다보니 다소 유사한 개념이 반복되고 있다. 동시에 해당 개념의 차이에 대하여 알아보니 자바스크립트의 실행 컨텍스트, 어휘 환경에 대한 개념을 먼저 알아야지 좀 더 정확한 이해가 가능하여 그 부분의 내용을 정리하려고 한다. 참고로 실행 컨텍스트는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있기 때문에 JS에서 핵심적인 동작원리라고 할 수 있다. 1. 실행 컨텍스트란 무엇입니까? 우리는 일정한 공간에 코드를 작성한다. 그 공간을 실행 컨텍스트(Execution Context, 이하 EC)라고 한다. EC는 실행 가능한 코드가 실행될 수 있는 환경을 의미한다. 함수가 호출되면 새로운 EC가 생성되고 컨텍스트 스택에 쌓..
[React] 화살표 함수와 return 문 소괄호 처리 JSX 문법에서 return문을 사용할 때 그 뒤에 소괄호를 사용해야 하는 규칙이 있다. (리액트 공식 문서에서는 해당 내용을 확인하지 못하였으나 공식문서에 나오는 예제 코드나 다른 검색 내용들이 그러한 규칙이 있다고 명시한다.) const Features = () => { return ( ); }; 위의 코드에서 return 문 뒤에 소괄호를 적어 주었다. return 문 뒤에 소괄호를 넣는 이유는 어떤 요소를 반환하는지에 대한 가독성을 높이기 위함이라고 한다. 그리고 JSX에서 return 문 뒤에 소괄호를 넣는 용법이 있다. (참고 James Nelson, 2016년 8월 11일, “왜 자바스크립트의 return 문에 괄호를 사용하는가?(Why Use Parenthesis [sic] on JavaS..

티스토리툴바