profile
성장하는 developer
post-thumbnail

[React] 코딩앙마 리액트 기초강좌 #16 마치며

#16 마치며 네트워크 환경 느릴때 처리 개발자도구 > Network > Slow 3G로 설정해놓고 테스트 해보자 useFetch.js 초기값이 [] 이므로, 배열 length가 0일때 Loading… 을 출력해보자 DayList.js 단어 추가시 통신중일때는 저장버튼 클릭하지 못하도록 CreateWord.js isLoading 상태 생성 i...

2022년 5월 30일
·
0개의 댓글
post-thumbnail

[React] 코딩앙마 리액트 기초강좌 #14 PUT(수정), DELETE(삭제) - #15 POST(생성), useHistory()

#14 PUT(수정), DELETE(삭제) CRUD 중 Update 이용해 단어 수정 CRUD Create: POST Read: GET Update: PUT Delete: DELETE PUT 아는 단어인지 체크/미체크 하는 부분은 상태저장 필요 data.json에서 isDone 필드 업데이트해 수정해줘야함 Word.j...

2022년 5월 30일
·
0개의 댓글

[React] 코딩앙마 리액트 기초강좌 #13 Custom Hooks

#13 Custom Hooks src폴더 아래에 hooks 폴더 생성, useFetch.js파일 생성(우리가 만들 커스텀 훅) useFetch.js data라는 상태값 url(API 주소) 넘겨받아서 fetch하고, 응답받은 데이터를 setData해줌 data 리턴 DayList.js Day.js 이전 코드에서 useEffect 썼던 부분 다 지...

2022년 5월 30일
·
0개의 댓글
post-thumbnail

[React] 코딩앙마 리액트 기초강좌 #12. useEffect, fetch()로 API호출

#12. useEffect, fetch()로 API호출 API 있으니까 dummy data 변경해주자 Day.js dummy데이터 임포트하는거 삭제 days state 만들고 → 처음에는 빈배열로 만들어주고, API에서 list 가져와서 바꿔주는 방식으로 구현예정 useEffect Hook 어떤 상태값이 바뀌었을때 동작하는 함수 작성할 수 있음...

2022년 5월 30일
·
0개의 댓글
post-thumbnail

[React] 코딩앙마 리액트 기초강좌 #11 json-server, REST API

#11 json-server, REST API [뜻보기 / 숨기기 / 삭제] 버튼 / 체크박스 만들기 각 컴포넌트별로 state를 가지고 있다 → 뜻 보기 버튼을 누르면 뜻이 보였다 안보였다 하는건 단어에만 해당하니까, 따로 컴포넌트 제작해주자 Word.js isShow 상태값 만들어주고, props로 word를 받아와 isShow가 true일때...

2022년 5월 30일
·
0개의 댓글
post-thumbnail

[React] 코딩앙마 리액트 기초강좌 #10. 라우터 구현 react-router-dom

#10. 라우터 구현 react-router-dom 라우팅 구현을 위해 react-router-dom 설치 > npm install react-router-dom > 설치후 App.js에 → 앱 전체를 BrowserRouter로 감싸준다. App.js Switch 내부는 url에 따라 각각 다른 페이지 보여줌. Switch 외부는 모든 페이지에 ...

2022년 5월 28일
·
0개의 댓글
post-thumbnail

[React] 코딩앙마 리액트 기초강좌 #9. 더미 데이터 구현, map() 반복문

#9. 더미 데이터 구현, map() 반복문 본격적인 페이지 만들어보자. 헤더 만들기 Header.js App.js 더미 데이터 만들기 data.json 데이 리스트 만들기 map(): 배열 받아서 새로운 배열 반환해줌, 이때 반환되는 요소를 jsx로 작성해주면 됨 DayList.js 참고: 리액트에서 왜 key가 필요할까? https:...

2022년 5월 28일
·
0개의 댓글
post-thumbnail

[React] 코딩앙마 리액트 기초강좌 #8. props

#8. props props는 property의 약자로, 속성값을 의미 Hello.js App.js → props를 넘겨받아 사용함(컴포넌트 내부에서 변경 X) → 값 변경하고 싶으면 컴포넌트 내부에서 state를 다시 만들어야함 → 넘겨받은 props를 변경시키려 하면 에러 발생! → 전달하는 props가 age 하나밖에 없어서 위처럼 작성 가능...

2022년 5월 28일
·
0개의 댓글
post-thumbnail

[React] 코딩앙마 리액트 기초강좌 #7. state, useState

#7. state, useState state: 컴포넌트의 속성값 → state가 바뀌면 react는 UI를 자동으로 업데이트 시켜줌 → 개발자는 state만 잘 관리하면 화면을 다시 그려주는 작업은 신경쓰지 않아도 됨 예시 코드 → 이름은 바뀌었는데 DOM 업데이트가 안됨! → 바닐라JS로 작업한다면 돔 업데이트 해주는 자바스크립트 코드 작성해줘...

2022년 5월 28일
·
0개의 댓글

[React] 코딩앙마 리액트 기초강좌 #6. 이벤트 처리(Handling Events)

#6. 이벤트 처리(Handling Events) 위에 함수 선언해서 불러오거나 익명함수 선언하는 방식 2가지 있음! 다양하게 작성할 수 있음 → 상황에 맞춰 편하고 가독성 좋은 코드로 작성하자!

2022년 5월 28일
·
0개의 댓글
post-thumbnail

[React] 코딩앙마 리액트 기초강좌 #5. CSS 작성법(module css)

#5. CSS 작성법(module css) create-react-app 으로 만든 프로젝트라면 별도 패키지 설치 없이 바로 사용할 수 있는 방법 3가지 있음 1. inline style css 파일 따로 만들지 않고 html에 바로 적는것 특별한 경우 아니면 인라인으로 작성하지는 않음 2. 프로젝트 생성하면 자동 생성되는 css 파일 활용(ind...

2022년 5월 28일
·
0개의 댓글
post-thumbnail

[React] 코딩앙마 리액트 기초강좌 #3 컴포넌트, JSX - #4 컴포넌트 만들기

#3 컴포넌트, JSX 컴포넌트 리액트로 만든 페이지는 컴포넌트 들로 구성되어 있다. 페이지 단위로 HTML을 작성하는 것이 아닌, 각 부분을 컴포넌트로 만들어 조립해서 사용! → 비슷한 부분은 코드 재사용할 수 있고, 유지보수도 쉬워질것 현재는 하나의 컴포넌트만 있다. → App 컴포넌트 App 컴포넌트는 함수로 만들어져 있고, default로 ex...

2022년 5월 28일
·
0개의 댓글
post-thumbnail

[React] 코딩앙마 리액트 기초강좌 #2 설치(create-react-app)

#2. 설치(create-react-app) npx는 npm이 올라가있는 패키지를 바로 실행해서 설치시켜주는 도구 터미널에 아래와 같이 입력 > npx create-react-app voca 이처럼 create-react-app 으로 만들면 폴더구조, 세팅들 다 자동으로 해줌 webpack, barbel 등을 수동으로 설치하고 세팅해서 개발환경 구...

2022년 5월 28일
·
0개의 댓글

[HTML] section vs article 태그 비교

section 태그는 주제별 영역들을 그룹화 하기위해 사용article 태그는 section처럼 특정영역 그룹화 할때 사용하지만,차이점으로는 해당 페이지에서 다른 페이지, 다른 영역에 언제든지 독립적으로 가져다 붙힐 수 있는 영역을 그룹화 함ex) 블로그/SNS영역,

2022년 5월 5일
·
0개의 댓글
post-thumbnail

[메이킹챌린지 11기] RE:TRO 8~15일차 개발일지

22.03.10(목) 8일차 개발 진행상황 프론트엔드 메인페이지에 자바스크립트 연결 작업중. 메인페이지에 필요한 이미지, 아이콘 등 소정님에게 받아 추가 백엔드 하단 플레이어에 음악 재생되도록 연결. youtube 링크 DB구성 개발 진행목표 소정님: 레이아웃 디자인 완료 및 노션 정리 다연님: 월요일까지 검색결과페이지 구현 세민님: 토요일까지 마이페이...

2022년 3월 20일
·
0개의 댓글

[스파르타코딩클럽] 메이킹챌린지 프로젝트 후기 및 회고

메이킹챌린지 스파르타코딩클럽에서 웹개발종합반을 수료한 후, 수료생들을 대상으로 모집하는 메이킹챌린지에 참여하게 되었다. ![] (https://images.velog.io/images/jisubin12/post/5f5e4382-94f7-46f1-bdcb-ddf8384ba329/image.png) 메이킹챌린지는 수료생들간 팀을 이뤄 15일간 하나의 웹서비스...

2022년 3월 20일
·
0개의 댓글

[웹개발 종합반] 5주차 개발일지 - (2) 원페이지 쇼핑몰

[웹개발 종합반] 5주차 개발일지 - (2)

2022년 3월 2일
·
0개의 댓글

[웹개발 종합반] 5주차 개발일지 - (1) 마이 페이보릿 무비스타

[웹개발 종합반] 5주차 개발일지 - (1)

2022년 3월 2일
·
0개의 댓글

[웹개발 종합반] 4주차 개발일지 - (3) 나홀로메모장

[웹개발 종합반] 4주차 개발일지 - (3)

2022년 2월 25일
·
0개의 댓글