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

목차 리스트(배열) 기능 추가: 하트 버튼 누르면 아래 리스트에 사진 추가 폼 다루기 입력 문자 그대로 출력 소문자 입력 시 대문자로 변환 폼 검증(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) 중괄호에 연산자, 함수 등도 가능! 여러 요소를 한꺼번에 렌더시키기 +리액트에서 렌더를 시키는 방법 서론 졸프 때 어떤 기술을 사용할지 고민중이다. 일단 웹이면 리액트, 앱이면 플러터를 사용해보기로 했다. 주제에 맞게 웹 또는 앱을 고를 생각이다. 리액트와 플러터를 고른 이유는 리액트: 취업 시장이 넓고 많은 사람들이 사용함. 플러터: 리액트 네이티브와 고민했는데. 시장 점유율은 리액트 네이티브가 더 컸지만, 플러터의 인기가 리액트 네이티브를 넘고 있음(구글 트렌드). 궁금해서 플러터로 결정! 졸프 시작까지 시간이 좀 있고, 주제가 확정되기 까지는 시간이 좀 있..

오랜만에 포스팅,,^^ 이번에 한이음에서 했던 프로젝트가 종료되어서 시상식 후기 겸 일기를 적어보려고 한다~~ 우리 팀은 '건설 안전관리를 위한 Smartglasses IoT 시스템'을 주제로 프로젝트를 진행했다. 이 프로젝트로 한이음 공모전에서 장려상, 학술대회 공모전에서는 우수상을 받았다^_____^v 한이음 공모전은 동상까지 필참, 학술대회 공모전은 우수팀까지 필참이라 우리 팀은 학술대회 우수팀으로서 엑스포에 참석하게 되었다^-^ 엑스포 장소는 양재 at 센터!! 10시 30분에 리허설을 한다고 해서 일찍 갈 수 있는 팀원 분들이 수고해주셨다,, 나는 넘 멀어서 11사쯤 도착했다. 엑스포 상세 일정은 아래 표와 같다. 공모전 수상은 모든 팀이 다 올라갔지만 학술논문 수상은 대표 한 명만 올라갔다. ..

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..

목차 왜 Git Flow를 알아야 하는지? Git Flow란? git repository git flow 전략 merge 방식 Merge Fast-forward Recursive Squash and merge Rebase and merge 1. 왜 Git Flow를 알아야 하는지? Android든 Web이든... 어떤 프로젝트의 버전 관리를 하려면 git 사용은 필수다. 큰 프로젝트일수록 협업하는 인원도 많아질텐데 여러 인원이 하나의 repository에 commit, push, merge하는 과정에서 누가/어떤 내용을 개발(또는 수정)했는지 관리하기 복잡해질 수밖에 없다. 이런 복잡성을 없애고, 프로젝트 관리를 쉽게 만들어주기 위한 약속이 Git Flow다. branch를 어떻게 활용해야 하는지, co..