전체 글 썸네일형 리스트형 React로 계산기(calculator) 만들기 전에도 상세하게 올려보겠다던 계산기 코드를 이제야 올려본다 처음부터 로직을 생각하고 구현 해보았기에 의미 있고 실용성 있는 계산기가 되길 개인적으로 바란다 리액트로 계산기를 만드는 사람들은 많지 않을 것 이다 대부분이 자바스크립트를 기반으로 하고 있고 복잡한 구현이 아니기 때문에... 그렇지만 누군가가 나처럼 계산기를 리액트로 무조건 만들어야 하는 상황이 있다면 이 글을 읽고 꼭 도움이 되길 바란다 리액트 계산기 확인하기!!(클릭) 바로 코드를 치기 전 생각을 해보자 계산기의 동작 원리가 뭘까? 숫자 입력 >> 연산해줄 연산자 입력 >> 숫자 입력 >> 등호(=) 입력 >> 결과 출력 내가 생각한 계산기의 동작원리를 그대로 코드를 구현하면 된다고 생각했다 1. React Project 생성 CRA를 통한.. 더보기 실행 컨텍스트에 대해 알고 계시나요? 실행 컨텍스트에 대해 조금이라도 이해 하고자 한다 단번에 알 수 있는 개념은 아니기에 조금씩 알아가게 되는 부분을 추가 하도록 한다 실행 컨텍스트 실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다 실행 컨텍스트를 바로 이해하지 못하면 코드 독해가 어려워지며 디버깅도 매우 곤란해 질 것이다 실행 컨텍스트를 ECMAScript 스펙에 따르면 이렇게 정의하고 있다 "실행 가능한 코드를 형상화하고 구분하는 추상적인 개념" 쉽게 말하자면 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경이라고 말할 수 있겠다 여기서 말하는 실행 가능한 코드는 아래와 같다 전역 코드 : 전역 영.. 더보기 싱글 스레드와 멀티 스레드의 장점과 단점 싱글 스레드의 장점과 단점, 멀티스레드의 장점과 단점을 알고 이해한다 스레드란? 위키백과의 나와있는 정의를 살펴보자면 스레드란 프로세스 내에서 실행되는 흐름의 단위다 일반적으로 한 프로그램은 하나의 스레드를 가지고 있지만, 프로그램 환경에 따라 둘 이상의 스레드를 동시에 실행할 수 있다 하나의 스레드 방식은 싱글 스레드 방식, 둘 이상의 스레드 방식은 멀티 스레드 방식이라고 한다 두 개 이상의 멀티 스레드 방식으로 사용하는 게 여러 측면에서 빠르고 좋지 않을까라고 생각 하지만 꼭 그렇지만은 않다 각각 적합한 상황에 맞는 스레드 방식을 사용해야 효율적인 스레드 사용이라고 할 수 있다 싱글 스레드와 멀티 스레드의 장점과 단점을 알아보자 싱글 스레드의 장점 1. 자원 접근에 대한 동기화를 신경 쓰지 않아도 된.. 더보기 동기와 비동기 프로그래밍을 알고 계시나요? 동기 프로그래밍과 비동기 프로그래밍은 자바스크립트를 이해할 때 중요하고 자주 언급되는 부분이다 이번 글을 통해 동기와 비동기에 대해 꼭 이해 하도록 노력한다 동기 프로그래밍 동기 프로그래밍이란 브라우저는 실질적으로 프로그램을 작성한 순서대로 한 줄씩 실행한다 또한 브라우저는 한 줄씩 실행하고 처리하는 동안 다음 줄로 넘어가기 전까지 현재 라인의 작업이 끝날 때까지 기다린다 아래 예제는 동기 프로그래밍의 예시를 코드로 나타낸 MDN의 자료를 변형시켜 작성해 보았다 코드의 순서를 보자면 1. name이라는 문자열을 선언한다 2. name을 사용하여 greeting이란 또 다른 문자열을 선언한다 3. greeting을 Javascript 콘솔에 출력합니다 이건 동기 프로그래밍이다 동기 방식은 서버에서 요청을 .. 더보기 처음부터 배포까지 Day11 지점 데이터 UI 구현 지점별 홈페이지 링크 구현 지점별 네이버 지도 보기 링크 구현 footer 구현 추후 예정 사항 node.js를 통한 서버 학습이 필요하다 지금은 JSON파일 더미데이터지만 DB에 저장할 DB학습이 필요하다 더보기 처음부터 배포까지 Day10 공유 오피스 오피스 페이지 생성 React-router , 쿼리 파라미터 사용 지점 데이터 및 주소 데이터 바인딩 준비 중 params를 통해 데이터의 id값을 가져오는 데 성공했다 이번에 다시 구현해보면서 복습 차원에서 한 번 더 params에 대해 상기할 수 있었다 알게된 점 쿼리 파라미터를 사용했을 때 image 불러오기 실패 img 태그의 경로를 잘 확인해봐야 한다 보통 src의 경로는 "./images/office01.jpg"라고 한다면 쿼리 파라미터를 사용했을 시 쿼리 스트링에 대한 정보는 useParams를 사용한 id값을 받아 detail/6 슬래쉬 하나가 더 생기고 뒤에 id에 해당 하는 number 따라오게 된다 그래서 src 경로의 ./ 아닌 ../ 으로 해줘야 올바른 이미지가 나오게.. 더보기 처음부터 배포까지 Day9 공유 오피스 20개의 데이터 코딩 완료 공유 오피스 배열을 반복문 map()을 통해 데이터 바인딩 완료 css overflow : scroll 속성으로 스크롤 기능 구현 완료 HOME LIST office_data.json 추후 예정 사항 공유오피스공유 오피스 리스트에서 상세보기 클릭 시 해당 공유 오피스의 맞는 상세보기 페이지가 구현될 예정 쿼리 파라미터에 대한 공부가 좀 더 필요하다고 판단된다(쿼리 스트링을 활용해야 하기 때문에) 더보기 쿠키와 세션에 대해 알고 계시나요? 오늘은 쿠키와 세션에 대해 공부를 해볼까 한다 이 글을 정독하고 나면 쿠키와 세션에 대해 전부는 아니더라도 어느 정도 흐름은 파악할 수 있다고 생각한다 기록을 위해 작성하는 글 이니 틀린 부분이 있으면 피드백은 언제나 환영입니다 쿠키와 세션을 알기 위해 HTTP의 특성을 알고 있어야 한다 HTTP의 특성 HTTP 통신의 특징은 비연결 지향(Connectionless)과 상태정보유지안함(stateless)이다 클라이언트가 서버에 요청을 하고 그것을 응답받는 형식이다 클라이언트가 서버에 요청을 하고 응답받으면 그 후 접속을 끊는 특성이 있다 그렇게 되면 일어날 수 있는 대표적인 문제점 사용자가 페이지를 새로고침 할 때마다 로그인을 다시 해야 할 수 있다 또한 사용자가 쇼핑몰에서 제품을 구매하려고 장바구니에 .. 더보기 이전 1 2 3 4 5 6 ··· 13 다음
