TIL_2020년 11월 04일 (수)

TIL 작성 원칙

• 매일 쓴다.
• 사소한 것이라도 쓴다.
• 좋은 생각이든 나쁜 생각이든 다 기록이라고 생각하고 쓰자.
• 체크박스를 만들어서 꼭 해야하는 일들을 체크해두자!
• 나의 일기이기도 하지만 남에게 보여주는 에세이라고 생각하고 짤도 넣고 재밌게 쓰자~

0. 매일 해야할 일

• 개발관련 글 읽기 or 개발관련 영상 보기

  • 오늘 본 글/영상 : 가장 현대적인 웹을 만들자 1편(Node.js, React)

• 개발관련 공부

• TIL 작성

• 알고리즘 풀기 Q. String 형인 str 인자에서 중복되지 않은 알파벳으로 이루어진 제일 긴 단어의 길이를 반환해주세요. (예시: str= “abcabcabc” -> 3(abc), “aaaaa” -> 1(a), “sttrg” -> 3 (trg) )

  • 우리가 작성한 코드

    def get_len_of_str(string):
      content = “”
      y = []
      for i in range(len(string)):
        if string[i] not in content:
          content += string[i]
        else:
          y.append(len(content))
          content = string[i]
      y.append(len(content))
      return max(y)
    print(get_len_of_str(“sttrg”))
    

  • 선생님이 작성하신 코드

    def get_len_of_str(s):
    	dct = {}
      max_so_far = curr_max = start = 0
    	for index, i in enumerate(s):
    		if i in dct and dct[i] >= start:
    			max_so_far = max(max_so_far, curr_max)
    			curr_max = index - dct[i]
              start = dct[i] + 1
    		else:
    			curr_max += 1
          dct[i] = index
    	return max(max_so_far, curr_max)
    

처음에 난관이 많았는데 문제를 푸는 방법을 생각해보니 나름 재미있었다. 이런저런 시도들을 했었는데, 뭘 어떻게 했었는지 잘 기억이 안난다 ㅜㅜ 분명 할 때는 엄청 열심히 했었는데 아쉽다. 계속 자리에서 생각이 안나서 잠시 커피를 마시러 가는 동안에도 알고리즘에 대한 이야기를 하고~ 이렇게 해보면 어떨까요? 저렇게 해보면 어떨까요? 논의하는 그 과정이 너무 재밌었다. 결과가 나왔을 때도 기뻤지만 돌이켜 생각해보면 결과보다 과정이 너무 즐거웠다. 알고리즘이라는 딱딱한 이름은 매우 어렵게 느껴지지만 그냥 어떤 문제를 해결하기 위한 생각의 과정? 이라고 생각하면 비교적 마음의 여유가 얻어진다(이렇게라도 마음의 여유를 얻어야짘ㅋㅋㅋ) 내일은 또 어떤 문제가 나올까? 재밌게 풀자! 스트레스받지말고~

1. 오늘 한 일

1. Wecode (13일차)

• React 세션

  • React Routing : 다른 경로(주소)에 따라 다른 View(화면)을 보여주는 것이며, 리액트 자체에 내장되어있지 않아 React-router이라는 Third-party 라이브러리를 추가하여 사용함. 라우팅을 사용하면 App.js가 굳이 필요가 없어진다. 화면 -> index.html -> Route.js (허브) 이고 Route.js에서 각 주소에 맞는 곳으로 분기처리해준다~ Route로 이동하는 방법은 2가지가 있다.

    1. 로 이동하는 방법 태그와 유사한 특징을 가졌지만, 태그는 외부사이트로 이동할 때 사용되며, 는 프로젝트 내에서 페이지를 전환할 때 사용한다. ex) 회원가입 </Link>

       • 클릭 시 바로 이동하는 로직 구현시 사용 많이함
       • Navbar, Aside Menu, 아이템 리스트에서 상세페이지로 이동할 때
    2. withRouterHOC로 구현하는 방법

       를 사용하지않고 요소에 onClick이벤트를 통해 페이지를 이동하는 방법도 있다. props 객체의 history(this.props.history)에 접근해서 이동할 수 있음. 이 컴포넌트에서 props에 route정보를 받으려면 export하는 컴포넌트에 withRouter로 감싸줘야한다.

       • 페이지 전환시 추가로 처리해야하는 로직이 있을 때
       • 로그인 버튼 클릭시 -> Backend API로 데이터 전송, User Data 인증 / 인가

              
       import React from 'react';
       import { withRouter } from 'react-router-dom';
              
       class Login extends React.Component {
              
         goToMain = () => {
           this.props.history.push('/signup');
         }
              
        // 실제 활용 예시
         goToMain = () => {
         if(response.message === "valid user"){
         	this.props.history.push('/main');
         } else {
         	alert("너 우리 회원 아님. 가입 먼저 해주세요")
         	this.props.history.push('/signup');
         	}
         }
              
         render() {
           return (
             <div>
               <button
                 className="loginBtn"
                 onClick={this.goToMain}
               >
                 로그인
               </button>
             </div>
           )
         }
       }
              
       export default withRouter(Login);
       

  • Sass : 왜 Sass라고 쓰면서 또 확장자명은 SCSS인지 모르겠다…ㅋㅋㅋ헷갈리게…알고보니 또 다른거네…정확히 따지면 다른 문법이었구나… 참고자료

    Sass의 대표적인 기능중 Nesting이라고 있다. className에 컴포넌트와 동일한 이름을 설정해주고 최상위 요소부터 안쪽요소까지 한꺼번에 정리할 수 있음.

  • React Westagram Kickoff & Git teamProject : team repository 하나 만들었다. 팀끼리 git을 어떻게 하면 되는지 공부하려고 한다. 정확하게 Git을 이용하여 진행하는 방법을 숙지하자~~

    

    

    

1. 블로그 작성

   블로그를 더 열심히 써야하는데….너무 안쓰는듯 ㅜㅜ 하아 주말에는 꼭 배운 것 정리해서 올릴 수 있도록 하자

• TIL_2020년 11월 04일 (수)

2. 오늘의 생각

• 오늘도 정신없이 흘러간 하루. 그리고 혼자하는 것보다 같이 뭔가를 한다는건 확실히 에너지가 들어가는 일이다. 팀프로젝트가 개인프로젝트가 좋기 위해서는 정확하게 서로 할 일을 나누고 최대한 불필요한 요소를 거둬내야한다. 회사 다닐때도 그렇지만 코드를 쓸 때도 역시 마찬가지인 것같다. 뭔가를 협동해서 할 때는 조금 더 커뮤니케이션에 들어가는 비용을 줄이고 능률을 극대화할 수 있는걸 생각해야한다.