와챠의 우당탕탕 코딩 일기장

목차 리스트(배열) 기능 추가: 하트 버튼 누르면 아래 리스트에 사진 추가 폼 다루기 입력 문자 그대로 출력 소문자 입력 시 대문자로 변환 폼 검증(form validation) 한글 있는지 검사 에러 메시지 출력 빈 값 방지 데이터 유지 데이터 유지: JSON 1. 리스트(배열) 리스트: 배열에서 map을 돌면서 리액트 UI를 반환한다. map은 아래와 같이 사용함 {favorites.map(image => ) } 현재 이는 아래와 같은 코드로 이루어져 있는데 이거를 리스트를 사용해서 바꿔보자 이때 리스트에는 고유한 값인 key값이 필요한데, 지금은 그냥 url로 해줌, function Favorites() { const CAT1 = "https://cataas.com/cat/HSENVDU4ZMqy7K..

목차 스타일링(css 클래스, 인라인 스타일링) Emotion TailWind Css 핸들러 네이밍 컨벤션 Event: form 제출 시 리프레시 막기 useState로 상태 만들기 상태 끌어올리기(lifting state up) 1. 스타일링 두가지 방법이 있다. CSS 클래스명을 넘기는 것 인라인으로 스타일링하는 것이다. 기존 css코드는 아래와 같다. .favorites img { width: 150px; } CSS 클래스: 리액트 태크랑 html 태그랑 조금 다르다. class => className 위험 인라인 스타일링: 위험 다른 예시로는 중괄호 2개! 오브젝트 사용해서 써주기! key, value에서 value는 string으로 써주기! 요소 여러개면 쉼표로 구분! 최근 리액트 스타일링 트렌..

목차 Ant Design Component 만들기 log 찍기 인자가 있는 함수 만들기 Component: 기본 함수, 화살표 함수 함수에 인자를 넣어주는 2가지 방법 태그 닫기 전에 넣기 태그 닫고 넣기 return 생략한 함수 props 사용 안 하고 인자 바로 받기 1. Ant Design 리액트 개발 == 컴포넌트 개발 컴포넌트는 리액트에서 함수를 사용해서 만듦. ui 라이브러리 Ant Design 에서 다양한 컴포넌트를 확인할 수 있음 Ant Design - The world's second most popular React UI framework Ant Design 5.0 Ant Design 5.0 use CSS-in-JS technology to provide dynamic & mix the..

나름의 목차 개발자 도구 단축키 리액트 사용하면 멋진 점 React 1분 안에 추가하기 babel이란? 중괄호 사용해서 중복코드 줄이기(JSX) 중괄호에 연산자, 함수 등도 가능! 여러 요소를 한꺼번에 렌더시키기 +리액트에서 렌더를 시키는 방법 서론 졸프 때 어떤 기술을 사용할지 고민중이다. 일단 웹이면 리액트, 앱이면 플러터를 사용해보기로 했다. 주제에 맞게 웹 또는 앱을 고를 생각이다. 리액트와 플러터를 고른 이유는 리액트: 취업 시장이 넓고 많은 사람들이 사용함. 플러터: 리액트 네이티브와 고민했는데. 시장 점유율은 리액트 네이티브가 더 컸지만, 플러터의 인기가 리액트 네이티브를 넘고 있음(구글 트렌드). 궁금해서 플러터로 결정! 졸프 시작까지 시간이 좀 있고, 주제가 확정되기 까지는 시간이 좀 있..

Kakao address api를 사용해 위 화면을 만들어 볼 것입니다. 위 화면의 기능들을 소개하면 아래와 같습니다. 1. 검색한 키워드가 들어가는 주소 보이기 2. 상세1, 상세2, 상세3 주소까지 보이기(서울, 영등포구, 양평동) 3. RecyclerView의 item(주소)을 클릭하면 액티비티가 그 주소값을 반환하며 finish 먼저 API에 대해 간단히 알아봅시다. 이 링크는 주소 검색하기 Kakao 공식 문서입니다. request는 아래와 같습니다. 1. GET 사용 2. base url은 https://dapi.kakao.com/ 3. 주소 검색 시 추가 url은 v2/local/search/address.json 4. parameta들은 아래와 같음 Name Type Description ..

Udemy - Swift로 진행하는 ios인스타그램 클론코딩 강의 시작! ^_^ 코틀린/자바와 비슷한 느낌... import UIKit // 1. 상수와 변수 선언 // 1.1 상수 let name: String = "minWachya" let swift = "wachya" // 타입 추론, option 누르고 클릭하면 추론한 타입 확인 가능 // 1.2 변수 var year: Int = 2022 var y = 2022 year = 2023 // 변수이므로 값 변경 가능 print(year) // 2. 함수 만들기 func sum(a: Int, b: Int) -> Int { return a + b } print(sum(a: 1, b: 2)) func multiply(a: Int, b: Int) -> In..

오늘 해볼 것: 1. 사용자가 갤러리에서 선택한 이미지를(uri) 2. S3에 순서대로!! 여러장을 한꺼번에!! 업로드하고 3. 업로드한 이미지 링크(url)를 순서대로!! 한꺼번에!! 받아오기 플젝할 때 이미지 url을 DB에 저장하기로 했는데 순서가 중요하단 말임..?? 순서대로 업로드하고, 그 링크를 순서대로 저장하기 위해 RxKotlin을 사용해 보았습니다.. S3와 Burket은 이미 생성되어있다고 가정한 상태에서 설명을 해보겠습니다. 1.S3 Access Key와 Secret access key를 github에 보이지 않도록 저장 아래 글 참고!! https://min-wachya.tistory.com/220 [Android/Kotlin] hide KEY/KEY 숨기기 ACCESS KEY나 S..

ACCESS KEY나 SECRET ACCESS KEY 같이 중요한 정보는 github에서 보여지면 위험하기 때문에 꼬옥 숨겨주어야 한다. 프로젝트 할 때 S3와 통신할 일이 있어서 ACCESS KEY랑 SECRET ACCESS KEY를 안드 내에 저장하고, 꺼내 쓸 일이 있었는데 어케 KEY를 숨기고 꺼냈는지 써보려고 한다! 1. local.propertiles 파일에 해당 키들을 적어준다. access.key = AK어쩌구저저구QF secret.access.key = h1이러쿵저러쿵1P 2. app 단위 build.gradle에 아래 코드를 추가한다. 코드는,,, 보면 금방 알겠지만 주석으로 설명해봄. plugins { ... } // 추가 // Properties를 사용해서 local.properti..