REBORN  멋쟁이 사자처럼 동아리 여대 연합으로 진행된 해커톤인 여기톤에서 모두 다른 학교의 새로운 팀원들을 만나 개발을 진행하게 되었다. 프론트엔드 역할을 맡았으며,해커톤 조건인 HTML, CSS, JavaScript만을 이용해 개발을 진행했다.  백엔드에서 Django를 사용했기 때문에 템플릿이 존재하는 폴더 경로가 중요했고,페이지 연결과 기능 연결은 대부분 장고 언어로 진행할 수 있었다. 여기톤을 진행하면서 가장 신경을 썼던 부분은피그마 디자인으로 요구된 화면 크기와 비율, 폰트 등 모든 요소의 세부적인 디테일이었다.  너무 감사하게도 기획/디자인을 맡은 팀원분이 꼼꼼하게 개발 화면에 대한 피드백을 주셨고,여백, 폰트 두께 등 디테일함을 놓치지 않고 작업을 이어나갈 수 있었다.  개발을 진행하다..

회원가입은 전화번호로 진행하며,즉, 전화번호를 앱의 아이디로 활용한다.  또한 서비스 이용동의를 위해 체크 박스도 구현했으며,  앱이라는 특성 상가장 먼저 KeyboardAvoidingView를 사용해 키보드가 열릴 때 화면을 자동으로 조정하여 값을 입력할 수 있도록 했다.또한 ScrollView로 화면이 길어질 경우 스크롤이 가능하게 코드를 작성해주었다. KeyboardAvoidingView        style={{ flex: 1 }}        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>        ScrollView contentContainerStyle={styles.scrollContainer}>          View style..

이 프로젝트는 노인들의 정보 소통을 위한 커뮤니티를 구현하는 프로젝트로 리액트 네이티브를 활용해 현재 개발 진행 중이다.  이 글에서는 가장 처음 만들었던 페이지인 온보딩 페이지에 대해 설명하려한다.   온보딩 페이지의 작업은 넣어야할 요소가 많지 않았기 때문에 어렵지 않게 작업할 수 있었다. 다만, 리액트 네이티브로 배경 사진의 크기를 조정하는 데 있어서 이미지 크기가 맞지 않는 등 어려움이 있었지만,% 단위를 활용해 크기를 적절하게 맞춰나갈 수 있었고, 원하는 화면을 계속해서 구현할 수 있었다.   또한, 스타일 지정할 내용이 많이 없었기 때문에 편의성을 위해 style 코드는 inline 방식으로 작성해주었다.온보딩 이외의 페이지에서는 StyleSheet 를 활용해 style을 지정했다.    온보..

7주차 세션  7주차 세션에서는 이전에 했던 내용들을 복습하고,글 작성하기 페이지를 스스로 실습해보는 시간이 주어졌다.  따라서 과제에 대한 내용을 위주로 적어보려한다.  주어진 과제는 2개였다. 첫째,나만의 유튜브 페이지 만들기 api와 props, router 등 많은 요소들을 실습해볼 수 있었고, api를 발급받는 부분이 어렵기도 했지만, api를 활용해볼 수 있어서 의미있었다.  api를 활용해 검색 기능을 구현했고, 유튜브 api를 활용해 검색 결과가 표시되게끔 코드를 설정해주었다. 또한, router 기능을 이용해 각 카테고리 별로 컴포넌트 이동이 가능하도록 구현했다. 완성된 결과물은 다음과 같다.     둘째,fila 페이지 만들기  두번재 과제는 fila 페이지를 만들어보는 것이었다.다양한..

6주차 세션  6주차에는 리액트에서 axois를 활용해 api를 불러오는 실습을 진행했다. 먼저 지도 api를 활용해 화면에 지도가 표시될 수 있도록 axios요청을 작성하는 실습이 이루어졌다.  카카오 지도 api를 사용했으며,axios GET 요청으로 response의 status가 200이라면 버튼을 눌렀을 때 상태가 연결 성공으로 변하게끔 상태를 설정해주었다.  api를 활용한 요청도 정상적으로 불러와져 화면에 표시되었고,axios 요청도 정상적으로 작동하는 것을 볼 수 있었다.     세션에서 api를 활용해봤기 때문에 과제 또한 api를 활용해볼 수 있는 실습으로 주어졌다. 공공데이터 api를 활용해 리액트로 불러오는 실습이었다.  실습 과정을 간단하게 정리하자면, 다음과 같은 순서로 진행했다..

5주차 세션  5주차 세션에서는 지난 주에 이어서 리액트 실습이 진행되었다.지난주에는 기본적인 state활용, 컴포넌트 활용에 대해 실습했다면,이번주에는 state와 컴포넌트, props를 이용해서 글쓰기 페이지를 만들어보는 실습이 진행됐다.  먼저 글을 작성할 수 있는 페이지를 만들어주었고,useState와 onChange 속성을 이용해 사용자가 입력하는 값에 대한 상태관리를 하고,입력값을 props를 통해 글을 보여주는 컴포넌트로 전달하면서 사용자가 작성한 글을 확인할 수 있도록 구현했다.  물론 데이터베이스에 저장되어 있지 않아 새로고침하면 작성한 글이 사라지기는 하지만,다른 컴포넌트에서 입력한 값을 props로 또 다른 컴포넌트로 전달해 화면에 표시할 수 있다는 것을 학습했다. 또한,글을 작성한만..

4주차 세션  4주차 세션은 리액트에 대한 실습이 이루어졌다. 리액트는 컴포넌트 단위로 조합과 분해가 쉽다는 장점이 있으며,상태관리와 변화를 제어하기가 쉽다.  기본 구조는 함수형으로, css는 scss를 활용해 세션을 진행했다.  먼저 Header, Main, Footer를 구분하는 컴포넌트를 생성해 구조를 분해하는 연습을 할 수 있었고,Main 컴포넌트에서 useState의 상태관리를 이용해 버튼을 누르면 이름이 변경되는 간단한 동작을 넣어보았다. 이름은 state로 상태관리를 했으며 삼하연산자로 이름을 바꾸는 함수를 정의해 기능을 완성할 수 있었다. const [myName, setName] = useState("Jhon");    function ChangeName(){        setName..

3주차 세션  3주차도 역시 레이아웃 테스트와 자바스크립트 테스트로 세션이 시작됐다.  먼저 레이아웃 테스트는 크게 어려운 내용은 아니었으나, 10분이라는 시간 내에 반응형 레이아웃까지 모두 완성하기란 쉬운 일이 아니었다.... 기본 레이아웃과 첫번째 미디어 쿼리까지는 완성했으나, 시간 안에 두번째 미디어 쿼리를 완성시키지 못해서 테스트가 끝난 후 완성시켜 깃허브에 올려두었다. 레이아웃의 결과물은 다음과 같다.  max-width가 680px와 450px를 기준으로 레이아웃이 변경되도록 미디어 쿼리를 구현했다.    다음으로 자바스크립트 테스트는 손코딩으로 진행됐다.빈칸을 채우는 간단한 손코딩이었지만, 헷갈리는 부분이 꽤 있었고... 더 열심히 해야겠다는 생각이 들었다.  const, let, var, ..

2주차 세션 2주차 세션에서는 html, css 심화 개념과 자바스크립트에 대한 세션이 진행됐다. 먼저 지난 주에 배웠던 html, css를 점검하기 위해 레이아웃을 만드는 시험이 간단하게 진행됐다. 어려운 레이아웃은 아니었지만, 10분정도의 시간이 주어졌고, 과제에서 사용하지 않았던 새로운 방법으로 레이아웃을 만들어보려고 했는데 div를 묶어주는 section 하나에 height 비율을 빠뜨려서 시간 안에 완벽히 완성해내지는 못했다. 그렇지만 바로 문제를 찾아서 height을 부여했고, 레이아웃은 완성해냈다. => 레이아웃을 구성할 때는 큰 요소부터 구성해나가는 것이 좋다고 피드백을 들어서 먼저 구조를 만들었다. 다음으로 큰 요소부터 하나씩 css를 적용하기 시작했다. 큰 요소에는 고정 크기로 px단위..

1주차 세션 아기사자가 된 후, 본격적으로 1주차 세션이 진행됐다. HTML, CSS에 대해 배웠고, vscode와 github를 연결해 코드를 작성했다. HTML과 CSS를 연습하기 위해 간단한 자기소개 페이지를 만드는 실습도 진행했다. 나는 display:flex, justify-content:space-between, list, align-items 등을 이용해 자기 소개 페이지를 구성했다. 결과물 사진을 첨부하겠다. 코드는 생각보다 길어서 깃허브를 참고하는 것이 더 좋을 것 같다. 다음으로 자바스크립트에 대해서도 짧게 배울 수 있었다. 변수를 설정하고, 배열을 설정하고, 값을 콘솔창에 출력해보는 연습을 할 수 있었다. 마지막으로 조건문 if, switch문까지 배웠다. 세션이 끝난 후 1주차 과제..