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

* #3, #4는 생략 및 다른 강의노트에 추가함. 목차 시작하기 전에 사용자 입력에 따라 실행: 폼 제출 시마다 폼 입력값으로 고양이 짤방 만들기 웹 시작 시 실행: 웹 시작 시에 first cat이 써진 고양이로 메인 고양이 사진 초기화하기 useEffect란? setState의 성능 개선 1. 시작하기 전에 open API 모음 깃허브에서 고양이 짤방 api를 사용하여 고양이 짤방 기능을 추가할 것임 fetch 사용하기 문서에서 가져온 fetch 사용법 fetch('http://example.com/movies.json') .then((response) => response.json()) .then((data) => console.log(data)); js 비동기 처리와 콜백 함수 문서 비동기 처리..

목차 리스트(배열) 기능 추가: 하트 버튼 누르면 아래 리스트에 사진 추가 폼 다루기 입력 문자 그대로 출력 소문자 입력 시 대문자로 변환 폼 검증(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..