React11 라우터 사용해보기 우선 라우터를 사용하기 위해서는 라우터를 설치해줘야 한다. 설치하고자 하는 파일로 cd 명령어를 통해 들어간 후, npm install react-router-dom 명령어를 통해 라우터를 설치해 준다. 우선 다음과 같이 간단한 문장이 출력되는 파일 2개를 만들어주었다. 그리고 출력을 위한 파일로 이동해 다음과 같이 코드를 작성해 준 뒤, index.js 파일로 이동해 출력시켜보았다. 첫 번째 페이지를 출력시키기 위한 이름을 / 로 지정해주었기에 localhost: 포트번호/ 를 하면 다음과 같이 첫 번째 페이지가 출력된다. 그리고 뒤에 /Second 라는 이름을 덧붙이면 다음과 같이 두 번째 페이지가 출력된다. 이번에는 앞의 두 페이지를 링크로 연결해 링크를 클릭할 경우 각각의 페이지로 넘어가도록 만들.. 2022. 4. 19. 애니메이션 다뤄보기 오늘은 버튼을 클릭했을 때 아래의 창이 아래에서 위로 올라오도록 만들어보겠다. 우선 아래의 창을 생성해주었다. 이제 여기서 오늘 하고자 했던 애니메이션을 추가해보도록 하겠다. 버튼을 클릭했을 경우 창이 뜨게 만드는 fadeIn 변수와 창이 아래에서 위로 올라오게끔 만들어주는 slideUp 변수를 만들었다. 그런 뒤 DarkBackground 변수와 DialogBlock변수 안에 각각 다음의 코드들을 넣어주었다. 그런 다음 실행시켜보면 알림창이 아래에서 위로 올라오면서 뜨는 모습을 확인할 수 있을 것이다. ++++++ 2022.04.07 오늘은 어제 한 내용에 이어 뜬 창을 아래로 내려가게끔 만들어 없애는 기능을 추가시켜보도록 하겠다. 우선 창이 사라지게끔 만들어주는 fadeOut 변수와 창이 아래로 내려.. 2022. 4. 6. polished와 styled-components 사용해보기 오늘은 어제의 파일을 바탕으로 polished와 styled-components를 사용해보겠다. 두 속성 다 설치를 해줘야 하니 cd 명령어를 이용해 사용하고자 하는 파일로 이동한다 그 후 npm install polished npm install styled-components 명령어로 속성을 설치해준다. 다음은 polished 속성을 이용하여 darken, lighten을 사용한 예제이다. 또한, styled-components 속성을 통해 js파일 내에서도 css가 사용가능하도록 만들어 주었다. 여기서 주의해야 할 점은 25번줄이다. 5번줄에서 선언해 둔 변수 StyledBtn과 25번줄에서 생성한 함수형 컴포넌트 StyledButton의 이름이 같을 경우 (만일 같은 이름으로 설정했다는 가정 하에.. 2022. 4. 5. scss 이용해보기 이번에는 scss를 이용하여 버튼 3개에 색상을 지정해주고 버튼을 눌렀을 경우와 버튼 위에 마우스를 올렸을 경우 버튼의 색이 바뀌도록 해보겠다. 우선은 사용할 색상을 변수화 시켜주었으며 버튼을 눌렀을 경우와 마우스가 버튼 위로 올라갔을 경우를 대비한 함수를 생성해주었다. 다음으로는 Button이라는 아이디를 가진 버튼을 위한 각종 너비 및 생상 등을 지정해주었으며 버튼의 크기에 따른 설정들을 지정해주었다. 다음으로는 변수화 시킨 각 색상들에게 앞서 선언했던 함수를 적용시켜준다. 그리고 버튼이 서로서로 너무 붙어있을 경우를 대비해 버튼간의 거리가 1rem정도를 유지하도록 만들어주었다. 다음으로는 App이라는 아이디에 적용시켜 줄 css 코드를 구현하였다. App.js 파일에서는 각각 다른 크기와 다른 색상.. 2022. 4. 4. hook 화면 출력을 위한 index.js파일 hook 사용1. EffectExample.js파일 hook 사용2. RefExample.js파일 hook 사용3. MemoExample.js파일 차례대로 실행시켜보면 1. userEffect의 경우 이 경우 위의 UP버튼을 눌렀을 경우 콘솔창에 userEffect!가 뜨나 아래의 UP버튼을 눌렀을 경우 콘솔창에 아무것도 뜨지 않음을 확인할 수 있다. 2. Ref의 경우 3. Memo의 경우 Memo의 경우 userEffect와 유사하게 위의 UP버튼을 눌렀을 때는 제일 아래의 Change의 숫자가 같이 올라가며 Change라는 문구가 콘솔창에 나타나는 것을 확인할 수 있다. 그러나 아래의 UP버튼을 눌렀을때는 제일 아래의 Change의 숫자가 올라가지 않으며, 콘솔.. 2022. 3. 31. 틱택토 만들어보기(2) 어제 작성했던 파일 밑에 새로 바뀐 코드를 넣으려고 했으나 내용이 너무 많이 바뀐 관계로 그냥 새 파일로 작성하기로 하였다. 추가적으로 들어간 기능: O와 X가 번갈아가며 뜸 게임 플레이를 기록해 특정 번째 플레이로 돌아가기 index.js파일은 어제와 똑같다. Square.js파일의 함수들은 Game.js파일로 이동시켜 다음과 같이 기본적인 형태만 남았다. Board.js파일의 함수들도 Game.js파일로 이동시켜 다음과 같이 기본적인 형태만 남겨두었다. 다음은 가장 많이 바뀐 Game.js파일이다. 실행시켜보면 시작화면 첫번째 플레이어가 스퀘어를 클릭한 경우 다음과 같이 옆쪽에 Go to move #1이 뜨는 모습을 확인할 수 있다. 이런식으로 게임이 끝났을 때 Go to game start를 누르면.. 2022. 3. 30. 이전 1 2 다음
