광산김가네

먼저 내가 맡은 파트인 검색이랑 localhost의 경우 router설정은 필요없지만 router에 대해서 1도모르기때문에 코드가 이해되지않는 경우가 다반사였다. 그래서 이번 모각코시간에는 router에 대해나 개념을 조금 잡고 recoil에 대해서 파보기로하였다 Router 주로 페이지이동을 위에 사용되는데 컴포넌트들을 주소에따라 배치를 변경해주는 작업을 의미한다 데이터가 도착점까지 가는 경로들을 구성하는 과정이라고 이해했다. 이를 이용하려면 npm install react-router-dom 으로 설치해야한다! **최근에 6버전으로 업데이트가 되어 구글링할때 router 6 이런식으로 하는게 좋다고한다. 사용방법은 다음과같다 1. app.js에서 로 추가해줘야한다 2. Router.js 따로 생성하여..

이번 모각코시간에는 React 개념에대한 직접적인 학습보다는 팀원들과 만들어볼 프로젝트에대해서 얘기해보고 기능과 UI/UX를 구체화 시켰다.또한 페이지별/기능별로 파트를 나눠서 다음 모각코 회차까지 개발해오기로하였다! 프로젝트 구체화 저번에도 기재했지만 ✨✨리액트를 활용한 모현 맛집지도✨✨를 제작하는것이 우리 프로젝트의 주된 주제였다. 물론 이미 에타와 같은 학생커뮤니티나 정리해놓은 서비스들은 기존에 존재하지만 직접 고학번(나름)의 시각에서 생각햇을때 필요한 정보들이 잘 보이게 분류된 서비스는 없다고 생각했다! 따라서 이런부분들을 위주로 서비스를 분류해보았다. 우선 데이터의 출처는 에타, 네이버/카카오지도 후기, 직접방문한 가게, 지인추천등등으로 모아보았다(4-50개정도 수합될것으로보인다) 또한 엑셀파일..

이번주차에는 저번 모각코회차(8/6(토))에서 회의를 바탕으로 역할분담한 비개발영역을 진행하고, 남는시간에는 아직 프로젝트를 시작하기 앞서 React의 주요한 부분을 학습하지 못해 개념학습을 마무리하였다. 프로젝트 준비 우리 팀은 ✨리액트를 활용한 모현 맛집지도✨를 제작하는것이 최종 목표였다. 이에 프로젝트 개발에 앞서 비개발 영역을 먼저 분담하였다. 나는 데이터생성의 역할을 맡았는데, 학교주변의 음식점의 데이터는 카카오나 네이버 api에 담겨있겠지만 우리의 목표는 좀더 학생들이 이용하였을때 효율적이고 가시적인 서비스를 만드는것이였다. 따라서 데이터를 엑셀에 새롭게 정리하고 생성하기로 하였다. 리액트 개념 공부- Effect 남는 시간에는 리액트 Effect~라우터까지 공부하려고했다 ! 사실 위에는 비개..

해당 코드 티스토리는 dart를 지원해달라 Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('글쓰기'), ), body: Column( children: [ 평소 build함수에 최상단에 Scaffold를 써도 별 문제없이 잘 개발해왔는데 저렇게 뜨니까 넘 황당했다 알고보니 여태까지 항상 main.dart는 거의 안건들이고 main.dart에 연결된 파일들을 수정하느라 잊고있었다.. entry point인 main.dart에 있는 MyApp 컴포넌트는 무조건 MaterialApp이 감싸고있어야한다. 해결된코드 Widget build(BuildContext context) { return MaterialApp..

이번주차에는 드디어 node.js로 react app을 만들어보고 앞선 코드작성방식과 차이점에 대해서 알아보았다 create-react-app node.js를 설치하고 npm 명령어를 이용하여 npm create-react-app 만들고싶은 폴더이름 을 치면 react 로고가 뺑글뱅글 돌아가고있을거다. 노마드코더 강좌에서는 일단 당장 사용하지않을 app.test.js나 css파일 등등 모두 제거하고 app.js랑 index.js만 우선 사용하고 필요없는거 다 삭제해서 아래와 같이 결과물이 나왔다.' 개인적으로 처음 react 공부할때 제일 어려웠던게(kotlin 처음배울때도 마찬가지로) 알수없는 파일이 막 있는게 굉장히 부담스러웠는데 날리니까 한결나았다 휴 실행할때는 터미널에 해당 생성된 폴더위치에서(폴..

저번시간에도 간략하게 props에 대해서 보았지만 이번시간에 예제를 통하여 props에 대해서 확실하게 알아보려고한다. props란? 컴포넌트때부터 쭉 익혀왔듯이 부모-자식 컴포넌트간에 소통하기위한 친구인데 난 쉽게 생각해서 인자라고 생각했다 예제코드를 함께 봐보면 위와 같은 버튼두개의 style을 이렇게 복붙하여 컴포넌트에 붙여넣기하는것은 코드량도 많고 비효율적이다 그치만 우리학교 사이트는 모두 저렇게 되어있ㄷ.. 또한 두 버튼은 버튼안의 텍스트만 다르기때문에 공통된요소를 컴포넌트로 생성하고 이를 부모컴포넌트, 즉 App 컴포넌트에서 사용할때 props로 값을 다르게 전달해주면 해결된다. function을 생성할때 항상이름 옆에 ()이렇게 인자가 들어가기 딱좋은 괄호를 붙여주기때문에 여기에 props라..

이번시간에는 다음시간에 이어 setState함수에 이어서 state에 대해서 더 알아보았다 컴포넌트의 핵심키워드중하나인 props까지 학습해보았다. 1.useState 사용하기 리뷰 const [ counter,setCounter] = React.useState(0); 위의 코드처럼 useState의 반환값 두개를 1.바꿔줄 변수 2.바꿔줄 변수를 다루는 함수 이름을 선언해줘서 사용한다. 여기서 setCounter와 같이 바꿔줄 변수를 다루는 함수는 크게 두가지 방식으로 사용한다 1. 인자로 변경될 내용 작성 setCounter(변수의 변경내용) 이런식으로 쓰는데 setCounter(10000)으로 정적인 데이터를 넣어주거나 setCounter(counter+1) 변수를 포함한 식으로 넣어줄수있다 2. ..

앞서 2회차동안은 주로 React의 동작방식에 대해서 이해하고 기초되는 JSX에 대해서 배워보았다. 이번 모각코회차에서는 React를 이용해서 그려진 화면의 구성요소인 1)컴포넌트에 대해서 알아보고 2)컴포넌트에서 입력값중 하나인 state에 대해서도 알아보려고한다! 0. 컴포넌트란? : 컴포넌트는 앱을 이루는 최소한의 단위이다. 또한 컴포넌트는 데이터(props)를 입력받아서 view(state) 상태에 따라서 DOM node를 생성해주는 함수이다. 여기서 props, state에 대해서 간략하게 알아보자면, props : 컴포넌트간에 주고받는 데이터 state : (컴포넌트 내부에서)다루는 데이터 라고 할수있다. 컴포넌트는 크게 함수형 컴포넌트, 클래스형 컴포넌트로도 나눌수있다. 1. state 정확..

이번회차의 경우 React JS의 기본문법이 되는 JSX에 대해서 학습하였다. JSX란? javascript를 확장한 문법으로써 xml과 굉장히 유사하게 생긴 친구이다. 코드가 브라우저에서 실행되기 이전인, 번들링되는 과정에서 일반 JS 형태로 변환된다고 한다. 변환과정을 예제로 가져와봤다. 변환전 function App(){ return ( Hello react ); } 변환이후 function App(){ return React.createElement("div", null, "Hello", React.createElement("b", null "react")); } 출처 저번에 노마드코더 강좌에서 배웠던 createElement 이런걸 앞으로 코드에서 직접적으로 쓰는것이아닌, 위에 있는 변환전 코드..

파이썬으로 단순하게 open 함수로 엑셀파일을 열고 데이터를 다룰수도있겠지만 구글링을 해보니 엑셀 전용 라이브러리가 있었다! 해당 라이브러리로 엑셀 데이터를 정리해보았는데 나중에도 써먹으려고 기록해보려 한다ㅎ-ㅎ 참고블로그 1. 엑셀 새로 생성하기 전체적인 틀은 다음과 같다 #필요한 import 구문 from openpyxl import Workbook newWb = Workbook() tmpWb = newWb.create_sheet('new Sheet') tmpWb = newWb.active tmpWb.append(넣어줄 정보) 여기서 넣어줄 정보는 행단위로 넣어줄수도 있고 열단위로 넣어줄수도있다 이게 진짜 대박이다 내 작업시간 지킴이 ;ㅁ; 자세한건 밑에서 실제 데이터로 넣어보겠다 2. 기존 엑셀 열..