티스토리

콘솔로그
검색하기

블로그 홈

콘솔로그

haro-e.tistory.com/m

console.log 개발일기

구독자
3
방명록 방문하기

주요 글 목록

  • React Native 레이아웃 React Native에서 레이아웃은 Flexbox를 사용- display 블럭이 없음   기본 설정import React from "react";import { View } from "react-native";export default function App(){ return ( );}  import React from "react";import { View } from "react-native";export default function App(){ return ( );} 결과로 볼 수 있듯이 웹에서는 Flex Direction의 기본값은 Row이지만, 모바일에서 Flex Direction의 기본값은 Column이다.  i.. 공감수 1 댓글수 0 2024. 7. 30.
  • 리액트네이티브 설치 EAS CLI 설치 : 프로젝트 아이디 입력할때 이거 없으면 command not found 나옴npm install -g eas-cli 프로젝트 실행 명령어 expo init => npx create-expo-app 앱이름expo login => npx expo login 공감수 0 댓글수 0 2024. 7. 30.
  • 기본 코드 설명 import { Text, SafeAreaView, StyleSheet } from 'react-native';// You can import supported modules from npmimport { Card } from 'react-native-paper';// or any files within the Snackimport AssetExample from './components/AssetExample';export default function App() { return ( Change code in the editor and watch it change on your phone! Save to get a shareable url. .. 공감수 1 댓글수 0 2024. 7. 9.
  • 기본 설치 및 이해 (2) ex) evnet 발생하면 배경 빨간색으로 발생한다고 치겠음 1. ios와 안드로이드에서 터치 event가 발생2. 어디서 event가 발생했는거 눌러진 시간 어느정도?의 모든 정보를 수집3. React Native 그 정보 가지고 JSON 메시지 생성4. JavaScript는 그 메시지를 받음5. 여기서 코드를 실행시키면 React Native는 React Native 운영체제에게 메시지 전달6. "운영체제씨 배경색 빨간색 변경요~"  우리는 이렇게 메시지를 주고 받고 있다. JavaScript는 그냥, 개발자들이 메시지를 주고 받기 위한 도구일 뿐이라는 것! ReactNative에는- JavaScript- Bridge - Native코드가 있어서 메시지를 주고 받을 수 있다. 작성하는 코드는 앱에서 .. 공감수 0 댓글수 0 2024. 7. 8.
  • 기본 설치 및 이해 (1) Expo CLI 설치npm install --global expo-cli혹시 에러가 있다면 아래와 같이 설치하시면 됩니다.sudo npm install --global expo-clihttps://docs.expo.dev/Watchman 설치(Mac용)brew updatebrew install watchmanhttps://facebook.github.io/watchman/docs/install#buildinstall  그리고 나는 ios를 사용하기 때문에 Expo Go를 다운받아 준다.안드로이드는 그냥 Expo   React Native가 ios에게 '버튼 그려달라고 한다. 또 안드로이드에게 버튼을 만든다. 따로 브라우저가 없기 때문임 공감수 1 댓글수 0 2024. 7. 5.
  • 배포 환경 설정 (.env) "환경 변수(環境 變數, 영어: environment variable)는 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는, 동적인 값들의 모임이다." 쉽게 말해 "내가 정한 명령어"이다. 기본적으로 우리는 Nodejs위에서 개발을 한다. node.js는 production(배포)와 development(개발), test(테스트)로 구분하여 사용한다. 그리고 create-react-app의 실행 명령어에 따라 자동으로 NODE_ENV값이 정해진다. # production 배포 env실행 $ npm run build # development 개발 env실행 $ npm start # test 개발 env실행 $ npm run test 실행 OS에 따라 환경변수를 설정하는 방법이 다르기 때문에, 환경 변수 .. 공감수 1 댓글수 0 2022. 11. 24.
  • [REST API]를 이용한 카카오톡 소셜로그인 6일간 카톡 소셜로그인만 했다는 시간이 아까워서 정말 자세히 기록해 놓고 싶어서 작성한다 🧑🏻‍💻 간단 요약 REST-API를 활용한 카카오톡 로그인 방법 사용 프론트엔드와 - 백엔드 함께 작업 프론트엔드 : 카카오로부터 인가코드를 받고 인가코드를 백엔드에 넘겨주는 역할 (+ 마지막 리다이렉팅까지) 백엔드 : 프론트로부터 인가 코드를 넘겨받고 카카오로부터 토큰을 발급받는다. 그리고 해당 토큰에 담긴 유저 정보를 활용해 프로젝트 전용 토큰으로 새롭게 발급 후 프론트에게 돌려준다. 백엔드에서 카카오 토큰을 프로젝트 전용 토큰으로 새롭게 발급하는 이유는 카카오 토큰을 그대로 클라이언트에게 직접 넘겨주고 사용시키다가 해킹 당하면 고소 당하는 거임 1. 인가코드 받기 카톡 소셜로그인을 위해서는 우선 여기 사이트에.. 공감수 1 댓글수 0 2022. 11. 18.
  • 버튼 입력값 출력, 삭제 (input 다루기) 오늘도 덩어리로 코드를 들고와서 미안하다 (미래의 나에게) 줄여서 보여줄 수 있을까 했는데 설명하다 보니까 하나하나가 다 필요하다 제웬장 글작성 시도 3번째 이번엔 성공한다 ㅂㄷㅂㄷ... /*eslint-disable*/ import "./App.css"; import { useState } from "react"; function App() { let [글제목, 글제목변경] = useState([ "남자 코트 추천", "강남 우동 맛집", "파이썬 독학", ]); let [따봉, 따봉변경] = useState([0, 0, 0]); let [modal, setModal] = useState(false); let [title, setTitle] = useState(0); let [입력값, 입력값변경] = .. 공감수 2 댓글수 0 2022. 10. 8.
  • map 반복문 안에선의 array 변경 (골머리 아픔) 필요 없는 부분은 최대한 다 지웠는데 기초부터 이해하려고 하다 보니까 코드가 상당히 길죠? 자~이제 map 함수에서 어.떻.게 아래 사진처럼 이모티콘을 누르면 좋아요를 따로 추가할 수 있는지 알아보도록 하죠 코드를 보자면 저희는 useState에서 [따봉, 따봉 변경], [글 제목, 글 제목 변경]으로 초깃값과 변경 값을 만들어 주었습니다. function App() { let post = "강남 우동 맛집"; let [글제목, 글제목변경] = useState([ "남자 코트 추천", "강남 우동 맛집", "파이썬 독학", ]); let [따봉, 따봉변경] = useState([0, 0, 0]); return ( {글제목.map(function (a, i) { return ( { setModal(true.. 공감수 5 댓글수 4 2022. 10. 8.
  • array, object state 변경하는 법(블로그 만들기) state 변경함수 동작원리 state 변경함수를 쓸 때 기존state === 신규state 이렇게 먼저 검사해봅니다. array/object 동작원리 1. 자바스크립트는 array/object 자료를 하나 만들면 예를 들어서 let arr = [1,2,3] 이렇게 만들면 [1,2,3] 자료는 램이라는 가상공간에 몰래 저장이 되고 let arr 변수엔 그 자료가 어디있는지 가리키는 화살표만 담겨있습니다. array, object 자료 다룰 때는 원본 데이터를 직접 조작하는 것 보다는 기존값은 보존해주는 식으로 코드짜는게 좋은관습입니다. (왜냐면 원본 막 바꿔버렸을 때 갑자기 원본이 필요해질 수도 있기 때문입니다 : ) 정리 리액트에서 array/object state를 수정하고 싶으면 독립적인 카피본을 .. 공감수 1 댓글수 0 2022. 10. 8.
  • To Do List (react기초) Todo list 만드는 게 기초라니 참.. 당황스럽고 어이없죠? 저도 그래요 이해 하는데 시간이 굉장히 걸리네요 :( 이제 제가 이해한걸 여러분에게 말씀드려볼게요 일단 전체 코드는 이것이고 밑에 설명 넣어두겠습니다. import React, { useState } from "react"; function TodoList() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if (toDo === "") { retur.. 공감수 1 댓글수 2 2022. 10. 6.
  • Cleanup function 들어가기 앞서서 알아두어야 할 메소드 prev() 메소드 - 이전에 위치한 형제 요소 선택 next()메소드- 선택한 요소의 바로 다음에 위치해 있는 형제 요소를 선택 하는 것입니다.! 자 ~ 이제 보기 싫지만 봐야하는 코드를 볼까요? 어쩔 수 없이 코드를 봐야지만 이해할 수 있답니다~~ Cleanup frncion 은 사실 많이 쓰는건 아니지만, 그래도 알면 좋아요 ㅎ Cleanup frncion을 보고 싶으신 분은 구분선 아래로 스크롤을 내리시고 아래 코드 설명 듣고 싶으신 분은 차근차근 내려가시면 되겠습니다. import { func } from "prop-types"; import { useState, useEffect } from "react"; function Hello() { function.. 공감수 0 댓글수 0 2022. 10. 6.
  • useState, onChange(2) 냅다 코드블럭이 있으니 당황했겠지? 내가 봐도 그렇다 ㅎ 일단 앞의 useState의 글과 이어진다. 분과 시간 이 둘이 교차되면서 값이 나오길 원했고 위에 코드결과가 교차되면서 나오는 결과이다. const [flipped, setFlipped] = React.useState(false); const onChange = (event) => { setAmount(event.target.value); }; const onFlip = () => { reset(); setFlipped((current) => !current); }; 먼저 위에부터 설명하자면 우리는 버튼을 하나 더 만들었는데 그 버튼은 flip버튼이다. 누르면 분과 시간 중에 원하는 곳에서 입력할 수 있도록 flip을 만들었는데, useState.. 공감수 1 댓글수 0 2022. 10. 4.
  • use State, onChange 기존 값에서 새로운 값을 가져오는 것에는 두 가지 방법이 있다. 1. setCounterr(counter +1); 2.setCounter((current) => current + 1); 1번 같은 경우에는 초기값을 콕 집어서 +1 씩 증가시켜 주었지만 초기값에 오류가 있을 경우에는 좋지 않으므로 초기값을 가져오는 경우에는 2번 current함수를 불러와서 많이 쓴다. 1. 이 코드를 작성하면서 배운점은 일단 React에서는 for, class는 javascript에서 이미 선점한 용어이기 때문에 사용하지 못하고 대신 for = htmlFor class = className 이렇게 사용한다. 2. input 값 안에 value를 주고 onChange라는 이벤트를 실행시키면 현재 실행(작성) 중인 내용물이 .. 공감수 2 댓글수 2 2022. 10. 4.
  • input 상태 관리하기 InputSample.js import React, { useState } from 'react'; function InputSample() { const [text, setText] = useState(''); const onChange = (e) => { setText(e.target.value); }; const onReset = () => { setText(''); }; return ( 초기화 값: {text} ); } export default InputSample; input 에 입력하는 값이 하단에 나타나게 하고, 초기화 버튼을 누르면 input 이 값이 비워지도록 구현을 해보겠습니다. 이번에도, useState 를 사용합니다. 이번에는 input 의 onChange 라는 이벤트를 사용하는데.. 공감수 1 댓글수 0 2022. 10. 3.
  • useState 를 통해 컴포넌트에서 바뀌는 값 관리하기 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었는데요, 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. 이번에는 useState 라는 함수를 사용해보게 되는데, 이게 바로 리액트의 Hooks 중 하나입니다. Counter 에서 버튼이 클릭되는 이벤트가 발생 했을 때, 특정 함수가 호출되도록 설정을 해보겠습니다. Counter.js import React from 'react'; function Counter() { const onIncrease = () => { console.log('+1') } const onDecrease = () => { console.log('-1'); } return ( 0 +1 -1 .. 공감수 1 댓글수 0 2022. 10. 3.
  • 조건부 렌더링 props 값 설정을 생략하면 ={true} 컴포넌트의 props 값을 설정하게 될 때 만약 props 이름만 작성하고 값 설정을 생략한다면, 이를 true 로 설정한 것으로 간주합니다. 예를 들자면, App.js import React from 'react'; import Hello from './Hello'; import Wrapper from './Wrapper'; function App() { return ( ); } export default App; 이렇게 isSpecial 이름만 넣어주면 isSpecial={true} 와 동일한 의미입니다. Hello.js import React from 'react'; function Hello({ color, name, isSpecial }) { retu.. 공감수 1 댓글수 0 2022. 10. 3.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.