• NAS

• NAS와 SAN의 차이점

Today do list

⦁ TCP클라이언트 | 서버 구성

TIL

클라이언트

Imports System.Net
Imports System.Text.Unicode

Public Class Form1
    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        'tcp연결을 한다.
        '포트넘버사용시 주의점 : 이미 사용중인 포트넘버를 사용하면 안된다.
        '내가현재 어떤 포트를 사용하고 있는지 확인하는 방법은
        'cmd => netstat -n입력 하면 로컬 주소에 맨 마지막 번호가 포트넘버이다.
        '혹시 1300번을 사용하는지 cmd에서 확인하고 싶으면
        'netstat -n | find "13000"입력한뒤에 아무것도 안나오면 사용안함
        'Net.Sockets.TcpClient("접속하곳의 주소", "포트넘버")
        '127.0.0.1 로컬호스트 주소
        Dim client As New Net.Sockets.TcpClient("127.0.0.1", 13000) 'TCP연결완료

        'TCP통신에서 사용하는 네트워크를 통한 데이터를 활용할 수있는 함수가 제공되는데
        'netWorkStream이라는 곳에 담겨있다.
        'GetStream() 네트워크 스트림 형태의 데이터를 반환한다.
        'Dim networkStream As Sockets.NetworkStream = client.GetStream()
        Dim networkStream As Sockets.NetworkStream = client.GetStream()

        '아래와 같이
        'networkStream.Write, networkStream.Read() 매서드를 사용함으로써
        'TCP의 규정을 일일이 맞춰서 데이터를 구축하지 않아도 된다. 
        Dim sentence As String = "Hello VB"
        'String 문자열을 바이트배열로 인코딩해서 넣어줌
        Dim data As Byte() = System.Text.Encoding.Default.GetBytes(sentence)
        'networkStream.Write("보내고 싶은 데이터", "데이터의 몇번째부터 보낼건지", "어디까지")
        networkStream.Write(data, 0, data.Length)

        Debug.WriteLine("전송문구 : " & sentence)

        '중요!
        '*****두개다 사용했으면 항상 닫아야 한다.*****
        networkStream.Close()
        client.Close()

    End Sub
End Class

서버

Imports System
Imports System.Net
Imports System.Net.Sockets

Public Class Form1

    Dim server As TcpListener

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        '데이터 받기
        'TcpListener에서 아이피주소 String 형태로 못받음
        ' 따라서 IPAddress 클래스에서 String 문자열을 ip주소로 바꿔줘야함.

        Dim localAddress As IPAddress = IPAddress.Parse("127.0.0.1")
        server = New TcpListener(localAddress, 13000)

        '위에 2개를 만들면 tcp리스너를 만든것인데 이걸 만들었다고 바로 동작하지 않는다
        '준비만 한 상태이다.
        '동작 스위치를 켜줘야한다.
        'server.Start() 후 부터 server.Stop()할때 까지
        '데이터들이 큐에 적재되어 대기하기 시작한다.
        '또 server.Start(20) 큐에 20만큼 데이터가 차면 그이상 안받는다. 
        server.Start()
        Debug.WriteLine("서버가 시작했습니다.")

        'server.AcceptTcpClient()
        '보류중인 큐에 대기중인 요청을 수락하는데
        '반환값이 TcpClient이다.
        '따라서 아래와 같이 사용한다.
        'Dim client As TcpClient = server.AcceptTcpClient()

        '아래 매서드 2개는 비슷하다.
        '요청이 끝난후 새로운 데이터가 큐에 쌓여서 대기상태가 되면
        '여기서 멈춘다.
        'Dim client As TcpClient = server.AcceptTcpClient()
        'client.GetStream().Read()

        'Dim client As TcpClient = server.AcceptTcpClient()

        '만약 위에서 멈추게 되면 난감한데
        'server.Pending() 해결할수 있다.
        '연결이 보류 중이면 true, 아니면 false이다.

        ' 위와 같이되면 서버 스타트 부터 펜딩까지 시간에 들어온 요청만 받게된다.
        ' 해결방안
        ' 1. 서버시작 버튼과 페딩버튼을 나누어서 해결
        ' 2. 아래 팬딩 if문을 무한 루프로 계속 데이터를 받을 수있게 함
        ' 예제는 2번
        ' 아래와 같이 하면 무한루프때문에 UI먹통,
        ' OS단에서 버그로 판단해 자동으로 프로그램 종료를 해버린다.
        ' 버튼을 2개 만들자
        'While True
        '    If server.Pending() Then
        '        '연결 보류중이면
        '        Dim client As TcpClient = server.AcceptTcpClient()
        '        Debug.WriteLine("클라이언트가 접속했습니다.")
        '        Exit While
        '    Else
        '        '아니면
        '    End If
        'End While

        'server.Stop()
    End Sub

    Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click

        'Try
        '    If server.Pending() = Nothing Then
        '        MsgBox("서버시작부터 눌러주세요")
        '        Return
        '    End If
        'Catch ex As System.NullReferenceException
        '    MsgBox("서버시작부터 눌러주세요")
        '    Return
        'End Try


        If server.Pending() Then
            '연결 보류중이면
            Dim client As TcpClient = server.AcceptTcpClient()
            Debug.WriteLine("클라이언트가 접속했습니다.")
            server.Stop()
        Else
            '아니면
        End If

    End Sub
End Class

Retrospection

Today do list

⦁ 로또번호 생성

TIL

Public Class Form1
    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

    End Sub

    '로또번호 생성시작
    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

        Start()
    End Sub

    '비우기
    Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
        Empty()
    End Sub

    '끝내기
    Private Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click

        AppOff()
    End Sub

    '메뉴스트립 :  버튼 단축키 디자인단에 메뉴 시작 클릭해서 shortcutKeys등록하면됨
    '나머지도 마찬가지
    Private Sub 시작ToolStripMenuItem_Click(sender As Object, e As EventArgs) Handles 시작ToolStripMenuItem.Click
        Start()
    End Sub

    Private Sub 비우기ToolStripMenuItem_Click(sender As Object, e As EventArgs) Handles 비우기ToolStripMenuItem.Click
        Empty()
    End Sub

    Private Sub 끝내기ToolStripMenuItem_Click(sender As Object, e As EventArgs) Handles 끝내기ToolStripMenuItem.Click
        AppOff()
    End Sub


    '컨택스트 메뉴스트립 : 버튼 디자인에 form클릭해서
    '컨택스트메뉴스트립에 등록해야한다. *****중요*****
    Private Sub 시작ToolStripMenuItem1_Click(sender As Object, e As EventArgs) Handles 시작ToolStripMenuItem1.Click
        Start()
    End Sub

    Private Sub 비우기ToolStripMenuItem1_Click(sender As Object, e As EventArgs) Handles 비우기ToolStripMenuItem1.Click
        Empty()
    End Sub

    Private Sub 끝내기ToolStripMenuItem1_Click(sender As Object, e As EventArgs) Handles 끝내기ToolStripMenuItem1.Click
        AppOff()
    End Sub

    Private Sub Start()
        ' 랜덤 객체 생성
        Dim rand As New Random()
        '사용후 항상 클리어
        Dim arrList As ArrayList = New ArrayList()
        Dim randomNumber As Integer = 0

        Dim checkOk As Boolean = True
        'EXIT While
        While checkOk

            For i = 0 To 5 Step 1
                ' 1부터 10까지의 랜덤한 숫자 생성
                ' 아래와 같이 1,45면 1~44까지의 번호만 출력된다.
                'randomNumber = rand.Next(1, 45)
                randomNumber = rand.Next(1, 46)

                If arrList.Contains(randomNumber) Then
                    Debug.WriteLine("이미 존재하는 " + randomNumber.ToString() + "이 있습니다")
                    arrList.Clear()
                Else
                    arrList.Add(randomNumber)
                End If

            Next

            If arrList.Count < 6 Then
                checkOk = True
            Else
                checkOk = False
            End If

        End While

        Label1.Text = arrList(0).ToString()
        Label2.Text = arrList(1).ToString()
        Label3.Text = arrList(2).ToString()
        Label4.Text = arrList(3).ToString()
        Label5.Text = arrList(4).ToString()
        Label6.Text = arrList(5).ToString()
        arrList.Clear()

    End Sub


    Private Sub Empty()
        Label1.Text = "번호1"
        Label2.Text = "번호2"
        Label3.Text = "번호3"
        Label4.Text = "번호4"
        Label5.Text = "번호5"
        Label6.Text = "번호6"
    End Sub

    Private Sub AppOff()
        ' 메시지 박스에 물어보기
        Dim result As DialogResult = MessageBox.Show("정말 종료하시겠습니까?", "질문", MessageBoxButtons.YesNo, MessageBoxIcon.Question)

        ' 사용자의 응답 확인
        If result = DialogResult.Yes Then
            ' 여기에 "예"를 선택했을 때 실행할 코드를 추가할 수 있습니다.
            Debug.WriteLine("예를 선택하셨습니다.")
            Close()
        Else
            ' 여기에 "아니오"를 선택했을 때 실행할 코드를 추가할 수 있습니다.
            Debug.WriteLine("아니오를 선택하셨습니다.")
        End If
    End Sub


End Class

Retrospection

Today do list

⦁ 간단한 주문앱 만들기

TIL

주문하기

Imports System.IO
Imports System.Text

Public Class Form1
    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

        '어플리케이션 실행과 동시에 메뉴목록텍스파일 불러와서 리스트 박스에 출력'

        Dim menu As FileIO.TextFieldParser =
            New FileIO.TextFieldParser("C:\Users\user\Desktop\velog\VBOrederList\상품목록\menu.txt")

        menu.TextFieldType = FileIO.FieldType.Delimited
        menu.SetDelimiters(",")

        While Not menu.EndOfData
            Try
                Dim menuArr As String()
                menuArr = menu.ReadFields()

                ListBox1.Items.Add(menuArr(0) & " || " & menuArr(1))
            Catch ex As Exception
                Console.WriteLine(ex.Message)
            End Try
        End While

    End Sub

    '장바구니에 담기
    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

        If ListBox1.SelectedItem Is Nothing Then
            MsgBox("메뉴를 선택해 주세요")
        Else
            CheckedListBox1.Items.Add(ListBox1.SelectedItem)
        End If





    End Sub
    '장바구니에서 제거
    Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
        If CheckedListBox1.CheckedItems.Count = 0 Then
            MsgBox("메뉴를 선택해 주세요")
        Else
            '** 배열을 for each 문이나 for문으로 삭제하면서 발생하는 중에서 발생하는
            '오류 중 인덱스 오류는 처음부터 없애니까 갯수가 줄어들면서 인덱스가 엉킴
            '따라서 배열을 반복문으로 삭제할때는 거꾸로 해줘야 한다 맨뒤부터 차례대로
            '삭제해주어야 한다.
            '중요함 이거 공식수준인데, 순간 기억못해서 당황했다. **
            For i = CheckedListBox1.CheckedItems.Count - 1 To 0 Step -1
                CheckedListBox1.Items.Remove(CheckedListBox1.CheckedItems(i))
            Next




        End If
    End Sub

    Private Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click

        '주문하기 예외처리
        If CheckedListBox1.CheckedItems.Count = 0 Then
            MsgBox("주문할 상품을 장바구니에서 체크해 주세요")
            Return

        End If

        '1.장바구니 상품들을 String 변수에 담아주기
        'vbCrLf = vbNewLine(레거시됨)
        Dim orders As String = Nothing
        For Each item In CheckedListBox1.CheckedItems
            orders += item.ToString() + vbCrLf
        Next

        '2.txt파일로 생성후 주문서 파일에 입력하기
        '텍스트 파일 입력
        Const newTxtFileAdr As String = "C:\Users\user\Desktop\velog\VBOrederList\Orders\요기요주문.txt"
        Dim newTxtFile As IO.FileStream = IO.File.Create(newTxtFileAdr)
        newTxtFile.Close()

        '바이트 배열로 만듬
        'Dim bytes As Byte() = New UTF8Encoding(True).GetBytes(orders)
        Dim writer As IO.StreamWriter

        writer = My.Computer.FileSystem.OpenTextFileWriter(newTxtFileAdr, True)

        'newTxtFile.Write("넣을 문자열", "넣을 순서", "넣을 문자열 갯수")
        writer.Write(orders)
        writer.Close()

        MsgBox("주문이 완료되었습니다.")

        '3.장바구니 상품 초기화
        CheckedListBox1.Items.Clear()


    End Sub
End Class

주문서 확인 및 히스토리 파일로 옮기기

Imports System.Threading

Public Class Form1
    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

        ' 어플리케이션이 계속 켜져있는동안 실시간으로 주문서를 확인 할 수있어야 한다.
        ' 확인하면 바로 history로 파일을 이동시킨다
        While True

            '스레드 속도 제어
            Threading.Thread.Sleep(500)

            Dim files As String()

            '우리가 해줄게 orders폴더안에 새로운 파일이 생성되었을때 --> 주문이 들어왔을때
            '자동으로 감지해서
            '감지된 파일을 메시지 박스에 출력을 해주고 Orders폴더에서 History폴더로 파일을 옮긴다.
            ' 배열과 형변환까지 다해준다.
            files = My.Computer.FileSystem.
            GetFiles("C:\Users\user\Desktop\velog\VBOrederList\Orders").ToArray()

            'MsgBox(files.Count)

            '주문서가 들어왔을때 주문서 갯수가 0이 아니면 첫번째의 주문서를 읽어라(가장최근)
            ' !=을 <>표현한다.
            If files.Count <> 0 Then

                Dim str As String()

                str = files(0).Split("\")

                Dim destinationPath As String = "C:\Users\user\Desktop\velog\VBOrederList\History\" & str(7)
                '맨위의 txt파일(files(0))을 읽어라()
                MsgBox(My.Computer.FileSystem.ReadAllText(files(0)),, str(7))

                If My.Computer.FileSystem.FileExists(destinationPath) Then
                    ' 대상 파일이 이미 존재하면 새로운 파일 이름 사용
                    Dim timestamp As String = DateTime.Now.ToString("yyyyMMddHHmmss")
                    destinationPath = "C:\Users\user\Desktop\velog\VBOrederList\History\" & timestamp & "_" & str(7)
                End If
                ' My.Computer.FileSystem.MoveFile(files(0), "O:\VisualbasicLec\Samples\History\" & str(4), FileIO.UIOption.AllDialogs, FileIO.UICancelOption.DoNothing)
                My.Computer.FileSystem.MoveFile(files(0), destinationPath)

            End If
        End While




    End Sub
End Class

Retrospection

• 파일 입출력하는 것 참고하면서 익숙해 져야겠다.

Today do list

⦁ 파일 디렉터리 처리방법

TIL

파일 디렉터리 처리방법

Public Class Form1
    '파일 생성
    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        '파일 생성
        'IO.File.Create("새롭게 생성한 파일을 포함한 경로 즉 경로에 새로운 파일명도 적어줘야한다.")
        IO.File.Create("C:\Users\user\Desktop\newVBFile.txt")
    End Sub

    '파일 삭제
    Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click

        ' 삭제할 다이얼로그 오픈이 아니다.
        'If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
        '    '파일 삭제(이거 휴지통에 안들어가고 메모리단에서 그냥 삭제됨)
        '    My.Computer.FileSystem.DeleteFile(OpenFileDialog1.FileName)
        'End If

        '파일 삭제(이거 휴지통에 안들어가고 메모리단에서 그냥 삭제됨)
        ' DeletePermanently을 해야 다이얼로그가 나타난다.(SendToRecycleBin으로 하면 다이얼로그가 안나옴)
        My.Computer.FileSystem.DeleteFile("C:\Users\user\Desktop\newVBFile.txt",
                                          FileIO.UIOption.AllDialogs,
                                          FileIO.RecycleOption.DeletePermanently,
                                          FileIO.UICancelOption.DoNothing)

    End Sub

    '파일 이동
    Private Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click
        '파일 이동
        'My.Computer.FileSystem.MoveDirectory("이동시키고 싶은 파일", "이동하려는 경로 + 이동시키려는 파일명")
        '리눅스(우분투)와 마찬가지로 파일을 이동시킬떄 파일명을 바꿔서 이동시키면 파일명이 바퀴는데
        '여기서도 마찬가지이다.
        My.Computer.FileSystem.MoveFile("C:\Users\user\Desktop\newVBFile.txt", "C:\Users\user\Desktop\velog\newVBFile1.txt")
    End Sub

    '파일복사
    'My.Computer.FileSystem.CopyFile("이동시키고 싶은 파일", "이동하려는 경로 + 이동시키려는 파일명",덮어쓰기 여부(true || false))
    '리눅스(우분투)와 마찬가지로 파일을 이동시킬떄 파일명을 바꿔서 이동시키면 파일명이 바퀴는데
    '여기서도 마찬가지이다.
    '기본값은 false (덮어쓰지 않음.) --> false를 사용하기
    'true로 하면 덮어씀
    'MS 계열의 언어를 쓰면 MS OS의 유틸리티를 활용하기 쉽다.
    Private Sub Button4_Click(sender As Object, e As EventArgs) Handles Button4.Click
        My.Computer.FileSystem.CopyFile("C:\Users\user\Desktop\newVBFile.txt",
                                        "C:\Users\user\Desktop\velog\newVBFile1.txt",
                                        FileIO.UIOption.AllDialogs,
                                        FileIO.UICancelOption.DoNothing)
    End Sub

    '파일명 변경
    Private Sub Button5_Click(sender As Object, e As EventArgs) Handles Button5.Click
        'My.Computer.FileSystem.RenameFile("변경할 기존 파일 경로+파일명",
        '" 새롭게 변경할 파일 명")
        My.Computer.FileSystem.RenameFile("C:\Users\user\Desktop\newVBFile.txt",
                                          "newVBFile1.txt")

    End Sub

    '폴더 생성
    Private Sub Button6_Click(sender As Object, e As EventArgs) Handles Button6.Click
        'My.Computer.FileSystem.CreateDirectory("폴더를 생성할 경로 + 폴더명")
        My.Computer.FileSystem.CreateDirectory("C:\Users\user\Desktop\velog\VBtest")
    End Sub

    '폴더 복사
    Private Sub Button7_Click(sender As Object, e As EventArgs) Handles Button7.Click
        'My.Computer.FileSystem.CopyDirectory("원래 폴더 경로 +폴더명", "복사하려는 경로 + 복사하려는 폴더명 , 덮어쓰기 여부(true || false))
        My.Computer.FileSystem.CopyDirectory("C:\Users\user\Desktop\velog\VBtest", "C:\Users\user\Desktop\VBtest1")
    End Sub

    '폴더 삭제
    ' 파일 삭제와 동일
    Private Sub Button8_Click(sender As Object, e As EventArgs) Handles Button8.Click
        '사용법 1
        'My.Computer.FileSystem.DeleteDirectory("C:\Users\user\Desktop\velog\VBtest",
        '                                  FileIO.UIOption.AllDialogs,
        '                                  FileIO.RecycleOption.DeletePermanently,
        '                                  FileIO.UICancelOption.DoNothing)

        ' FileIO.DeleteDirectoryOption.DeleteAllContents : 해당 폴더 내용 전체 삭제
        'FileIO.DeleteDirectoryOption.ThrowIfDirectoryNonEmpty : 해당 폴더가 비어 있지 않으면 경고
        '사용법 2

        Try
            My.Computer.FileSystem.DeleteDirectory("C:\Users\user\Desktop\velog\VBtest",
                                          FileIO.DeleteDirectoryOption.ThrowIfDirectoryNonEmpty)
        Catch ex As IO.IOException '해당 메서드가 반환하는 예외처리와 동일해야함. 
            '위의 예외가 실행 되었을때 실행 하는 구문
            MsgBox(ex.Message,, "주의해주세요!")
            Return
        End Try

    End Sub

    '폴더명 변경
    Private Sub Button9_Click(sender As Object, e As EventArgs) Handles Button9.Click
        My.Computer.FileSystem.RenameDirectory("C:\Users\user\Desktop\velog\VBtest", "VBtest1")
    End Sub

    '파일리스트 조회
    Private Sub Button10_Click(sender As Object, e As EventArgs) Handles Button10.Click
        Dim fileArr As String()

        'My.Computer.FileSystem.GetFiles("해당 폴더의 경로")
        fileArr = My.Computer.FileSystem.GetFiles("C:\Users\user\Desktop\velog\VBtest").ToArray()

        For Each item As String In fileArr

            ListBox1.Items.Add(item)

        Next




    End Sub

    '폴더리스트 조회
    Private Sub Button11_Click(sender As Object, e As EventArgs) Handles Button11.Click
        Dim folderArr As String()

        folderArr = My.Computer.FileSystem.GetDirectories("C:\Users\user\Desktop\velog\VBtest").ToArray()

        For Each item As String In folderArr
            ListBox2.Items.Add(item)
        Next


    End Sub


    ' 폴더내 특정 파일 정보 조회
    Private Sub Button12_Click(sender As Object, e As EventArgs) Handles Button12.Click
        Dim testFileInfo As IO.FileInfo
        testFileInfo = My.Computer.FileSystem.GetFileInfo("C:\Users\user\Desktop\velog\VBtest\newVBFile3.txt")

        MsgBox(testFileInfo.Name)
        MsgBox(testFileInfo.FullName)
        MsgBox(testFileInfo.DirectoryName)
        MsgBox(testFileInfo.Exists)
        MsgBox(testFileInfo.Length)


    End Sub
End Class

Retrospection

Today do list

⦁파일입력

TIL

파일입력

Public Class Form1
    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click


        'true : 기존의 텍스트 내용 뒤에 추가할 문자열이 들어감
        'false : 기존의 텍스트 내용을 삭제후 추가한 문자열이 들어감
        '****기본값은 false이다!!! 주의하기!!!!!!****
        'My.Computer.FileSystem.WriteAllText("경로", "추가할 문자열", "true || false")
        'My.Computer.FileSystem.WriteAllText("C:\Users\user\Desktop\vbtest2.txt",
        '                                    "새로운 텍스트입니다." & vbCrLf,
        '                                    True)
        'OpenFileDialog1.ShowDialog()

        If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
            'OpenFileDialog1.FileName : OpenFileDialog1.ShowDialog()에서 선택한 파일의 경로
            My.Computer.FileSystem.WriteAllText(OpenFileDialog1.FileName,
                                                "NEW 텍스트입니다." & vbCrLf,
                                                True)
        End If



    End Sub

    Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
        Dim fileStream As IO.StreamWriter

        If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

            'fileStream = My.Computer.FileSystem.OpenTextFileWriter("경로","true || false")
            fileStream = My.Computer.FileSystem.OpenTextFileWriter(OpenFileDialog1.FileName, True)
            fileStream.WriteLine("fileStream입니다.")
            '항상 fileStream을 사용하면 close해주기
            fileStream.Close()

        End If

    End Sub
End Class

Retrospection

Today do list

⦁ 파일 입출력

TIL

파일 출력1

Public Class Form1
    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

        '파싱할때 구분자로 나누어서 출력(문장을 편집하고 싶을때 사용)
        'FileIO.TextFieldParser클래스의 생성자 생성
        'Dim parsindTxt As FileIO.TextFieldParser
        'parsindTxt = New FileIO.TextFieldParser("C:\Users\user\Desktop\vbTest.txt")
        Dim parsindTxt As FileIO.TextFieldParser = New FileIO.TextFieldParser("C:\Users\user\Desktop\vbTest.txt")
        'Delimited: 파일을 읽어올때 한줄당 "특정문자"를 기준으로 문장을 구분할때 사용
        'FixedWidth : 파일을 읽어올때 한줄당 "문자갯수"만 읽어서 출력한다.
        'parsindTxt.TextFieldType = FileIO.FieldType.Delimited
        'parsindTxt.SetDelimiters("/")
        parsindTxt.TextFieldType = FileIO.FieldType.FixedWidth
        '한줄에 있는 처음 두글자, 그다음 3글자 -1은 나머지 모든 문장을 출력
        ' -1자체는 한줄에 있는 모든 문장 출력
        parsindTxt.SetFieldWidths(2, 3, -1)

        'EndOfData : 읽어올 텍스트파일의 끝
        While Not parsindTxt.EndOfData
            'Dim currentTxt As String()
            '문자열 배열을 선언합니다.
            '이 경우, currentTxt는 문자열의 배열을 나타내는 변수가 됩니다.
            '이 배열은 여러 문자열을 저장할 수 있는 구조체입니다.

            'Dim currentTxt As String
            '단일 문자열을 저장하는 변수를 선언합니다.
            '이 경우, currentTxt는 단일 문자열을 나타내는 변수가 됩니다.
            Dim currentTxtArr As String()
            'TextFieldParser는 기본적으로 한줄씩 읽어온다.
            currentTxtArr = parsindTxt.ReadFields()

            Dim currentTxt As String
            For Each currentTxt In currentTxtArr
                Label1.Text = currentTxt
                MsgBox(currentTxt,, "Title")
            Next

        End While



        'Dim sentence As String
        'PC 내부의 텍스트파일을 읽어서 스트링변수에 담음
        'sentence = My.Computer.FileSystem.ReadAllText("C:\Users\user\Desktop\vbTest.txt")
        'Label1.Text = sentence
        'MsgBox(sentence,, "Title")

    End Sub
End Class

파일 출력2

Public Class Form1

    Public Class Product
        Public pName As String
        Public pNum As String

        ' 생성자 정의
        ' 자바와 C#과는 달리 클래스를 생성해도 기본 생성자를 따로 만들어주지 않는다.
        ' 생성자 선언 코딩도 전혀 다르다.
        Public Sub New()

        End Sub

        Public Sub New(pName As String, pNum As String)
            Me.pName = pName
            Me.pNum = pNum
        End Sub


    End Class

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        '클래스 객체 생성하는 게 궁금해서 그냥 만들어봄
        'Dim product As Product = New Product("자동차", "123")

        Dim chosenFormat As Integer() = {3, 4, 3, 1}
        Dim hyundaiFormat As Integer() = {3, 4, 12, 1}

        Dim txtParser As FileIO.TextFieldParser = New FileIO.TextFieldParser("C:\Users\user\Desktop\vbtest2.txt")
        txtParser.TextFieldType = FileIO.FieldType.FixedWidth
        'txtParser.SetFieldWidths()

        'ReadFields()가 배열로 반환하기 때문이다.
        Dim lineData As String()

        While Not txtParser.EndOfData
            '첫글자가 조선, 현대인지에 따라서 문자수를 자라서 출력한다.
            '해당 파일의 첫글자가 조선인지 현대인지 알수 있는 PeekChars(숫자)함수를 사용한다.
            '해당 파일의 글자를 앞에서부터 지정한 숫자만큼 읽어 온다.
            Dim twoLetter As String = txtParser.PeekChars(2)

            'twoLetter.eqauls("조선")을
            'VB에서 String.Compare(twoLetter, "조선") 사용하는데
            '같다면 0 아니면 0이 아닌 숫자를 반환한다.
            If String.Compare(twoLetter, "조선") = 0 Then

                txtParser.SetFieldWidths(chosenFormat)

            ElseIf String.Compare(twoLetter, "현대") = 0 Then

                txtParser.SetFieldWidths(hyundaiFormat)

            End If
            '첫줄이 끝나면 다음줄에 커서를 가져다가 시작함 
            lineData = txtParser.ReadFields()

            Dim sentence As String = "시대: " & lineData(0) & vbCrLf &
                                     "이름: " & lineData(1) & vbCrLf &
                                     "연락처: " & lineData(2) & vbCrLf &
                                     "성별: " & lineData(3) & vbCrLf
            MsgBox(sentence)
        End While

        'Label1.Text = txtParser.ToString()

    End Sub
End Class

파일 출력3

Public Class Form1
    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

        'StreamReader: 한줄의 문장을 처음부터 끝까지 출력
        Dim txtReader As IO.StreamReader
        txtReader = My.Computer.FileSystem.OpenTextFileReader("C:\Users\user\Desktop\vbtest2.txt")

        While Not txtReader.EndOfStream

            MsgBox(txtReader.ReadLine())

        End While

        'StreamReader는 파일을 실행하고 계속 메모리에 올려놓기때문에 
        '만약 클로즈를 안하면 어플리케이션을 종료하기 전까지 해당 txt파일을 수정할수없다.
        'arrayList와 비슷
        txtReader.Close()


    End Sub
End Class

Retrospection

Today do list

⦁ 간단한 출력문 ⦁ 계산기

TIL

Imports System.Windows.Forms.VisualStyles.VisualStyleElement

Public Class Form1
    '변수 선언하는 방법: Dim 변수명 자료형을 As 뒤에 선언한다.
    Dim A As Integer
    Dim B As String

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        SetControl()
    End Sub

    Private Sub Form1_Shown(sender As Object, e As EventArgs) Handles MyBase.Shown
        'SetControl()
        'SetEvent()
    End Sub

    Private Sub SetControl()
        'MessageBox.Show("setControl")
        txtInput.MaxLength = 1


    End Sub

    Private Sub SetEvent()
        'MessageBox.Show("setEvent")

    End Sub


    'AndAlso는 VB.NET에서 사용되는 논리 연산자 중 하나입니다.
    '이 연산자는 논리 And 연산을 수행하며,
    '첫 번째 조건이 거짓이면 두 번째 조건을 평가하지 않습니다.

    '간단히 말하면, 첫 번째 조건이 거짓이면 두 번째 조건을 확인하지 않고
    '전체 표현식을 거짓으로 평가합니다.
    '이는 두 조건 중 하나라도 거짓이면 전체 표현식이 거짓이라는 논리를 반영합니다.
    '이를 "short-circuit" 논리 연산이라고도 합니다

    '숫자만 입력되게 해줌
    Private Sub TextBox1_KeyPress(sender As Object, e As KeyPressEventArgs) Handles txtInput.KeyPress
        ' 입력된 키가 숫자인지 확인
        If Not Char.IsDigit(e.KeyChar) AndAlso Not Char.IsControl(e.KeyChar) Then

            MessageBox.Show("숫자를 입력해주세요")
            ' 숫자가 아니면 입력을 무시
            e.Handled = True

        ElseIf e.KeyChar = "0" Or e.KeyChar = "6" Or e.KeyChar = "7" Or e.KeyChar = "8" Or e.KeyChar = "9" AndAlso txtInput.Text.Length = 0 Then
            MessageBox.Show("1~5만 입력해주세요")
            ' 첫 번째 자리에 0은 허용하지 않음
            e.Handled = True

        End If
    End Sub

    Private Sub txtInput_TextChanged(sender As Object, e As EventArgs) Handles txtInput.TextChanged
        If txtInput.Text = Nothing Then

        Else
            A = Integer.Parse(txtInput.Text)
        End If


    End Sub

    Private Sub btnSubmit_Click(sender As Object, e As EventArgs) Handles btnSubmit.Click

        Label2.Text = Message(A)

    End Sub

    Private Function Message(A As Integer) As String

        If A = 1 Then
            B = "1을 선택하셨습니다."
        End If

        If A = 2 Then
            B = "2를 선택하셨습니다."
        End If

        If A = 3 Then
            B = "3을 선택하셨습니다."
        End If

        If A = 4 Then
            B = "4를 선택하셨습니다."
        End If

        If A = 5 Then
            B = "5를 선택하셨습니다."
        End If

        Return B

    End Function

End Class

계산기

Public Class Form1

    'label textalign -> 라벨의 위치를 정할수 있다.
    'Form 속성의 opacity -> form 대화상자의 투명도를 조절할수 있다.

    'Enum 클래스 선언
    '변수들의 번호는 위에서부터 0,1,2가 된다.
    Enum State
        EndCalc
        DuringCalc
        Inputting
    End Enum

    Enum Sign
        None
        Division
        Multipication
        Subtraction
        Addition
    End Enum


    '연산 부호
    Dim curSign As Integer = Sign.None

    '0 = 계산이 끝난 상태
    '1 = 계산 중
    '2 = 숫자 입력 중
    '아래와 같이 As 뒤에 enum클래스를 선언하면 숫자가 아니라 해당 번호에
    '해당하는 value값이 나온다.
    Dim curState As State = State.EndCalc

    Dim num1 As Integer
    Dim num2 As Integer

    'boolean의 기본값은 false이다!!!!!
    Dim isNum1 As Boolean
    Dim isNum2 As Boolean

    '숫자입력 메서드
    Private Sub btn_Click(sender As Object, e As EventArgs) Handles btn0.Click, btn1.Click, btn2.Click, btn3.Click, btn4.Click, btn5.Click, btn6.Click, btn7.Click, btn8.Click, btn9.Click

        'Label1.Text = sender.Name

        If curState = 0 Then
            curSign = 0
            curState = 0
            num1 = 0
            num2 = 0
            isNum1 = False
            isNum2 = False
            lblMain.Text = Nothing
            lblSign.Text = Nothing
        ElseIf curState = 1 Then '계산중
            lblMain.Text = Nothing
        End If

        Select Case sender.Name
            Case btn0.Name
                lblMain.Text += "0"
            Case btn1.Name
                lblMain.Text += "1"
            Case btn2.Name
                lblMain.Text += "2"
            Case btn3.Name
                lblMain.Text += "3"
            Case btn4.Name
                lblMain.Text += "4"
            Case btn5.Name
                lblMain.Text += "5"
            Case btn6.Name
                lblMain.Text += "6"
            Case btn7.Name
                lblMain.Text += "7"
            Case btn8.Name
                lblMain.Text += "8"
            Case btn9.Name
                lblMain.Text += "9"
            Case Else

        End Select

        curState = 2
        lblCurState.Text = curState.ToString()
    End Sub
    '연산 메서드
    Private Sub btnCulculator_Click(sender As Object, e As EventArgs) Handles btnDivision.Click, btnMultipication.Click, btnSubtraction.Click, btnAddition.Click
        '(임시)
        '1= 나누기 버튼 클릭됩
        '2= 곱하기 버튼 클릭됩
        '3= 빼기 버튼 클릭됩
        '4= 더하기 버튼 클릭됩

        If isNum1 = False Then
            num1 = Val(lblMain.Text)
            isNum1 = True
        ElseIf isNum2 = False Then
            num2 = Val(lblMain.Text)
            isNum2 = True
        End If

        Select Case sender.Name
            Case btnDivision.Name
                curSign = 1
                lblSign.Text += "÷"

            Case btnMultipication.Name
                curSign = 2
                lblSign.Text += "×"

            Case btnSubtraction.Name
                curSign = 3
                lblSign.Text += "-"

            Case btnAddition.Name
                curSign = 4
                lblSign.Text += "+"

            Case Else

        End Select

        curState = 1
        lblCurState.Text = curState.ToString()
    End Sub

    '연산결과 출력메서드
    Private Sub btnSubmit_Click(sender As Object, e As EventArgs) Handles btnSubmit.Click
        '일단 계산하는 숫자는 1과 2로 고정(임시로)

        'Val함수 : 문자열에서 문자를 만나기 전까지 숫자를 뽑아서 Interger형으로 변환시켜준다. 
        '공백이 있어도 상관없다.
        '1 2 안녕하세요  3 4 -> 12출력
        If isNum1 = False Then
            num1 = Val(lblMain.Text)
            isNum1 = True
        ElseIf isNum2 = False Then
            num2 = Val(lblMain.Text)
            isNum2 = True
        End If

        Select Case curSign
            Case 1
                'lblMain.Text = 1 / 2
                num1 = num1 / num2
            Case 2
                'lblMain.Text = 1 * 2
                num1 = num1 * num2
            Case 3
                'lblMain.Text = 1 - 2
                num1 = num1 - num2
            Case 4
                'lblMain.Text = 1 + 2
                num1 = num1 + num2
            Case Else
                Debug.WriteLine("연산 선택 안됨")

        End Select

        lblMain.Text = num1

        curState = 0
        lblCurState.Text = curState.ToString()

    End Sub
    '클리어메서드
    Private Sub btnClear_Click(sender As Object, e As EventArgs) Handles btnClear.Click
        curSign = 0
        curState = 0
        num1 = 0
        num2 = 0
        isNum1 = False
        isNum2 = False
        lblMain.Text = Nothing
        lblSign.Text = Nothing

    End Sub
    '벡스페이스 메서드
    Private Sub btnBackSpace_Click(sender As Object, e As EventArgs) Handles btnBackSpace.Click
        If lblMain.Text.Length > 0 Then
            'Remove함수 첫번째 매개변수 : 삭제를 할 첫번째 위치(length는 시작이 0이다.)
            'Remove함수 두번째 매개변수 : 삭제를 할 텍스트 갯수
            lblMain.Text = lblMain.Text.Remove(lblMain.Text.Length - 1, 1)

        End If
    End Sub
End Class

Retrospection

• 변수명 선언에서부터 if문, select case(switch문) 반환하는 형식의 메서드 등등 낮설다.

• 항상 분할과 정복방법으로 생각하자

  • 계산기 : 계산하는 것이 목적
  • 어떻게 사용하나? --> 숫자 입력, 연산, 결과도출
  • 각가의 계산상태 구분 및 연산구분(+,-,*,/)을 구분해서 코드화시키자.

Today do list

⦁ 저번주에 이직하는 회사에 최종합격했다.(MES관련 회사) ⦁ VB로 많이 구성되어 있다고 하셨다. ⦁ 기초는 먼저 공부해봐야 될것 같아서 유료강의를 결제하였다.

Public Class Form1
    'vb에서 ;안쓴다.
    'if구문도 Java, C#과 다르다
    '테이블 레이아웃으로 구획을 나누면 나눈 구획에는 하나의 컨트롤만 들어갈수 있다.
    'flowLayoutpannel
    '버튼 autosize : 버튼이름이 길때 알아서 버튼의 크기가 조정된다.
    'openFileDialog 필터 속성 JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*
    'Nothing = null vb에서 null을 Nothing으로 사용한다.

    '2023.11.21 / 박민준 / strech 체크박스 생성
    Private Sub CheckBoxStrech_CheckedChanged(sender As Object, e As EventArgs) Handles CheckBoxStrech.CheckedChanged
        ' 실행시킨 이미지가 대화상자에 맞지 않을때 이 체크박스를 누르면 알아서 이미지가
        ' 맞춰지게 함.
        If CheckBoxStrech.Checked Then
            PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage
        Else
            PictureBox1.SizeMode = PictureBoxSizeMode.Normal
        End If
    End Sub

    '2023.11.21 / 사고뭉치 / 그림 표시
    Private Sub btnShow_Click(sender As Object, e As EventArgs) Handles btnShow.Click
        ' 그림을 입력하세요라는 대화상자가 열리고 확인을 눌렀을때
        If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
            ' 그림이미지 이름과 확장자를 가지고 파일을 실행시킨다.
            PictureBox1.Load(OpenFileDialog1.FileName)
        End If
    End Sub
    '2023.11.21 / 사고뭉치 / 그림 삭제
    'Nothing = null vb에서 null을 Nothing으로 사용한다.
    Private Sub btnClear_Click(sender As Object, e As EventArgs) Handles btnClear.Click
        PictureBox1.Image = Nothing
    End Sub

    '2023.11.21 / 사고뭉치 / 배경색 변경
    Private Sub btnSetColor_Click(sender As Object, e As EventArgs) Handles btnSetColor.Click
        If ColorDialog1.ShowDialog() = DialogResult.OK Then
            PictureBox1.BackColor = ColorDialog1.Color
            '아래와 같이 응용이 가능하다.
            'btnClear.BackColor = ColorDialog1.Color 
        End If
    End Sub

    '2023.11.21 / 사고뭉치 / 닫기
    Private Sub btnClose_Click(sender As Object, e As EventArgs) Handles btnClose.Click
        Close()
    End Sub
End Class

Retrospection

• java, C#과 비교해서 객체지향이라는 개념만 동일할뿐 코드나 언어가 상당히 많이 다르다.

Today do list

⦁ styled component

TIL

• styled component

  import React from 'react'
  // 스타일컴포넌트 설치
  // npm i styled-component
  //styled component css 적용 시 자동완성은
  //vscode-styled-components 익스텐션을 받으면 됨
  import styled from 'styled-components'
  

// styled component 사용법 잘보기 styled. 뒤에 오는 것은 html 태그가 와야된다. // 그다음 ``안에는 css코드가 와야한다. const Father = styled.divdisplay: flex; const BoxOne = styled.divbackground-color: teal; width: 100px; height: 100px;

const BoxTwo = styled.divbackground-color: tomato; width: 100px; height: 100px; const Text = styled.spancolor: white;

const Styledcomponent = () => { return ( Hello! ) }

export default Styledcomponent

```

Retrospection

• 포트폴리오를 만들고 이걸 보니 이론적으로 css파일을 따로 만들지 않고도 FE를 구현 가능하지 않을까?

• 아..... 반응형때문에 안될수도 있겠다...

Tommorrow do list

Today do list

PROJECT 소개 자신을 소개하고 결과물을 보여줄 수 있는 포트폴리오 웹페이지를 구현하였습니다.

노마드 코더님의 ReactJS로 영화 웹 서비스 만들기 강의 후 전체적으로 어떻게 ReactJS 구현되는 지를 단일 페이지를 정복-분할 방식으로 이해하고 싶어서 고민 중 포트폴리오를 웹을 구축해보면 좋을것 같아서 같이 공부했습니다.

노마드 코더님의 강의를 들으면서 ReactJS를 이해하는 데 큰 도움이 되었으며 특히 FE의 기초를 다질 수 있어서 너무 좋았습니다.

🗓️ 작업기간 : 2023.09.01-2023.09.15

🙋 참여인원 : 1명

📘 주요업무 : 포트폴리오 관리

TIL

Sago_Muncci's Portfolio : https://pmjn1025.github.io/My_Portfolio/

Retrospection

ReactJs를 이용하여 어떻게 FE를 구축하는지 전체적인 맥락을 잡았을 뿐 ReactJS에서 사용하는 routes 및 라이브러리에 대해서 좀 더 공부해야겠다는 생각을 했습니다.

특히 CSS가 엄청 중요하다는 사실을 알게되었습니다. 따라서 CSS에 대한 지식도 같이 보완해야 된다고 생각합니다.

Tommorrow do list

• 노마드 코더 React JS 마스터클래스 수강시작!

Today do list

• Nomad Coder - ReactJS로 영화 웹 서비스 만들기
• coinAppChallenge
• movieApp 만들기
  • route

TIL

CoinTrackerApp.js

import { useEffect, useState } from 'react'

function CoinTrackerApp() {
  const [loading, setLoading] = useState(true)
  const [coins, setCoins] = useState([])
  useEffect(() => {
    fetch('https://api.coinpaprika.com/v1/tickers?limit=100')
      //fetch('https://api.coinpaprika.com/v1/tickers')
      .then((response) => response.json())
      .then((json) => {
        console.log(json)
        setCoins(json)
        setLoading(false)
      })
  }, [])
  return (
    <div>
      <h1>The Coins! {loading ? '' : `(${coins.length})`}</h1>
      {loading ? <strong>Loding...</strong> : null}
      <ul>
        {coins.map((coins) => (
          <li key={coins.id}>
            {coins.name}({coins.symbol}) : ${coins.quotes.USD.price}
            <span> </span>
            Coin Rank : {coins.rank}
          </li>
        ))}
      </ul>
    </div>
  )
}

export default CoinTrackerApp

coninTrackerChallengeApp.js

import { useEffect, useState } from 'react'
import coinChallenge from './CoinChallenge.module.css'

function CoinTrackerChallengeApp() {
  const [loading, setLoading] = useState(true)
  const [coins, setCoins] = useState([])
  const [limit, setLimit] = useState(100) // `https://api.coinpaprika.com/v1/tickers?limit=${limit}&&quotes=KRW`
  useEffect(() => {
    // const interval = setInterval(() => {
    //   fetch(`https://api.coinpaprika.com/v1/tickers?limit=${limit}&&quotes=KRW`)
    //     .then((response) => response.json())
    //     .then((json) => {
    //       console.log(json)
    //       setCoins(json)
    //       setLoading(false)
    //       console.log('1')
    //     })
    // }, 1000)
    // return () => clearInterval(interval)
    fetch(`https://api.coinpaprika.com/v1/tickers?limit=${limit}&&quotes=KRW`)
      .then((response) => response.json())
      .then((json) => {
        console.log(json)
        setCoins(json)
        setLoading(false)
        console.log('1')
      })
  }, [limit])

  const onClick = () => {
    setLimit((current) => current + 100)
  }

  const onChange = () => {}

  return (
    <div>
      <div className={coinChallenge.title}>
        <h1>Cryptocurrency in real time!</h1>
      </div>
      <div className={coinChallenge.search}>
        <form>
          <input
            type="text"
            placeholder="search Cryptocurrency"
            onChange={onChange}
          ></input>
        </form>
        {loading ? <strong>Loding...</strong> : null}
      </div>
      <hr></hr>
      <div className={coinChallenge.tablecontainer}>
        <table>
          <thead>
            <tr>
              <th>순위</th>
              <th>종목</th>
              <th>기호</th>
              <th>가격(KRW)</th>
              <th>총시가</th>
              <th>거래량(24H)</th>
              <th>변동(24H)</th>
              <th>변동(7D)</th>
            </tr>
          </thead>
          <tbody>
            {coins.map((coins) => (
              <tr key={coins.id}>
                <td className={coinChallenge.rank}>{coins.rank}</td>
                <td className={coinChallenge.dataColorWhite}>
                  {coins.name.toUpperCase()}
                </td>
                <td className={coinChallenge.dataColorWhite}>{coins.symbol}</td>
                <td className={coinChallenge.dataColorWhite}>
                  {parseFloat(
                    coins.quotes.KRW.price.toFixed(3),
                  ).toLocaleString() + '원'}
                </td>
                <td className={coinChallenge.dataColorWhite}>
                  {parseFloat(
                    coins.quotes.KRW.ath_price.toFixed(3),
                  ).toLocaleString() + '원'}
                </td>
                <td className={coinChallenge.dataColorWhite}>
                  {parseFloat(
                    coins.quotes.KRW.volume_24h.toFixed(3),
                  ).toLocaleString() + '개'}
                </td>
                <td
                  className={
                    parseFloat(coins.quotes.KRW.percent_change_24h) < 0
                      ? coinChallenge.dataColorRed
                      : coinChallenge.dataColorBlue
                  }
                >
                  {parseFloat(
                    coins.quotes.KRW.percent_change_24h.toFixed(3),
                  ).toLocaleString()}
                </td>
                <td
                  className={
                    parseFloat(coins.quotes.KRW.percent_change_7d) < 0
                      ? coinChallenge.dataColorRed
                      : coinChallenge.dataColorBlue
                  }
                >
                  {parseFloat(
                    coins.quotes.KRW.percent_change_7d.toFixed(3),
                  ).toLocaleString()}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className={coinChallenge.moreBtndiv}>
        <button className={coinChallenge.moreBtn} onClick={onClick}>
          {loading ? <strong>Loding...</strong> : '더 보기'}
        </button>
      </div>
    </div>
  )
}

export default CoinTrackerChallengeApp

CoinChallenge.module.css

body {
  background-color: #333;
}

.title {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.search {
  display: flex;
  justify-content: center;
  align-items: center;
}

.search select {
  width: 70px;
  margin-right: 20px;
}

.tablecontainer {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* @media (max-width: 330px) {
  .tablecontainer {
    flex-direction: column;
  }
} */

.tablecontainer table {
  border-collapse: collapse;
}

.tablecontainer table thead {
  color: wheat;
  border-bottom: 2px solid brown;
}

.tablecontainer table th {
  padding-bottom: 5px;
}

.tablecontainer table td {
  padding-top: 10px;
}

.moreBtndiv {
  display: flex;
  justify-content: center;
  align-items: center;
}
.moreBtn {
  background-color: transparent; /* 배경색을 투명하게 설정 */
  border: 2px solid brown; /* 테두리 스타일 및 색상 지정 */
  color: white;
  margin-top: 10px;
  padding: 15px;
  min-height: 30px;
  min-width: 600px;
}

.rank {
  color: chocolate;
}

.dataColorWhite {
  color: White;
}

.dataColorRed {
  color: red;
}
.dataColorBlue {
  color: green;
}

• MovieApp.js

  import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
  import MovieHome from '../src/routes/MovieHome'
  import Detail from './routes/Detail'
  

// react-router사용할 건데 터미널에 npm install react-router-dom을 입력한다. // movieApp.js는 더이상 영화를 보여주지 않고 router를 render한다. // 즉 이곳은 url을 바라보면서 해당 url주소에 따라서 MovieHome, Details 보여줄것이다. function MovieApp() { //react-router-dom 5버전 -> 버전6 바뀐 부분 // 1. Switch컴포넌트가 Routes컴포넌트로 대체되었습니다. // Switch -> Routes // 2. Route컴포넌트 사이에 자식 컴포넌트를 넣지 않고, element prop에 자식 컴포넌트를 할당하도록 바뀌었습니다. // 가 하는 일은 Route를 찾는데 Route는 url이다. // HashRouter는 주소 앞에 #를 붙여서 사용한다. 대부분 BrowserRouter를 사용하기 때문에 참고만 하자.

// Movie 컴포넌트에서 타이틀을 클릭해서 movie페이지로 이동할때 a herf='' 로 이동하게 되면 우리 어플리케이션에 있는 모든 페이지가 리프레시 된다. // 딱 movie페이지만 렌더링, 리렌더링 되기를 원하는데, 이때 Link를 사용한다. 다시 Movie.js에서 보기

//path="/movie/:id" :id라고 입력해야 페이지넘기면서 데이터를 전달할 수 있다. // 다시한번 path="/movie/:id" 경로 사이에는 항상 "/"이거 붙여야 한다. // :variable 즉 :뒤에가 변수이다. return ( <Route path="/movie/:id" element={}> <Route path="/" element={}> ) }

export default MovieApp

- component/Movie.js
```js
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'
import '../MovieIntro.css' // 추가된 CSS 파일
// react-router사용할 건데 터미널에 npm install react-router-dom을 입력한다.
// Movie 컴포넌트에서 타이틀을 클릭해서 movie페이지로 이동할때 a herf='' 로 이동하게 되면 우리 어플리케이션에 있는 모든 페이지가 리프레시 된다.
// 딱 movie페이지만 렌더링, 리렌더링 되기를 원하는데, 이때 Link를 사용한다.
// MovieHome에서 id받아서 props에 넘겨주고 여기서 id값을 받아서 Link to로 연동한다.

// 여기서 <Link to={`/movie/${id}`}>{title}</Link> 작성을 해야,
// 부모 컴포넌트의 path="/movie:id" :id라고 입력한 부분이 페이지넘기면서 데이터를 전달할 수 있다.
function Movie({ id, medium_cover_image, title, summary, genres }) {
  // return (
  //   <div>
  //     <img src={medium_cover_image} alt={title}></img>
  //     <h2>
  //       <Link to={`/movie/${id}`}>{title}</Link>
  //     </h2>
  //     <p>{summary.slice(0, 300)}...</p>
  //     <ul>
  //       {genres.map((g) => (
  //         <li key={g}>{g}</li>
  //       ))}
  //     </ul>
  //   </div>
  // )
  return (
    <div className="movie-intro">
      <img className="movie-intro-image" src={medium_cover_image} alt={title} />
      <h2 className="movie-intro-title">
        <Link to={`/movie/${id}`}>{title}</Link>
      </h2>
      <p className="movie-intro-summary">{summary.slice(0, 300)}...</p>
      <ul className="movie-intro-genres">
        {genres.map((g) => (
          <li key={g}>{g}</li>
        ))}
      </ul>
    </div>
  )
}
// propTypes 선언하는것 잘보자
// 항상 소문자
Movie.propTypes = {
  id: PropTypes.number.isRequired,
  medium_cover_image: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
}

export default Movie

• routes/MovieHome.js

  import { useEffect, useState } from 'react'
  import Movie from '../components/Movie'
  import '../MovieHome.css' // 추가된 CSS 파일
  

// react-router사용할 건데 터미널에 npm install react-router-dom을 입력한다. function MovieHome() { const [loading, setLoading] = useState(true) const [movies, setMovies] = useState([])

// async, await를 사용하자 // https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year const getMovies = async () => { const response = await fetch( //https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=rating&limit=20, https://yts.mx/api/v2/list_movies.json?sort_by=year&limit=21&page=2, ) const json = await response.json() setMovies((current) => json.data.movies) setLoading((current) => false) }

useEffect(() => { getMovies() }, [])

console.log(movies)

return (

export default MovieHome

- component/Detail.js(미완성)
```js
// MovieHome에서 <Link to={`/movie/${id}`}>{title}</Link> 작성을 했을때
// 부모 컴포넌트의 path="/movie:id" :id라고 입력한 부분이 Detail페이지넘기면서 데이터를 넘겨주는데
// Detailpage에서 어떻게 id부분만 받을 수 있나?
// 아래와 같이 useParams를 사용하자.

import { useEffect } from 'react'
import { useParams } from 'react-router-dom'

function Detail() {
  //  path="/movie/:id" 경로 사이에는 항상 "/"이거 붙여야 한다.
  // :variable 즉 :뒤에가 변수이다.
  //   const id = useParams()
  //   console.log(id.id)

  //이 형식의 코드는 현재 라우트의 URL 매개변수를 가져오는 데 사용된다.
  // URL이 "/movies/53528"일 때, useParams를 사용하여 id 값을 추출할 때 아래와 같은 형식의 코드로 가져올수있다.
  const { id } = useParams()
  console.log(id)
  // https://yts.mx/api/v2/movie_details.json?movie_id=

  const getMovieDetail = async () => {
    const response = await fetch(
      `https://yts.mx/api/v2/movie_details.json?movie_id=${id}`,
    )
    const json = response.json()

    console.log(json)
  }

  useEffect(() => {
    getMovieDetail()
  }, [])
  return <h1>Detail</h1>
}

export default Detail

Retrospection

• 코드트래커 첼린지에서 많이 아쉬웠다.

• 전체적인 디자인이나 셀렉트 태그로 원,달러,엔,위안화를 선택해서 사용자가 총 몇개를 가질수 있는지 표현 하고 싶었으나 잘 안되었다.

• Naver 쇼핑 API를 사용해서 최저가를 표현하는 나만의 프로젝트를 실행했으나 알고 봤더니 클라이언트 자체에서는 네이버API의 내용을 가져올수가 없다(하루 허비함 아...........)

• 그래서 스프링부트와 연동해서 실행해보니 어느정도 성과가 있었다. (코인앱첼린지와 마찬가지로 부족한 면이 많았다.)

• 컴포넌트와 라우트를 사용해서 전반적인 리액트 앱이 어떻게 구동되는지 큰틀을 알게되었다.

• 리액트 돔을 설치하는등 생각보다 리엑트에 좋은 라이브러리가 많았다.

  • import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
  • import { Link } from 'react-router-dom'

• 디자인이 중요하다! 자유자재로 만들수 있어야 한다.

• css또한 엄청 중요하다는 것을 알게 되었다.

• 최종본 : https://github.com/pmjn1025/react_study

Tommorrow do list

• 포트폴리오 템플릿 공부하기

Today do list

⦁reactApp설치 https://velog.io/@sago_mungcci/2023.09.09React-App-%EC%84%A4%EC%B9%98

TIL

• 리액트 앱을 설치해서 본격적인 리액트 다루는 법을 배우기 시작함.

• index.js

  import React from 'react'
  import ReactDOM from 'react-dom/client'
  //import App from './App'
  //import AppEffect from './AppEffect'
  //import AppDeps from './AppDeps'
  import AppCleanUp from './AppCleanUp'
  //import './styles.css'
  

const root = ReactDOM.createRoot(document.getElementById('root')) //root.render(<React.StrictMode>{/* */ }</React.StrictMode>) //root.render() //root.render() root.render()

- app.js
```js
import Button from './Button'

// npm i prop-types 설치하기
function App() {
  return (
    <div>
      <h1>Welcome Back!</h1>
      <Button text={'continue'}></Button>
    </div>
  )
}

export default App

• button.js

  import PropTypes from 'prop-types'
  import styles from './Button.module.css'
  import title from './title.module.css'
  

function Button({ text }) { return ( // 이렇게 할 필요 없이 위에 임포트 하면 된다. // <button style={{ backgroundColor: 'tomato', color: 'white' }}> // {text} //

Button.propTypes = { text: PropTypes.string.isRequired, }

export default Button

- AppEffect.js
```js
import { useState, useEffect } from 'react'

// npm i prop-types 설치하기
function AppEffect() {
  const [counter, setValue] = useState(0)
  const onClick = () => {
    setValue((prev) => prev + 1)
  }

  // rendering이 두번되는 현상이 있어서 찾아보았더니 index.js에
  // React.StrictMode 테그에 감싸져 있어서 그렇다고 합니다.
  // StrictMode는 create-react-app로 설치했을 때 기본적으로 생성되는 테그로,
  // 해당 테그로 감싸져 있는 경우 자손까지 검사한다해서 두 번 실행된다고 합니다.
  // React.StrictMode 테그를 지우시고 해보세요.
  // 오류 : Error handling response: TypeError: Cannot read properties of undefined (reading 'always')
  // ==> 드래그프리때문

  // 1. 지금 아래와 같이 처음에 api를 호출하고 또 state가 변경될 때 또 호출하게 된다.
  // 처음 들어왔을때 한번만 실행 시키고 state값이 변경되도 호출하지 않게하고 싶다.
  console.log('i run all the time')
  //   const iRunOnlyOnce = () => {
  //     console.log('i run only once')
  //   }
  // React.useEffect() --> 첫번째 매개변수는 처음 한번만 실행시키고 싶은 코드, 두번째는 deps 추후 설명
  //useEffect(iRunOnlyOnce, [])
  useEffect(() => {
    console.log('i run only once')
  }, [])
  return (
    <div>
      <h1>AppEffect{counter}</h1>
      <button onClick={onClick}>Click me!</button>
    </div>
  )
}

export default AppEffect

• deps.js

  import { useState, useEffect } from 'react'
  

// npm i prop-types 설치하기 function AppDeps() { const [counter, setValue] = useState(0) const [keyword, setKeyword] = useState('') const onClick = () => { setValue((prev) => prev + 1) } const onChange = (event) => { setKeyword(event.target.value) }

// 일반문장 //console.log('i run all the time')

// 일반문장에 useEffect를 씌웠다고 생각! useEffect(() => { console.log('i run only once') }, [])

// 서칭시 (onChange)에도 아래 return부분이 리렌더링 되면서 함수를 실행시키고 // 클릭할때도 마찬가지로 return부분이 리렌더링 되면서 함수를 실행시킨다. // 불필요 한 작동을 계속하고 있다. // 따라서 서칭시에는 onChange이벤트만 실행시키고 // 클릭시에는 onClick이벤트만 실행시키고 싶다. //console.log('Search for', keyword)

// deps : 저 배열문안에 있는 변수가 변할때만 실행시킨다.(keyword는 검색문) // 지금 여기서는 if문을 주어서 변수의 값이 변할 때 조건에 따라서 실행시킨다. useEffect(() => { // if (keyword !== '' && keyword.length > 5) { // console.log('Search for', keyword) // } console.log('i run when keyword change', keyword) }, [keyword])

useEffect(() => { console.log('i run when counter change', counter) }, [counter])

// keyword나 counter 둘중에 하나의 값만 바뀌어도 실행됨 useEffect(() => { console.log('i run when keyword&counter change', counter) }, [keyword, counter])

return (

export default AppDeps

- AppCleanUp.js
```js
import { useState, useEffect } from 'react'

// showing이 참일때
// im here이 hello() 컴포넌트에서 실행되고 콘솔에 찍히고 있다.
// showing이 거짓일때
// im here이 hello() 컴포넌트에서 destroy되면서 없어진다.(삭제된다.)
// ** 참고
// useEffect(() => something(), [변수A]) 라고하면, 변수A가 변경될 떄 마다 useEffect는 실행된다. 변수A가 변경되면,
// 이전의 변수A 값을 가지고 return 함수가 실행된다.
// ex) 변수A =1 ->2 변경되는 시점에서 , useEffect()에서 return 외에는 변수A는 2이고, return 상황에서는 변수A는 1이다.
// 뒤에 [ dependency ]에 아무것도 없다면( ex) [] ) 첫 렌더링시에 실행되고, return은 컴포넌트 unmount시(영상의 destroy시) 실행된다.
// 부모 컴포넌트 위에 자식컴포넌트가 있듯이 AppCleanUp 컴포넌트위에 Hello 컴포넌트가 쌓였고 이 쌓인 컴포넌트가 destroy될대 return값을 반환한다.
function Hello() {
  //   function byeFn() {
  //     console.log('bye')
  //   }

  //   function hiFn() {
  //     console.log('hi')
  //     return byeFn
  //   }
  //   useEffect(hiFn, [])
  // 위 주석친 3문장이 아래의 useEffect와 같다
  useEffect(() => {
    console.log('im here')
    return () => console.log('im destroy') //destroy되면서 실행되는 구문
  }, [])
  return <h1>Hello</h1>
}

// npm i prop-types 설치하기
function AppCleanUp() {
  const [showing, setShowing] = useState(false)
  const onClick = () => {
    setShowing((prev) => !prev)
  }
  return (
    <div>
      {showing ? <Hello /> : null}
      <button onClick={onClick}>{showing ? 'Hide' : 'Show'}</button>
    </div>
  )
}

export default AppCleanUp

Retrospection

• 컴포넌트들을 쌓아서 개발한다는 느낌을 받았다.
• AppCleanUp.js에서

  useEffect(() => {
    console.log('im here')
    return () => console.log('im destroy') //destroy되면서 실행되는 구문
  }, [])
  return <h1>Hello</h1>

  return () => console.log('im destroy') //destroy되면서 실행

  이부분이 이해가 잘안갔는데,

자바에서는 일반적으로 메서드가 호출되어 실행될때 return문까지 실행되기때문에 굉장히 헷갈렸다.

정확히 이해하려면 2가지를 이해해야 하는데, useEffect()이고 하나는 component인것 같다.

컴포넌트가 부모 컴포넌트위에 자식 컴포넌트가 쌓이면 그 자식 컴포넌트 내부에 있는 함수가 실행된다.

실행하면서 useEffect()에서는 특이한점이 있는데,

useEffect()내부에 있는 코드를 한번만 실행되는 동시에 return문에 있는 함수는 반환을 하지 않는다. 그러나 해당 "컴포넌트"가 destroy함과 동시에 useEffect에있는 return문을 반환하는 것이다.

컴포넌트도 함수로 작동되기 때문에 굉장히 헷갈렸다.

Tommorrow do list

• 휴식이다~!

⦁ reactApp설치하는 법 -node.js 설치한다 (https://nodejs.org/ko/download/)

-vscode의 터미널에 해당 폴더 경로에 react install 해주어야 함. (https://devbirdfeet.tistory.com/3) npm install -g create-react-app 이걸로 설치함

터미널에 npm install -g create-react-app 이거 입력함

 PS C:\Users\sagoMungcci\Desktop\react-project> npm install -g create-react-app
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
added 67 packages in 3s
5 packages are looking for funding
  run `npm fund` for details

그후 npx create-react-app react-app(폴더명) 입력하면 폴더에 해당 react 패키지가 생성됨

PS C:\Users\sagoMungcci\Desktop\react-project> npx create-react-app react-app

Creating a new React app in C:\Users\sagoMungcci\Desktop\react-project\react-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1439 packages in 1m

241 packages are looking for funding
  run `npm fund` for details
Git repo not initialized Error: Command failed: git --version
    at checkExecSyncError (node:child_process:885:11)
    at execSync (node:child_process:957:15)
    at tryGitInit (C:\Users\sagoMungcci\Desktop\react-project\react-app\node_modules\react-scripts\scripts\init.js:46:5)
    at module.exports (C:\Users\sagoMungcci\Desktop\react-project\react-app\node_modules\react-scripts\scripts\init.js:276:7)
    at [eval]:3:14
    at Script.runInThisContext (node:vm:123:12)
    at Object.runInThisContext (node:vm:299:38)
    at node:internal/process/execution:79:19
    at [eval]-wrapper:6:22 {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 11228,
  stdout: null,
  stderr: null
}

Installing template dependencies using npm...

added 69 packages, and changed 1 package in 7s

245 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1508 packages in 3s

245 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Success! Created react-app at C:\Users\함주형\Desktop\react-project\react-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-app
  npm start

Happy hacking!

• 중요!

• 터미널에서 npm run start 할때 react 패키지가 있는 폴더의 경로에 가서 npm run start 해야한다.
• 상위폴더 이동 명령어는 cd..이고
• 해당 폴더 경로 이동은 cd 폴더명이다.

• ps 이거 찾는데 하루종일 걸렸다. 뭐가 문제인지 몰라서 아....... 문제의 시작은 npm run start가 안되서 뭐가 문제인지 모름.

Today do list

• Nomad Coder - ReactJS로 영화 웹 서비스 만들기 ⦁ props에 대해서 배움

TIL

• props1.html

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <!-- react import -->
  <!-- <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <!-- babel import(jsx ->react로 변환) -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 바벨 사용시 type 입력해주어야 한다. -->
  <script type="text/babel">
    // 분할과 정복(divide&Conquer(분할정복))
    // App이 부모 컴포넌트 이고 MinutesToHours, KmToMiles가 자식 컴포넌트이다
    // 이제부터 우리가 할것은 부모 컴포넌트로 부터 자식컴포넌트로 데이터를 보낼것이다.
  
    // 상황 가정 : 우리가 만들려는 app에 다양한 기능들이 있는 버튼들이 있다.(로그인, 프로필, 화면이동 등등)
    // 그런데 보면 각 버튼들의 디자인이 동일한 것을 알수있다. --> 디자이너들이 디자인을 만들기 때문
    // 이렇게 동일한 디자인의 버튼에 대해서 우리가 알고 싶은 것은 어떻게 리액트 컴포넌트를 재활용 할 수 있는 지를 알고싶은것
  
    // component라고 하는 것은 JSX를 반환하는 함수 일뿐이다.
    // component는 항상 첫글자 대문자로
    // SaveBtn(), ConfrimBtn() ==> 함수형 컴포넌트
    // 이렇게 되면 버튼마다 일일이 스타일 지정해주어야 한다.
    // props1에서 계속
    function SaveBtn() {
      return (
        <button
          style={{
            backgroundColor: 'brown',
            color: 'White',
            padding: '10px 20px',
            border: 0,
            borderRadius: 10,
          }}
        >
          Save Changes
        </button>
      )
    }
    function ConfrimBtn() {
      return (
        <button
          style={{
            backgroundColor: 'brown',
            color: 'White',
            padding: '10px 20px',
            border: 0,
            borderRadius: 10,
          }}
        >
          Confrim
        </button>
      )
    }
  
    function App() {
      // component는 항상 첫글자 대문자로
      return (
        <div>
          <h1>Your Profile</h1>
          <SaveBtn />
          <span> </span>
          <ConfrimBtn />
        </div>
      )
    }
    const root = document.querySelector('#root')
    ReactDOM.render(<App />, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
  </script>
  </html>
  
  

- props2
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <!-- react import -->
  <!-- <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <!-- babel import(jsx ->react로 변환) -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 바벨 사용시 type 입력해주어야 한다. -->
  <script type="text/babel">
    // props.html에서 계속
    // 따라서 버튼 컴포넌트를 만들어서 재활용할 수있다.
    // 하나의 컴포넌트(객체와 비슷)에서 자식 컴포넌트 props에 따라서 다르게 출력하면 어떨까?
    // 부모 컴포넌트에서 정의한 자식 컴포넌트의 props를 받기위해서는 아래와 같이 할수있다.
    // props는 하나의 인자만 있다.

    /*function Btn(props) {
       console.log(props)
       return (
         <button
           style={{
             backgroundColor: 'brown',
             color: 'White',
             padding: '10px 20px',
             border: 0,
             borderRadius: 10,
           }}
         >
           {props.text}
         </button>
       )
     }
    */

    // 위 방식 말고 바로 props.text를 받는 방법은 아래와 같다
    // {text}를 넣어주면 props.text와 같다.
    function Btn({ text, big, bName }) {
      console.log({ text, big, bName })

      const handleClick = (event) => {
        BtnClick(event, bName)
      }

      return (
        <button
          style={{
            backgroundColor: 'brown',
            color: 'White',
            padding: '10px 20px',
            border: 0,
            borderRadius: 10,
            fontSize: big ? 18 : 10,
          }}
          onClick={handleClick}
        >
          {text}
        </button>
      )
    }

    function BtnClick(event, bName) {
      console.log(event)
      console.log(bName)

      if (bName === 'sChange') {
        return alert('변경완료되었습니다.')
      }

      if (bName === 'sConfirm') {
        alert('확인되었습니다.')
      }
    }
    function App() {
      // component는 항상 첫글자 대문자로
      // 부모컴포넌트에 있는 자식 컴포넌트의 properties를 자식 컴포넌트(함수)에 보내서 다르게 출력이 가능하다.
      // 자식 props에 있는 것(html의 tag의 type과 같은거)은 마음대로 정의가능하다.(나는 text로 정의한것일 뿐이다.)
      return (
        <div>
          <h1>Your Profile</h1>
          <Btn text="Save Changes" bName="sChange" big={true} />
          <span> </span>
          <Btn text="Confirm" bName="sConfirm" big={false} />
        </div>
      )
    }
    const root = document.querySelector('#root')
    ReactDOM.render(<App />, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
  </script>
</html>

• props1practice.html

- props2memo.html

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <!-- react import -->
  <!-- <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <!-- babel import(jsx ->react로 변환) -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 바벨 사용시 type 입력해주어야 한다. -->
  <script type="text/babel">
    // props.html에서 계속
    // 따라서 버튼 컴포넌트를 만들어서 재활용할 수있다.
    // 하나의 컴포넌트(객체와 비슷)에서 자식 컴포넌트 props에 따라서 다르게 출력하면 어떨까?
    // 부모 컴포넌트에서 정의한 자식 컴포넌트의 props를 받기위해서는 아래와 같이 할수있다.
    // props는 하나의 인자만 있다.

    /*function Btn(props) {
           console.log(props)
           return (
             <button
               style={{
                 backgroundColor: 'brown',
                 color: 'White',
                 padding: '10px 20px',
                 border: 0,
                 borderRadius: 10,
               }}
             >
               {props.text}
             </button>
           )
         }
        */

    // 위 방식 말고 바로 props.text를 받는 방법은 아래와 같다
    // {text}를 넣어주면 props.text와 같다.
    // onClick은 changeValue()함수이다.
    function Btn({ text, onClick }) {
      console.log(text, ' was render ')
      // 여기서 onClick={Method}가 이벤트 리스너이다.
      return (
        <button
          onClick={onClick}
          style={{
            backgroundColor: 'brown',
            color: 'White',
            padding: '10px 20px',
            border: 0,
            borderRadius: 10,
          }}
        >
          {text}
        </button>
      )
    }

    // 부모 컴포넌트의 state를 변경하면 당연히 그 자식 컴포넌트들도 Re-render가 일어남.
    // 불필요한 렌더링이 발생할 수도 있는데, 이 경우에는 React.memo()로 prop의 변경이 일어난 부분만 렌더링 시킬 수 있음.
    // 아주 많은 자식 컴포넌트를 가지고 있는 부모 컴포넌트일 때 사용하면 될 듯.
    const MemorizedBtn = React.memo(Btn)
    function App() {
      // 이번강의에서 <Btn>에 onClick 함수를 추가할것이다.
      const [value, setValue] = React.useState('Save Changes')
      const changeValue = () => setValue((currnet) => 'Revert Changes')
      // 중요 ** 여기서 onClick={changeValue}은 이벤트 리스너가 아니라 props이다!
      // React.useState(초기값) 에서 setVariable과 관련된 전체가 다시 렌더링된다.
      // 즉, 부모 컴포넌트가 어떤 state값이 변경이 되면 모든 자식 컴포넌트는 다시 그려질 것
      //--> react.Memo()를 사용해서 변경된 것만 리렌더링 할수있다.
      return (
        <div>
          <h1>Your Profile</h1>
          <MemorizedBtn text={value} onClick={changeValue} />
          <span> </span>
          <MemorizedBtn text="Confirm" />
        </div>
      )
    }
    const root = document.querySelector('#root')
    ReactDOM.render(<App />, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
  </script>
</html>

• propstype.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <!-- react import -->
  <!-- <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <!-- prop-type import -->
  <!--https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js을 임포트해야한다.  -->
  <script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
  <!-- babel import(jsx ->react로 변환) -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 바벨 사용시 type 입력해주어야 한다. -->
  <script type="text/babel">
    // props.html에서 계속
    // 따라서 버튼 컴포넌트를 만들어서 재활용할 수있다.
    // 하나의 컴포넌트(객체와 비슷)에서 자식 컴포넌트 props에 따라서 다르게 출력하면 어떨까?
    // 부모 컴포넌트에서 정의한 자식 컴포넌트의 props를 받기위해서는 아래와 같이 할수있다.
    // props는 하나의 인자만 있다.

    /*function Btn(props) {
           console.log(props)
           return (
             <button
               style={{
                 backgroundColor: 'brown',
                 color: 'White',
                 padding: '10px 20px',
                 border: 0,
                 borderRadius: 10,
               }}
             >
               {props.text}
             </button>
           )
         }
        */

    // 위 방식 말고 바로 props.text를 받는 방법은 아래와 같다
    // {text}를 넣어주면 props.text와 같다.
    // onClick은 changeValue()함수이다.
    // 두번째 매개변수가 특이한데 fontSize =24를 지정하면 프롭을 지정하지 않은 컴포넌트에 fontSize = 24가 추가된다.
    function Btn({ text, fontSize = 24 }) {
      return (
        <button
          style={{
            backgroundColor: 'brown',
            color: 'White',
            padding: '10px 20px',
            border: 0,
            borderRadius: 10,
            fontSize: fontSize,
          }}
        >
          {text}
        </button>
      )
    }

    // react.js에서는 문제없는 코드라고 인식해서 오류가 출력되지 않는 부분을
    // 각 프롭타입을 지정해서 경고문을 볼수 있다. 프롭의 타입을 지정해 놓으면 왜 적용이 안되는지 알수있다.
    Btn.propTypes = {
      text: PropTypes.string.isRequired,
      fontSize: PropTypes.number.isRequired,
    }

    function App() {
      // props를 넘겨줄때 문자는 ="일", ={'일'} || 숫자는 ={1}이렇게 넘겨줄수 있다.
      return (
        <div>
          <Btn text="Save Changes" fontSize={18} />
          <Btn text={'continue'} />
          <Btn text={14} fontSize={'confirm'} />
        </div>
      )
    }
    const root = document.querySelector('#root')
    ReactDOM.render(<App />, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
  </script>
</html>

Retrospection

• state, component, props 등등 여러가지 용어가 헷갈렸는데, 윤곽이잡히기 시작했고, 또 중요한점은 용어들이 익숙해지지 시작했다.

• 니코샘이 말씀해 주신것처럼 코드를 이해하고 왜 이렇게 되는거지? 라고 스스로 이해하는 과정이 오래걸린것 같다.

• 특히 html과 js 그리고 CSS에 대한 공부를 좀더 해야겠다는 생각과 더불어 chatGPT를 활용하는 것도 팁이과 도구라는 것을 깨닫게 되었다.

• 분할과 정복이라는 개발방식을 이해하고 reactJS 코드를 보니 아 콤포넌트별로 html, JS, Css를 개발할수 있어서 효율적이라는 생각이 들었다.

• 다시한번 스스로 코드를 보면서 컴퓨터가 이해는 방식을 따라가면서 코드를 이해(디버깅)하는 습관을 가져야 겠다.

Tommorrow do list

• CREATE REACT APP

• Nomad Coder - ReactJS로 영화 웹 서비스 만들기

분할과 정복 : https://velog.io/@sago_mungcci/2023.09.06%EB%B6%84%ED%95%A0%EA%B3%BC-%EC%A0%95%EB%B3%B5

• inputstate1

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <!-- react import -->
  <!-- <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <!-- babel import(jsx ->react로 변환) -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 바벨 사용시 type 입력해주어야 한다. -->
  <script type="text/babel">
    function App() {
      // <label>은 <input>옆에 사용하는 태그이다.
      // HTML에서 <label>태그를 사용할때 <label for='해당 인풋태그 아이디'>를 사용한다.
      // reactJS(JSX)에서 <h1 className="">, <label>태그를 사용할때 <label htmlFor='해당 인풋태그 아이디'>를 사용한다.
  
      // 초기값 즉, React.useSate()에서 첫번째 매개변수 값은 비워놓거나, 0, "" 할 수있다.
      //const [minutes, setMinutes] = React.useState() --> A component is changing an uncontrolled input to be controlled
      // ==>  React.useState() 초기값(첫번째 매개변수의 값을 설정안해줬기때문)
      const [minutes, setMinutes] = React.useState(0)
      // 여기서도 event를 사용할수 있다.
      const onChangeMin = (event) => {
        console.log(event.target.value)
        setMinutes((current) => event.target.value) // minutes를 업데이트 해준다.
      }
  
      const reset = (event) => {
        console.log(event.target.value)
        setMinutes((current) => 0) // minutes를 업데이트 해준다.
      }
  
      return (
        <div>
          <div>
            <h1>Super Converter</h1>
            <label htmlFor="minutes">Minutes : </label>
            <input
              id="minutes"
              placeholder="Minutes"
              type="number"
              value={minutes}
              onChange={onChangeMin}
            />
          </div>
          <h4>you want convert {minutes} </h4>
          <div>
            <label htmlFor="hours">Hours : </label>
            <input
              id="hours"
              placeholder="Hours"
              type="number"
              value={Math.round(minutes / 60)}
              disabled
            />
          </div>
          <button onClick={reset}>Reset</button>
        </div>
      )
    }
    const root = document.querySelector('#root')
    ReactDOM.render(<App />, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
  </script>
  </html>
  
  

- inputstate2

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <!-- react import -->
  <!-- <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <!-- babel import(jsx ->react로 변환) -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 바벨 사용시 type 입력해주어야 한다. -->
  <script type="text/babel">
    function App() {
      const [amount, setAmount] = React.useState(0)
      const [flipped, setFlipped] = React.useState(false)
      // 여기서도 event를 사용할수 있다.
      const onChange = (event) => {
        console.log(event.target.value)
        setAmount((current) => event.target.value)
      }

      const reset = () => {
        setAmount((current) => 0)
      }

      // 이 메서드는 위의 메서드와 전혀 다른 값이지만 변수명만 같다.
      // 위에 useState잘보기
      const onfilp = () => {
        reset()
        setFlipped((current) => !current)
      }

      return (
        <div>
          <div>
            <h1>Super Converter</h1>
            <label htmlFor="minutes">Minutes : </label>
            <input
              id="minutes"
              placeholder="Minutes"
              type="number"
              value={flipped === true ? amount * 60 : amount}
              onChange={onChange}
              // JSX덕분에 html형식으로 if문 형식을 작동시킬수 있다
              // 뜻 : 만약 flipped가 true이면 disable ={true}이다.
              disabled={flipped === true}
            />
          </div>
          <h4>you want convert {amount} </h4>
          <div>
            <label htmlFor="hours">Hours : </label>
            <input
              id="hours"
              placeholder="Hours"
              type="number"
              // flipped === true filp : 키를 눌렀을때
              // Why? --> React.useState(false)로 초기값을 false로 했으니까
              value={flipped === true ? amount : Math.round(amount / 60)}
              onChange={onChange}
              // JSX덕분에 html형식으로 if문 형식을 작동시킬수 있다
              // 뜻 : 만약 flipped가 false이면 disable ={true}이다.
              disabled={flipped === false}
            />
          </div>
          <button onClick={reset}>Reset</button>
          <span> </span>
          <button onClick={onfilp}>
            {flipped === true ? '분을 시간으로 변환' : '시간을 분으로 변환'}
          </button>
        </div>
      )
    }
    const root = document.querySelector('#root')
    ReactDOM.render(<App />, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
  </script>
</html>

• inputstate3

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <!-- react import -->
  <!-- <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <!-- babel import(jsx ->react로 변환) -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 바벨 사용시 type 입력해주어야 한다. -->
  <script type="text/babel">
    // 지금 아래의 3개의 컴포넌트가 있다.
    function MinutesToHours() {
      const [amount, setAmount] = React.useState(0)
      const [flipped, setFlipped] = React.useState(false)
      // 여기서도 event를 사용할수 있다.
      const onChange = (event) => {
        console.log(event.target.value)
        setAmount((current) => event.target.value)
      }
  
      const reset = () => {
        setAmount((current) => 0)
      }
  
      // 이 메서드는 위의 메서드와 전혀 다른 값이지만 변수명만 같다.
      // 위에 useState잘보기
      const onfilp = () => {
        reset()
        setFlipped((current) => !current)
      }
  
      return (
        <div>
          <h3>Minutes && HOURS</h3>
          <div>
            <label htmlFor="minutes">Minutes : </label>
            <input
              id="minutes"
              placeholder="Minutes"
              type="number"
              value={flipped === true ? amount * 60 : amount}
              onChange={onChange}
              // JSX덕분에 html형식으로 if문 형식을 작동시킬수 있다
              // 뜻 : 만약 flipped가 true이면 disable ={true}이다.
              disabled={flipped === true}
            />
          </div>
          <div>
            <label htmlFor="hours">Hours : </label>
            <input
              id="hours"
              placeholder="Hours"
              type="number"
              // flipped === true filp : 키를 눌렀을때
              // Why? --> React.useState(false)로 초기값을 false로 했으니까
              value={flipped === true ? amount : Math.round(amount / 60)}
              onChange={onChange}
              // JSX덕분에 html형식으로 if문 형식을 작동시킬수 있다
              // 뜻 : 만약 flipped가 false이면 disable ={true}이다.
              disabled={flipped === false}
            />
          </div>
          <button onClick={reset}>Reset</button>
          <span> </span>
          <button onClick={onfilp}>
            {flipped === true ? '분을 시간으로 변환' : '시간을 분으로 변환'}
          </button>
        </div>
      )
    }
  
    function KmToMiles() {
      const [amount, setAmount] = React.useState(0)
      const [flip, setflip] = React.useState(false)
  
      function onChange(event) {
        setAmount(event.target.value)
      }
  
      function reset() {
        setAmount((current) => 0)
      }
  
      function onfilp() {
        reset()
        setflip((current) => !current)
      }
  
      return (
        <div>
          <h3>KM && Miles</h3>
          <div>
            <label htmlFor="km"> km : </label>
            <input
              id="km"
              placeholder="Km"
              type="number"
              value={flip === false ? amount : amount * 1.609}
              onChange={onChange}
              disabled={flip === true}
            />
          </div>
          <div>
            <label htmlFor="miles"> miles : </label>
            <input
              id="miles"
              placeholder="miles"
              type="number"
              value={flip === false ? amount / 1.609 : amount}
              onChange={onChange}
              disabled={flip === false}
            />
          </div>
          <button onClick={reset}>Reset</button>
          <button onClick={onfilp}>flip</button>
        </div>
      )
    }
    // 분할과 정복(divide&Conquer(분할정복))
    function App() {
      const [index, setIndex] = React.useState('0')
      const onSelect = (event) => {
        console.log(event.target.value)
        setIndex((current) => event.target.value)
      }
      // return문안에 {}를 쓰고 내용은 JS로 작성할 수있다.
      return (
        <div>
          <h1>Super Converter</h1>
          <select onChange={onSelect} value={index}>
            <option value="0">Minutes To Hours</option>
            <option value="1">Kili To Miles</option>
          </select>
          <hr />
          {index === '0' ? <MinutesToHours /> : null}
          {index === '1' ? <KmToMiles /> : null}
        </div>
      )
    }
    const root = document.querySelector('#root')
    ReactDOM.render(<App />, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
  </script>
  </html>
  <!-- return문(JSX)안에 {}를 쓰고 내용은 JS로 작성할 수있다. -->
  <!-- UseState에서 setVarible을 실행할때 return문에있는 코드를 리렌더링 시킨다 -->
  

Definition Access

• 분할과 정복

"분할과 정복"은 한 가지 복잡한 문제를 더 작은 부분으로 나누어 해결하는 전략을 가리키는 말이다. 이 전략은 대개 어려운 문제를 해결할 때 사용되며, 큰 문제를 해결하기 어려운 경우 작은 문제로 쪼개어 해결함으로써 더 효율적으로 해결할 수 있도록 도와준다.

이 전략은 전략적인 마인드셋으로, 많은 분야에서 적용될 수 있다. 예를 들어, 소프트웨어 개발에서는 큰 문제를 작은 모듈로 분할하여 각 모듈을 개발하고 테스트한 다음, 모듈을 결합하여 전체 소프트웨어를 완성하는 방식으로 사용될 수 있다.

또한, 전쟁이나 전략 게임에서도 "분할과 정복" 전략이 사용된다. 상대방의 강력한 세력을 한꺼번에 공격하기보다는 작은 부대로 나눠서 공격하여 상대방을 약화시키는 전략이다.

이러한 방법은 복잡한 문제를 더 쉽게 다룰 수 있게 해주는 강력한 도구로 사용될 수 있다.

Mechanism

• 전제적인 맥락을 잡고 작게 나누어서 또 나누고 나누어서 개별 모듈을 하나씩 개발하는 방식이다.

• 아래는 react로 분할과 정복으로 개발한 간단한 예제이다

• 프로젝트가 커지고 componet가 많아지면 이러한 개발방식은 여러 개발자들이 나누어서 개발하고 이것을 통합시켜서 하나의 프로젝트를 개발할 수 있을것이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <!-- react import -->
  <!-- <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <!-- babel import(jsx ->react로 변환) -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 바벨 사용시 type 입력해주어야 한다. -->
  <script type="text/babel">
    const FindMax = ({ nums }) => {
      const findMax = (arr) => {
        // 단계 1: 문제를 분할한다.
        if (arr.length === 1) {
          return arr[0]
        }

        const mid = Math.floor(arr.length / 2)
        const left = arr.slice(0, mid)
        const right = arr.slice(mid)

        // 단계 2: 부분 문제를 해결한다.
        const maxLeft = findMax(left)
        const maxRight = findMax(right)

        // 단계 3: 결과를 합친다.
        return Math.max(maxLeft, maxRight)
      }

      const maxNumber = findMax(nums)

      return (
        <div>
          <h3>
            리스트 {nums.join(', ')}에서 최댓값은 {maxNumber}입니다.
          </h3>
        </div>
      )
    }

    const App = () => {
      const numbers = [3, 8, 1, 6, 2, 8, 5, 9]

      return (
        <div>
          <FindMax nums={numbers} />
        </div>
      )
    }

    const root = document.querySelector('#root')
    ReactDOM.render(<App />, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
  </script>
</html>

Retrospection

• 내가 니코샘과 개발해온 방식이 분할과 정복으로 해왔다는것을 알게되었다. 이러한 개발방식이 개발시 상당히 도움된다고 생각했고 마음에 들었다.

• react에서는 component로 나누어 개발하는 방식이라고하니 코드의 재활용성도 꽤나 효율적일것이라고 생각이 들었다.(한번 제대로 만들었던 코드는 크게 수정할 필요가 없으니.)

- 이러한 개발방식은 낮선것이 아니라 우리가 일반적으로 문제에 직면했을때문제를 해결해나갔던 방식이다.

• Nomad Coder - ReactJS로 영화 웹 서비스 만들기

1.reat 설치하거나(terminal로 설치) import하기

2.React JS의 규칙 중 하나는 HTML을 이 페이지에 직접 작성하지 않는다.

• span,button등의 엘리멘트를 JS로 만든다.

3.html body태그안에 아무것도 없게 되는데 이것을 밀어넣어 주는것이 react dom(react-dom@17.0.2)이다.

• 모든 react element들을 html body에 밀어넣어 준다.

4. react@17.0.2는 react Js엔진으로 interactive한 UI를 생성해준다.

5. 바닐라 js에선 html을 먼저 만들고, 그걸 자바스크립트로 가져와서 html을 수정하는 프로세스를 가지고 있다. 그러나 reactJS에서는 모든것이 자바스크립트로 시작한고 로직 실행후 HTML이 된다. --> 이것이 reactJS의 핵심이다.
   • 자바스크립트와 리엑트 js를 사용하여 엘리먼트들을 생성할때에는 리엑트JS가 엘리먼트를 생성한다. 이 말은 리엑트JS는 업데이트가 필요한 엘리먼트를 업데이트 할 것이라는 말이다. 즉 리엑트JS에서 바로 HTML을 업데이트할수 있다.

• 바닐라JS

- ReactJS(문법 그대로)
```html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script>
    // ** React.createElement()내용을 잘보기

    const root = document.querySelector('#root')

    // react로 span태그를 생성
    // 매개변수 순서 (엘리먼트, id or class , contents) 아래 잘보기
    // 여기서 h3이라는 것이 component이다.
    const h3 = React.createElement(
      'h3',
      //{ id: 'sexy-span', style: { color: 'blue' } },
      {
        id: 'sexy-span',
        style: { color: 'blue' },
        onMouseEnter: () => console.log('mouseEntered'),
      }, // 이부분을 propertys --> props
      'hello reactWorld im span',
    )
    // react로 button태그를 생성
    const button = React.createElement(
      'button',
      { onClick: () => console.log('im clicked') },
      'Click me',
    )

    // react로 생성한 span, button 엘리먼트를 가지고 있는 div태그 생성 --> 배열로 나타내고 있는 것을 잘보자
    const container = React.createElement('div', null, [h3, button])
    ReactDOM.render(container, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
  </script>
</html>

• ReactJS(jsx문법)

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <!-- react import -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <!-- babel import(jsx ->react로 변환) -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 바벨 사용시 type 입력해주어야 한다. -->
  <script type="text/babel">
    // ** React.createElement()내용을 잘보기
  
    const root = document.querySelector('#root')
  
    //jsx --> html의 형식을 그대로 사용해서 html에 밀어넣어주는 react에서 사용 할 수 있는 문법
    //jsx 변수
    /*
     const title = (
       <h3 id="title" onMouseEnter={() => console.log('mouseEntered')}>
         hello im title
       </h3>
     )
     */
  
    /*
     const btn = (
       <button
         style={{ backgroundColor: 'tomato' }}
         onClick={() => console.log('im clicked')}
       >
         Click me
       </button>
     )
      */
  
    //jsx 함수
    // 아래 2함수는 같은 개념이다.
    function Title() {
      return (
        <h3 id="title" onMouseEnter={() => console.log('mouseEntered')}>
          hello im title
        </h3>
      )
    }
  
    const Btn = () => (
      <button
        style={{ backgroundColor: 'tomato' }}
        onClick={() => console.log('im clicked')}
      >
        Click me
      </button>
    )
    // ==> title, btn이 reactindex1.html의 h3, button과 같은 코드인데, jsx의 문법을 바로 사용 할 수없다.
    // jsx의 문법을 react로 변환시켜주어야 하는데, babel이라는 라이브러리를 사용해서 변환가능하다.
    // 이것이 이전 강의에서 react로 어렵게 배운이유
  
    // react로 생성한 span, button 엘리먼트를 가지고 있는 div태그 생성 --> 배열로 나타내고 있는 것을 잘보자
    //const container = React.createElement('div', null, [title, btn])
    // const Container = <div>Title, btn</div> 이렇게 입력하고 렌더링하면 그냥 text인 title, btn이 출력되어 버린다.
    // 이것을 해결하려면 아래와 같은 방식으로 작성하고, 해당 component를 함수로 만들어야 한다.
  
    // **컴포넌트는 항상 첫글자는 대문자로 입력하자(변수 또한 마찬가지)**
    // -> 우리가 직접 만든 요소는 전부 대문자로 시작해야 함
  
    const Container = (
      <div>
        <Title />
        <Btn />
      </div>
    )
    //ReactDOM.render(Container, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
    const ContainerMethod = () => (
      <div>
        <Title />
        <Btn />
      </div>
    )
  
    // react 문법 + jsx문법
    ReactDOM.render(<ContainerMethod />, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
  </script>
  </html>
  
  

- ReactJs -State사용 1

```html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <!-- react import -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <!-- babel import(jsx ->react로 변환) -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 바벨 사용시 type 입력해주어야 한다. -->
  <script type="text/babel">
    // ** React.createElement()내용을 잘보기

    const root = document.querySelector('#root')
    //state : 우리가 클릭할때마다 1씩 증가하는 데이터를 출력해줄 것이다.
    //ReactJS에서 1씩 증가하는 데이터를(값이 변경되는 데이터를) 어떻게 담아줄것인가? --> state
    // render()로 계속 호출하는 것은 최선의 방법이 아니다.
    let countNum = 0
    function countAfter() {
      countNum++
      render()
    }

    function render() {
      ReactDOM.render(<App />, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
    }

    const App = () => (
      <div>
        <h3>Total Click : {countNum}</h3>
        <button onClick={countAfter}>Click me</button>
      </div>
    )
    render()
  </script>
</html>

• ReactJs -State사용 2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <!-- react import -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <!-- babel import(jsx ->react로 변환) -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 바벨 사용시 type 입력해주어야 한다. -->
  <script type="text/babel">
    //state : 우리가 클릭할때마다 1씩 증가하는 데이터를 출력해줄 것이다.
    //ReactJS에서 1씩 증가하는 데이터를(값이 변경되는 데이터를) 어떻게 담아줄것인가? --> state
    // render()로 계속 호출하는 것은 최선의 방법이 아니다.
    // 틀렸다는게 아니다.
    // 하지만 react에서 제공하는 많은 기능들이 있다. 이 기능들을 사용하려면 react의 규칙을 따라야 한다.
    //let counter = 0
    /*
    function countUp() {
      counter++
    }
    */

    // 문법배우기 --> 배열의 요소를 다른이름과 짝지어서 지정해서 그 지정한 이름으로 배열의 요소(값)를 가져올수있다.
    const x = [1, 2, 3]
    const [a, b, c] = x
    console.log(b)

    // react에서는 아래와 같이 함수를 작성할때는 항상 return(엘리먼트)해주어야 하고
    // const variable = () =>() 형식은 return()이 필요없다.
    // const variable = () =>{} 형식은 return()이 필요하다.
    function App() {
      let [counter, setCounter] = React.useState(0)
      // 0,f 나오는데 초기값이 0이고 그다음 뭔가 할수있는 함수를 입력해야한다.
      // 위의 counter변수와 countUp을 해서 계산했던것을 usetState()에서 할수있도록 해놓았다.
      // React.useState()의 매개변수는 2개가 필요하다.
      console.log(counter)

      const onClick = () => {
        setCounter(counter + 1)
      }

      return (
        <div>
          <h3>Total Click : {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      )
    }
    const root = document.querySelector('#root')
    ReactDOM.render(<App />, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
  </script>
</html>

• ReactJs -State사용 3

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <!-- react import -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <!-- babel import(jsx ->react로 변환) -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 바벨 사용시 type 입력해주어야 한다. -->
  <script type="text/babel">
    function App() {
      // 바닐라JS가 HTML의 큰틀을 가져와서 기능별로 만들었다면
      // , ReactJS는 이 기능을 더 세부적인 기능(component)으로 나눠서 개발한다.
      let [counter, setCounter] = React.useState(0)

      console.log(counter)

      const onClick = () => {
        // React.useState() modifier의 2가지 사용법
        // setCounter(counter + 1)

        // modifier에도 함수를 넣을수 있는데, 첫번째 매개변수가 현재 데이터의 값이다.
        // 이것이 좀 더 안전한 방법이다. react에서 현재 어떤 데이터인지 정확히 알수 있다.
        // 따라서 다음에 나올 state의 값이 지금 정확한 현재 값에 기반하여야 한다.
        setCounter((current) => current + 1)
      }

      return (
        <div>
          <h3>Total Click : {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      )
    }
    const root = document.querySelector('#root')
    ReactDOM.render(<App />, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
  </script>
</html>

배운점 componenet, usestate, jsx등등 리엑트를 시작하기 위해서 많은 개념들을 배웠다.

그렇지만 니코샘이 강조하였듯이 왜 이런 개념과 규칙이 나왔는지 곰곰히 생각하니,

ReactJS이전에는 html의 큰틀로 나누어 그에 맞는 기능이나 데이터 전달을 JS가 담당했다. 만약 변경해야될 데이터가 많고 특히 자식엘리먼트가 많은경우에는 전부다 다시 변경해줄수 밖에 없을것이다.

만약 50개 태그중 1개의 테그의 값을 변경해주기 위해서 나머지 49개를 다시 업데이트 해야 하는 경우가 있을것이다.(JS로 제어가 불가능하다는 것이 아니라 그만큼 코드량이 많아질것이다.)

그러나 ReactJS를 사용해보니 html의 큰틀로 나누어 그에 맞는 기능이나 데이터 전달하는 기능을 또 나누어서(이게 component개념이 아닌가 싶다.) 굉장히 세분화 시켜서 데이터를 제어할 수있게 되었다. 동시에 그만큼 새로고침 or rerendering할 경우의수도 엄청 줄어들것 같았다. 진짜 강력한 힘이다.

특히 나중에 서버와 연동하여 DB에서 데이터를 가져올때 필요없는 새로고침(rerendering)이 많다면 그만큼 서버는 부담스럽다. 따라서 서버의 리소스를 줄일수있는 가장 효율적인 방법으로 FE를 구축하는게 아닌가 싶다.

막연하게 FE는 디자인이 중요하다고 생각했는데, 디자인도 중요하지만 얼마나 효율적인 공간을 사용하면서 멋지고 아름다운 디자인을 보여주는게 중요하다고 알게 되었다.

ps. const x = [1, 2, 3] const [a, b, c] = x 자바를 공부했었던 나는 이걸보고 3분간 멍했다. 이게...되는구나...