[Javascript] 백준 - 2839 설탕공장

상근이는 요즘 설탕공장에서 설탕을 배달하고 있다. 상근이는 지금 사탕가게에 설탕을 정확하게 N킬로그램을 배달해야 한다. 설탕공장에서 만드는 설탕은 봉지에 담겨져 있다. 봉지는 3킬로그램 봉지와 5킬로그램 봉지가 있다.상근이는 귀찮기 때문에, 최대한 적은 봉지를 들고 가

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

[React] 왜 리액트를 사용하나요?

왜 Angular나 Vue가 아니고 React? 리액트는 페이스북에서 개발하고 관리하는* 사용자 인터페이스(UI)를 만들기 위한* Javascript 라이브러리**이다. 왜 프론트 개발을 할 때 리액트를 사용하는지에 대한 이유와 장점, 단점에 대해서 정리해보려고한다.

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

[React] 반려식물 재배 도우미 서비스 '초록'

6주간의 프로젝트가 드디어 끝이 났다. 말이 6주지 실질적으로는 4주반? 5주에 가까웠던 것 같다.일단 어마어마한 뷰의 양에 기가 눌린 채로 시작했지만 어찌어찌 완성을 하게 되었다. 여러모로 부족했던 나로서는 팀원들에게 많이 배우면서 작업을 진행해 나갔던 것 같다. 끝

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

[CSS] reset CSS

웹브라우저에 따라 디폴트 스타일이 상이하고 지원하는 tag나 style도 제각각이어서 주의가 필요하다.

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

[React] useState의 초기값을 props의 값으로 설정하기

프로젝트 중 community 페이지를 구현하는데 해당 각 게시물을 클릭하면 상세페이지로 넘어가고 각 게시물의 내용을 props로 넘겨주었다. 그런데 이때 기존에 좋아요 혹은 북마크 했다는 불리언 값들을 useState의 초기값으로 지정하려고 하였으나 잘 되지 않았다.

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

[React] 카카오 로그인 구현하기 - REST API

지금 진행하고 있는 프로젝트에서 카카오 로그인과 구글 로그인을 진행하기로 하였다. 먼저 카카오 로그인에 대해 정리하면서 진행해보려고 한다. 아, 그리고 이 글은 프론트엔드의 입장에서 작성된 글이다. 카카오 API를 사용할 때에는 sdk 방식과 REST API 방식이

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

[React] 회원가입 / 로그인 - 이메일 및 비밀번호 정규식

회원가입이나 로그인을 하기 전에 이메일/아이디와 비밀번호의 유효성을 검증할 정규식을 정리해보려고 한다.

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

[React] 좌표(경도, 위도)로 주소 알아내기(feat. Geolocation / 카카오 맵 API) + Geolocation 사용제한에 관하여

프로젝트 중 홈 화면에서 오늘 날짜와 날씨, 현재 위치의 행정구를 보여주는 상단바를 만들고자하였다. 하지만 Geolocation이나 날씨 정보 API의 http프로토콜 사용시 사용제한에 대해 알게 되면서 카카오 맵을 활용하여 좌표로 주소 알아내는 법도 찾아보게 되었다.

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

[React] 모달창 만들기(모달창 외부클릭시 홈화면으로 이동)

실전 프로젝트 중 유저에게 식물을 추천해주기 위해 모달창을 사용해야하는 경우가 생겼다. 이런 느낌?리액트에서 모달창을 만들기 위해서 사용할 수 있는 라이브러리에는 React Modal, Rodal, React Modal Dialog, Sweetalert2 등 여러가지가

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

[React] <useState> - 비동기, batch update

useState 리액트 앱을 만들다보면 useState를 정말 자주 사용하게 된다. 오늘은 useState에 대해서 알아보자 . useState는 우리가 state를 관리하기 쉽게해주는 React Hook이다. const [ number, setNumber ] = us

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

[CSS] grid 박스 안에서 중앙정렬시키기

이 그리드 박스 안의 내용들을 가운데 정렬을 하는 방법을 정리해보자.place-items는 align-items와 justify-items를 같이 쓸 수 있는 단축 속성이다. align-items, justify-items의 순서로 작성하면 된다.하나의 값만 쓰면 두

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

Troubleshooting- UseEffect()관련 렌더링 과정에 대한 오류

당근마켓 클론 코딩을 하는 과정에서 게시글을 클릭하면 상세페이지를 보여주려고 하는데 데이터를 불러오지 못하고 계속 useEffect에서 에러가 발생하였다. useEffect를 이해하지 못한 데서 발생하는 에러같았다. useEffect(() => { dispatch(

2022년 4월 27일
·
0개의 댓글

[React] 조건부 랜더링 - 논리 && 연산자로 If를 인라인으로 표현하기

프로젝트를 시작하기에 앞서서 Element를 만드는 와중에 {label && &lt;Text margin="5px">{label}&lt;/Text>} 이런 코드를 보게 되었다. label 뭐.. Text를 뽑는데.. input을 labeling하는 건데... 뭐? &

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

[WIL] 미니프로젝트 (FormData로 이미지 url이랑 다른 content랑 같이 서버로 보내기 with. AXIOS)

미니프로젝트에서 로그인, 회원가입, 메인페이지 (CRUD의 Read부분)을 맡았었다. 처음엔 순조롭게 잘 진행되었고 화요일쯤엔 다 마무리가 되는 듯하였다. 하지만 일은 수요일에 벌어지고 말았다. 갑자기 팀원이 못하겠다고 하면서 연습하던/공부하던 파일을 슬랙에 던져놓았다

2022년 4월 18일
·
0개의 댓글

[React] Axios 추가 작성중

이번주는 Axios에 대한 이야기를 해보고자한다. Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트이다. 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용한다.Axios의 특징은 아래와 같다. 브라우저를 위해 XMLHt

2022년 4월 10일
·
0개의 댓글

[React] Google Firebase Error - Uncaught (in promise) FirebaseError: Missing or insufficient permissions.

Uncaught (in promise) FirebaseError: Missing or insufficient permissions. 해결방법 firebase cloud firestore - 규칙 - 규칙수정 위 규칙에서 의 를 로 변경해주었더니 해결되었다.

2022년 4월 7일
·
0개의 댓글

[React] Component 모듈화 - 배우는중 (추가 수정 예정)

onChange를 쓰는데 왜 안되지? placeholder을 썼는데 왜 안되지? 했더니input 컴포넌트를 모듈화하는 과정에서 props로 컴포넌트를 설정하면서 onchange, type, placeholder등 태그 관련 기능을 defaultProps로 넣어줘야 ja

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

[React] Google Firebase로 이메일 / 비밀번호 인증 로그인 기능 만들기(feat. magazine사이트만들기)

로그인 만들기 1\. firebase.js에 만들어둔 auth 가져오기2\. 리덕스에서 loginFB 함수 만들기3\. auth.signInWithEmailAndPassword()로 로그인4\. Login 컴포넌트에서 loginFB를 호출!5\. 리덕스의 user 정보

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

[React] Google Firebase로 이메일 / 비밀번호 인증 회원가입 기능 만들기(feat. magazine사이트만들기)

회원가입 기능 구현1\. firebase.js에 만들어둔 auth 가져오기2\. 리덕스에서 signupFB 함수 만들기3\. auth.createUserWithEmailAndPassword()로 가입 시키기4\. Signup 컴포넌트에서 signupFB를 호출!5\.

2022년 4월 6일
·
0개의 댓글

[React] Redux store 생성하기(feat. magazine사이트만들기)

뷰 만들기 > redux store 만들기 > action, reducer, middleWare 연결 > Redux DevTool: 리덕스 개발자 도구를 사용하면 현재 스토어의 상태를 개발자 도구에서 조회할 수 있음 지금까지 어떤 액션들이 디스패치 되었는지, 액션에

2022년 4월 6일
·
0개의 댓글