IT V-log

얼마전 아는 지인이 영어학원 사이트 오류와 몇 가지 기능을 구현 해달라는 부탁을 받았습니다. 하지만 제 실력으로 다른 사람이 구현한 코드를 해석하고 문제를 해결해줄 정도는 안된다고 생각하여 거절 하였지만 계속되는 부탁에 결국 오류정도는 봐보자는 생각을 하게 되어 해당 사이트와 소스코드를 보았습니다. 해당 사이트는 프론트는 리액트로 백엔드는 파이썬으로 구현이 된 영어학원의 학생관리 및 실제 시험을 볼 수 있는 사이트였고 readme가 작성되어 있지 않아 readme가 작성 되어있지 않아 인수인계 관련해서 물어보았는데 현재 프론트 개발자와 연락이 안 되는 상태라는 이야기를 들었습니다.. 결국 맨땅에 헤딩 하면서 해결하는 방법밖에 없다고 생각 했습니다. 더군다나 현 사이트에서 사용하는 Netlify와 Ant-..

이번 미니 프로젝트는 CSS에 관한 내용으로 리액트에서는 CSS를 컴포넌트 형태로 분리해서 적용한다고 하더라도 전역으로 설정되기 때문에 모든 컴포넌트에서 해당 CSS에 접근이 가능합니다. 그래서 CSS를 각 컴포넌트 단위로 지정하여 설정할 수 있는 방법에 대해 배우는 프로젝트를 진행 합니다. CSS를 컴포넌트에 맞춰 지정하는 방법으로 가장 유명한 두 가지 방법을 설명하기 앞서 사용자에게 입력 값을 받을때 사용자가 입력조건에 맞춰 올바르게 입력 하였는지 유효성 검사를 하는 방법과 CSS를 동적으로 설정하는 방법에 대해서 이야기를 하고 넘어가도록 하겠습니다. 유효성 검사를 해야하는 이유는 오류를 방지하기 위함이며, 확인을 하지 않으면 추후에 문제를 야기할 수 있습니다. const CourseInput = p..

리액트 강의를 무엇을 들으면 좋을까 알아보던 중 유데미에 Maximilian Schwarzmüller분께서 제작하신 리액트 완벽가이드 강의를 보았고 탄탄한 내용과 강의에 대한 평도 굉장히 좋아서 강의를 듣게 되었습니다. 강의를 들으면서 자바스크립트의 문법 중 화살표 함수, 스프레드 및 나머지(rest) 연산자, 구조분해 할당 등을 배웠으며, 리액트의 하향식 데이터 전달 방법인 props를 배워 부모 컴포넌트에서 자식 컴포넌트에 데이터를 전달하는 방법을 통해 페이지와 컴포넌트를 따로 분리하여 최종적으로 가독성과 재사용성을 높여 줄 수 있다는걸 알게 되었습니다. 또한, 리액트의 훅 중 하나인 useState를 통하여 기존의 리액트가 이미 한번 렌더링 된 후 데이터나 화면이 변경되어도 인지하지 못 하기 때문에..

현재까지 배운 내용을 가지고 그리고 앞으로 배울 내용을 가지고 지금부터 프로젝트(?)를 만들어 보면 굉장히 좋을 거 같아서 복습할 겸 만들어 보는 시간을 갖도록 했어요! 처음에는 무엇을 만들어보면 좋을까 고민을 하다가 게시판 기능을 만들어보면 서버의 흐름과 SQL 사용법에 굉장히 좋다는 이야기를 듣고 그럼 게시판을 만들겸 로그인과 회원가입외 기타 필요한 부분들을 만들어 보자! 해서 만들게 된 익명 게시판 입니다!! 잠깐 소스 코드 설명을 하자면 다른 부분은 그렇게 어렵지 않겠지만 EditText 부분에 android:drawableLeft, android:drawablePadding 은 바로 검적색 아이콘을 넣기위해 사용하기위해 설정한 부분입니다! drawableLeft 같은 경우는 EditText의 옆..

규칙 5x5의 2차원 배열을 이용한 지뢰찾기 배열의 인덱스 번호를 입력하면 입력한 구간이 클릭 되고 숫자가 나타난다. 이 숫자는 그 칸을 중심으로 2×3 영역(임의로 정해서 추후에 만들면서 변경이 필요 할 거 같음 [유의])에 몇 개의 지뢰가 존재하는가[1~3개까지? (임의로 진행)] 나타낸다. 만약 클릭한 칸 주변에 지뢰가 하나도 존재하지 않았다면 그 블록에는 숫자가 그려지지 않으며, 지뢰가 없는 인접한 칸이 모두 열리게 된다. 그리고 숨어 있는 지뢰를 우클릭해서 깃발을 꽂아야 한다. 절대 밟으면(열면) 안 된다. 밟는 순간 게임이 끝이 난다 (지뢰 개수, 주변에 몇 개의 지뢰가 있는지 범위, 주변에 지뢰가 없으면 어디까지 열릴 것인지 등은 임의로 지정 가능) 승리 조건 만약 모든 폭탄의 위치를 찾아 ..

Practice 1. 버튼 클릭시 화면의 이미지 이동하기 아주 간단한 구현이라 따로 부가 설명은 적지 않고 소스코드만 공유 하도록 할게요 ~ 기능은 버튼 클릭시 사진이 위 아래로 움직이는 기능입니다! (레이아웃 XML) (main java) package com.example.quiz1; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.ImageView; public class MainActivity extends AppCompatActivity { ImageView topImg; ..

오늘은 깡샘의 안드로이드 프로그래밍에 나오는 Part2 도전과제를 풀어보도록 할게요! Mission1. 페이스북의 메신저 인트로 화면 구현하기 요구사항: 레이아웃 XML 파일을 이용하여 작성하며, 이미지, 타이틀 문자열, 콘텐츠 문자열, 버튼, 설정 문자열을 출력한다. 그리고 버튼을 클릭하면 "ok button click"이라는 문자열을 토스트(Toast)로 출력한다. 가로모드와 세로모드 변환 방법은 res 폴더에서 우클릭 후 Android Resource File로 들어가서 설정을 입력해주고 확인을 누르면 사진처럼 세로모드 xml이 만들어 져요!! (가로모드 XML) (세로모드 XML) 한국어 버전과 영어버전 설정 방법은 values 우측 클릭 후 Values Resource File을 클릭 해 줍니다..