Jeden Tag, aufrichtig und lustig.

문제 상황Oracle XE Docker 환경에서 system 계정으로 접속 시도 시 다음 에러 발생: ORA-28000: the account is locked 원인계정이 잠긴 상태라 접속 불가.잠금 해제를 위해서는 관리자 권한으로 접속해야 하는데, 여기서 중요한 점은root 계정이 아닌 반드시 oracle 계정으로 접속해서 작업해야 한다는 것해결 방법 1. Docker 컨테이너에 접속 (root 계정으로 들어올 수 있음)docker exec -it bash 2. oracle 계정으로 전환su - oracle 3. SQL*Plus를 관리자 권한으로 실행sqlplus / as sysdba 4. 계정 잠금 해제 및 비밀번호 변경 (필요 시)ALTER USER system ACCOUNT UNLOCK;ALT..

스프링 부트 세팅을 간편하게 할 수 있는 사이트가 있다.바로 spring initializer. 아래 링크를 통해 접속 가능하다.https://start.spring.io 그래들로 프로젝트를 생성하기로 결정하였기 때문에그래들 선택.또한 그래들 중 레퍼런스가 많이 존재하고 성숙도가 높은 그루비 언어를 선택하였다.스프링부트 언어도 성숙도가 높은 버전으로 선택하고 패키징방식은 War와 Jar 중 Jar로 결정하였다. JAR와 WAR는 둘다 Java 애플리케이션 패키징 방식이라는 공통점을 가지고 있지만차이점이 존재한다.JAR (Java ARchive)자바 애플리케이션을 패키징하는 기본적인 형태자바 클래스, 리소스 파일, 메타데이터를 포함독립 실행형 애플리케이션으로 실행 가능 (java -jar 명령어로 직접 실..

1. 커스텀 훅(Custom Hooks)이란? 커스텀 훅은 React에서 로직을 재사용하기 위한 기능이다. React 컴포넌트는 상태(state)와 생명주기(lifecycle) 메서드를 가지고 있지만, 특정 로직을 다른 컴포넌트에서도 재사용하고 싶을 때 커스텀 훅을 활용할 수 있다. 커스텀 훅은 use 접두사로 시작하는 함수로 구성됩다. 예를 들어, useEffect는 React에서 제공하는 기본 훅이며, 컴포넌트의 부수 효과를 처리하는 로직을 담당한다. 마찬가지로 개발자가 직접 커스텀 훅을 만들어 필요한 로직을 작성할 수 있다. 커스텀 훅을 사용하면 로직을 분리하여 컴포넌트를 더 간결하고 읽기 쉽게 유지할 수 있으며, 로직의 재사용성과 테스트 용이성도 향상된다. 2. 커스텀 훅 사용하는 이유 커스텀 훅..

프로젝트를 진행 할 때 form작업을 자주 하게 된다. CDN을 활용해서 리액트에서 폼을 만들 때 유용한 정보를 아래에 정리해보았다. Form submit 사용자가 폼을 제출 할 때 특정 사이트(ex.여기어때)로 연결하여 검색값을 받아 올 수 있게 하려면 input의 name 프로퍼티를 활용 할 수 있다. input에 name 속성을 활용 할 때는 key를 설정해야한다. 설정하는 key 이름은 폼을 제출(submit) 할 때 실행되는 action 주소의 쿼리스트링에 따라 달라진다. 아래와 같은 경우는 물음표('?') 뒤 쿼리스트링이 'keyword'이기 때문에 input name프로퍼티의 value값을 'keyword'로 설정하면 된다. 이렇게 하면 쿼리스트링의 key값으로 keyword가 지정되고 va..

1. 발생 이슈 새로운 블록이 추가되는 기능을 구현하던 도중 컴포넌트의 key값과 관련하여 문제가 발생했다. 블록 추가 버튼을 눌렀을 때 기대했던 것은 한개의 블록이 추가되는 것이었는데, 실제로는 동일한 idx값을 가진 두 개, 세 개, 때로는 네 개의 다수의 블록이 동시에 추가되는 현상이 발생했다. 빠르게 버튼을 연타하지도 않았기 때문에 블록의 상태 관리와 추가되는 새 블록의 상태관리 로직을 살펴보고 콘솔로도 확인을 해보며 디버깅을 했다. 2. 문제 이유 블록이 렌더링 될 때마다 key값이 새로 할당 되는 로직이 문제였다. 리액트에서는 key라는 속성을 활용해서 자식 컴포넌트들을 유니크하게 식별한다. 그렇기 때문에 렌더링할 때마다 모든 블록 컴포넌트의 key 값이 변경 되면 리액트가 올바르게 컴포넌트를..

최근에 React로 프로젝트를 진행하며 PropTypes을 사용해봤다. 사용하면서 알게되고 느낀점을 정리해보고자 한다. 1. 프롭타입을 사용한 이유 React로 개발하면서, 프롭스를 활용하여 데이터를 전달하였다. 그런데, 프롭스가 객체 타입인 줄 알았는데 문자열 형태로 전달되는 등 자바스크립트의 동적인 연산 등으로 예상치 못한 데이터 타입이 전달될 때 렌더링이 안되는 문제가 종종 발생했다. 타입스크립트를 적용하여 타입을 명시할까 고민도 해봤지만 팀내에서 타입스크립트를 활용해본 팀원이 없었기에, 팀원 모두 프로젝트 도중 배워서 적용하는 것은 어려울 것 같았다. 다른 방법을 찾다보니 타입스크립트보다 비슷한 용도로 활용할 수 있으며, 쉽게 사용가능한 PropTypes을 알게 되어 프롭타입이 중요하다고 생각한 ..

1. Progress bar? 성격유형 검사지를 만들면서 테스트 진행도를 사용자가 알면 사용자 경험에 좋을 것 같아 프로그레스바를 작업해봤다. 구현 할 때 시맨틱하게 마크업을 하고 싶어서 관련 태그가 존재하는지 찾아봤는데, progress라는 태그가 있다는 것을 알게 됐다. 아래 사이트를 참고했다. https://www.w3schools.com/w3css/w3css_progressbar.asp W3.CSS Progress Bars W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScrip..

간편한 import를 위해 기본 import 주소를 src로 지정 할 수 있다. 아래와 같이 입력한 jsconfig.json 파일을 최상위에 생성 하면 된다. "compilerOptions": { "baseUrl": "src" }, "includes": ["src"] } 아래와 같은 에러가 발생 할 수도 있다. > 파일 /private/var/folders/~/~/ Code.app/~/node_modules/typescript/lib/lib.d.ts을(를) 찾을 수 없습니다. > 파일은 다음과 같은 이유로 프로그램에 있습니다. 대상 es3의 기본 라이브러리 사용 할 JS 문법 버전을 선택하는 옵션인 target을 최신 문법을 뜻하는 esnext로 설정하면 오류가 해결 된다. { "compilerOptio..

터미널에서 열고자 하는 폴더(ex. basic)로 이동한 후에 code . 명령어로 vscode를 열려고 할 때, 아래와 같은 오류를 마주한다면? 폴더 경로 basic % code . command not found: code vscode를 열고 Command(Ctrl) + Shift + p 를 단축키를 누르고 입력창에 shell을 입력한 후, Shell Command: Install 'code' command in PATH 를 선택. 다시 터미널에서 code . 시도하면 vscode가 열리는 것을 확인 할 수 있다!

1. 프로젝트를 하게 된 배경 리액트를 공부하는 용도로 youtube api를 활용해서 youtube를 구현해보았다. 다른 작업과 병행하다보니 기획부터 배포까지의 총 작업기간은 6일정도 소요되었다. 2. 배운 점 및 느낀 점 이번 프로젝트를 통해 새롭게 배우고 경험한 것은 크게 6가지다. youtube api 활용 mock 데이터 생성 및 활용 React에서의 테일윈드 CSS 적용 폴더구조와 url 구조 기획 MVP 형태 개발 .env 활용 프로젝트에서는 아래의 4가지 api를 활용하였다. 인기 동영상 데이터 검색 키워드에 따른 데이터 연관된 동영상 데이터 채널 데이터 일목요연하게 api가 정리 되어 있어서 필요한 api를 쉽게 찾을 수 있고, 필요한 데이터 수도 간편하게 지정할 수 있다. 다만 불편한 ..