개발하는 무민

Ref란? 리액트에서 DOM 요소나 클래스 컴포넌트의 인스턴스에 직접 접근하기 위한 방법을 제공. 컴포넌트 내부의 특정 DOM 요소에 직접 접근하여, 해당 요소를 조작하거나 해당 요소의 정보를 얻을 수 있다. Ref는 주로 폼 입력 처리, 포커스 관리, 애니메이션 직접 조작 등에 사용한다. 예시 코드 1. forwardRef를 사용하는 방식 컴포넌트를 생성할 때 바로 Ref를 전달할 수 있는 함수이다. props와 Ref 두개의 매개변수를 받는다. 주로 함수 컴포넌트에서 사용되며, 컴포넌트 내부에서 ref를 접근할 수 있게 해준다. → 외부에서 Ref를 통해 내부의 input 요소에 접근이 가능하다. - ref를 사용한 FancyInput 컴포넌트 예시 import React, { forwardRef }..

매직메소드란? 클래스 안에 정의된 함수를 우리는 메소드라고 부른다. 메소드 중에서 __로 시작해서 __로 끝나는 메소드들이 있는데, 이를 매직 메소드 또는 특별 메소드라고 부른다. 코드에서 실제로 사용했던 메소드 1) __init__ 클래스의 인스턴스가 생성될 때 자동으로 호출되는 초기화 메서드. → 값을 초기화 할 때 사용하는 함수 # 클래스 인스턴스 초기화 def __init__(self): self.alink = '' self.title = '' self.post_id = '' 객체를 초기화할 때 필요한 속성들을 설정하기 위해 이 메서드를 정의한다. 더보기 * 클래스와 인스턴스의 차이 클래스는 어떤 객체의 설계도나 틀이고, 인스턴스는 해당 클래스를 바탕으로 만들어진 실제 객체이다. * 컴퓨터에서의 ..

로그인 서비스 관련 개발을 하면서 JWT 토큰을 조사한 내용을 정리한다. - JWT란? JWT( Json Web Token)은 웹 표준(RFC 7519)으로 지정되어 있는 JSON 객체를 사용하여 클라이언트와 서버 간에 안전하게 정보를 전달하기 위한 방식 중 하나 - JWT 토큰을 사용하는 이유 아이디,패스워드 로그인 방식은 예전 단말기(어차피 아무나 접근할 수 없는)방식에서의 인증 방식이라 예전에는 문제가 되지 않았었다. 현재는 인터넷이라는 익명성이 있는 웹에서 사용해야 하기 때문에 인증된 통로로 들어와야한다. (아무나 받아주면 안되기 때문에) 그래서 인증된 토큰을 발행해서 해당 유저가 인증 되었음을 확인하기 위해 JWT를 사용한다. 즉, JWT : 유저를 식별하기 위한 토큰 기반 인증 방식 (Json..

회사에서 API 를 구현하며 swagger와 API 명세서를 작성하고 있는데, 기본적인 작성 방법과 요령을 인지해두는 것이 좋을 듯 해서 카카오 테크니컬라이팅 팀에서 작성한 API 문서 톺아보기 게시글을 참고하여 정리해보고자 한다. API(Application Programming Interface) 서버와 클라이언트가 데이터를 주고 받을 수 있도록 도움을 주는 매개체 일반적으로 정해야 하는 규칙 → 메시지의 데이터 형식은 무엇이고, 글자수 제한이 있다면 몇 자인지, 어떤 방식으로 데이터가 전달되어야 하는지, 요청에 대한 결과는 어떤 형식으로 확인할 수 있는지 API는 단순 기능들을 나열한 명세서가 아니라, 어떤 동작을 하고, 어떤 목적을 위한 것인지, API 사용 전 수행할 사전 작업이 있는지 등의 충..

인턴 업무를 진행하던 도중 컴포넌트끼리 값을 넘기는 작업이 잘 안되어서 store 및 redux에 관련한 개념을 알아야 업무를 진행할 수 있을 것 같아 공부했던 내용의 기록을 위해 정리한다. 리액트에서는 어플리케이션을 만들 때, 기본적으로 하나의 루트 컴포넌트(App.js)에서 상태를 관리한다. 리액트에서는 부모 컴포넌트가 중간자 역할을 한다. (자식들은 부모를 통해서만 대화함) 컴포넌트 끼리 직접 소통도 가능하지만, 그렇게 하면 코드가 꼬이게 된다. (ref를 사용하면 되긴 함) 예를 들어, App에서는 input 값, 이를 변경하는 OnChange 함수, 새 아이템을 생성하는 onCreate 함수 를 props로 Form에게 전달해준다. Form은 해당 함수와 값을 받아서 화면에 보여주고, 변경 이벤..

네이버 커넥트 재단에서 운영하는 부스트코스의 AI Baisc 1기에 참여하여 AI 코칭 스터디를 2개월간 진행했다. 수업은 모두 온라인으로 진행되어 일 하면서도 듣기 편했었고, 매주 라이브로 피드백도 해주셔서 많은 내용을 배울 수 있었던 것 같다. 이 스터디 이외에도 다른 수업이나 공모전 등을 준비하느라 시간이 많이 없어서 꼼꼼하게 공부하진 못했지만... 끝까지 참여했다는 것에 의의를 둔다 ^__^ 블로그에는 코칭 스터디를 진행하면서 내가 풀었던 과제들을 정리하고자 한다. 스터디는 팀으로 구성되어 진행됐고, 매주 미션이 출제되면 팀원들이 나눠서 푸는 형태였다. 회사에서도 일하면서 틈틈히 풀어야 했어서 따로 환경설정이 필요 없는 코랩이나 웹 IDE를 많이 이용했다. 파이썬은 문법도 간단하면서 복잡한 환경설..

깃허브를 사용할때 프로젝트에 대한 설명 문서를 Markdown으로 작성하기 위해 기본적인 문법을 정리한다. # H1 테스트 문장 ## H2 테스트 문장 ### H3 테스트 문장 #### H4 테스트 문장 ##### H5 테스트 문장 ###### H6 테스트 문장 일반 텍스트 문장입력시 이렇게 표시됩니다. ___ 언더바 세번 입력시 라인이 추가됩니다. 원하는 단어를 별 두개로 감싸면 **볼드체**, 하나만 감싸면 *이탈릭체* 물결 모양으로 감싸면 ~~선긋기~~ 원하는 문장을 인용구 안으로 넣기 > Don't forget to code your dream. 별 모양을 앞에 하나만 달아준다면 목록으로 변환 가능 * 룰루 * 랄라 - 대쉬를 이용해도 - 목록을 만들 수 있다. 1. 숫자를 붙여도 2. 만들 수 ..