개발일지

자바스크립트에서는 다른 함수에 있는 변수를 마음대로 사용할 수 없다. 컴포넌트 2개가 부모 / 자식 관계인 경우는 사용 가능 부모 컴포넌트의 state 를 자식 컴포넌트로 전송해줄 수 있다. 전송 시, props 라는 문법을 사용한다. props 로 부모 -> 자식 state 전송하는 법 1. 자식 컴포넌트 사용하는 곳에서 2. 자식컴포넌트 만드는 function 으로 가서 props 라는 파라미터 등록 후 props.이름 사용한다. title 이라는 부모 컴포넌트의 state 를 자식 컴포넌트 에 전송하기 function App() { let [title, setTitle] = useState([ "title1", "title2", "title3", ]); return ( ) } function Mod..

React 사용 이유 1. Single Page Application (SPA) 만들 때 사용 새로고침 없이 앱처럼 부드럽게 동작하는 웹페이지 html 파일을 한개만 사용하여 다른 페이지 보여주고 싶을 때 html 부분 다 갈아 치워서 보여줌 2. html 재사용 편리 변수에 html 담아서 사용할 수 있기 때문에 3. 같은 문법으로 앱 개발 가능 (React Native) 리액트 프로젝트 생성 1. 작업용 폴더 하나 생성 2. 터미널에서 해당 폴더 접근 후 npx create-react-app '프로젝트명' 입력 3. 해당 프로젝트 폴더 vscode 에서 열기 4. App.js 가 메인 페이지이므로 App.js 에서 코드 짜줌 5. 브라우저로 미리보기 띄우고 싶으면 터미널에 npm start 입력 Ap..

브라우저 안의 여러 저장공간 크롬 개발자도구의 Application 탭에 보면 여러가지 저장공간이 존재한다 Local Storage / Session Storage ( key : value 형태로 문자 숫자 데이터 저장 가능 ) indexed DB ( 크고 많은 구조화된 데이터를 DB처럼 저장 가능, 문법 더러움 ) Cookies ( 유저 로그인 정보 저장 공간 ) Cache Storage ( html css js img 파일 저장해두는 공간 ) 개발자가 선택해서 사용하면 되는데 범용적으로 사용 가능한 Local Storage 사용해보자 Local Storage 는 문자, 숫자만 key : value 형태로 저장 가능하고, 5MB 까지만 저장 가능하다. Local Storage는 브라우저 재접속 해도 영..

서버란? 유저가 데이터를 요청하면 데이터를 보내주는 간단한 프로그램일 뿐이다. 네이버 웹툰 서버 : 유저가 웹툰 요청하면 웹툰 보내주는 프로그램 유튜브 서버 : 유저가 영상 요청하면 영상 보내주는 프로그램 서버에 데이터를 요청할 때 어떤 데이터인지 url 로 잘 기재해야하고 어떤 방법으로 요청할 것인지 결정해야함 (GET / POST 등..) GET / POST 요청하는 법 GET 요청은 서버에 있던 데이터를 가져오고 싶을 때 주로 사용하고, POST 요청은 서버로 데이터를 보내고 싶을 때 주로 사용한다. ( PUT, DELETE 요청도 있음 ) GET 요청 보낼 때 가장 쉬운 방법은 브라우저 주소창이다. 브라우저 주소창에 url 적으면 그 주소로 GET 요청을 보내준다. POST 요청 하고싶으면 태그 ..

Array / Object 자료형 여러가지 자료를 한 곳에 저장하고 싶을 때 사용하는 자료형들 배열 Array var car = ['소나타', 50000, 'white']; 다음과 같이 배열에 저장 가능 Object var car2 = { name : '소나타', price : 50000 }; 딕셔너리 처럼 사용 자료를 꺼내쓸 때는 car2[’name’] 또는 car2.name와 같이 사용할 수 있다. 실제 웹서비스 개발 2가지 방식 사용자가 사이트로 접속하면 HTML 을 잘 만들어서 보내주는 것을 웹서비스 라고 한다. HTML을 누가 완성하는지에 따라 개방방식의 차이가 존재 1. 서버에서 HTML을 미리 완성해서 고객에게 보내줌 이러한 방식을 server-side rendering 이라고 한다. 2. ..

함수의 return function 함수() { return 123; } 함수의 값 반환 return 아래 있는 코드들은 읽지 않는다 소수점 있는 숫자 연산시 주의점 조금의 오차가 발생할 수 밖에 없다. 2진법으로 바꿔서 계산을 하기 때문에 소수를 2진법으로 바꾸면 무한소수가 됨 해결책 소수점을 전부 10곱해서 연산하고 10으로 나눔 라이브러리를 사용 연산결과 반올림 소수점 반올림 하는 함수 : [숫자.to]()Fixed(몇자리); 다음과 같이 사용 toFixed() 사용 시 문자로 변환이 된다. 자바스크립트 ‘+’ 연산자 특징 ‘문자’ + 123 ⇒ ‘문자123’ ‘문자 + ‘문자’ ⇒ ‘문자문자’ 위와같이 연산이 되기 때문에 타입에 대한 주의가 필요하다 따라서 parseFloat() 이나 parseI..

UI 애니메이션 추가할 때 가능한 CSS 만으로 처리하는게 좋음 자바스크립트에게 너무 많은 일을 시키면 성능이 저하되기 때문 one-way UI 애니메이션 만드는 법 A 상태 → B 상태로 바뀌는 일방향 애니메이션 시작스타일 최종스타일 원할 때 최종스타일로 변하라고 코드 짜줌 transition 추가 각각 클래스로 만들어놈 fadeIn, fadeOut 애니메이션 만들기 .black-bg { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.5); z-index: 5; padding: 30px; visibility: hidden; opacity: 0; transition: all 1s; } 위와 같이 visibility 속성 h..

html 변경 document.getElementById(’hello’).innerHTML = ‘안녕’; (문서) (~의) (id hello:html 요소를 가져와라) (HTML 안) 안녕 버튼 .hide(), .fadeOut(), .slideUp() 등 여러가지 애니메이션 제공해줌