본문 바로가기

전체 글350

React(37) 리액트 훅 - 토글버튼 + 체크박스 구현하기 리액트 훅으로 영단어 프로그램을 구현하는 중이다. 오늘 실습해볼 내용들은 토글 버튼과 체크박스를 구현하는 것이다. 토글 기능으로 '뜻보기' 라는 버튼을 누르면 단어의 뜻이 나오고, '뜻숨기기' 라는 버튼을 누르면 단어가 감춰진다. 또한 체크박스 기능으로 다 외운 영단어를 체크박스에 표시하면 그 단어가 비활성화 된다. 스포일러 1. 토글버튼 구현 '뜻 보기' 버튼을 누르면 pencil 의 뜻인 '연필' 이 나오고 '뜻 숨기기' 버튼을 누르면 뜻이 감춰진다. 2. 체크박스 구현 외운 단어에 체크하면 단어가 비활성화 된다. **토글이란 하나의 설정 값으로부터 다른 값으로 전환하는 것이다. 토글이라는 용어는 오직 두 가지 상태 밖에 없는 상황에서, 스위치를 한번 누르면 한 값이 되고, 다시 한번 누르면 다른 값.. 2021. 8. 19.
Docker(1) Docker(도커) 란 Docker 기반으로 개발환경 세팅 중이다. 백엔드에서 많이 사용하는 기술이라고 막연히 생각만하다 막상 접해보니, 프론트에서 도커의 도움을 받아야 더 효율적인 개발이 가능하다는 것을 깨달았다. Docker 란 무엇인지 자세히 알아보자. Docker (도커) 란 도커란, 컨테이너 기반의 오픈소스 가상화 플랫폼이다. 한마디로 배에 컨테이너를 실어 쉽게 옮기듯이, 어플리케이션을 컨테이너에 담아 여러 서버에 쉽게 배포한다. (시스템 도구, 코드, 런타임 등 실행에 필요한 모든 게 포함되있다.) 1. 이미지 이미지는 컨테이너 실행에 필요한 파일과 설정 값 등 모든 정보를 가지고 있다. 새로운 서버가 추가되면 미리 만들어 놓은 이미지를 다운받아 컨테이너만 생성하면 된다. ‘도커파일’ 안에 가상화 할 프로그램들을 넣.. 2021. 8. 18.
React(36) 리액트 훅 - 동적라우팅으로 페이지 이동 리액트를 사용하여 다이나믹 라우팅(Dynamic Routing) 을 구현하여 페이지를 동적으로 이동해보자. 스포일러 Day1 이라는 버튼을 클릭하면 상세페이지로 이동한다. 이때 url 을 살펴보면 day/1로 변한다. (Day2 를 누르면 day/2 로 변할 것이다.) React(36) 리액트 훅 - 동적라우팅으로 페이지 이동 라우터 설치하기 터미널에 아래 명령어로 리액트 라우터를 설치하기 npm install react-router-dom 컴포넌트 구조 - component 안에는 Days.js / DayList.js / Header.js 컴포넌트들이 들어있다. - db 안에는 data.json 이라는 객체 데이터가 들어있다. ( api역할 ) - App.js 는 최상위 컴포넌트이다. App.js 여기.. 2021. 8. 17.
Vue(12) Vuex 란 (Vuex 설치하기) Vue.js 를 통해 수많은 변수를 만들고 로직들을 관리하며 프로젝트를 구성해나가다 보면 변수들을 어떻게 관리하느냐가 프로젝트의 효율성을 높이는 중점이 된다. 변수에는, 컴포넌트 내에서만 쓰이는 변수(지역변수)와 전체적으로 공용되는 변수(전역변수)가 있다. 전역 변수의 경우, 컴포넌트마다 일일이 선언해서 사용한다면 중복이 많아지고 자원의 낭비도 심할 것이다. 그래서 Vuex 와 같은 전역변수를 한곳에 모아 한방에 관리해주는 라이브러리를 사용한다. Vuex 란 Vuex는 Vue에서 사용하는 ‘상태 관리 패턴’ 라이브러리 이다. 앱의 모든 구성 요소에서 액세스할 수 있는 중앙 집중식 데이터 저장소를 만들 수 있다. Vue.js만 사용할 경우 데이터를 주고 받기 위해 상위 컴포넌트와 하위 컴포넌트가 지속적으로.. 2021. 8. 16.
Git(24) Private Repository 다른 사람과 공유하기 깃헙에서는 저장소를 만들 때, private 혹은 public 로 공개여부를 설정할 수 있다. public 은 모두가 볼 수 있지만, private 은 나와 내가 공유한 사람만 볼 수 있다. 깃헙을 사용하다보면 내 Private Repository 를 다른 사람과 공유해야 하는 일이 있다. 자, 공유방법을 알아보자. Git(24) Private Repository 다른사람과 공유하기 준비물 공유할 유저의 깃헙 아이디 공유 방법 1. private repository 페이지에서 settings 로 들어간다. 2. Manage access - Invite a collaborator 를 클릭 3. 검색창이 나타나면 유저네임을 입력해준다. 4. 검색 하면 유저가 나온다. 초록버튼을 클릭해주자 5. Manage .. 2021. 8. 15.
React(35) 리액트 훅 - map 으로 json 객체 데이터 가져오기 자, 리액트로 데이터를 이리저리 굴려보자. 원래는 백엔드에서 api 형태로 통신을 거쳐 json 객체 데이터를 받아온다. 하지만 지금은 DB 에서 받아올 수 없으므로 데이터가 담긴 json 객체 파일을 프로젝트 내에 하나 만들고, map() 함수를 이용하여 그 데이터 뭉텅이들 중에 필요한 데이터만 꺼내서 컴포넌트 곳곳에 사용해볼 것이다. 스포일러 토익 단어장을 만들고 있다. 날짜별 외워야할 영단어를 출력해주고 싶다. 1차로 json 객체 데이터를 콘솔창에 출력하였다. 여기서 필요한 데이터들만 추려서 2차로 화면에 출력할 것이다. (여기서 days 는 날짜를 의미하고 words 는 날짜별로 암기할 영단어 목록이다.) React(35) 리액트 훅 - map 으로 json 객체 데이터 가져오기 파일구조 먼저 .. 2021. 8. 14.
반응형

티스토리툴바